/* ─────────────────────────────────────────────────────────────
   Prospector — typography tokens

   Scale: 11/13/14/15/17/20/24/32/40 px — lifted verbatim from
   the wireframes (components/*.jsx use these exact values via
   .pf-display / .pf-mono + inline fontSize). No speculative
   sizes were added.

   Fonts: unchanged from prod. Font @import statements stripped
   from this file — Clash Display + JetBrains Mono are already
   <link>ed in base.html (with fuller weight ranges). Keeping
   this file token-only avoids double-loading.

   Families below: --font-body uses system stack per design D4
   (Linear/Vercel/Stripe-style). Prod currently loads Plus Jakarta
   Sans in base.html; no selector consumes --font-body yet, so
   introducing the token is non-breaking.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Families */
  --font-display: "Clash Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Size scale */
  --text-xs:   11px;  /* kickers, meta, pills */
  --text-sm:   13px;  /* secondary body, table cells */
  --text-md:   14px;  /* widget rows, buttons */
  --text-base: 15px;  /* default body */
  --text-lg:   17px;  /* widget heads (.h3) */
  --text-xl:   20px;  /* card numerics, left-rail titles */
  --text-2xl:  24px;  /* section headers */
  --text-3xl:  32px;  /* doc titles */
  --text-4xl:  40px;  /* hero titles (chroma doc) */

  /* Line-heights */
  --lh-tight: 1.25;   /* headings */
  --lh-snug:  1.4;    /* narrative intros */
  --lh-body:  1.55;   /* body copy */
}

/* ── Display & mono helper classes used across all templates ── */
.pf-display { font-family: var(--font-display); letter-spacing: -0.01em; }
.pf-mono    { font-family: var(--font-mono); }