/* Light/Dark theme variables. Toggled via [data-theme] on . */ :root, [data-theme="light"] { --bg: #f7f8fb; --bg-elev: #ffffff; --bg-soft: #eef1f6; --text: #0f172a; --text-muted: #5b6b85; --border: #dfe4ec; --primary: #f5b400; --primary-text: #1a1a1a; --accent: #2563eb; --danger: #dc2626; --danger-soft: #fee2e2; --warn: #d97706; --ok: #16a34a; --chip-bg: #eef1f6; --code-bg: #f1f3f7; --focus: 0 0 0 3px rgba(37, 99, 235, 0.25); --shadow: 0 4px 16px rgba(15, 23, 42, 0.08); --radius: 12px; } [data-theme="dark"] { --bg: #0e1117; --bg-elev: #161b22; --bg-soft: #1a2029; --text: #e6e9ef; --text-muted: #8b96a7; --border: #232a35; --primary: #f5b400; --primary-text: #121212; --accent: #60a5fa; --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.12); --warn: #f59e0b; --ok: #22c55e; --chip-bg: #222a36; --code-bg: #1c2230; --focus: 0 0 0 3px rgba(96, 165, 250, 0.35); --shadow: 0 6px 24px rgba(0, 0, 0, 0.4); --radius: 12px; }