/* ==========================================================================
   drhadiamali.com — Design Tokens
   ========================================================================== */

:root {
  /* Colors */
  --color-navy: #13151e;
  --color-navy-rgb: 32, 41, 64;
  --color-white: #ffffff;
  --color-accent: #caaa98;
  --color-accent-rgb: 202, 170, 152;

  /* Navy tints/shades — derived, used for subtle depth without new hues */
  --color-navy-soft: #2c3650;
  --color-navy-deep: #161d30;
  --color-ink: #12141c;
  --color-mist: #f6f5f3; /* off-white section backgrounds, avoids pure-white fatigue */
  --color-line: rgba(32, 41, 64, 0.12);

  /* Text */
  --text-on-light: var(--color-navy);
  --text-on-dark: var(--color-white);
  --text-muted-on-light: rgba(32, 41, 64, 0.64);
  --text-muted-on-dark: rgba(255, 255, 255, 0.72);

  /* Fonts */
  --font-fa: "YekanBakh", "Tahoma", sans-serif;
  --font-en: "Montserrat", "Arial", sans-serif;
  --font-display: "Tangerine-Bold", cursive;

  /* Type scale — fluid, mobile-first */
  --fs-h1: clamp(1.75rem, 4vw + 1rem, 3rem);
  --fs-h2: clamp(1.5rem, 3vw + 1rem, 2.25rem);
  --fs-h3: clamp(1.25rem, 2vw + 1rem, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.2vw + 0.9rem, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-statement: clamp(2rem, 8vw + 1rem, 5.5rem);

  --lh-body: 1.7;
  --lh-heading: 1.35;
  --lh-statement: 1.15;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-24: 6rem;    /* 96 */

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(16px, 4vw, 48px);
  --section-pad-block: clamp(3rem, 6vw, 6rem);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Header */
  --header-height: 76px;
  --header-height-mobile: 64px;

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;
  --duration-slow: 900ms;

  /* Z-index scale */
  --z-header: 100;
  --z-dropdown: 110;
  --z-fab: 120;
  --z-modal: 200;
}

/* Breakpoint reference (used consistently across stylesheets):
   Mobile:        up to 639px   (no media query needed — base styles)
   Tablet:        min-width 640px
   Desktop:       min-width 1024px
   Large desktop: min-width 1280px  (full horizontal nav threshold)
*/