/* =====================================================
   Bayut Ajmal — Design Tokens (v1.1)
   ===================================================== */

:root {
  /* Color — refined warm-neutral editorial palette */
  --c-ink:         #14130F;   /* deeper warm black */
  --c-ink-soft:    #2A2823;
  --c-ink-mute:    #6B655A;
  --c-bone:        #F4EFE6;   /* page bg */
  --c-sand:        #E6DCCB;
  --c-cream:       #FAF6EE;
  --c-line:        #D9CFBE;
  --c-line-soft:   #EAE2D2;
  --c-clay:        #C18B62;   /* warm clay accent */
  --c-clay-deep:   #9C6B45;
  --c-clay-soft:   #E5C7A8;
  --c-olive:       #5B6048;
  --c-gold:        #BFA379;
  --c-white:       #FFFFFF;

  /* Typography */
  --ff-display:    'Marcellus', 'Cormorant Garamond', serif;
  --ff-italic:     'Cormorant Garamond', 'Marcellus', serif;
  --ff-arabic:     'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
  --ff-sans:       'Cairo', system-ui, -apple-system, sans-serif;
  --ff-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Typography scale — strict modular scale, 1.25 ratio */
  --fs-eyebrow:    0.78rem;       /* 12.5px */
  --fs-body:       1rem;          /* 16px   */
  --fs-lede:       1.125rem;      /* 18px   */
  --fs-h6:         1rem;          /* 16px   */
  --fs-h5:         1.125rem;      /* 18px   */
  --fs-h4:         1.375rem;      /* 22px   */
  --fs-h3:         1.75rem;       /* 28px   */
  --fs-h2:         2.25rem;       /* 36px   */
  --fs-h1:         3rem;          /* 48px   */
  --fs-display:    4rem;          /* 64px   */
  --fs-hero:       4.5rem;        /* 72px — hero headlines only */

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-body:       1.85;
  --lh-relax:      2;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-widest: 0.22em;

  /* Space — modular scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;
  --sp-12: 200px;

  /* Layout */
  --container:        1320px;
  --container-narrow: 980px;
  --container-wide:   1520px;
  --gutter:           clamp(20px, 4.5vw, 88px);
  --header-h:         84px;
  --top-strip-h:      38px;

  --radius-xs:    2px;
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-pill:  999px;

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(20,19,15,.06);
  --shadow-md:  0 12px 30px -12px rgba(20,19,15,.16), 0 3px 8px rgba(20,19,15,.05);
  --shadow-lg:  0 36px 70px -24px rgba(20,19,15,.22), 0 14px 28px -12px rgba(20,19,15,.10);
  --shadow-xl:  0 60px 120px -36px rgba(20,19,15,.32);

  /* Motion */
  --ease-out:        cubic-bezier(.22,.61,.36,1);
  --ease-out-smooth: cubic-bezier(.16,1,.3,1);
  --ease-in:         cubic-bezier(.55,.06,.68,.19);
  --t-fast:          180ms;
  --t-base:          320ms;
  --t-slow:          560ms;
  --t-slower:        900ms;

  /* Z-index */
  --z-strip:    70;
  --z-nav:      80;
  --z-overlay:  90;
  --z-modal:    100;
  --z-toast:    110;
}