/* ─────────────────────────────────────────────────────────────────
   tokens.css — Design system foundation
   Source of truth: DESIGN.md §1 §2 §3 §4
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Colour: Dark (only theme) ───────────────────────────────── */
  --bg:        #161210;
  --surface:   #1F1916;
  --ink:       #EFE7DB;
  --ink-soft:  #B7AB9D;
  --mocha:     #C99B82;
  --rose:      #D2998A;
  --champagne: #CBA86A;
  --line:      #2E2620;

  /* ── Type families ───────────────────────────────────────────── */
  --ff-sans:   'Vazirmatn', sans-serif;
  --ff-serif:  'Cormorant Garamond', Georgia, serif;

  /* ── Type scale (fluid / clamp) ──────────────────────────────── */
  --f-display:  clamp(2.5rem, 6vw, 5.5rem);
  --lh-display: 1.05;
  --ls-display: -0.02em;

  --f-h2:  clamp(1.75rem, 3.5vw, 3rem);
  --lh-h2: 1.15;

  --f-body:  clamp(1rem, 1.05vw + 0.9rem, 1.125rem);
  --lh-body: 1.75;

  --f-small:  0.875rem;
  --f-label:  0.75rem;

  /* ── Spacing (8 px base scale) ───────────────────────────────── */
  --s1:  0.5rem;    /*  8 px */
  --s2:  1rem;      /* 16 px */
  --s3:  1.5rem;    /* 24 px */
  --s4:  2rem;      /* 32 px */
  --s5:  2.5rem;    /* 40 px */
  --s6:  3rem;      /* 48 px */
  --s8:  4rem;      /* 64 px */
  --s10: 5rem;      /* 80 px */
  --s12: 6rem;      /* 96 px */
  --s18: 9rem;      /* 144 px */

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.77, 0, 0.175, 1);
  --dur-ui:   200ms;
  --dur-rev:  700ms;
  --dur-sec:  600ms;

  /* ── Layout ──────────────────────────────────────────────────── */
  --max-w:  1320px;
  --gutter: clamp(1.5rem, 5vw, 3.5rem);

  /* ── Z-index scale ───────────────────────────────────────────── */
  --z-base:    0;
  --z-above:   10;
  --z-sticky:  100;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   900;
}