/* ============================================================
   JACQUARD — Typography tokens
   Role-scoped tiers, aligned with the phoenix design system:
   J Relais carries display + headings (Medium 500, tight
   tracking, ends headlines with a full stop). Outfit carries
   body, labels and UI chrome. IBM Plex Sans is the legibility
   face — data, form values, timestamps, fine print.
   ============================================================ */

:root {
  /* ---- Type stacks (role-scoped) ----
       --f-display  Editorial moments — hero headlines, showcase quotes
       --f-subhead  Names of things & list/table copy — the legible mid tier
       --f-sans     Brand voice — body, buttons, composer, UI labels
       --f-label    Chrome labels — eyebrows, chips, badges (UPPERCASE)
       --f-text     Small legible UI (≤13px) — cells, metadata, fine print
       --f-data     Data values — counters, scores, timestamps (tabular) */
  --f-display: 'J Relais', 'Relais', 'Source Serif 4', 'Iowan Old Style', Georgia, serif; /* @kind font */
  --f-subhead: 'Outfit', 'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* @kind font */
  --f-sans:    'Outfit', 'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* @kind font */
  --f-label:   'Outfit', system-ui, -apple-system, sans-serif; /* @kind font */
  --f-text:    'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* @kind font */
  --f-data:    'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* @kind font */
  --f-mono:    var(--f-data); /* legacy alias — the brand set has no mono voice */

  /* ---- Type scale (Couture — Relais wants oxygen) ---- */
  --t-display: 96px;   /* hero editorial headline */
  --t-h1:      56px;
  --t-h2:      32px;
  --t-h3:      20px;
  --t-body:    14px;
  --t-small:   12px;
  --t-mono:    11px;

  --leading-h: 0.95;   /* display / heading line-height */

  /* ---- Tracking ---- */
  --tracking-tight:   -0.04em;  /* J Relais display & headings */
  --tracking-eyebrow:  0.1em;   /* uppercase eyebrows / labels */
}

/* Data and labels read best with aligned digits; inert where a face
   has no tabular figures. */
html { font-variant-numeric: tabular-nums; }