/* ============================================================ variables.css All color-mode ("theme") tokens live here. Every theme sets the SAME list of custom properties, so the rest of the CSS never needs to know which theme is active. Themes are switched by setting data-theme="..." on . See js/theme.js for the switching logic (incl. "crazy" mode). ============================================================ */ :root { /* shared, theme-independent tokens */ --font-display: 'Press Start 2P', monospace; --font-body: 'VT323', monospace; --radius: 0px; /* retro = square corners, no rounding */ --grid-gap: 42px; /* spacing of the background grid lines */ --transition-speed: 0.15s; } /* ---------- EMO (default) — black & white ---------- */ body[data-theme="emo"] { --bg: #050505; --bg-panel: rgba(255, 255, 255, 0.04); --fg: #f2f2f2; --fg-dim: #9a9a9a; --accent: #ffffff; --accent-dim: rgba(255, 255, 255, 0.35); --grid-line: rgba(255, 255, 255, 0.14); --danger: #ff4d4d; --locked: #4a4a4a; } /* ---------- HEAVENLY — white & yellow ---------- */ body[data-theme="heavenly"] { --bg: #fffdf4; --bg-panel: rgba(20, 20, 0, 0.04); --fg: #201c00; --fg-dim: #7a7040; --accent: #ffd94a; --accent-dim: rgba(255, 217, 74, 0.45); --grid-line: rgba(180, 150, 0, 0.18); --danger: #d94a2b; --locked: #c9c2a0; } /* ---------- SKID — black & green ---------- */ body[data-theme="skid"] { --bg: #030603; --bg-panel: rgba(57, 255, 20, 0.05); --fg: #d6ffda; --fg-dim: #5fae67; --accent: #39ff14; --accent-dim: rgba(57, 255, 20, 0.35); --grid-line: rgba(57, 255, 20, 0.16); --danger: #ff3b3b; --locked: #2a4a2a; } /* ---------- NULL — black & purple ---------- */ body[data-theme="null"] { --bg: #060209; --bg-panel: rgba(155, 48, 255, 0.06); --fg: #eee0ff; --fg-dim: #9576b8; --accent: #9b30ff; --accent-dim: rgba(155, 48, 255, 0.4); --grid-line: rgba(155, 48, 255, 0.18); --danger: #ff4d9b; --locked: #3a2a4a; } /* ---------- BLOODY — black & crimson ---------- */ body[data-theme="bloody"] { --bg: #060000; --bg-panel: rgba(220, 20, 60, 0.06); --fg: #ffe0e4; --fg-dim: #b3555f; --accent: #dc143c; --accent-dim: rgba(220, 20, 60, 0.4); --grid-line: rgba(220, 20, 60, 0.18); --danger: #ff2b2b; --locked: #4a2a2e; } /* ---------- PARANOID — green & turquoise ---------- */ body[data-theme="paranoid"] { --bg: #051512; --bg-panel: rgba(64, 224, 208, 0.06); --fg: #d9fff8; --fg-dim: #5fa89c; --accent: #40e0d0; --accent-dim: rgba(64, 224, 208, 0.4); --grid-line: rgba(31, 174, 108, 0.2); --danger: #ff6b4a; --locked: #24493f; } /* ---------- MOLTEN — red, orange, tiny bit of black ---------- */ body[data-theme="molten"] { --bg: #150502; --bg-panel: rgba(255, 149, 0, 0.07); --fg: #ffe8d6; --fg-dim: #c8794a; --accent: #ff9500; --accent-dim: rgba(255, 59, 31, 0.45); --grid-line: rgba(255, 59, 31, 0.2); --danger: #ff3b1f; --locked: #4a2a1a; } /* ---------- CRAZY — constantly changing colors ---------- Base values here; js/theme.js overrides --accent, --bg and --grid-line on a timer to cycle through a rainbow of colors. */ body[data-theme="crazy"] { --bg: #060606; --bg-panel: rgba(255, 255, 255, 0.05); --fg: #ffffff; --fg-dim: #aaaaaa; --accent: #ff2bd6; --accent-dim: rgba(255, 43, 214, 0.4); --grid-line: rgba(255, 43, 214, 0.18); --danger: #ff4d4d; --locked: #3a3a3a; } /* ---------- CORPORATE GREED — blue & white ---------- */ body[data-theme="corporate-greed"] { --bg: #061423; --bg-panel: rgba(255, 255, 255, 0.05); --fg: #eaf3ff; --fg-dim: #7fa3c9; --accent: #ffffff; --accent-dim: rgba(255, 255, 255, 0.35); --grid-line: rgba(120, 180, 255, 0.2); --danger: #ff5c5c; --locked: #23425e; }