/* ============================================================
   Hyper Charts — Typography tokens
   Inter = UI sans. Space Mono = data/numeric (PP Supply Mono role).
   Martian Mono = mono headings. Archivo = display (Hanson role).
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui-alt:  'Roboto', 'Inter', sans-serif;     /* buttons, small labels */
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* numerals, axes, values */
  --font-mono-display: 'Martian Mono', 'Space Mono', monospace; /* mono headings / eyebrows */
  --font-display: 'Archivo', 'Inter', sans-serif;    /* big squared headlines */

  /* ---- Type scale (px) ---- */
  --text-2xs:  10px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;   /* card big number / section heading */
  --text-4xl:  32px;
  --text-5xl:  40px;
  --text-6xl:  48px;
  --text-display: 80px;

  /* ---- Weights ---- */
  --fw-light:    300; /* @kind other */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extra:    800; /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.45; /* @kind other */
  --lh-relaxed: 1.6; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide:   0.04em; /* @kind other */
  --ls-wider:  0.12em;  /* @kind other */
  --ls-display: 0.5em;  /* @kind other */

  /* ---- Semantic roles ---- */
  --eyebrow-font: var(--font-mono-display);
  --eyebrow-size: var(--text-xs);
  --eyebrow-ls:   var(--ls-wider);

  --metric-font:  var(--font-sans);   /* big KPI numbers: Inter bold */
  --metric-weight: var(--fw-bold);

  --datum-font:   var(--font-mono);   /* axis ticks, table values */
}