# Theme System

Themes are starting points, not templates. A theme defines the visual climate of the recording surface while leaving chapters free to create content-specific layouts.

## Token Roles

Use semantic CSS variables:

- `--stage-bg`
- `--stage-fg`
- `--muted-fg`
- `--accent`
- `--accent-2`
- `--panel`
- `--line`
- `--shadow`
- `--font-display`
- `--font-body`
- `--radius`
- `--step-duration`

## Starter Theme Policy

The bundled starter themes are intentionally few:

- Use them to create a runnable skeleton.
- Replace colors and type choices when a real brand or product context exists.
- Do not let all chapters become identical; keep typography and color coherent while varying layout and visual devices per chapter.

## Custom Theme Checklist

- Contrast passes for recorded text.
- Accent colors have different semantic jobs.
- Background supports compression without muddy gradients.
- Typography remains readable at 1080p and in lower-resolution reuploads.
- Motion can be reduced without destroying meaning.