:root {
  /* palette — never read directly by components */
  --c-black: #111010;        --c-warm-black: #1e201d;
  --c-navy: #081f38;         --c-brown-gray: #352b2e;
  --c-blue-gray: #394958;    --c-dark-teal: #225057;
  --c-dark-brown: #4c251e;   --c-forest-green: #346500;
  --c-ochre: #603f1a;        --c-olive: #b1a464;
  --c-gold: #c4b676;         --c-muted-teal: #39869d;
  --c-cyan: #93e5e3;         --c-coral: #ed9c95;
  --c-cream: #dce5b9;

  /* semantic — read by components */
  --bg: var(--c-black);
  --fg: var(--c-cream);
  --heading: var(--c-muted-teal);
  --link: var(--c-cyan);
  --link-hover: var(--c-coral);
  --meta: var(--c-forest-green);
  --blockquote: var(--c-olive);
  --border: var(--c-blue-gray);
  --surface: var(--c-warm-black);
  --code-bg: var(--c-warm-black);
  --code-fg: var(--c-cream);
  --accent-warn: var(--c-gold);
  --accent-error: var(--c-coral);

  --automata-0: var(--c-warm-black);
  --automata-1: var(--c-muted-teal);
  --automata-2: var(--c-black);
  --automata-3: var(--c-cyan);

  /* shape */
  --radius-content: 4px;
  --radius-chrome: 0;
  --border-width: 1px;
}

[data-theme="light"] {
  --bg: var(--c-cream);
  --fg: var(--c-black);
  --heading: var(--c-dark-teal);
  --link: var(--c-dark-teal);
  --link-hover: var(--c-dark-brown);
  --meta: var(--c-ochre);
  --blockquote: var(--c-forest-green);
  --border: var(--c-olive);
  --surface: var(--c-warm-black);   /* code stays dark in light mode */

  --automata-0: var(--c-gold);
  --automata-1: var(--c-forest-green);
  --automata-2: var(--c-olive);
  --automata-3: var(--c-muted-teal);
}