# Design tokens & styling

The visual source of truth is the **Equity — Global Tokens (Visual Language)**
design system. Styling is **Tailwind CSS v4**, driven by tokens so the UI stays
faithful and themeable.

## Pipeline

```
Equity Global Tokens  ->  @theme tokens (src/styles.css)  ->  Tailwind utils + CSS vars  ->  components
```

Tokens live in [`src/styles.css`](../src/styles.css) inside Tailwind's `@theme`
block. Tailwind v4 turns each token into **both** a CSS variable
(`var(--color-primary)`) and a utility (`bg-primary`, `text-3`, `leading-2`,
`shadow-1`). Components compose tokens — never hard-coded values.

## Tokens (transcribed from the design system)

### Colour — brand & feedback
| Token | Value |
|-------|-------|
| `primary` / `equity-brown` | `#A32A29` |
| `error` (Red 900) | `#660000` — dark mode `#FF5533` |
| `warning` (Orange 300) | `#F38707` |
| `success` (Green 200) | `#71D128` |

### Colour — greyscale
| Token | Value |
|-------|-------|
| `white` | `#FFFFFF` |
| `pearl` | `#F7F7F7` |
| `grey-300` | `#D3D4D5` |
| `grey-500` | `#929497` |
| `grey-600` | `#757679` |
| `grey-800` | `#3A383C` |
| `grey-900` | `#2C2C2D` |
| `black` | `#221F1F` |

### Semantic roles
Light: surface `#FFFFFF`, canvas `#F7F7F7`, ink `#221F1F`, ink-secondary
`#2C2C2D`, muted `#929497`, border `#D3D4D5`, divider `#757679`.
Dark (`.dark`): surface `#221F1F`, canvas `#2C2C2D`, ink `#FFFFFF`, border
`#3A383C`.

### Typography — Open Sans (400 / 600)
Sizes `text-1..8`: 48 / 32 / 24 / 20 / 16 (base) / 14 / 12 / 8 px.
Line-heights `leading-1..5`: 1.16 / 1.25 / 1.33 / 1.4 / 1.5.
Semantic: Large Header = `text-2` + `leading-2` + 600; Medium Header =
`text-3` + `leading-4` + 600; Small Header = `text-4` + `leading-5` + 600.

### Elevation
`shadow-1` = `0 4 12 rgba(0,0,0,.16)`; `shadow-4/12/24` = `0 8 24 rgba(0,0,0,.20)`.

### Opacity
Opacity steps 100/80/60/40/20% are used to tint utility colours
(equity-brown, black, cool-grey, white). Wire as needed per component.

## ⚠️ Verify against Figma
A few values weren't fully legible from the shared sheets:
- **Dark-mode primary** tint (the light "Equity brown" swatch on dark bg).
- **Radius** and **spacing** scales (not shown on the provided sheets — current
  radius values are provisional).

Because only values change (names are stable), confirming these is a drop-in
edit to `src/styles.css` with no component changes.