/* =========================================================
   DERADA — Design Tokens
   Single source of truth for color, typography, spacing, motion.
   ========================================================= */

:root {
  /* ---------- COLOR ---------- */
  --color-bg:           #FFFFFF;            /* off-white base */
  --color-bg-soft:      #F6F4F2;            /* soft warm white for alt sections */
  --color-bg-dark:      #0A0A0A;            /* near-black for inverted sections */
  --color-ink:          #0A0A0A;            /* primary text on light */
  --color-ink-soft:     #2A2A2A;            /* secondary text */
  --color-ink-mute:     #8A8580;            /* tertiary / captions */
  --color-line:         #E6E2DE;            /* subtle hairlines */
  --color-line-strong:  #1A1A1A;            /* strong hairlines on light */
  --color-accent:       #887D79;            /* Derada brand greige (from logo) */
  --color-accent-deep:  #6B625E;            /* darker accent for hover */
  --color-accent-soft:  #D9D2CD;            /* lightest accent tint */
  --color-on-dark:      #F6F4F2;            /* text on dark sections */
  --color-on-dark-mute: #9A938E;            /* muted on dark */

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Neue Montreal', 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:    'Neue Montreal', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:   'Fraunces', 'Cormorant Garamond', Georgia, serif; /* accents only */

  /* fluid type scale — clamp(min, preferred-vw, max) */
  --fs-display-xl: clamp(3.5rem, 9.5vw, 11rem);   /* hero payoff */
  --fs-display-l:  clamp(2.75rem, 6.5vw, 7rem);   /* section titles */
  --fs-display-m:  clamp(2rem, 4.5vw, 4.5rem);    /* sub-display */
  --fs-h1:         clamp(2rem, 3.6vw, 3.5rem);
  --fs-h2:         clamp(1.5rem, 2.4vw, 2.25rem);
  --fs-h3:         clamp(1.2rem, 1.6vw, 1.5rem);
  --fs-body-l:     clamp(1.05rem, 1.15vw, 1.25rem);
  --fs-body:       1rem;
  --fs-body-s:     0.875rem;
  --fs-eyebrow:    0.75rem;                       /* uppercase labels */

  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:    -0.03em;
  --tracking-display:  -0.025em;
  --tracking-normal:   -0.005em;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.18em;

  /* ---------- SPACING (8pt baseline) ---------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 12rem;     /* 192px */

  /* section vertical rhythm */
  --section-py:   clamp(5rem, 10vw, 10rem);
  --section-py-l: clamp(7rem, 14vw, 14rem);

  /* ---------- GRID / CONTAINER ---------- */
  --container-max: 1680px;
  --gutter:        clamp(1.25rem, 3vw, 2.5rem);
  --grid-cols:     12;
  --grid-gap:      clamp(1rem, 1.5vw, 1.75rem);

  /* ---------- BORDERS / RADIUS ---------- */
  --radius-xs: 2px;
  --radius-s:  4px;
  --radius-m:  8px;
  --radius-l:  16px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--color-line);

  /* ---------- MOTION ---------- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
  --dur-cinematic: 1200ms;

  /* ---------- LAYERS ---------- */
  --z-base:     1;
  --z-content:  10;
  --z-sticky:   50;
  --z-header:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-cursor:   9999;

  /* ---------- HEADER ---------- */
  --header-h: 132px;
}

@media (max-width: 768px) {
  :root {
    --section-py:   clamp(3.5rem, 12vw, 6rem);
    --section-py-l: clamp(5rem, 18vw, 9rem);
    --header-h: 96px;
  }
}

/* Honor user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-cinematic: 0ms;
  }
}