Colors
Semantic color tokens and Tailwind scales. All tokens switch automatically between light and dark modes.
Semantic Tokens
These CSS custom properties are the primary color API. Use them — never hardcode hex values in components.
| Token | Light | Dark | Usage |
|---|---|---|---|
--bg-primary | #f5f2eb | #0f172a | Page background |
--bg-surface | #fdfcfa | #1e293b | Card/panel bg |
--bg-accent-light | #fff7ed | #2d1600 | Orange-tinted bg |
--bg-info-light | #eff6ff | #0a1a2e | Blue info bg |
--text-primary | #1a1a1a | #e2e8f0 | Body text |
--text-secondary | #475569 | #94a3b8 | Secondary text |
--text-muted | #94a3b8 | #94a3b8 | Metadata |
--text-on-accent | #1a1a1a | #0f172a | Text on orange |
--accent-orange | #f97316 | #fb923c | Primary accent |
--accent-green | #22c55e | #4ade80 | Success/status |
--border-primary | #cbd5e1 | #475569 | Main borders |
--border-secondary | #e2e8f0 | #334155 | Thin borders |
Tailwind Slate Scale
0#f8fafc
50#f1f5f9
100#e2e8f0
150#cbd5e1
200#94a3b8
250#64748b
300#475569
350#334155
400#1e293b
450#0f172a
500#020617
Tailwind Orange Scale
0#fff7ed
50#ffedd5
100#fed7aa
150#fdba74
200#fb923c
250#f97316
300#ea580c
350#c2410c
Tailwind Green Scale
0#f0fdf4
50#dcfce7
100#bbf7d0
150#86efac
200#4ade80
250#22c55e
300#16a34a
350#15803d
Dark Mode Overrides
:root[data-theme="dark"] {
--color-slate-50: #1e293b;
--color-slate-100: #334155;
--color-slate-200: #475569;
--color-orange-50: #2d1600;
--color-orange-100: #3d2000;
--color-green-50: #052e0c;
/* ... plus all semantic tokens */}Tailwind light-shade tokens (50, 100, 200) are overridden in dark mode to ensure automatic contrast on all components.