/* ============================================================
   NODI — TYPOGRAPHY TOKENS
   Two families only: Epilogue (display/headings) and Georama
   (everything else — body, UI, captions, and micro-labels/eyebrows).

   SCALE FORMULA — Major Third (ratio 1.25) from a 16px base:
     size(n) = 16 × 1.25^n, rounded to the nearest whole pixel.
     …10 ← 13 ← [16] → 20 → 25 → 31 → 39 → 49 → 61 → 76…
   Every --text-* token below sits on an exact step of this ladder.
   Derive any future size from the formula — never transcribe a loose value.

   Display tokens are named by VISUAL SIZE (display-lg/md/sm), never by
   HTML tag (h1/h2/h3) — the tag you render (h1, h2, div, …) is a document
   -structure/SEO choice made independently of which size token you use.

   Line-heights run tight (100%) on headings and UI; paragraphs open to ~1.5.
   --ls-tight (-0.02em) applies to all Epilogue display/heading sizes, incl.
   Stat — tightens geometric type at large sizes.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Georama', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'Georama', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Weights */
  --fw-regular: 400;   /* @kind other */
  --fw-medium: 500;    /* @kind other */
  --fw-semibold: 600;  /* @kind other */
  --fw-bold: 700;      /* @kind other */

  /* Display / heading sizes (Epilogue SemiBold) — exact Major Third steps */
  --text-hero:       49px;   /* step +5 · marketing hero headline */
  --text-display:    61px;   /* step +6 · oversized product hero ("Who are you looking for?") */
  --text-display-lg: 31px;   /* step +3 · large section title */
  --text-display-md: 25px;   /* step +2 · section title */
  --text-display-sm: 20px;   /* step +1 · minor heading / card title */
  --text-stat:       61px;   /* step +6 · big metric numbers */

  /* Body sizes (Georama) — base and the two steps below it */
  --text-lg:   20px;   /* step +1 */
  --text-md:   16px;   /* base */
  --text-sm:   13px;   /* step -1 — also covers former "xs" micro-copy */
  --text-xs:   10px;   /* step -2 — nav, micro-labels, dense captions */

  /* Line-heights */
  --lh-tight: 1;       /* @kind other */
  --lh-snug:  1.2;     /* @kind other */
  --lh-body:  1.5;     /* @kind other */

  /* Letter-spacing */
  /* --ls-eyebrow moved 0.1em -> 0.14em. It is named for one job, and every eyebrow actually
     drawn on the site was writing 0.14em by hand instead of reading it: seven files did,
     which is the whole marketing surface. The token now says what its own consumers were
     already painting. Its two previous readers (ComparisonTable's section rows and the
     tab counter in CandidateHome) are eyebrows too, so this aligns them rather than
     changing what they meant to be.
     --ls-wide keeps 0.12em, and the reclaim pass finished the split it was waiting on: every
     eyebrow that was still reading it (FeatureCard, LogoCloud, ComparisonTable's duel label,
     four in NodiSuccessStory, two in the site footer) now goes through the Eyebrow component,
     which reads --ls-eyebrow. WHAT'S LEFT ON --ls-wide IS NOT AN OVERSIGHT: three micro-labels
     that are deliberately NOT eyebrows: a text button's type, an inline "soon" state marker,
     and a filled badge. So the two tokens now mean different things in practice, not just in
     name: --ls-eyebrow is the line that opens a section, --ls-wide is every other small
     uppercase label. Set an eyebrow with the component, never by hand. */
  --ls-eyebrow: 0.14em;  /* @kind other */
  --ls-wide:    0.12em;  /* @kind other */
  --ls-normal:  0;       /* @kind other */
  --ls-tight:   -0.02em; /* @kind other */
}