# Plan: Brand Colour Tokens

## What
Replace the placeholder design tokens in `src/tokens/tokens.css` with the actual brand colour palette from Figma, and extrapolate additional variants for extended UI use.

## Why
The current tokens use generic blues/greens — they don't match the project's brand. The Figma palette defines the canonical colours; we need to mirror those names and extend them with hover/active/background variants for component development.

## Approach

### 1. Palette layer — mirror Figma names exactly

These are the base brand colours, named to match Figma:

| Token | Hex (estimated from screenshot) | Notes |
|---|---|---|
| `--color-blue-01` | `#002664` | Deep navy (primary dark) |
| `--color-blue-02` | `#146CFD` | Bright blue (primary) |
| `--color-blue-03` | `#69B3E7` | Sky blue |
| `--color-blue-04` | `#CBEDFD` | Ice blue |
| `--color-red-01` | `#3E0014` | Dark burgundy/maroon |
| `--color-red-02` | `#D7153A` | Crimson (primary red) |
| `--color-red-03` | `#F5C5D0` | Soft pink |
| `--color-red-04` | `#FDDDE5` | Pale pink |
| `--color-grey-01` | `#3D3D3D` | Darkest grey |
| `--color-grey-02` | `#6D7278` | Medium grey |
| `--color-grey-03` | `#C0C0C0` | Light grey |
| `--color-grey-04` | `#E0E0E0` | Lighter grey |
| `--color-off-white` | `#F4F4F4` | Off white |
| `--color-surface` | `#FAFAFA` | Surface |
| `--color-white` | `#FFFFFF` | White |
| `--color-orange-02` | `#EC6608` | Warning orange (light mode) |
| `--color-orange-03` | `#F5B98A` | Warning orange (dark mode) |
| `--color-green-02` | `#00A651` | Success green (light mode) |
| `--color-green-03` | `#89E5B3` | Success green (dark mode) |

### 2. Extrapolated variants

For each colour family, generate useful variants not in Figma:

- **Orange 01** (dark) and **Orange 04** (light bg) — fill the gaps in the orange scale
- **Green 01** (dark) and **Green 04** (light bg) — fill the gaps in the green scale
- **Blue 05** — ultra-light blue for backgrounds
- **Red 05** — ultra-light red for backgrounds
- **Hover/active states** — slightly darker/lighter versions of primary interactive colours

### 3. Semantic mapping layer

Map palette colours to semantic roles so components use intent-based tokens:

```
--color-primary        → blue-01
--color-primary-hover  → derived (darker blue-01)
--color-primary-light  → blue-04
--color-text           → grey-01
--color-text-secondary → grey-02
--color-border         → grey-04
--color-bg             → off-white
--color-error          → red-02
--color-error-bg       → red-04
--color-warning        → orange-02
--color-warning-bg     → orange-04
--color-success        → green-02
--color-success-bg     → green-04
--color-info           → blue-02
--color-info-bg        → blue-04
```

## Key decisions needed from you

1. **Hex accuracy** — These are my best estimates from the screenshot. Can you verify any of these, or should I proceed and we refine later?
2. **Dark mode** — The Figma shows light/dark mode status colours. Should we set up CSS custom property dark mode switching now, or defer and just define all the values?
3. **Semantic vs palette** — Do you want components to reference palette names (`bg-blue-01`) or semantic names (`bg-primary`), or both?