/* ============================================================
   TYPOGRAPHY — Four faces, four jobs.
   Space Grotesk (display) · Fraunces (serif) · Manrope (sans/body) ·
   JetBrains Mono (data). Sentence case everywhere.
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif; /* headlines & button labels; one display moment per view */
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;    /* editorial pull-quotes, warmth */
  --font-sans:    'Manrope', Arial, Helvetica, sans-serif;          /* the everyday voice */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* figures, eyebrows, labels */
  /* Email fallback: Manrope won't render in mail clients — use Arial, Helvetica, sans-serif */
  --font-email:   Arial, Helvetica, sans-serif;

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

  /* --- Type scale (px) --- */
  --fs-display: 64px; /* Display — "Demystify it" */
  --fs-h1:      48px;
  --fs-h2:      40px; /* Section title — Syne */
  --fs-h3:      18px; /* Subsection heading — Manrope 700 */
  --fs-body:    17px; /* Body copy, line-height 1.65 — 17px floor aids 50+ readers */
  --fs-small:   14px; /* Captions and secondary detail — min functional size */
  --fs-mono:    12.5px; /* Eyebrow · label · figure — never below 12px */

  /* --- Line heights --- */
  --lh-display: 1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-body:    1.65; /* @kind other */
  --lh-tight:   1.3; /* @kind other */

  /* --- Letter spacing --- */
  --ls-eyebrow:  0.14em; /* @kind other */
  --ls-display: -0.02em; /* @kind other */
  --ls-normal:   0; /* @kind other */
}