/* Dashboard themes. Each re-hues the accent family + surface ladder + text; the whole UI is built on these tokens so a single data-theme on repaints everything. "phosphor" is the default (defined in tokens.css). Applied early (inline head script) to avoid a flash. */ /* ── Amber — retro amber CRT ─────────────────────────────────────────────── */ :root[data-theme="amber"] { --bg: #0a0702; --surf-1: #130d03; --surf-2: #1a1206; --surf-3: #271a08; --inset: #050300; --line-hair: #302610; --line: #4a3a16; --line-2: #6b5420; --green: #ffb000; --green-soft: #3a2909; --green-text: #ffdd93; --green-dim: #d99320; --glow: 0 0 9px rgba(255, 176, 0, 0.8); --head: #fff8e8; --text: #f2e6cf; --muted: #b39b78; --faint: #7d6a4a; --amber: #ff7a1a; /* keep warnings distinct from the gold accent */ } /* ── Ice — cyan on midnight ──────────────────────────────────────────────── */ :root[data-theme="ice"] { --bg: #04070f; --surf-1: #07101f; --surf-2: #0a1628; --surf-3: #102338; --inset: #020409; --line-hair: #16283f; --line: #1f3d5e; --line-2: #2e5b8a; --green: #38bdf8; --green-soft: #0a2d45; --green-text: #a5e4ff; --green-dim: #38a3d9; --glow: 0 0 9px rgba(56, 189, 248, 0.8); --head: #f0f9ff; --text: #dbeafe; --muted: #8aa9c9; --faint: #547089; --amber: #fbbf24; } /* ── Synthwave — hot magenta on violet ───────────────────────────────────── */ :root[data-theme="synthwave"] { --bg: #0b0614; --surf-1: #150a24; --surf-2: #1c0f30; --surf-3: #2a1745; --inset: #060310; --line-hair: #2e1a45; --line: #46266b; --line-2: #6b3aa0; --green: #ff4fd8; --green-soft: #390a31; --green-text: #ffb0ef; --green-dim: #d94fbf; --glow: 0 0 10px rgba(255, 79, 216, 0.85); --head: #fdf0ff; --text: #f0dcf7; --muted: #b98ec9; --faint: #7d5a8f; --cyan: #22d3ee; } /* ── Nebula — indigo / violet ────────────────────────────────────────────── */ :root[data-theme="nebula"] { --bg: #07060f; --surf-1: #0f0d20; --surf-2: #14122b; --surf-3: #1f1c40; --inset: #040309; --line-hair: #241f45; --line: #362e68; --line-2: #4f45a0; --green: #8b7bff; --green-soft: #241d4d; --green-text: #c7bfff; --green-dim: #8a7dd9; --glow: 0 0 10px rgba(139, 123, 255, 0.8); --head: #f3f1ff; --text: #ddd8f7; --muted: #948fc9; --faint: #605a8f; --cyan: #22d3ee; } /* ── Matrix — pure #0F0 on #000 ──────────────────────────────────────────── */ :root[data-theme="matrix"] { --bg: #000000; --surf-1: #020a02; --surf-2: #041004; --surf-3: #071807; --inset: #000000; --line-hair: #0a3d0a; --line: #0f550f; --line-2: #158015; --green: #00ff00; --green-soft: #0a3d0a; --green-text: #7bff7b; --green-dim: #00c000; --glow: 0 0 9px rgba(0, 255, 0, 0.85); --head: #d6ffd6; --text: #3dff3d; --muted: #1f9f1f; --faint: #146614; --amber: #ffcc00; /* keep warnings/errors legible against the green */ } /* ── Interface density ───────────────────────────────────────────────────── */ :root[data-density="compact"] { --s1: 6px; --s2: 9px; --s3: 12px; --s4: 16px; --s5: 22px; } /* ── CRT mode (opt-in) — scanline overlay + a touch more phosphor bloom ───── */ :root[data-crt="on"] body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.22) 3px, rgba(0, 0, 0, 0.22) 3px); mix-blend-mode: multiply; } :root[data-crt="on"] { --glow: 0 0 15px var(--green); } :root[data-crt="on"] .lbl, :root[data-crt="on"] .sname, :root[data-crt="on"] .connect .addr, :root[data-crt="on"] .badge.running, :root[data-crt="on"] .sv-tab.active { text-shadow: 0 0 8px currentColor; } :root[data-crt="on"] .btn-main { box-shadow: 0 0 16px var(--green-soft); } /* ── Reduce motion (opt-in, independent of the OS setting) ───────────────── */ :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }