/* Eco X — Typography tokens
   Two families: Exo 2 (display — heavy, italic, technical) for headings and
   numbers; Barlow (text/UI) for everything else. Headings run black (900),
   often with an italic red <em>. UI labels are uppercase with wide tracking. */
:root {
  /* ── Families ── */
  --font-display: "Exo 2", system-ui, sans-serif;   /* h1–h3, big stats, step numbers */
  --font-text: "Barlow", system-ui, sans-serif;     /* body, UI, buttons, labels */

  /* ── Weights ── */
  --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 */
  --fw-extrabold: 800; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* ── Display scale (Exo 2, fluid) ── */
  --fs-hero: clamp(2rem, 3.8vw, 3.2rem); /* @kind font */
  --fs-display: clamp(2rem, 3.5vw, 3rem); /* @kind font */
  --fs-title: 1.8rem; /* @kind font */
  --fs-stat: 2.4rem; /* @kind font */
  --fs-stat-lg: 4rem; /* @kind font */

  /* ── Text scale (Barlow) ── */
  --fs-lead: 0.97rem; /* @kind font */
  --fs-body: 0.88rem; /* @kind font */
  --fs-sm: 0.82rem; /* @kind font */
  --fs-ui: 0.78rem; /* @kind font */
  --fs-label: 0.66rem; /* @kind font */
  --fs-micro: 0.6rem; /* @kind font */

  /* ── Line heights ── */
  --lh-tight: 1.05; /* @kind other */
  --lh-snug: 1.3; /* @kind other */
  --lh-body: 1.7; /* @kind other */
  --lh-loose: 1.85; /* @kind other */

  /* ── Tracking (uppercase UI is always tracked out) ── */
  --tracking-tight: -0.02em; /* @kind other */
  --tracking-ui: 0.06em; /* @kind other */
  --tracking-label: 0.1em; /* @kind other */
  --tracking-eyebrow: 0.14em; /* @kind other */

  /* ── Semantic ── */
  --heading-font: var(--font-display);
  --body-font: var(--font-text);
}