/* ============================================ THEMES.CSS — Terminal color theme definitions Each theme overrides CSS custom properties. Active theme set via data-theme on . ============================================ */ /* --- Classic Green (default — already in :root) --- */ [data-theme="green"], :root { --bg-primary: #0a0e14; --bg-terminal: #0c1018; --bg-header: #0e1219; --bg-footer: #0e1219; --text-primary: #00ff41; --text-secondary: #00cc33; --text-dimmed: #008f22; --text-accent: #ff0040; --text-accent-secondary: #cc0033; --text-system: #00aa30; --text-ok: #00ff41; --text-warn: #ffd700; --text-error: #ff0040; --glow-primary: rgba(0, 255, 65, 0.6); --glow-accent: rgba(255, 0, 64, 0.6); --glow-warn: rgba(255, 215, 0, 0.6); --border-color: #00ff4133; --border-bright: #00ff4166; --border-header: #00ff4122; --choice-hover-bg: rgba(0, 255, 65, 0.05); --choice-selected-bg: #ff0040; --choice-selected-text: #00ff41; --choice-locked-text: #1a1f29; --choice-locked-bg: #1a1f29; } /* --- Amber --- */ [data-theme="amber"] { --bg-primary: #0a0a08; --bg-terminal: #0e0d0a; --bg-header: #12110d; --bg-footer: #12110d; --text-primary: #ffb000; --text-secondary: #cc8d00; --text-dimmed: #8a6000; --text-accent: #ff4444; --text-accent-secondary: #cc3333; --text-system: #aa7800; --text-ok: #ffb000; --text-warn: #ffe066; --text-error: #ff4444; --glow-primary: rgba(255, 176, 0, 0.5); --glow-accent: rgba(255, 68, 68, 0.5); --glow-warn: rgba(255, 224, 102, 0.5); --border-color: #ffb00033; --border-bright: #ffb00066; --border-header: #ffb00022; --choice-hover-bg: rgba(255, 176, 0, 0.05); --choice-selected-bg: #ff4444; --choice-selected-text: #ffb000; --choice-locked-text: #1f1a10; --choice-locked-bg: #1f1a10; } /* --- Cool Blue --- */ [data-theme="blue"] { --bg-primary: #0a0e1a; --bg-terminal: #0c1020; --bg-header: #0e1224; --bg-footer: #0e1224; --text-primary: #00d4ff; --text-secondary: #00aacc; --text-dimmed: #007a99; --text-accent: #ff00ff; --text-accent-secondary: #cc00cc; --text-system: #0099bb; --text-ok: #00d4ff; --text-warn: #ffd700; --text-error: #ff00ff; --glow-primary: rgba(0, 212, 255, 0.5); --glow-accent: rgba(255, 0, 255, 0.5); --glow-warn: rgba(255, 215, 0, 0.5); --border-color: #00d4ff33; --border-bright: #00d4ff66; --border-header: #00d4ff22; --choice-hover-bg: rgba(0, 212, 255, 0.05); --choice-selected-bg: #ff00ff; --choice-selected-text: #00d4ff; --choice-locked-text: #101a29; --choice-locked-bg: #101a29; } /* --- Hot Pink --- */ [data-theme="pink"] { --bg-primary: #0f0a14; --bg-terminal: #120d18; --bg-header: #15101c; --bg-footer: #15101c; --text-primary: #ff0080; --text-secondary: #cc0066; --text-dimmed: #8a0044; --text-accent: #00ffcc; --text-accent-secondary: #00ccaa; --text-system: #aa0055; --text-ok: #ff0080; --text-warn: #ffd700; --text-error: #ff3333; --glow-primary: rgba(255, 0, 128, 0.5); --glow-accent: rgba(0, 255, 204, 0.5); --glow-warn: rgba(255, 215, 0, 0.5); --border-color: #ff008033; --border-bright: #ff008066; --border-header: #ff008022; --choice-hover-bg: rgba(255, 0, 128, 0.05); --choice-selected-bg: #00ffcc; --choice-selected-text: #ff0080; --choice-locked-text: #1f1020; --choice-locked-bg: #1f1020; } /* --- Phosphor White --- */ [data-theme="white"] { --bg-primary: #0a0a0a; --bg-terminal: #0e0e0e; --bg-header: #121212; --bg-footer: #121212; --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-dimmed: #707070; --text-accent: #ff3333; --text-accent-secondary: #cc2828; --text-system: #909090; --text-ok: #e0e0e0; --text-warn: #ffd700; --text-error: #ff3333; --glow-primary: rgba(224, 224, 224, 0.3); --glow-accent: rgba(255, 51, 51, 0.4); --glow-warn: rgba(255, 215, 0, 0.4); --border-color: #e0e0e033; --border-bright: #e0e0e066; --border-header: #e0e0e022; --choice-hover-bg: rgba(224, 224, 224, 0.05); --choice-selected-bg: #ff3333; --choice-selected-text: #e0e0e0; --choice-locked-text: #1a1a1a; --choice-locked-bg: #1a1a1a; } /* --- Light Mode (inverted) --- */ [data-theme="light"] { --bg-primary: #d4e8d0; --bg-terminal: #c8e0c2; --bg-header: #b8d4b0; --bg-footer: #b8d4b0; --text-primary: #0a2e0a; --text-secondary: #1a4a1a; --text-dimmed: #4a7a4a; --text-accent: #990022; --text-accent-secondary: #770018; --text-system: #2a5a2a; --text-ok: #0a2e0a; --text-warn: #8a6e00; --text-error: #990022; --glow-primary: rgba(10, 46, 10, 0.15); --glow-accent: rgba(153, 0, 34, 0.2); --glow-warn: rgba(138, 110, 0, 0.2); --border-color: #0a2e0a33; --border-bright: #0a2e0a66; --border-header: #0a2e0a22; --choice-hover-bg: rgba(10, 46, 10, 0.08); --choice-selected-bg: #990022; --choice-selected-text: #c8e0c2; --choice-locked-text: #a0b89a; --choice-locked-bg: #a0b89a; } /* Light mode: soften CRT effects */ [data-theme="light"] .crt-scanlines { background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.04) 3px, rgba(0, 0, 0, 0.04) 4px ); } /* Light mode: selection */ [data-theme="light"] ::selection { background: var(--text-primary); color: var(--bg-terminal); }