# Design System — "Bold & Vivid"

The site's look and feel. Everything lives in one stylesheet:
**`public/assets/css/app.css`**. Build new pages from these tokens and
components rather than one-off inline styles, so the brand stays consistent.

## Tokens (CSS custom properties)

**Color**
| Token | Value | Use |
|-------|-------|-----|
| `--ink` | `#0C0A12` | page ground (violet-biased near-black) |
| `--ink-2` | `#100D18` | alternating section background |
| `--surface` | `#191322` | cards |
| `--surface-2` | `#241B31` | raised / hover / inputs |
| `--line` / `--line-2` | white @ 9% / 16% | hairline borders |
| `--paper` | `#F6F4FA` | primary text |
| `--muted` / `--faint` | `#A29CB4` / `#6E6880` | secondary / tertiary text |
| `--hot` | `#FF3D6E` | **primary accent** — hot pink-red |
| `--volt` | `#ECFF4C` | **secondary accent** — acid yellow |
| `--grad` | hot → orange → volt | energy moments (hero word, waveforms) |
| `--good` / `--warn` | `#37D98A` / `#FFB84D` | semantic only — never as brand accent |

**Type** — three deliberate roles:
- `--font-display` → **Archivo Black** (self-hosted, `assets/fonts/archivo-black.woff2`). Big, uppercase, tight tracking. Used via `.display`, `h2.big`, headings.
- `--font-body` → system humanist sans. Readable copy.
- `--font-mono` → system monospace. All "studio data": credit costs, timecodes, tags, labels, filenames. This is a signature of the identity — keep using it for anything numeric/technical.

## Core components

- **Layout:** `.wrap` (max 1140px), `.section` (vertical rhythm), `.main-narrow` (auth), `.main-wide` (dashboards).
- **Buttons:** `.btn` + `.btn--hot` (primary), `.btn--volt` (accent), `.btn--ghost`; modifiers `.btn--sm`, `.btn--block`.
- **Forms:** wrap each control in `.field` (mono `<label>` + input); errors use `.flash.flash--err`, success `.flash.flash--ok`.
- **Cards:** `.card` (surface panel), `.vcard` (voice card w/ play + mini-waveform), `.step` (how-it-works), `.stat__label`/`.stat__value` (dashboard numbers).
- **Bits:** `.eyebrow` (mono kicker w/ hot dash), `.pill` / `.pill--volt` (tags), `.grad-text` (gradient headline word).

## Motion

`public/assets/js/wave.js` (progressive enhancement, loaded only where needed):
- Animated hero waveform on `<canvas id="wave">` — pauses when off-screen or the tab is hidden.
- Static deterministic mini-waveforms on any `[data-wave]` element.
- `.reveal` entrance fade — content is visible by default and only hidden once
  the `js` class is on `<html>`, so nothing disappears if JS fails.
- Everything respects `prefers-reduced-motion`.

## Page shell

`src/layout.php` provides `page_header()` / `page_footer()` (client) and
`admin_page_header()` (admin, darker nav + volt "Admin" tag). They link the
stylesheet and render the branded nav + footer. Pass
`page_footer(['scripts' => ['/assets/js/wave.js']])` to include page JS.
