/* Theme system: light + dark sets of CSS custom properties. The active theme is selected via [data-theme="light|dark"] on . theme.js flips this attribute on a tick based on settings.theme. */ :root, :root[data-theme='light'] { color-scheme: light; --bg-0: #f5f7fb; --bg-1: #ffffff; --bg-2: #eef1f7; --bg-3: #e3e8f1; --fg-0: #0f172a; --fg-1: #1e293b; --fg-2: #475569; --fg-3: #94a3b8; --border-1: #d8dde6; --border-2: #c1c8d4; --accent: #4f7cff; --accent-fg: #ffffff; --accent-soft: #e8eeff; --good: #16a34a; --good-soft: #dcfce7; --warn: #d97706; --warn-soft: #fef3c7; --bad: #dc2626; --bad-soft: #fee2e2; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.10); } :root[data-theme='dark'] { color-scheme: dark; /* Sublime Text-inspired warm/neutral grays */ --bg-0: #1e1e1e; --bg-1: #252526; --bg-2: #2d2d2d; --bg-3: #3c3c3c; --fg-0: #d4d4d4; --fg-1: #cccccc; --fg-2: #858585; --fg-3: #5a5a5a; --border-1: #3c3c3c; --border-2: #4a4a4a; --accent: #6c8bff; --accent-fg: #1e1e1e; --accent-soft: #2a2d3a; --good: #4ade80; --good-soft: #14532d; --warn: #fbbf24; --warn-soft: #422006; --bad: #f87171; --bad-soft: #450a0a; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.55); } html, body { background: var(--bg-0); color: var(--fg-0); transition: background-color 0.3s ease, color 0.3s ease; }