# Design UI CHLOVA

Style **Dark Mode (OLED) — HUD "Jarvis-red"**. Sombre, contraste élevé, glow
minimal sur l'accent. Grounded via le skill UI/UX (dark ops dashboard).

## Tokens (`web/src/index.css`, `@theme`)
| Rôle | Hex | Usage |
|---|---|---|
| bg | `#020617` | fond |
| surface / surface-2 | `#0F172A` / `#1E293B` | cartes, barres |
| border | `#334155` | séparateurs |
| fg / muted | `#F8FAFC` / `#94A3B8` | texte / secondaire |
| **accent** | `#FF3B3B` | identité, action primaire (glow HUD) |
| accent-dim / danger | `#B91C1C` | destructif (toujours + icône + confirm) |
| success / warning | `#22C55E` / `#F59E0B` | statuts |

Polices : **Fira Sans** (corps) + **Fira Code** (data/mono).

## Règles
- Accent rouge = identité ET action primaire ; le destructif (`#B91C1C`) est plus
  sombre **et** accompagné d'icône + confirmation (la couleur n'est pas le seul
  indicateur — a11y).
- Contraste AA min 4.5:1 ; focus visible (`.ring-accent`) ; `prefers-reduced-motion`
  respecté ; cibles tactiles ≥ 44px.
- Pas d'emoji comme icône (SVG/Lucide à venir). Transitions 150–300ms.

## Stack
React 19 + Vite 8 + Tailwind 4 (`@theme`) + react-router 7, PWA (installable).
SPA servi same-origin par le backend en prod ; proxy `/api` en dev.