/* ==========================================================================
   tokens.css - every color, font, and border in the site.
   --------------------------------------------------------------------------
   Three eras (data-theme) x two modes (data-mode) = six palettes.

   Mode resolution, per theme:
     1. bare selector            -> light palette
     2. prefers-color-scheme:dark, not forced light -> dark palette
     3. [data-mode="dark"]       -> dark palette (manual choice wins)

   Every foreground/background pair below is verified at WCAG AA or better
   by tools/check-contrast.mjs. Re-run it if you change a value.
   ========================================================================== */

:root {
  /* Shared across all eras. */
  --measure: 68ch;
  --page-max: 62rem;
  --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;

  --font-chaos: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  --font-system: Verdana, Geneva, Tahoma, sans-serif;
  --font-times: "Times New Roman", Times, serif;
  --font-mono: "Courier New", Courier, "Lucida Console", monospace;
}

/* ==========================================================================
   ERA 1 - GeoCities '97. Maximum chaos.
   ========================================================================== */

[data-theme="geocities"] {
  --font-display: var(--font-chaos);
  --font-body: var(--font-chaos);
  --font-ui: var(--font-system);

  --bg: #ffffe0;
  --bg-tile: url("/img/tile-confetti.svg");
  --surface: #ffffff;
  --surface-2: #e0ffe0;
  --text: #000080;
  --text-muted: #660066;
  --link: #0000ee;
  --link-visited: #800080;
  --accent: #cc0000;
  --accent-2: #008000;
  --decor: #ff00ff;
  --bevel-light: #ffffff;
  --bevel-dark: #808080;
  --border-width: 4px;
  --border-style: ridge;
  --radius: 0;
  --focus: #cc0000;
  --gag-display: inline-block;
  --scroller-bg: #000080;
  --scroller-text: #ffff00;
}

@media (prefers-color-scheme: dark) {
  [data-theme="geocities"]:not([data-mode="light"]) {
    --bg: #000000;
    --bg-tile: url("/img/tile-stars.svg");
    --surface: #000033;
    --surface-2: #001a1a;
    --text: #00ff00;
    --text-muted: #00cccc;
    --link: #ffff00;
    --link-visited: #ff66ff;
    --accent: #ff00ff;
    --accent-2: #00ffff;
    --decor: #ff00ff;
    --bevel-light: #00ff00;
    --bevel-dark: #004400;
    --focus: #ffff00;
    --scroller-bg: #4b0082;
    --scroller-text: #00ff00;
  }
}

[data-theme="geocities"][data-mode="dark"] {
  --bg: #000000;
  --bg-tile: url("/img/tile-stars.svg");
  --surface: #000033;
  --surface-2: #001a1a;
  --text: #00ff00;
  --text-muted: #00cccc;
  --link: #ffff00;
  --link-visited: #ff66ff;
  --accent: #ff00ff;
  --accent-2: #00ffff;
  --decor: #ff00ff;
  --bevel-light: #00ff00;
  --bevel-dark: #004400;
  --focus: #ffff00;
  --scroller-bg: #4b0082;
  --scroller-text: #00ff00;
}

/* ==========================================================================
   ERA 2 - Netscape '99. Windows 95 desktop, corporate intranet energy.
   ========================================================================== */

[data-theme="netscape"] {
  --font-display: var(--font-system);
  --font-body: var(--font-system);
  --font-ui: var(--font-system);

  --bg: #008080;
  --bg-tile: none;
  --surface: #c0c0c0;
  --surface-2: #ffffff;
  --text: #000000;
  --text-muted: #333366;
  --link: #0000cc;
  --link-visited: #551a8b;
  --accent: #000080;
  --accent-2: #800000;
  --decor: #000080;
  --bevel-light: #ffffff;
  --bevel-dark: #808080;
  --border-width: 2px;
  --border-style: solid;
  --radius: 0;
  --focus: #800000;
  --gag-display: inline-block;
  --scroller-bg: #000080;
  --scroller-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  [data-theme="netscape"]:not([data-mode="light"]) {
    --bg: #1a1a2e;
    --surface: #24243c;
    --surface-2: #2e2e4a;
    --text: #e8e8f5;
    --text-muted: #a8a8c8;
    --link: #8fd0ff;
    --link-visited: #d2a8f0;
    --accent: #ffcc66;
    --accent-2: #ff9966;
    --decor: #8fd0ff;
    --bevel-light: #4a4a6a;
    --bevel-dark: #0d0d18;
    --focus: #ffcc66;
    --scroller-bg: #0d0d18;
    --scroller-text: #ffcc66;
  }
}

[data-theme="netscape"][data-mode="dark"] {
  --bg: #1a1a2e;
  --surface: #24243c;
  --surface-2: #2e2e4a;
  --text: #e8e8f5;
  --text-muted: #a8a8c8;
  --link: #8fd0ff;
  --link-visited: #d2a8f0;
  --accent: #ffcc66;
  --accent-2: #ff9966;
  --decor: #8fd0ff;
  --bevel-light: #4a4a6a;
  --bevel-dark: #0d0d18;
  --focus: #ffcc66;
  --scroller-bg: #0d0d18;
  --scroller-text: #ffcc66;
}

/* ==========================================================================
   ERA 3 - Web Safe '96. The restrained end of the decade.
   --------------------------------------------------------------------------
   Every color here comes from the 216-color web-safe palette: each channel is
   one of 00/33/66/99/CC/FF and nothing else. That constraint, not a mood, is
   what picks the colors, and it is the most era-defining technical fact about
   designing for the web in 1996.

   Structure follows the usual method: an analogous cool base (the web-safe
   blues and teals) carries the page, and exactly one warm complementary accent
   handles the few things that need to shout.

   Type is the period default stack rather than a chosen one - Courier for
   display, Times for reading, Verdana for interface chrome.
   ========================================================================== */

[data-theme="websafe"] {
  --font-display: var(--font-mono);
  --font-body: var(--font-times);
  --font-ui: var(--font-system);

  --bg: #99cccc;
  --bg-tile: none;
  --surface: #ffffff;
  --surface-2: #cccccc;
  --text: #000000;
  --text-muted: #003333;
  --link: #003399;
  --link-visited: #660099;
  --accent: #003366;
  --accent-2: #993300;
  --decor: #669999;
  --bevel-light: #ffffff;
  --bevel-dark: #336666;
  --border-width: 3px;
  --border-style: solid;
  --radius: 0;
  --focus: #993300;
  --gag-display: none;
  --scroller-bg: #003366;
  --scroller-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  [data-theme="websafe"]:not([data-mode="light"]) {
    --bg: #000033;
    --surface: #003333;
    --surface-2: #003366;
    --text: #ccffff;
    --text-muted: #99cccc;
    --link: #66ccff;
    --link-visited: #cc99ff;
    --accent: #ffcc00;
    --accent-2: #ff9900;
    --decor: #336666;
    --bevel-light: #336666;
    --bevel-dark: #000000;
    --focus: #ffcc00;
    --scroller-bg: #003366;
    --scroller-text: #ccffff;
  }
}

[data-theme="websafe"][data-mode="dark"] {
  --bg: #000033;
  --surface: #003333;
  --surface-2: #003366;
  --text: #ccffff;
  --text-muted: #99cccc;
  --link: #66ccff;
  --link-visited: #cc99ff;
  --accent: #ffcc00;
  --accent-2: #ff9900;
  --decor: #336666;
  --bevel-light: #336666;
  --bevel-dark: #000000;
  --focus: #ffcc00;
  --scroller-bg: #003366;
  --scroller-text: #ccffff;
}