/* ============================================================
   SLATE — Typography tokens
   Clash Display (display) · General Sans (text/UI) · Satoshi (utility)
   Editorial scale: oversized display, tight tracking, set BIG.
   ============================================================ */
:root {
  /* —— Families ——————————————————————————————————
     ROLES (Slate type system):
       • Titles / headings  → General Sans  (clean modern grotesque)
       • Highlights / roles  → Clash Display (eyebrows, kickers, stat figures)
       • Body / UI / captions → Satoshi      (neutral, highly legible)        */
  --font-title: "General Sans", system-ui, -apple-system, sans-serif;
  --font-accent: "Clash Display", "Arial Narrow", sans-serif;
  --font-body: "Satoshi", system-ui, sans-serif;

  /* Back-compat aliases (existing components reference these) */
  --font-display: var(--font-title);   /* headings → General Sans */
  --font-sans: var(--font-body);       /* UI / body → Satoshi */
  --font-util: var(--font-body);       /* meta / captions → Satoshi */
  --font-mono: "Satoshi", ui-monospace, monospace; /* tabular numerics */

  /* —— Type scale (px → rem @16) ————————————————————
     Tuned for a magazine feel: body sits at 18px, display
     climbs to poster size. Steps named by role + step.        */
  --fs-2xs: 0.75rem;   /* 12 — micro labels, legal */
  --fs-xs:  0.875rem;  /* 14 — eyebrows, meta, captions */
  --fs-sm:  1rem;      /* 16 — UI, dense body */
  --fs-base:1.125rem;  /* 18 — body default */
  --fs-md:  1.375rem;  /* 22 — lead / standfirst */
  --fs-lg:  1.75rem;   /* 28 — small headings */
  --fs-xl:  2.25rem;   /* 36 — H4 */
  --fs-2xl: 3rem;      /* 48 — H3 */
  --fs-3xl: 4rem;      /* 64 — H2 */
  --fs-4xl: 5.5rem;    /* 88 — H1 */
  --fs-5xl: 7.5rem;    /* 120 — display */
  --fs-6xl: 10.5rem;   /* 168 — poster / hero takeover */

  /* —— Weights ——————————————————————————————————— */
  --fw-extralight: 200; /* @kind font */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* —— Line heights ————————————————————————————————— */
  --lh-poster: 0.86;   /* @kind other */
  --lh-tight: 0.98;    /* @kind other */
  --lh-snug: 1.12;     /* @kind other */
  --lh-body: 1.55;     /* @kind other */
  --lh-relaxed: 1.7;   /* @kind other */

  /* —— Letter spacing ————————————————————————————————
     Display goes negative; eyebrows go wide-caps.            */
  --ls-poster: -0.04em;  /* @kind other */
  --ls-tight: -0.02em;   /* @kind other */
  --ls-normal: 0em;      /* @kind other */
  --ls-wide: 0.04em;     /* @kind other */
  --ls-eyebrow: 0.18em;  /* @kind other */

  /* —— Semantic roles ————————————————————————————————— */
  --text-eyebrow-size: var(--fs-xs);
  --text-body-size: var(--fs-base);
  --text-lead-size: var(--fs-md);
}