| Token | -Value | -Use for | -
|---|---|---|
--primary |
- #c2620a | -Primary action colour | -
--primary-dark |
- #a0510a | -Hover / pressed state | -
--accent |
- #4e7fa0 | -Secondary / info colour | -
--accent-dark |
- #3a6682 | -Hover on accent elements | -
--text |
- #1c1917 | -Body text, headings | -
--text-2 |
- #3d3530 | -Secondary text | -
--text-muted |
- #78716c | -Captions, labels, placeholders | -
--bg-tint |
- #fef8f0 | -Warm section backgrounds | -
--bg-mint |
- #eff6fa | -Cool section backgrounds | -
--border |
- #e7e0d8 | -Card borders, dividers | -
--r / --r-sm / --r-lg |
- 12px / 8px / 20px | -Border radius (card / badge / hero) | -
--shad-sm / --shad-md / --shad-lg |
- — | -Box shadow tiers | -
--primary; warm amber for learning-oriented pages--accent; slate blue for task-oriented pages