/* ============================================================
   Typography — IBM Plex Sans (UI/body) + IBM Plex Mono (code/labels)
   Display = Plex Sans 700 with tight negative tracking.
   Mono is used heavily for eyebrows, labels, code, and metrics.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  /* ---- Display / heading scale (sans, tight tracking) ---- */
  --text-display: 700 48px/1.04 var(--font-sans);
  --text-h1: 700 32px/1.1 var(--font-sans);
  --text-h2: 700 24px/1.2 var(--font-sans);
  --text-h3: 600 19px/1.3 var(--font-sans);

  /* ---- Body ---- */
  --text-lead: 400 17px/1.55 var(--font-sans);
  --text-body: 400 15px/1.55 var(--font-sans);
  --text-small: 400 13px/1.5 var(--font-sans);

  /* ---- Mono (labels, eyebrows, code, metrics) ---- */
  --text-label: 600 12px/1.4 var(--font-mono);   /* uppercase eyebrow */
  --text-code: 400 13px/1.6 var(--font-mono);
  --text-metric: 600 13px/1 var(--font-mono);

  /* ---- Tracking ---- */
  --tracking-display: -1.2px;
  --tracking-heading: -0.4px;
  --tracking-label: 1px;    /* with text-transform: uppercase */
}