/* ============================================================
   OpenUp — Design Foundation (type + spacing tokens)
   Reconciled from the major production design systems:
   Apple HIG · Google Material 3 · IBM Carbon · Tailwind · GOV.UK.
   Loaded FIRST so every stylesheet can reference these tokens.

   Principles (from deep research, verified against primary docs):
   • Body copy anchors at 16px/1rem everywhere — never smaller for prose.
   • Type ratio ~1.2 in the text range, widening to ~1.25–1.33 at display.
   • Line-height tightens as size grows (display ~1.1, body ~1.5–1.6).
   • Letter-spacing: negative only on large display, ~0 for text,
     slightly positive on small/caption text.
   • Spacing on a 4px base, 8px-dominant (Carbon 8px grid + GOV.UK 5px
     reconciled): 4,8,12,16,24,32,40,48,64,80,96,128,160.
   • Display / H1 / H2 scale fluidly via clamp(); body stays fixed at 1rem.
   ============================================================ */
:root {
  /* ---------- TYPE SCALE ---------- (level → size ; fluid where noted) */
  --fs-display-2xl: clamp(2.5rem, 4vw + 1rem, 4rem);        /* 40 → 64 */
  --fs-display-xl:  clamp(2.25rem, 2.6vw + 1rem, 3.25rem);  /* 36 → 52 */
  --fs-display-lg:  clamp(1.875rem, 1.8vw + 1rem, 2.75rem); /* 30 → 44 */
  --fs-h1:          clamp(1.75rem, 1.2vw + 1rem, 2.25rem);  /* 28 → 36 */
  --fs-h2:          clamp(1.5rem, 0.8vw + 1rem, 1.75rem);   /* 24 → 28 */
  --fs-h3:          1.5rem;     /* 24 */
  --fs-h4:          1.25rem;    /* 20 */
  --fs-body-lg:     1.125rem;   /* 18 */
  --fs-body:        1rem;       /* 16 — minimum for body copy */
  --fs-body-sm:     0.875rem;   /* 14 */
  --fs-caption:     0.75rem;    /* 12 */

  /* ---------- LINE-HEIGHT ---------- (unitless) */
  --lh-display: 1.1;   /* large display / hero */
  --lh-heading: 1.15;  /* h1 / h2 / section titles */
  --lh-snug:    1.3;    /* h3 / h4 */
  --lh-body:    1.55;   /* body copy */
  --lh-relaxed: 1.6;    /* long-form / leads */

  /* ---------- LETTER-SPACING / TRACKING ---------- */
  --ls-display: -0.02em;   /* large display */
  --ls-tight:   -0.01em;   /* h1 / section titles */
  --ls-normal:  0;         /* body / headings */
  --ls-wide:    0.02em;    /* captions / eyebrows / small caps */

  /* ---------- SPACING SCALE ---------- (4px base, 8px-dominant)
     4–8 inner/icon gaps · 12–16 component padding · 24–32 between
     components · 48–96 section padding · 96–160 major separation. */
  --space-4:   0.25rem;  /* 4   */
  --space-8:   0.5rem;   /* 8   */
  --space-12:  0.75rem;  /* 12  */
  --space-16:  1rem;     /* 16  */
  --space-24:  1.5rem;   /* 24  */
  --space-32:  2rem;     /* 32  */
  --space-40:  2.5rem;   /* 40  */
  --space-48:  3rem;     /* 48  */
  --space-64:  4rem;     /* 64  */
  --space-80:  5rem;     /* 80  */
  --space-96:  6rem;     /* 96  */
  --space-128: 8rem;     /* 128 */
  --space-160: 10rem;    /* 160 */

  /* section vertical rhythm — fluid 64 → 96 */
  --space-section: clamp(4rem, 6vw, 6rem);
}