feat: design system v1.0.0 — reconcile tokens from cross-repo audit

Extracted real production usage from 8 KDC repos and consolidated the
consensus (kdcsurveyadd / kdcvault / kdc_void_planner) into the canonical
design.md + tokens.

Highlights:
- brand.ink #000000 -> #1A1530 (purple-tinted, matches real usage)
- brand.canvas #F5F4F0 -> #F7F4ED (warm)
- neutral ramp rebuilt around ink (purple-tinted, not cold slate)
- semantic palette retuned for warm canvas + soft tints
- elevation shadows retinted with brand-ink rgb
- new accent.gold (product) and accent.mint (marketing) tokens
- real themes/light, themes/dark, themes/high-contrast
- fleshed out every component + foundation README
- docs/consolidation-2026-05.md captures the full audit + drift inventory

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

foundations/breakpoints/README.md

@@ -1,8 +1,30 @@
 # Foundations · Breakpoints
 
-Reference documentation for the **breakpoints** foundation. The canonical token values
-live in [`../../design.md`](../../design.md) and the machine-readable export
-in [`../../tokens/`](../../tokens/).
+Five mobile-first breakpoints, aligned to Tailwind defaults so utility classes work without remapping.
 
-This page is for human-facing rationale: when to use which token, examples,
-and platform notes.
+| Token | Min width | Use |
+|-------|-----------|-----|
+| `sm`  | 640px     | Larger phone / small tablet |
+| `md`  | 768px     | Tablet portrait |
+| `lg`  | 1024px    | Tablet landscape / small laptop |
+| `xl`  | 1280px    | Standard desktop |
+| `2xl` | 1536px    | Wide desktop |
+
+## App shell behaviour
+
+| Width | Layout |
+|-------|--------|
+| < 768px (`md`) | Sidebar off-canvas (drawer). Top bar collapses to brand + menu icon. |
+| 768–1023px (`md`–`lg`) | Sidebar icon-only (72px). |
+| ≥ 1024px (`lg`) | Sidebar expanded (240px). |
+| ≥ 1280px (`xl`) | Optional right-rail / detail column appears. |
+
+## Container
+
+Max content width is 1200px, centered, with side padding of 16px (mobile) → 24px (tablet) → 32px (desktop).
+
+## Rules
+
+- ✅ Always mobile-first. Stack to single column below `md`; introduce side-by-side at `md`+.
+- ✅ Test the 320px width — that's the floor.
+- ❌ Don't use device-specific breakpoints (iPad, iPhone). Design for content reflow, not specific hardware.