/* tokens.css — shared design language for dannydannydanny notes.
   Single source of truth for palette, type, and accents. Linked by the blog
   (via @import in style.css) and directly by full-bleed story pages, so every
   page — plain markdown post or immersive scrollytelling — speaks the same
   visual language. Re-theme here and the whole site follows. */
:root {
  /* base palette (light) */
  --bg: #fdfdfb;
  --fg: #1c1c1c;
  --muted: #6b6b6b;
  --rule: #e5e5e0;
  --link: #1d4ed8;
  --link-hover: #1e3a8a;
  --code-bg: #f3f3ee;
  --measure: 38rem;

  /* type */
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* shared accent — used by story pages, available site-wide */
  --accent: #e8531f;
  --gold:   #ffd166;

  /* immersive surface — full-bleed story / map pages (always dark) */
  --story-bg:  #12110f;
  --story-ink: #f4efe7;
  --panel:     rgba(20, 18, 16, .86);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f10;
    --fg: #e6e6e3;
    --muted: #9a9a92;
    --rule: #232425;
    --link: #80a8ff;
    --link-hover: #aac2ff;
    --code-bg: #181a1c;
  }
}

/* Explicit theme overrides. :root[data-theme] has specificity (0,2,0) which
   beats the (0,1,0) of the media-query :root rule, so the toggle always wins
   regardless of OS preference or a browser extension forcing a color-scheme. */
:root[data-theme="light"] {
  --bg: #fdfdfb; --fg: #1c1c1c; --muted: #6b6b6b; --rule: #e5e5e0;
  --link: #1d4ed8; --link-hover: #1e3a8a; --code-bg: #f3f3ee;
}
:root[data-theme="dark"] {
  --bg: #0e0f10; --fg: #e6e6e3; --muted: #9a9a92; --rule: #232425;
  --link: #80a8ff; --link-hover: #aac2ff; --code-bg: #181a1c;
}