| Token | Value | Usage |
|---|---|---|
| --violet | #4C1D95 | Primary CTAs, nav active |
| --violet-mid | #6D28D9 | Links, focus rings |
| --violet-pale | #EDE9FE | Active states bg |
| --orange-bright | #F97316 | Accent CTA, badges |
| --orange-lite | #FFEDD5 | Accent surface |
| --cream | #F5F1EB | Page bg, input bg |
| --white | #FFFFFF | Cards, sidebars |
| --ink | #1C1917 | Primary text |
| --ink-lite | #78716C | Secondary text |
| --teal | #0D9488 | Success, correct answers |
| --rose | #E11D48 | Error, wrong answers |
| --amber | #D97706 | Warning, streak |
| Token | Value | Usage |
|---|---|---|
| --fd | 'Syne' | Display, headings, buttons |
| --fb | 'Plus Jakarta Sans' | Body, labels, UI text |
| font-size-display | 36px · 800 | Hero headings |
| font-size-h1 | 26px · 800 | Page titles |
| font-size-h2 | 20px · 700 | Section headings |
| font-size-body | 13px · 400 | Reading content |
| font-size-label | 10px · 700 | Tags, labels, caps |
| --sp-1 → --sp-8 | 4–32px | 8pt spacing scale |
| --r-xs → --r-full | 4px–full | Border radius scale |
| border-width | 1.5px | All borders, cards |
| border-color | --rule #E7E3DC | Default rule color |
| shadow-card | 0 24px 64px rgba(28,25,23,.10) | Card elevation |