/* tokens.css — base design tokens. Backgrounds and per-node chart colors
   are Nereeda's C-Design palette (2026-09-01); the rest carries over from
   nereedamcinnes.com's real site build (Website NM.com/Home Page Update/).
   Light theme is the default; dark theme overrides via [data-theme="dark"]
   on the root element. Per-node chart colors live in
   js/node-layout.config.js's NODE_COLORS, not here — each node has its own
   dark/light pair, so it's simplest for chart.js to look them up directly
   rather than going through CSS custom properties. */

:root {
  --bg: #FAF8F3;
  --bg-alt: #ffffff;
  --text: #1a1712;
  --muted: #726a5e;
  --accent: #667985;
  --border: rgba(26, 23, 18, 0.12);

  /* The floating hover card is always a dark card (Genetic Matrix-inspired),
     regardless of the page theme. */
  --callout-bg: #1c1a15;
  --callout-text: #f1eee8;
  --callout-label: rgba(241, 238, 232, 0.6);

  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

:root[data-theme="dark"] {
  --bg: #131312;
  --bg-alt: #1c1a15;
  --text: #f1eee8;
  --muted: #a49d90;
  --border: rgba(241, 238, 232, 0.13);
}