# Colors

Brand, semantic, neutral, and sidebar palettes with interactive swatches.

## Primary — Yoto Orange

The primary accent colour is Yoto Orange, derived from Yoto's own brand palette.

| Token | Value | Usage |
|---|---|---|
| `--color-primary` | `hsl(14 84% 56%)` | Primary buttons, active states, links |
| `--color-primary-dark` | `hsl(14 84% 46%)` | Hover state for primary elements |
| `--color-primary-light` | `hsl(14 84% 66%)` | Subtle highlights on dark backgrounds |
| `--color-primary-subtle` | `hsl(14 84% 96%)` | Tinted backgrounds, active sidebar items |

## Neutral — warm tones

All neutrals lean warm (hue 20–25°). Never pure gray.

| Token | Value | Usage |
|---|---|---|
| `--color-background` | `hsl(0 0% 100%)` | Page background (light mode) |
| `--color-foreground` | `hsl(20 14.3% 4.1%)` | Primary text |
| `--color-muted` | `hsl(60 4.8% 95.9%)` | Sidebar, table headers, code backgrounds |
| `--color-muted-foreground` | `hsl(25 5.3% 44.7%)` | Secondary text, labels |
| `--color-border` | `hsl(20 5.9% 90%)` | Dividers, input borders |
| `--color-card` | `hsl(0 0% 100%)` | Card backgrounds |

## Semantic

| Token | Usage |
|---|---|
| `--color-warning` | Warning callouts (amber) |
| `--color-warning-foreground` | Text inside warning callouts |
| `--color-warning-subtle` | Background of warning callouts |
| `--color-sidebar` | Left sidebar background |

## Dark mode

Dark mode tokens are defined in `global.css` under `[data-theme="dark"]`. The dark palette uses the same warm hue rotation — backgrounds are warm-dark, never blue-black.