# Design

Derived from the shipped `src/index.css` (single stylesheet, plain CSS, no framework). Describes what
exists, not an aspiration. Update in the same commit as visual changes.

## Foundations

- **Theme:** dark only. `:root` sets `color: #e8e8e8; background-color: #16181d` (also the PWA
  `theme_color`). `color-scheme: light dark` is declared but there is no light palette.
- **Tokens (`:root`):** `--panel #1f232b` · `--border #343a46` · `--accent #7aa2f7` · `--muted #9aa3b2`.
  Everything else is a hard-coded hex.
- **Semantic colours in use (hard-coded):** success/ready text `#9ad6ae` (bg `#1d2b23`, border `#3d6b4f`);
  error text `#f2b8b5` (bg `#2a1c1e`, border `#8b3a3a`); live/recording `#e0605e`; raised surfaces
  `#262b34` / `#232a38`.
- **Type:** `Inter, system-ui, …` stack — Inter is not loaded, so it renders in the system font unless
  installed locally. Body line-height 1.5; `h1` 2.2rem / 1.15. Any webfont must be self-hosted (COEP,
  see AGENTS.md).
- **Layout:** single centred column, `.app { max-width: 720px; padding: 2.5rem 1.25rem 3rem; gap: 1.5rem }`,
  `body { min-width: 320px }`.
- **Radius:** 8px for controls (most common); 10–14px for panels/cards; 999px for pills/badges.
- **Motion:** `0.15s` colour/border transitions; `pulse` (live dot) and `blink` (cursor) animations,
  disabled under `prefers-reduced-motion`.

## Components

One BEM-ish class block per React component in `src/components/` (`.model-picker`, `.dropzone`,
`.live-controls`, `.engine-toggle`, `.auth-panel`, `.update-toast`, …), with modifier classes like
`-selected`, `-active`, `-disabled`. Interactive states use `:hover:enabled` and `:focus-visible`.
`.visually-hidden` exists for screen-reader-only text.

TODO(maintainer): confirm whether the dark-only theme is intentional, and whether hard-coded semantic
colours should become tokens.