/* theme.css — the single source of truth for every palette value on the site.
   Both pages (/ and /releases/) link this file; their inline CSS speaks ONLY
   in the tokens below — never raw Canvas/CanvasText, light-dark(), or a color
   literal — so adding a whole new theme is: one block here + one toggle
   button per page. Rules that keep this safe:
   - Token values stay PLAIN (hex / rgb / color-mix of plain values), never
     light-dark(): the use sites nest tokens inside color-mix(), and a
     light-dark() value would not survive that nesting.
   - color-scheme is declared per theme so native form controls, scrollbars
     and UA default colors stay legible (any dark-grounded theme says dark).
   - Backgrounds are explicit grayscale/hex rather than system Canvas, which
     can carry a faint tint in dark mode and varies per browser. */

/* Derived neutrals: every hairline border, divider and hover wash is an
   alpha of --line. Defined once — they re-resolve when a theme changes
   --line. The fractional percentages reproduce the old #888x hex-alpha
   bytes exactly (x/15: #8881=6.67%, #8882=13.33%, #8883=20%, #8884=26.67%,
   #8886=40%, #8887=46.67%, #8889=60%, #888c=80%). */
:root {
  --row-hover:        color-mix(in srgb, var(--line)  6.67%, transparent);
  --hover-bg:         color-mix(in srgb, var(--line) 13.33%, transparent);
  --rule:             color-mix(in srgb, var(--line) 20%,    transparent);
  --hair:             color-mix(in srgb, var(--line) 26.67%, transparent);
  --kbd-border:       color-mix(in srgb, var(--line) 40%,    transparent);
  --btn-border:       color-mix(in srgb, var(--line) 46.67%, transparent);
  --rib-idle:         color-mix(in srgb, var(--line) 60%,    transparent);
  --btn-border-hover: color-mix(in srgb, var(--line) 80%,    transparent);
}

/* ---- light (also the auto default; auto's dark half is the media block) */
:root {
  color-scheme: light dark;
  --bg: #fafafa;            /* page/table ground (eased off pure white) */
  --surface: #fafafa;       /* raised chrome: topbar, header row, panel, popovers */
  --fg: #202020;            /* primary text / ink (softened off pure black) */
  --muted: #888;            /* secondary text and icons */
  --line: #888;             /* base for the alpha borders/washes above */
  --accent: #0066ff;        /* the site blue: links, focus, active filters */
  --accent-on: #fff;        /* text/icons sitting ON an --accent fill */
  --brand-hover: #514689;   /* zine wordmark hover: official MiSTer purple */
  --type-arcade: #e8a317;   /* the four core-type hues (badges + icons) */
  --type-console: #3aa0ff;
  --type-computer: #2bbf6e;
  --type-other: #b07cff;
  --reset: #e08000;         /* "Clear filters" amber */
  --ok: #22aa22;            /* success (Launch "sent") */
  --danger: #cc3333;        /* destructive hover (remove device) */
  --warn: #f5c518;          /* ZapScript bolt */
  /* shadows/deboss stay black-anchored on every theme: a --fg-based shadow
     turns into a white glow on dark grounds (reads as light, not depth) */
  --hint-shadow: rgb(0 0 0 / .20);
  --watermark: color-mix(in srgb, var(--fg) 8%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .42);
  --stamp-sheen: rgb(255 255 255 / .55);
}

/* ---- dark values, shared by auto-when-OS-is-dark and explicit dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #181818; --surface: #181818; --fg: #e6e6e6;
    --brand-hover: #8b7fd0;
    --hint-shadow: rgb(0 0 0 / .75);
    --watermark: color-mix(in srgb, #000 11%, var(--surface));
    --stamp-shade: rgb(0 0 0 / .33);
    --stamp-sheen: rgb(255 255 255 / .05);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181818; --surface: #181818; --fg: #e6e6e6;
  --brand-hover: #8b7fd0;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 11%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .33);
  --stamp-sheen: rgb(255 255 255 / .05);
}

/* Optional per-theme token: --accent2. A handful of "secondary highlight"
   sites (active-filter glow, sorted column header) consume it as
   var(--accent2, var(--accent)), so themes that don't define it — light and
   dark included — are completely unaffected, while colorful themes can put a
   second hue on screen. */

/* ---- punchy (menu label "MiSTer-y"): Catppuccin Mocha
   (catppuccin.com/palette). color-scheme is dark so native form
   controls/scrollbars render dark. Notes:
   - Every Mocha accent is a LIGHT pastel, so --accent-on (text sitting ON an
     accent fill, e.g. the "Copied" chip) flips to near-black Crust.
   - --line is Surface2, lighter than --muted's job would suggest: the derived
     borders are alphas OVER Base, and a darker base would make them vanish. */
:root[data-theme="punchy"] {
  color-scheme: dark;
  --bg: #1e1e2e;            /* Base */
  --surface: #313244;       /* Surface0 */
  --fg: #cdd6f4;            /* Text */
  --muted: #7f849c;         /* Overlay1 */
  --line: #585b70;          /* Surface2 */
  --accent: #cba6f7;        /* Mauve */
  --accent-on: #11111b;     /* Crust */
  --brand-hover: #cba6f7;   /* Mauve */
  --type-arcade: #fab387;   /* Peach */
  --type-console: #89b4fa;  /* Blue */
  --type-computer: #a6e3a1; /* Green */
  --type-other: #f5c2e7;    /* Pink */
  --reset: #fab387;         /* Peach */
  --ok: #a6e3a1;            /* Green */
  --danger: #f38ba8;        /* Red */
  --warn: #f9e2af;          /* Yellow */
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- vaporwave: the classic strip (ff71ce / 01cdfe / 05ffa1 / b967ff /
   fffb96), ALL five distributed: pink links, cyan secondary text + active
   filters (--accent2), mint success + computer hue, purple other hue +
   brand hover, yellow arcade hue + armed Clear button. */
:root[data-theme="vaporwave"] {
  color-scheme: dark;
  --bg: #1a1240;
  --surface: #251a55;
  --fg: #f3ecff;
  --muted: #7cc5e0;          /* cyan-tinted secondary text */
  --line: #6a5cae;
  --accent: #ff71ce;         /* hot pink */
  --accent2: #01cdfe;        /* cyan: active filters + sorted column */
  --accent-on: #1a1240;
  --brand-hover: #b967ff;
  --type-arcade: #fffb96;    /* pale yellow */
  --type-console: #01cdfe;   /* cyan */
  --type-computer: #05ffa1;  /* mint */
  --type-other: #b967ff;     /* purple */
  --reset: #fffb96;
  --ok: #05ffa1;
  --danger: #ff5577;
  --warn: #fffb96;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- ice cream: neapolitan (6b3e26 chocolate / ffc5d9 strawberry /
   c2f2d0 mint / fdf5c9 vanilla / ffcb85 caramel). Vanilla page, strawberry
   chrome, chocolate ink; mint takes the active filters. Accent hues are
   the strip's, deepened enough to read as text on the light grounds. */
:root[data-theme="icecream"] {
  color-scheme: light;
  --bg: #fdf5c9;             /* vanilla */
  --surface: #ffc5d9;        /* strawberry */
  --fg: #46281a;             /* chocolate */
  --muted: #8a6a52;
  --line: #a67c5e;
  --accent: #b02d5c;         /* deep strawberry (dark enough for the marker title on the strawberry panel) */
  --accent2: #8f5a1e;        /* deep caramel: active filters + sorted column */
  --accent-on: #fff;
  --brand-hover: #d6467a;
  --type-arcade: #c9822a;    /* caramel */
  --type-console: #3aa06b;   /* mint */
  --type-computer: #8a5a38;  /* chocolate */
  --type-other: #d6467a;     /* strawberry */
  --reset: #c9822a;
  --ok: #3aa06b;
  --danger: #c2334d;
  --warn: #c9822a;
  --hint-shadow: rgb(0 0 0 / .20);
  --watermark: color-mix(in srgb, var(--fg) 8%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .42);
  --stamp-sheen: rgb(255 255 255 / .55);
}

/* ---- pastel: a LIGHT theme built from the strip (ffd4e5 pink / d4ffea mint /
   eecbff lilac / feffa3 lemon / dbdcff periwinkle): lemon-cream page, lilac
   chrome, soft-violet ink, periwinkle emphasis; the hues deepen just enough
   to read as text/accents on the light grounds while the badge tints stay
   pastel.
   The ground is deliberately a WARM hue against the cool lilac chrome: the
   page used to be #f4f2ff, nominally "periwinkle-white" but ~97% white, so
   only two things had real pixel area (a white page, a lilac/pink chrome)
   and the theme read as "white and pink" — the other strip hues live only in
   badge chips, which dilute to 20% over --bg and can't carry a theme.
   Do NOT try to make the ground the strip's literal periwinkle (dbdcff):
   blue is luminance-poor and it lands at fg/bg 7.24, under the 8:1 floor.
   Lemon clears it at 9.03 without touching the ink. */
:root[data-theme="pastel"] {
  color-scheme: light;
  --bg: #fbfbe4;             /* lemon cream (fg/bg 9.03) */
  --surface: #eecbff;        /* lilac */
  --fg: #4a4160;             /* soft violet ink */
  --muted: #8b7fa8;
  --line: #a698c8;
  --accent: #863a9f;         /* deepened lilac for links + the marker title on the lilac panel */
  --accent2: #4a4fd0;        /* deepened periwinkle: active filters + sorted column.
                                NOT pink — pink here doubled down on the surface
                                and was half the "white and pink" problem. */
  --accent-on: #fff;
  --brand-hover: #863a9f;
  --type-arcade: #b8a212;    /* lemon, deepened */
  --type-console: #6a6ce0;   /* periwinkle */
  --type-computer: #43b088;  /* mint */
  --type-other: #d0578f;     /* pink */
  --reset: #c98a2e;
  --ok: #43b088;
  --danger: #cc4467;
  --warn: #b8a212;
  --hint-shadow: rgb(0 0 0 / .20);
  --watermark: color-mix(in srgb, var(--fg) 8%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .42);
  --stamp-sheen: rgb(255 255 255 / .55);
}

/* ---- pink: the shades-of-pink ladder (ffc0cb / ffb6c1 / ff69b4 / ff1493 /
   c71585) as a LIGHT pink theme: pink page, deeper pink chrome, raspberry
   ink, vivid pink accents. Monochrome by design (the type hues are graded
   pinks); status green stays green — "sent" has to read as success. */
:root[data-theme="pink"] {
  color-scheme: light;
  --bg: #ffd9e7;
  --surface: #ffc3d8;
  --fg: #58102f;             /* deep raspberry */
  --muted: #a85479;
  --line: #c47e9b;
  --accent: #c4136c;         /* vivid pink */
  --accent2: #ff69b4;        /* hot pink: active filters + sorted column */
  --accent-on: #fff;
  --brand-hover: #ff1493;
  --type-arcade: #f973a8;
  --type-console: #e8447f;
  --type-computer: #c2185b;
  --type-other: #96125e;
  --reset: #e8447f;
  --ok: #2e9e63;
  --danger: #b3123f;
  --warn: #c78a00;
  --hint-shadow: rgb(0 0 0 / .20);
  --watermark: color-mix(in srgb, var(--fg) 8%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .42);
  --stamp-sheen: rgb(255 255 255 / .55);
}

/* ---- phosphor: a monochrome P1 green CRT. Authentic in the way the real
   thing was: one hue, three intensities — dim (--muted), normal (--fg),
   bright (--accent). The four type hues are therefore a green LADDER rather
   than four hues (same trick as pink), and --ok/--danger keep their green/red
   jobs: "sent" and "remove" have to read as success/destruction even here. */
:root[data-theme="phosphor"] {
  color-scheme: dark;
  --bg: #0a0e0a;
  --surface: #101a12;
  --fg: #35e86b;             /* normal beam */
  --muted: #4f9a68;          /* dim beam */
  --line: #2f6b45;
  --accent: #9dffbe;         /* bright beam: links, marker title, Launch fill */
  --accent-on: #0a0e0a;
  --brand-hover: #9dffbe;
  --type-arcade: #d4ffa0;    /* the ladder, brightest to deepest */
  --type-console: #6cff9c;
  --type-computer: #22c964;
  --type-other: #a8ffd6;
  --reset: #d4ffa0;
  --ok: #35e86b;
  --danger: #ff5560;
  --warn: #d4ff5c;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- dmg: the Game Boy's four-shade LCD (9bbc0f page / 8bac0f chrome /
   306230 mid / 0f380f ink). Monochrome like phosphor, but LIGHT. The real
   DMG ran genuinely low contrast — canonical ink on canonical screen is only
   6.0:1, under the 8:1 body-text floor every other theme holds — so --fg is
   one step deeper than the darkest shade (8.0:1) and the canonical #0f380f
   takes --accent. That inverts the usual relationship: links and the marker
   title are LIGHTER than body ink, which is exactly how a 4-shade panel
   behaves. The Launch button lands as ink-on-screen with #9bbc0f text. */
:root[data-theme="dmg"] {
  color-scheme: light;
  --bg: #9bbc0f;             /* lightest shade */
  --surface: #8bac0f;
  --fg: #081d08;             /* deepened past canonical ink to clear 8:1 */
  --muted: #2a5520;
  --line: #306230;           /* mid shade */
  --accent: #0f380f;         /* canonical darkest: links + Launch fill */
  /* accent2 is LIGHTER than the ink, so the sorted th tints toward the mid
     shade rather than away from it. Intentional: this palette is monochrome
     and --fg is already pinned near-black by the 8:1 floor, so there is no
     darker value left to emphasise with — and the aria-sort arrow carries the
     signal regardless. icecream/riso lighten their accent2 the same way. */
  --accent2: #306230;        /* canonical mid: active filters + sorted th */
  --accent-on: #9bbc0f;
  --brand-hover: #306230;
  --type-arcade: #6f8a0c;    /* the ladder, in screen-olive */
  --type-console: #4a7a1c;
  --type-computer: #306230;
  --type-other: #0f380f;
  --reset: #5c5f0a;
  --ok: #1f6b1f;
  --danger: #7a1f10;
  --warn: #5c5f0a;
  --hint-shadow: rgb(0 0 0 / .20);
  --watermark: color-mix(in srgb, var(--fg) 8%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .42);
  --stamp-sheen: rgb(255 255 255 / .55);
}

/* ---- spectrum: ZX Spectrum BRIGHT set on black paper. The one theme whose
   source palette needs no deepening — there are exactly enough saturated
   primaries for four type hues plus accent and accent2. BRIGHT blue (#0000ff)
   is deliberately unused: it's ~2:1 on black and illegible as text. */
:root[data-theme="spectrum"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #14142e;
  --fg: #ffffff;             /* BRIGHT white */
  --muted: #a8a8c8;
  --line: #5a5a8a;
  --accent: #00ffff;         /* BRIGHT cyan */
  --accent2: #ffff00;        /* BRIGHT yellow: active filters + sorted th */
  --accent-on: #000000;
  --brand-hover: #ff00ff;
  --type-arcade: #ffff00;
  --type-console: #00ffff;
  --type-computer: #00ff00;
  --type-other: #ff00ff;
  --reset: #ffff00;
  --ok: #00ff00;
  --danger: #ff5555;
  --warn: #ffff00;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- workbench: Amiga 1.3 (0055aa blue / ff8800 orange / white / black).
   Bright chrome on a darker desktop, like 1.3 itself. Both blues are a touch
   deeper than #0055aa and the orange a touch lighter than #ff8800: the
   canonical pairing is only 3.05:1, and the accent has to carry the panel's
   marker title where it sits ON --surface. Measured, that's the cheapest
   drift that clears 4:1 — deepening the surface alone can't (3.73 at best
   before the blue stops reading as Workbench blue). */
:root[data-theme="workbench"] {
  color-scheme: dark;
  --bg: #003a75;
  --surface: #00498f;        /* the Workbench blue, deepened */
  --fg: #ffffff;
  --muted: #a8cdf0;
  --line: #5a97d4;
  --accent: #ff9422;         /* Workbench orange, lifted */
  /* deliberately NO --accent2: white is 1.3's other signature colour, but it
     is already --fg, so a white sorted th rendered IDENTICAL to every plain
     th and the sort emphasis silently vanished. Falling back to the orange
     accent (as light/dark do) is the only value here that reads as emphasis. */
  --accent-on: #1a1000;
  --brand-hover: #ffaa44;
  --type-arcade: #ff8800;
  --type-console: #7fc0ff;
  --type-computer: #ffffff;
  --type-other: #ffcc66;
  --reset: #ff8800;
  --ok: #6ee87f;
  --danger: #ff8080;
  --warn: #ffcc00;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- commodore (menu label "C64"): the VIC-II boot screen — 352879 screen,
   7869c4 border/text. The real thing ran text at ~3:1, so --fg is the light
   blue lifted to a legible weight while the accents come straight from the
   16-colour palette; the darkest four (purple/orange/light-red/blue) are
   lifted too, since they vanish against the blue ground. Slug is letters-only
   ("c64" would fail the /^[a-z]+$/ anti-FOUC guard). */
:root[data-theme="commodore"] {
  color-scheme: dark;
  --bg: #352879;             /* screen */
  --surface: #2a1f63;
  --fg: #d3ccff;             /* light blue, lifted to clear 8:1 */
  --muted: #8d7fd6;
  --line: #6c5eb5;
  --accent: #bfce72;         /* VIC-II yellow */
  --accent2: #67b6bd;        /* VIC-II cyan: active filters + sorted th */
  --accent-on: #17123a;
  --brand-hover: #7869c4;    /* border light blue */
  --type-arcade: #bfce72;    /* yellow */
  --type-console: #7869c4;   /* light blue */
  --type-computer: #94e089;  /* light green */
  --type-other: #c78ad6;     /* purple, lifted */
  --reset: #d99a5c;          /* orange, lifted */
  --ok: #94e089;
  --danger: #d98a84;         /* light red, lifted */
  --warn: #bfce72;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- riso: risograph print. Newsprint ground, soft-black ink, and exactly
   two spot inks — which is what --accent/--accent2 already are. Teal
   (#00827f) and fluorescent orange (#ff6c2f) are the two most popular real
   riso inks after fluorescent pink; the text-bearing tokens carry deepened
   versions (same concession ice cream/pastel make) while the badge hues
   stay closer to the canonical inks. Previously pink + blue, reworked to
   teal + orange to differentiate from Famicom's red-on-cream. */
:root[data-theme="riso"] {
  color-scheme: light;
  --bg: #f2efe6;             /* newsprint */
  --surface: #e8e3d5;
  --fg: #23201c;             /* soft black */
  --muted: #6f6a5e;
  --line: #a8a191;
  --accent: #007a76;         /* teal, deepened for text (bg 4.51, surf 4.05) */
  --accent2: #c84a08;        /* fluorescent orange: active filters + sorted th */
  --accent-on: #ffffff;
  --brand-hover: #009490;
  --type-arcade: #d4520a;    /* fluorescent orange */
  --type-console: #00827f;   /* teal */
  --type-computer: #1f7a45;  /* green */
  --type-other: #7a3fa8;     /* purple */
  --reset: #c84a08;
  --ok: #1f7a45;
  --danger: #c2183c;
  --warn: #8a6800;
  --hint-shadow: rgb(0 0 0 / .20);
  --watermark: color-mix(in srgb, var(--fg) 8%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .42);
  --stamp-sheen: rgb(255 255 255 / .55);
}

/* ---- amber: the other monochrome terminal, a P3 amber phosphor. Same
   one-hue-three-intensities structure as phosphor: dim (--muted), normal
   (--fg, the classic #ffb000), bright (--accent). Amber clears every floor
   at its canonical value, so unlike dmg nothing needed deepening. No
   --accent2 (monochrome, same reasoning as phosphor/workbench). */
:root[data-theme="amber"] {
  color-scheme: dark;
  --bg: #100b04;
  --surface: #1c1408;
  --fg: #ffb000;             /* the canonical amber beam */
  --muted: #a87830;          /* dim beam */
  --line: #7a5a24;
  --accent: #ffd75e;         /* bright beam: links, marker title, Launch fill */
  --accent-on: #1a1000;
  --brand-hover: #ffd75e;
  --type-arcade: #ffe08a;    /* the ladder, brightest to deepest */
  --type-console: #ffc040;
  --type-computer: #d98f00;
  --type-other: #fff0c0;
  --reset: #ffe08a;
  --ok: #58d06a;
  --danger: #ff5560;
  --warn: #ffd75e;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- famicom: the console SHELL, not a screen — white-cream plastic, the
   deep crimson of the body trim, the controller gold. The first theme drawn
   from a case colour. Crimson reads as text at its canonical value; the
   gold deepens for text duty (canonical #b8860b is ~3.2:1 on the cream)
   while the badge tint keeps the real gold. */
:root[data-theme="famicom"] {
  color-scheme: light;
  --bg: #f5f0e4;             /* shell cream */
  --surface: #ece4d0;
  --fg: #2a211c;
  --muted: #7a6a5c;
  --line: #a89681;
  --accent: #a71d31;         /* body crimson: links, marker title, Launch */
  --accent2: #8a6210;        /* controller gold, deepened: filters + sorted th */
  --accent-on: #fff;
  --brand-hover: #c22840;
  --type-arcade: #b8860b;    /* canonical gold (badge tint, no text floor) */
  --type-console: #c22840;
  --type-computer: #8a5a30;
  --type-other: #6e1420;
  --reset: #b8720c;
  --ok: #2e8f4e;
  --danger: #a71d31;
  --warn: #8a6210;
  --hint-shadow: rgb(0 0 0 / .20);
  --watermark: color-mix(in srgb, var(--fg) 8%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .42);
  --stamp-sheen: rgb(255 255 255 / .55);
}

/* ---- virtualboy (menu label "Virtual Boy"): the red LED array on true
   black. Monochrome like phosphor/amber, but red physically can't reach the
   8:1 body floor while staying red — pure #ff0000 is 5.25:1 on black — so
   --fg lifts toward salmon and the saturated LED red takes --accent (the
   dmg concession, in the other direction). --ok stays green: "sent" must
   read as success even on an all-red theme. */
:root[data-theme="virtualboy"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c0505;
  --fg: #ff7a6b;             /* lifted to clear 8:1 on black */
  --muted: #b8524a;
  --line: #7a2820;
  --accent: #ff2a2a;         /* the LED red: links, marker title, Launch */
  --accent-on: #000000;
  --brand-hover: #ff2a2a;
  --type-arcade: #ff9a8a;    /* the ladder */
  --type-console: #ff5544;
  --type-computer: #d42020;
  --type-other: #ffc0b5;
  --reset: #ff9a8a;
  --ok: #4ad06a;
  --danger: #ff4444;
  --warn: #ffb040;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- eva: Unit-01. Unmistakably PURPLE ground and chrome, acid-green
   accent; orange / violet / lime / cyan type hues. */
:root[data-theme="eva"] {
  color-scheme: dark;
  --bg: #1d1330;
  --surface: #2f2050;
  --fg: #e9e3f6;
  --muted: #a293c7;
  --line: #6b5a94;
  --accent: #a6ff00;         /* acid green */
  --accent-on: #16102a;
  --brand-hover: #b18cff;
  --type-arcade: #ff9a3d;    /* pylon orange */
  --type-console: #b18cff;   /* violet */
  --type-computer: #a3e635;  /* lime */
  --type-other: #67e8f9;     /* AT-field cyan */
  --reset: #ff9a3d;
  --ok: #a3e635;
  --danger: #ff4f6d;
  --warn: #ffd21e;
  --hint-shadow: rgb(0 0 0 / .75);
  --watermark: color-mix(in srgb, #000 22%, var(--surface));
  --stamp-shade: rgb(0 0 0 / .45);
  --stamp-sheen: rgb(255 255 255 / .06);
}

/* ---- theme PREVIEW COLOURS: the pair of little dots beside each name in the
   theme dropdown.

   THE RULE, and it is the same for every theme: each theme DECLARES the two
   colours that best preview it. Base/field colour first, signature colour
   second. That is the whole rule. The pair is AUTHORED, not derived from the
   theme's tokens — do not "fix" a row to make it match --surface, --bg or
   --accent, and do not invent a per-theme exception. If a theme previews
   badly, change its two declared colours here.

   Why authored and not derived (all three were tried and rejected):
   - --surface first: --surface is only ever a lifted variant of --bg, so
     every theme's two dots came out near-twins (RGB distance < 90 on all 15;
     Phosphor showed no green, Amber no amber, Virtual Boy no red). It also
     silently broke the ACTIVE row: the menu box IS background:var(--surface),
     so the active theme's first dot vanished into it.
   - --bg + --accent: uniform and legible everywhere, but it can only ever
     show the accent, and a theme's most recognisable colour often isn't its
     accent (Pastel's pink lives in --type-other; it would have shown purple).
   - "surface + signature": the old rule. "Signature" is a judgment call, so
     the table drifted into four different rules at once (accent, bg, accent2,
     a type hue) and nobody could tell which was intended.
   The colours here need not be tokens at all, and several aren't.

   Restated as literal hex because CSS can't reach into another theme's block
   (tokens always resolve to the ACTIVE theme). The pages draw the dots
   themselves (a ::before reading --sw1/--sw2); this file only supplies the
   colours, so the no-literals-in-page-CSS rule holds.

   One constraint the authoring must respect: never declare a colour equal to
   that theme's OWN --surface, because the menu box wears the active theme's
   surface and the dot would vanish on exactly the row you're looking at.
   (Pink and Famicom both did; they declare their --bg instead.)

   Known and accepted: a dark theme's dark first dot is hard to see while some
   OTHER dark theme is active (its bright second dot carries the row). That's
   inherent to previewing a black-grounded theme on a black menu, not a bug.

   MENU ORDER (this table is kept in the same order as the buttons, purely so
   the two read alike; nothing depends on it — THEMES is only used for an
   includes() check). The menu runs DARKEST GROUND FIRST: sorted by the
   relative luminance of --bg, ascending, from Virtual Boy / ZX (#000000,
   0.00000) up to Pastel (#fbfbe4, 0.95105). Ties on --bg break on --surface
   luminance, which is what puts Virtual Boy above ZX (both grounds are pure
   black; their surfaces are #1c0505 vs #14142e).
   Exception: Famicom (#f5f0e4, L=0.873) sorts AFTER Gelato (#fdf5c9, L=0.904)
   because the cream reads whiter than the yellow despite lower measured
   luminance. This is a deliberate visual override, not a bug.
   It is luminance, NOT the hex value and NOT contrast: #9bbc0f (Game Boy)
   looks mid-bright and sorts at 0.42969, between the dark grounds and the
   near-white ones. An earlier version sorted by fg/bg CONTRAST instead and
   was replaced — don't reintroduce it. A NEW theme slots in by its measured
   --bg luminance, not by when it was added. */
.menu button[data-set="virtualboy"] { --sw1: #000000; --sw2: #ff2a2a; } /* black + LED red */
.menu button[data-set="spectrum"]   { --sw1: #000000; --sw2: #00ffff; } /* black + cyan */
.menu button[data-set="amber"]      { --sw1: #100b04; --sw2: #ffb000; } /* black + amber */
.menu button[data-set="phosphor"]   { --sw1: #0a0e0a; --sw2: #35e86b; } /* dark + bright green */
.menu button[data-set="eva"]        { --sw1: #6b5a94; --sw2: #a6ff00; } /* medium purple + green */
.menu button[data-set="vaporwave"]  { --sw1: #b967ff; --sw2: #ff71ce; } /* medium purple + pink */
.menu button[data-set="punchy"]     { --sw1: #1e1e2e; --sw2: #cba6f7; } /* deep indigo + mauve */
.menu button[data-set="commodore"]  { --sw1: #352879; --sw2: #7869c4; } /* the two VIC-II blues */
.menu button[data-set="workbench"]  { --sw1: #003a75; --sw2: #ff9422; } /* Amiga blue + orange */
.menu button[data-set="dmg"]        { --sw1: #9bbc0f; --sw2: #0f380f; } /* screen + ink */
.menu button[data-set="pink"]       { --sw1: #ffd9e7; --sw2: #c4136c; } /* soft pink + deep pink */
.menu button[data-set="icecream"]   { --sw1: #fdf5c9; --sw2: #d6467a; } /* vanilla + strawberry */
.menu button[data-set="riso"]       { --sw1: #f2efe6; --sw2: #00827f; } /* newsprint + teal ink */
.menu button[data-set="famicom"]    { --sw1: #f5f0e4; --sw2: #a71d31; } /* cream + crimson */
.menu button[data-set="pastel"]     { --sw1: #fbfbe4; --sw2: #d0578f; } /* lemon + pink */