/* sl0p color themes. Swap the flavour with (set early by
the inline snippet / theme.js picker, persisted in localStorage). Each flavour block sets the editable channel tokens +
background stops + a muted-shade ladder; the derived block at the bottom builds
the palette + glow channels the pages consume. The default block reproduces the
original phosphor-green values exactly. */
:root {
/* ---- phosphor (default) ---- */
--accent-rgb: 54 255 154;
--accent-dim-rgb: 31 158 99;
--amber-rgb: 255 183 61;
--magenta-rgb: 255 93 177;
--text: #cdeede;
--bg: #04060a;
--bg-core: #0b1712; --bg-mid: #06100c; --bg-edge: #03070a; --bg-corner: #10221a;
--panel-rgb: 6 14 11;
--term-bg: #040a07;
/* muted-shade ladder (labels / hints / dim borders) + emphasis + bright accent */
--fg-bright: #eafff3; --fg-1: #93c4ae; --fg-2: #6fae93; --fg-3: #4f7a67; --fg-4: #3d6655;
--accent-bright: #6affb9;
}
:root[data-theme="amber"] { /* amber CRT */
--accent-rgb: 255 176 66; --accent-dim-rgb: 176 112 30;
--amber-rgb: 255 214 140; --magenta-rgb: 255 120 84;
--text: #f1e3c6; --bg: #0a0803;
--bg-core: #1b1206; --bg-mid: #120c04; --bg-edge: #0a0702; --bg-corner: #241a08;
--panel-rgb: 18 13 5; --term-bg: #0b0803;
--fg-bright: #fff2da; --fg-1: #d8c299; --fg-2: #b8975a; --fg-3: #8a6f3f; --fg-4: #6b5630;
--accent-bright: #ffce7a;
}
:root[data-theme="ice"] { /* ice cyan */
--accent-rgb: 96 214 255; --accent-dim-rgb: 42 126 166;
--amber-rgb: 130 205 255; --magenta-rgb: 130 150 255;
--text: #cfe8f5; --bg: #04080e;
--bg-core: #0a1622; --bg-mid: #06101a; --bg-edge: #03070c; --bg-corner: #0e2233;
--panel-rgb: 8 16 24; --term-bg: #04090f;
--fg-bright: #eafaff; --fg-1: #9cc7dd; --fg-2: #6fa6c4; --fg-3: #4f7788; --fg-4: #3d5b68;
--accent-bright: #8fe6ff;
}
:root[data-theme="synth"] { /* synthwave magenta */
--accent-rgb: 255 92 190; --accent-dim-rgb: 150 44 112;
--amber-rgb: 140 140 255; --magenta-rgb: 255 92 190;
--text: #f2d7ec; --bg: #0a0410;
--bg-core: #1a0a22; --bg-mid: #120818; --bg-edge: #08040c; --bg-corner: #22103a;
--panel-rgb: 17 8 22; --term-bg: #0a0410;
--fg-bright: #ffe6f7; --fg-1: #d29ac0; --fg-2: #b46f9a; --fg-3: #834f6f; --fg-4: #663d55;
--accent-bright: #ff8fd6;
}
:root[data-theme="blood"] { /* alert red */
--accent-rgb: 255 74 74; --accent-dim-rgb: 156 42 42;
--amber-rgb: 255 150 70; --magenta-rgb: 255 86 128;
--text: #f4d6d6; --bg: #0c0406;
--bg-core: #1e0a0c; --bg-mid: #140608; --bg-edge: #0a0304; --bg-corner: #2a0e10;
--panel-rgb: 20 8 8; --term-bg: #0c0406;
--fg-bright: #ffe0e0; --fg-1: #d29a9a; --fg-2: #b46f6f; --fg-3: #834f4f; --fg-4: #663d3d;
--accent-bright: #ff8f8f;
}
:root[data-theme="mono"] { /* grayscale CRT */
--accent-rgb: 228 233 237; --accent-dim-rgb: 124 132 137;
--amber-rgb: 200 205 210; --magenta-rgb: 168 173 178;
--text: #cfd4d8; --bg: #06070a;
--bg-core: #14171b; --bg-mid: #0d0f12; --bg-edge: #060709; --bg-corner: #1a1e22;
--panel-rgb: 14 16 19; --term-bg: #08090c;
--fg-bright: #f2f5f7; --fg-1: #aab0b5; --fg-2: #868c91; --fg-3: #5c6266; --fg-4: #464b4f;
--accent-bright: #f6f8fa;
}
/* ---- derived palette (consumed by pages; independent of flavour) ---- */
:root {
--phos: rgb(var(--accent-rgb));
--phos-dim: rgb(var(--accent-dim-rgb));
--amber: rgb(var(--amber-rgb));
--magenta: rgb(var(--magenta-rgb));
--line: rgb(var(--accent-dim-rgb) / .4);
--panel: rgb(var(--panel-rgb) / .72);
}
/* ---- theme picker (injected by theme.js on pages that include it) ---- */
#themepick { position: fixed; z-index: 60; bottom: 14px; left: 14px; display: flex; gap: 7px;
padding: 7px 9px; border-radius: 999px; background: rgb(var(--panel-rgb) / .82);
border: 1px solid var(--line); box-shadow: inset 0 0 14px rgba(0,0,0,.5);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#themepick button { width: 16px; height: 16px; padding: 0; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(0,0,0,.45); box-shadow: 0 0 7px rgba(0,0,0,.45);
transition: transform .1s ease, width .15s ease, margin .15s ease, opacity .15s ease; }
#themepick button:hover { transform: scale(1.18); }
#themepick button[aria-current="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
/* Collapsed by default: show only the active (circled) swatch; reveal the rest on hover/focus. */
#themepick:not(:hover):not(:focus-within) { gap: 0; }
#themepick:not(:hover):not(:focus-within) button:not([aria-current="true"]) {
width: 0; opacity: 0; pointer-events: none; border-width: 0; box-shadow: none; }
/* Touch/no-hover: the collapse trick can't reveal the rest, so keep the full swatch. */
@media (hover: none) {
#themepick:not(:hover):not(:focus-within) { gap: 7px; }
#themepick:not(:hover):not(:focus-within) button:not([aria-current="true"]) {
width: 16px; opacity: 1; pointer-events: auto; border-width: 1px;
box-shadow: 0 0 7px rgba(0,0,0,.45); } }
@media (max-width: 768px) { #themepick { bottom: 10px; left: 10px; gap: 9px; padding: 8px 10px; }
#themepick button { width: 20px; height: 20px; } }