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>

components/tables/README.md

@@ -1,25 +1,51 @@
 # Tables
 
-Specification for the **tables** primitive.
+Dense data display. Default to flat (no zebra striping) with hairline row borders. Reference: `kdctracker/admin.html` (`.card` data tables), `kdcdocs/public/styles.css` (`.kdc-table-head`, `.kdc-row`).
 
 ## Anatomy
-TODO — drop `anatomy.svg` next to this file.
 
-## Variants
-- default
-- (list per-component variants)
+See `anatomy.svg`. Header row · grouped header rows (optional) · data rows · footer summary (optional).
 
-## States
-default · hover · focus-visible · active/pressed · disabled · loading
+## Sizing
+
+| Density | Row height | Cell padding |
+|---------|------------|--------------|
+| `compact` | 36px | `6px 12px` |
+| `default` | 44px | `10px 16px` |
+| `comfortable` | 56px | `14px 20px` |
+
+Drive density with `[data-density="compact|default|comfortable"]` (per the kdcmapper convention).
+
+## Styling
+
+- Header: `text.muted` `caption` uppercase, 600 weight, `surface.subtle` background.
+- Cell text: `bodyM`, `text.default`. Numerics use `tabular-nums` (`.tnum` utility).
+- Row separator: 1px `border.subtle` bottom border. No vertical lines.
+- Hover row: `surface.subtle`, `120ms` transition.
+- Selected row: 2px `brand.primary` left border, `brand.primarySoft` background.
+- Sticky header sits below any toolbar; sticky first column gets a 4px `elevation.2` shadow on right edge when scrolled.
+
+## Cell types
+
+- **Status pill** → `badge.*` variants.
+- **Identifier / code** → `typography.mono` with subtle background `surface.subtle`.
+- **Numeric** → right-aligned, `tabular-nums`.
+- **Action cell** → trailing cell, ghost icon buttons; right-aligned, never wrap.
 
 ## Tokens used
-See `design.md` → `components.tables.*`.
+
+`colors.surface.*`, `colors.border.*`, `typography.bodyM`/`caption`/`mono`, `components.badge.*`.
 
 ## Accessibility
-- All interactive instances are keyboard-reachable.
-- Focus state has ≥ 3:1 contrast against its background.
-- Pair color with an icon or text to convey meaning.
+
+- Use proper `<thead>` / `<tbody>` / `<th scope="col">` / `<th scope="row">`.
+- Sortable columns: button inside `<th>` with `aria-sort="ascending|descending|none"`.
+- Empty state: `role="status"`, single line in `text.muted`.
+- Long tables: pagination or `aria-rowcount` for virtualised lists.
 
 ## Do / Don't
-- ✅ Use the canonical token references.
-- ❌ Don't hardcode colors, sizes, or radii.
+
+- ✅ Use `compact` density for ≥ 50 rows on screen at once.
+- ✅ Right-align numerics and currencies; left-align text and identifiers.
+- ❌ Don't zebra-stripe — it competes with hover and selection.
+- ❌ Don't wrap action buttons; truncate text instead.