Add Input, Checkbox, Radio, and Switch form components with semantic token layer

Build four form primitives from Figma references with brand-aligned creative
decisions: restrained press states (scale-95 instead of highlight splashes),
clean iconless Switch, and consistent error states with inline warning icons.

Introduce form-control semantic tokens (--color-control-*) in tokens.css so
all form components share a single source for borders, checked states, focus
rings, labels, and errors. Retrofit Input to use these tokens instead of
direct palette references.

Update CLAUDE.md and ARCHITECTURE.md with token layer documentation, token
discipline rule (no palette references in components), and component tier
decision criteria.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -45,8 +45,24 @@ All design tokens live in `src/tokens/tokens.css` as a `@theme` block. This is t
 
 Use Tailwind utilities (`bg-primary`, `text-error`, `rounded-default`, etc.) or CSS variables (`var(--color-primary)`) when utilities don't cover the case.
 
-Token naming convention:
+### Token Layers
+
+Tokens are organised in three layers, from raw to consumable:
+
+1. **Palette** — raw colour values: `--color-blue-01`, `--color-grey-03`, etc. Never reference these directly in components.
+2. **Semantic** — purpose-based aliases: `--color-primary`, `--color-error`, `--color-text`, etc. Use these for general UI.
+3. **Form control** — shared interactive-state tokens for all form components (Input, Checkbox, Radio, Switch, Select, etc.):
+   - `--color-control-border` / `--color-control-border-hover`
+   - `--color-control-checked` / `--color-control-checked-hover`
+   - `--color-control-focus-ring`
+   - `--color-control-label` / `--color-control-description` / `--color-control-error`
+   - `--color-control-bg` / `--color-control-bg-readonly`
+
+**Rule**: Components must reference semantic or form-control tokens, not palette tokens. If you need a colour that has no semantic token, add one — don't reach for the palette directly.
+
+### Token Naming Convention
 - Colours: `--color-{name}` (e.g., `--color-primary`, `--color-text-secondary`)
+- Form controls: `--color-control-{role}` (e.g., `--color-control-border`, `--color-control-checked`)
 - Radii: `--radius-{size}` (e.g., `--radius-default`, `--radius-lg`)
 - Shadows: `--shadow-{size}` (e.g., `--shadow-default`, `--shadow-md`)
 
@@ -78,6 +94,7 @@ src/components/ui/Button/
 - Use the `cn()` utility from `@/lib/utils` for conditional classes.
 - Never use inline styles except for truly dynamic values.
 - Never use CSS modules or styled-components.
+- **Token discipline**: Reference semantic or form-control tokens (`text-control-label`, `border-control-border`), never palette tokens (`text-blue-01`, `border-grey-03`) in component code. If the right semantic token doesn't exist, add one to `tokens.css` first.
 
 ### Stories
 - Every component MUST have a Storybook story file.