/* ========================================================= THEME.CSS — Single source of truth for all color tokens Loaded on every page. data-theme is set on by ThemeManager.js before first paint. ========================================================= */ /* ── DARK (default) ──────────────────────────────────────── */ :root, [data-theme="dark"] { --bg-main: #121212; --bg-card: #1a1a1a; --bg-panel: #161616; --bg-raised: #1e1e1e; --bg-input: #222222; --bg-hover: #191919; --border: #2a2a2a; --border-mid: #222222; --border-light: #1e1e1e; --text: #ffffff; --text-muted: #bbbbbb; --text-faded: #888888; --text-dim: #555555; --accent: #4caf50; --accent-dim: rgba(76,175,80,0.1); --red: #e57373; --red-dim: rgba(229,115,115,0.1); --shadow: 0 4px 20px rgba(0,0,0,0.4); --radius: 12px; --radius-xs: 6px; --transition: 0.15s ease; --sidebar-bg: #0d0d0d; --sidebar-hover:#1e1e1e; --price-color: #fbbf24; --icon-filter: invert(1) opacity(0.7); --icon-filter-solid: invert(1); } /* ── LIGHT ───────────────────────────────────────────────── */ [data-theme="light"] { --bg-main: #e3dac9; --bg-card: #ede8db; --bg-panel: #e8e2d4; --bg-raised: #d9d0bc; --bg-input: #d4cab4; --bg-hover: #ddd6c5; --border: #c2b89e; --border-mid: #cfc5ae; --border-light: #d8d0bc; --text: #111111 !important; --text-muted: #2a2a2a !important; --text-faded: #555555; --text-dim: #888888; --accent: #2e7d32; --accent-dim: rgba(46,125,50,0.1); --red: #c62828; --red-dim: rgba(198,40,40,0.08); --shadow: 0 4px 20px rgba(0,0,0,0.08); --radius: 12px; --radius-xs: 6px; --transition: 0.15s ease; --sidebar-bg: #0d0d0d; /* sidebar stays dark in light mode */ --sidebar-hover:#1e1e1e; --price-color: #92400e; --icon-filter: invert(0) opacity(0.6); --icon-filter-solid: invert(0) brightness(0.3); } /* Custom theme — all vars injected inline by ThemeManager.js */