/* â”€â”€â”€ Imperium theme â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   Split out of site.css 2026-08-02. Everything here is scoped to
   [data-theme="imperium"]; base styles stay in site.css.

   LOAD ORDER IS PART OF THE CONTRACT. _Layout links site.css, then every theme
   file, then themes/_shared.css. Theme rules carry an extra attribute selector,
   so they outrank base styles wherever they land - but do not reorder the links
   without re-reading _shared.css, which wins by POSITION rather than weight.

   The picker applies themes client-side with no reload (site.js), so every theme
   file ships on every page. Serving only the active theme would need the picker
   to fetch on demand first. */
/* Twilight Imperium - void navy page, imperial purple chrome, gold accent, ice
   blue secondary. */
[data-theme="imperium"] {
    --bg: #0a0f1f;
    --bg2: #0e1529;
    --bg3: #141c36;
    --surface: #1b2444;
    --border: #26305a;
    --border2: #323e6f;
    --text: #eaeefa;
    --text-mid: #a0aacb;
    --text-dim: #7883a8;
    --amber: oklch(0.78 0.13 85);
    --amber-dim: oklch(0.56 0.10 85);
    --amber-bg: oklch(0.20 0.05 85);
    --cyan: #46c2e8;
    --cyan-dim: rgba(70, 194, 232, 0.25);
    --nav-bg: #241a3d;
    --nav-border: #1a1230;
    --nav-fg: #b9b0d6;
    --nav-fg-dim: #948bb4;
    --nav-fg-strong: #eee9fb;
    --nav-accent: #e3c06a;
    --nav-accent-dim: rgba(227, 192, 106, 0.5);
    --nav-accent-bg: rgba(255, 255, 255, 0.08);
    --nav-btn-border: rgba(185, 176, 214, 0.35);
    --footer-bg: #241a3d;
    --footer-border: #1a1230;
    --footer-fg: #b9b0d6;
    --footer-accent: #e3c06a;
}
