docs: allinea CLAUDE.md e i mock design-reference

I mock per pagina erano file HTML senza estensione, mentre CLAUDE.md li
descriveva come cartelle design-reference/pagina-*/ - un path che non
esisteva. Rinominati in pagina-*.html e aggiornati i riferimenti anche in
DESIGN-SYSTEM.md.

CLAUDE.md:
- puntatori corretti dopo il riordino di .planning/ (security/, STATE.md a
  digest, REQUIREMENTS.md come backlog corrente)
- rimosso il paragrafo sui doc superseded: i file non esistono piu
- annotato che i mock sono scritti in slate-* raw perche precedono la
  regola dei token: vanno tradotti, non copiati
- rese esplicite le eccezioni sanzionate alla regola dei token (colori di
  stato di StatusBadge, verde brand della sidebar, HTML delle email)
- vincolo LOCKED #4: annotata l'unica deroga, getClientGate() legge
  getServerSession per l'anteprima admin in sola lettura e solo con
  ?preview=1 (Phase 26). Testo approvato dall'utente

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

CLAUDE.md

@@ -29,7 +29,8 @@ Next.js 16 App Router · Neon Postgres · Drizzle ORM · Auth.js v4 · Tailwind
 1. `clients.token` = campo separato rotatable, MAI primary key
 2. `quote_items` MAI esposti via client API — solo `accepted_total` al cliente
 3. `deliverables.approved_at` immutable once set
-4. Auth: `/client/[token]/*` → middleware token check | `/admin/*` → Auth.js session
+4. Auth: `/client/[token]/*` → middleware token check + gate OTP | `/admin/*` → Auth.js session.
+   **Unica deroga (Phase 26, 2026-08-08):** `getClientGate()` legge anche `getServerSession` per l'anteprima admin in sola lettura, e solo se `?preview=1` è presente. Non estendere questa lettura ad altre route client.
 5. No file hosting v1 — documenti come URL esterni
 
 ## Conventions
@@ -44,11 +45,11 @@ Single source of truth: **`design-reference/DESIGN-SYSTEM.md`** ("Quiet Luxury"
 
 - Cardinal rule: **semantic tokens only** (`bg-card`, `text-muted-foreground`, `border-border`) — never raw Tailwind palette classes or hex literals. That's what makes dual light/dark work off the single `.dark` class toggle (FOUC guard in `src/app/layout.tsx`, tokens in `src/app/globals.css`).
 - Fonts: Plus Jakarta Sans for UI, Geist Mono for numeric/tabular cells (prices, counts, dates).
-- Per-page HTML mocks live in `design-reference/pagina-*/` — replicate them faithfully.
+- Per-page HTML mocks are the files `design-reference/pagina-*.html` (flat files, not folders) — replicate them faithfully. Note the mocks predate the token rule and are written in raw `slate-*`: translate them to semantic tokens, don't copy their classes.
 - Reuse the existing primitives before building new ones: `StatusBadge`, `SearchInput`, `SegmentedToggle`, `editable-cell`, `option-select`/`option-multi-select` in `src/components/ui/`, and the shell in `src/components/admin/AdminShell.tsx`.
-- **`.planning/UI-RULES.md` and `.planning/DESIGN-SYSTEM.md` are SUPERSEDED** — they mandate hex literals and forbid semantic tokens, the exact inverse of the current rule. Don't follow them.
+- Status/semantic colours (lead stages in `StatusBadge`) are the one sanctioned exception to the token rule — they use the Tailwind palette directly, each with an explicit `dark:` variant. So is the sidebar's brand green, and `src/lib/mailer.ts` (email HTML can't use CSS vars).
 
-Other docs: `STATUS.md` (current project status + backlog) · `.planning/STATE.md` (GSD state, milestone v2.3) · `.planning/SECURITY-*.md` (2026-07 audit).
+Other docs: `STATUS.md` — **the single narrative document**: current status, backlog, and the operational lessons worth re-reading · `.planning/STATE.md` (GSD digest, kept under 100 lines, milestone v2.4) · `.planning/REQUIREMENTS.md` (current backlog) · `.planning/security/` (2026-07 audit, closed) · `.planning/milestones/` (closed-milestone archives).
 
 ## GSD Workflow
 Planning in `.planning/`. Use `/gsd-plan-phase N` → `/gsd-execute-phase N`. State in `.planning/STATE.md`.

design-reference/DESIGN-SYSTEM.md

@@ -166,7 +166,7 @@ expandable (`line-clamp-2` → "Mostra tutto/meno"); activity nodes are muted
 ### Admin Dashboard restyle notes
 
 The `/admin` dashboard was migrated to "Quiet Luxury" (applied 2026-07-11),
-replicating `design-reference/pagina-dashboard`. It is a condensed single-screen
+replicating `design-reference/pagina-dashboard.html`. It is a condensed single-screen
 layout: no in-`<main>` `PageHeader` (sidebar + shell header carry the chrome).
 
 - **KPI strip**: 4 `bg-card` metric cards (Clienti Attivi · Contrattualizzato ·
@@ -186,7 +186,7 @@ layout: no in-`<main>` `PageHeader` (sidebar + shell header carry the chrome).
 ### Conversazioni (inbox) notes
 
 `/admin/conversazioni` è l'inbox unificata dei messaggi clienti (replica
-`design-reference/pagina-conversazioni`). Ogni conversazione è **per cliente**:
+`design-reference/pagina-conversazioni.html`). Ogni conversazione è **per cliente**:
 raccoglie tutti i suoi commenti — `general` + quelli su fasi/task/deliverable —
 in un unico thread ordinato, con badge entità per messaggio.
 
@@ -205,7 +205,7 @@ in un unico thread ordinato, con badge entità per messaggio.
 
 ### Clienti (lista) notes
 
-`/admin/clients` migrata a "Quiet Luxury" (replica `design-reference/pagina-clienti`).
+`/admin/clients` migrata a "Quiet Luxury" (replica `design-reference/pagina-clienti.html`).
 Tabella `bg-card rounded-xl border-border shadow-card` con header uppercase muted e
 righe `py-4 px-6` / `divide-y divide-border` / `hover:bg-muted/40`.
 
@@ -222,7 +222,7 @@ righe `py-4 px-6` / `divide-y divide-border` / `hover:bg-muted/40`.
 
 ### Offerte (lista) notes
 
-`/admin/offers` migrata a "Quiet Luxury" (replica `design-reference/pagina-offerte`).
+`/admin/offers` migrata a "Quiet Luxury" (replica `design-reference/pagina-offerte.html`).
 Griglia responsive di card `bg-card rounded-xl border-border p-6 shadow-card`
 (`hover:shadow-card-hover`), `md:grid-cols-2 lg:grid-cols-3`.
 
@@ -241,7 +241,7 @@ Griglia responsive di card `bg-card rounded-xl border-border p-6 shadow-card`
 
 ### Catalogo (griglia servizi) notes
 
-`/admin/catalog` migrata a "Quiet Luxury" (replica `design-reference/pagina-catalogo`).
+`/admin/catalog` migrata a "Quiet Luxury" (replica `design-reference/pagina-catalogo.html`).
 È una griglia editabile in stile foglio di calcolo: `ServiceTable` in un contenitore
 `bg-card rounded-xl border-border shadow-card overflow-hidden`, header uppercase muted
 (`text-[11px] font-semibold uppercase tracking-wider text-muted-foreground`, `bg-muted/50`),
@@ -265,7 +265,7 @@ righe `hover:bg-muted/40` / `divide` via `border-border`.
 
 ### Preventivi (lista) notes
 
-`/admin/preventivi` migrata a "Quiet Luxury" (replica `design-reference/pagina-preventivi`).
+`/admin/preventivi` migrata a "Quiet Luxury" (replica `design-reference/pagina-preventivi.html`).
 Tabella in contenitore `bg-card rounded-xl border-border shadow-card overflow-hidden`, header
 uppercase muted (`bg-muted/50`, `text-[11px] font-semibold uppercase tracking-wider`), righe
 `hover:bg-muted/40` con `divide-y divide-border`.
@@ -284,7 +284,7 @@ uppercase muted (`bg-muted/50`, `text-[11px] font-semibold uppercase tracking-wi
 
 ### Progetti (lista) notes
 
-`/admin/projects` migrata a "Quiet Luxury" (replica `design-reference/pagina-progetti`).
+`/admin/projects` migrata a "Quiet Luxury" (replica `design-reference/pagina-progetti.html`).
 Stesso contenitore tabella di Preventivi (`bg-card rounded-xl border-border shadow-card`,
 header `bg-muted/50` uppercase muted, righe `hover:bg-muted/40` + `divide-y divide-border`).
 
@@ -305,7 +305,7 @@ header `bg-muted/50` uppercase muted, righe `hover:bg-muted/40` + `divide-y divi
 
 ### Impostazioni notes
 
-`/admin/impostazioni` migrata a "Quiet Luxury" (replica `design-reference/pagina-impostazioni`).
+`/admin/impostazioni` migrata a "Quiet Luxury" (replica `design-reference/pagina-impostazioni.html`).
 Pagina a sezioni impilate (`space-y-8`), ogni sezione è una card
 `rounded-xl border-border-light bg-card shadow-card p-6`.