:root {

  /* ── PRIMITIVES — the only raw chromatic values ─────────────── */
  --ink-rgb: 0, 47, 167;            /* the single ink — Yves Klein blue */
  --ink: rgb(var(--ink-rgb));
  --paper: #EBEBDC;                 /* rgb(235, 235, 220) */

  /* ── RUNTIME COLOR HOOKS (admin/system interface) ───────────── */
  --fg: var(--ink);
  --bg: var(--paper);

  /* ── ALPHA SCALE — tonal engine (no hue expansion) ───────────── */
  --ink-100: rgba(var(--ink-rgb), 1);
  --ink-85:  rgba(var(--ink-rgb), 0.85);
  --ink-70:  rgba(var(--ink-rgb), 0.70);
  --ink-55:  rgba(var(--ink-rgb), 0.55);
  --ink-40:  rgba(var(--ink-rgb), 0.40);
  --ink-25:  rgba(var(--ink-rgb), 0.25);
  --ink-15:  rgba(var(--ink-rgb), 0.15);
  --ink-08:  rgba(var(--ink-rgb), 0.08);
  --ink-04:  rgba(var(--ink-rgb), 0.04);

  /* ── CHART COLORS — the scene/visualization layer ──────────────
     ONE blue gradient, light → dark (stop 1 = least independent,
     stop 6 = most). Biased days use the single red. */
  --chart_color_1: #BFCBE8;
  --chart_color_2: #8098D3;
  --chart_color_3: #60729E;
  --chart_color_4: #00237D;
  --chart_color_5: #001853;
  --chart_color_6: #00123E;
  --chart_color_biased: #82290E;




  /* ── SEMANTIC TEXT LAYER ─────────────────────────────────────── */
  --text-body: var(--fg);
  --text-secondary: var(--ink-70);
  --text-muted: var(--ink-40);

  /* ── BACKGROUNDS ─────────────────────────────────────────────── */
  --bg-page: var(--bg);
  --bg-hero: var(--fg);
  --bg-wash: var(--ink-04);
  --bg-hover: var(--ink-08);

  /* ── TYPOGRAPHY — families ───────────────────────────────────── */
  --font: "Spline Sans Mono", ui-monospace, monospace;
  --font-mono: var(--font);

  /* ── TYPE SCALE ──────────────────────────────────────────────── */
  --size-h1: 36px;
  --size-h2: 28px;
  --size-h3: 22px;
  --size-h4: 16px;
  --size-h5: 16px;
  --size-body: 19px;
  --lowercase: lowercase;      /* text-transform for panel cell body text */
  --size-secondary: 20px;
  --size-stat-number: 40px;
  --size-footnote: 10px;
  --size-figure-min: 16px;
  --size-figure-max: 16px;
  --size-table-cell: 18px;
  --size-table-header: 14px;
  --hero-title-size: 24px;
  --line-height: 1.7;

  /* ── TABLES ───────────────────────────────────────────────────── */
  --table-cell-border: var(--ink-85);
  --table-row-hover: var(--ink-04);
  --table-stub-indent: 0.15in;

  /* ── CALLOUTS ─────────────────────────────────────────────────── */
  --callout-border: var(--fg);
  --callout-border-light: var(--ink-25);

  /* ── MOTION ───────────────────────────────────────────────────── */
  --ease-bar: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-bar: 1.2s;
  --dur-quick: 0.15s;

  /* ── SPACING SCALE ────────────────────────────────────────── */
  --space-one:   4px;
  --space-two:   8px;
  --space-three: 12px;
  --space-four:  16px;
  --space-five:  24px;

  /* ── GRID GEOMETRY ────────────────────────────────────────── */
  --cell-size: calc(95vw / 16);     /* 16-column card grid unit */
  --card-buffer: 16px;
}