/* Design tokens: every color, type size and space value lives here.
   Dark mode follows the OS unless <html data-theme="light|dark"> forces it
   (also via ?theme=dark|light). Page styles take every color from here (the favicon and the preview image are the exceptions). */

@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/newsreader-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* type */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-md: 0.9375rem;   /* 15 */
  --text-lg: 1.1875rem;   /* 19 */
  --text-xl: 1.4375rem;   /* 23 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.5625rem;  /* 41 */
  --text-4xl: 3.5rem;     /* 56 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* layout */
  --measure: 62ch;
  --page-max: 80rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --rule-w: 1px;
  --radius: 2px;
  --bar-h: 0.375rem;

  /* motion */
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Color: light ---------- */
:root {
  --paper: #f5f7fa;
  --surface: #e8edf3;
  --ink: #0b0f14;
  --ink-muted: #475365;
  --rule: #c8d1dc;
  --accent: #1c3b9c;
  --accent-ink: #ffffff;
  --bar: #0b0f14;
  --bar-track: #d6dde7;
  /* sequential ramp, low to high, for choropleths (warm, so it stays distinct from the accent) */
  --ramp-1: #f6efe3;
  --ramp-2: #f0d9b3;
  --ramp-3: #e4b27c;
  --ramp-4: #d08758;
  --ramp-5: #b05b3d;
  --ramp-6: #85352f;
  --ramp-7: #561b26;
}

/* ---------- Color: dark (OS preference, unless forced light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1116;
    --surface: #171b22;
    --ink: #e6eaf0;
    --ink-muted: #98a2b3;
    --rule: #2c3340;
    --accent: #86a5ff;
    --accent-ink: #0e1116;
    --bar: #e6eaf0;
    --bar-track: #232a35;
    --ramp-1: #1b1815;
    --ramp-2: #3a2a1d;
    --ramp-3: #5c3a24;
    --ramp-4: #85502e;
    --ramp-5: #b27243;
    --ramp-6: #d79c6a;
    --ramp-7: #f0cda4;
  }
}

/* ---------- Color: dark (forced) ---------- */
:root[data-theme="dark"] {
  --paper: #0e1116;
  --surface: #171b22;
  --ink: #e6eaf0;
  --ink-muted: #98a2b3;
  --rule: #2c3340;
  --accent: #86a5ff;
  --accent-ink: #0e1116;
  --bar: #e6eaf0;
  --bar-track: #232a35;
  --ramp-1: #1b1815;
  --ramp-2: #3a2a1d;
  --ramp-3: #5c3a24;
  --ramp-4: #85502e;
  --ramp-5: #b27243;
  --ramp-6: #d79c6a;
  --ramp-7: #f0cda4;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }