/* ============================================================
   TYPOGRAPHY
   Three-typeface system. Serif carries headlines (low weight,
   tight tracking). Sans carries body and UI. Mono carries
   eyebrows, labels, data and timestamps — uppercased with wide
   tracking. Headlines run light (400–500), never bold.
   ============================================================ */

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

  /* semantic roles */
  --font-display: var(--font-serif);   /* headlines */
  --font-body: var(--font-sans);       /* paragraphs, UI */
  --font-label: var(--font-mono);      /* eyebrows, data, code */

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

  /* ---- Type scale (px) ---- */
  --fs-display: clamp(33px, 3.8vw, 48px);  /* @kind font */
  --fs-h1: clamp(32px, 4.4vw, 46px);       /* @kind font */
  --fs-h2: clamp(26px, 3.1vw, 38px);       /* @kind font */
  --fs-h3: 20px;                           /* @kind font */
  --fs-lede: clamp(17px, 1.7vw, 19px);     /* @kind font */
  --fs-body: 17px;                         /* @kind font */
  --fs-body-sm: 15px;                      /* @kind font */
  --fs-caption: 13.5px;                    /* @kind font */
  --fs-eyebrow: 12px;                      /* @kind font */
  --fs-mono-sm: 11.5px;                    /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight: 1.12;     /* @kind font */
  --lh-snug: 1.3;       /* @kind font */
  --lh-body: 1.6;       /* @kind font */

  /* ---- Tracking ---- */
  --ls-display: -0.015em;  /* @kind font */
  --ls-tight: -0.01em;     /* @kind font */
  --ls-eyebrow: 0.15em;    /* @kind font */
  --ls-label: 0.08em;      /* @kind font */
}