/* Gray — typography tokens. Two bundled families: Space Grotesk (UI/prose), Space Mono (machine output).
   Typography does the hierarchy — size + weight contrast, never color.
   Big text tight (negative tracking); small UPPERCASE labels wide. Source: theme.ts `F`. */

:root {
  /* ── Families ── */
  --font-display: "Space Grotesk", -apple-system, system-ui, sans-serif; /* SemiBold 600 — titles, wordmark */
  --font-ui: "Space Grotesk", -apple-system, system-ui, sans-serif;      /* Medium 500 — buttons, tabs, labels */
  --font-body: "Space Grotesk", -apple-system, system-ui, sans-serif;    /* Regular 400 — prose, replies */
  --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace;         /* Regular 400 — numbers, paths, eyebrows */

  /* ── Weights ── */
  --weight-body: 400;
  --weight-ui: 500;
  --weight-display: 600;

  /* ── Type scale (px ≈ pt; the app spec is in pt) ── */
  --size-hero: 38px;      /* hero / title — tracking -1.2 */
  --size-title: 28px;     /* large heading */
  --size-kpi: 40px;       /* large KPI / big number — tracking -1.5 */
  --size-section: 22px;   /* section heading — tracking -0.4 */
  --size-nav: 17px;       /* nav title */
  --size-body: 16px;      /* prose, assistant replies */
  --size-row: 15px;       /* card title / list row */
  --size-button: 14px;    /* button label */
  --size-meta: 11px;      /* mono meta / timestamp — UPPERCASE */
  --size-eyebrow: 10px;   /* mono section eyebrow — UPPERCASE, tracking +1.5 */
  --size-code: 13px;      /* code blocks */

  /* ── Tracking ── */
  --track-hero: -1.2px;
  --track-kpi: -1.5px;
  --track-title: -0.6px;
  --track-section: -0.4px;
  --track-tight: -0.2px;
  --track-eyebrow: 1.5px;   /* wide — UPPERCASE labels only */
  --track-meta: 0.8px;

  /* ── Line heights ── */
  --leading-tight: 1.1;   /* big display */
  --leading-snug: 1.3;    /* headings */
  --leading-body: 1.5;    /* prose */
  --leading-flat: 1;      /* single-line chrome */

  /* ── Semantic type roles ── */
  --text-hero: var(--weight-display) var(--size-hero)/var(--leading-tight) var(--font-display);
  --text-section: var(--weight-display) var(--size-section)/var(--leading-snug) var(--font-display);
  --text-prose: var(--weight-body) var(--size-body)/var(--leading-body) var(--font-body);
  --text-label: var(--weight-ui) var(--size-button)/var(--leading-flat) var(--font-ui);
}