/* ============================================================
   TYPOGRAPHY — Metabolic Intelligence
   ------------------------------------------------------------
   Three voices:
   - SERIF (Source Serif 4): headlines. Clinical authority, calm.
     The "loud" element on each screen is set here.
   - SANS  (IBM Plex Sans): all body, UI, navigation. Optimized
     for sustained reading by 40–55 yr eyes — generous size,
     comfortable line-height.
   - MONO  (IBM Plex Mono): data, eyebrow labels, biometric
     readouts. The instrument voice. Uppercase + tracking for
     labels; tabular for numbers.
   ============================================================ */

:root {
  /* --- Families ------------------------------------------- */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Type scale (tightened, Apple-like — smaller, cleaner) ---- */
  --text-2xs:   11px;   /* mono micro-labels only */
  --text-xs:    12px;   /* meta, captions */
  --text-sm:    14px;   /* secondary body, UI controls */
  --text-base:  16px;   /* body default */
  --text-lg:    18px;   /* lead paragraph */
  --text-xl:    21px;   /* sub-headings */
  --text-2xl:   26px;   /* card titles */
  --text-3xl:   32px;   /* section headlines */
  --text-4xl:   40px;   /* page headlines */
  --text-5xl:   52px;   /* hero headline */
  --text-6xl:   72px;   /* display / big numbers */

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

  /* --- Line heights -------------------------------------- */
  --lh-tight:   1.06;   /* @kind font */
  --lh-snug:    1.18;   /* @kind font */
  --lh-normal:  1.5;    /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */

  /* --- Letter spacing ------------------------------------ */
  --ls-tight:   -0.02em;  /* large serif headlines @kind font */
  --ls-normal:  0;        /* @kind font */
  --ls-label:   0.14em;   /* mono eyebrow labels (UPPERCASE) @kind font */
  --ls-data:    0.02em;   /* mono readouts @kind font */

  /* --- Semantic roles ------------------------------------ */
  --type-hero:        var(--fw-semibold) var(--text-5xl)/var(--lh-tight) var(--font-serif);
  --type-display:     var(--fw-semibold) var(--text-4xl)/var(--lh-snug) var(--font-serif);
  --type-headline:    var(--fw-semibold) var(--text-3xl)/var(--lh-snug) var(--font-serif);
  --type-title:       var(--fw-semibold) var(--text-2xl)/var(--lh-snug) var(--font-serif);
  --type-lead:        var(--fw-regular) var(--text-lg)/var(--lh-relaxed) var(--font-sans);
  --type-body:        var(--fw-regular) var(--text-base)/var(--lh-normal) var(--font-sans);
  --type-body-sm:     var(--fw-regular) var(--text-sm)/var(--lh-normal) var(--font-sans);
  --type-caption:     var(--fw-regular) var(--text-xs)/var(--lh-normal) var(--font-sans);
  --type-data-xl:     var(--fw-medium) var(--text-6xl)/var(--lh-tight) var(--font-mono);
  --type-data:        var(--fw-medium) var(--text-3xl)/var(--lh-tight) var(--font-mono);
}

/* Mono eyebrow / label utility values — apply as needed:
   font: var(--font-mono); font-size: var(--text-2xs);
   letter-spacing: var(--ls-label); text-transform: uppercase; */