docs(design): document design tokens + component inventory

[samutpra]

What

Formalizes the live calm-corporate design system into reference docs, and fixes stale token values in CLAUDE.md.

All values are read from the source of truth — src/index.css (CSS custom properties) + tailwind.config.js — not invented or copied from a template.

Changes

• 🆕 .planning/design/system/tokens.md — full token reference:

  • Light and dark theme, all semantic roles (HSL canonical + hex computed)
  • Status accents (success/warning/info), special tokens (zebra striping, per-BU chip identity)
  • Typography, spacing, radius, shadows, breakpoints, motion, WCAG AA contrast notes

• 🆕 .planning/design/system/components.md — inventory of 41 live components (21 shadcn primitives + 20 app-level), grouped into 7 categories, with a component→page-pattern map

• ✏️ CLAUDE.md — "Styling Reference" was stale after the calm-corporate reskin (PR feat(design): calm-corporate whole-app reskin (tokens + primitives + shell) #38). Corrected:

  Token	Was (stale)	Now (actual)
  --radius	0.375rem	0.5rem
  --accent	220 14% 96%	40 8% 94%
  --destructive	0 84% 60%	0 72% 51%
  --muted-foreground	220 10% 46%	33 5% 43%
  --border / --input	220 15% 90%	40 8% 90% / 40 8% 87%

  Palette shifted from cool hue 220 → warm hue 30–40 during the reskin; the reference now matches and links to tokens.md.

Notes

• Docs only — no runtime/app code touched, no dependency changes.
• Source-of-truth discipline: the docs mirror index.css/tailwind.config.js and must be kept in sync when those change (stated in the docs themselves).

🤖 Generated with Claude Code