/* Four themes, all just CSS variables -- app.css never hardcodes a color, so switching data-theme on is instant and needs no reflow logic. */ :root, html[data-theme="blue"] { --bg: #0b1220; --bg-elevated: #101a2f; --bg-card: #131f38; --border: #223154; --text: #e6ecf7; --text-dim: #93a3c2; --accent: #3b82f6; --accent-hover: #5b95f7; --success: #22c55e; --warn: #f59e0b; --danger: #ef4444; --input-bg: #0f182c; } html[data-theme="dark"] { --bg: #121212; --bg-elevated: #1a1a1a; --bg-card: #1e1e1e; --border: #2e2e2e; --text: #f0f0f0; --text-dim: #a0a0a0; --accent: #8b5cf6; --accent-hover: #a476f9; --success: #22c55e; --warn: #f59e0b; --danger: #ef4444; --input-bg: #171717; } html[data-theme="light"] { --bg: #f5f7fb; --bg-elevated: #ffffff; --bg-card: #ffffff; --border: #e1e6ef; --text: #1a2233; --text-dim: #5b6b85; --accent: #2563eb; --accent-hover: #1d4ed8; --success: #16a34a; --warn: #d97706; --danger: #dc2626; --input-bg: #ffffff; } html[data-theme="yellow-black"] { --bg: #0a0a0a; --bg-elevated: #141414; --bg-card: #171717; --border: #2b2b2b; --text: #f5f5f5; --text-dim: #b8b8b8; --accent: #facc15; --accent-hover: #fde047; --success: #4ade80; --warn: #fbbf24; --danger: #f87171; --input-bg: #101010; } /* yellow-black gets a black-on-yellow accent button instead of the usual light-text accent button -- pure yellow behind pale text reads badly. */ html[data-theme="yellow-black"] .btn-accent { color: #111; }