docs: add color migration v5→v6 spec

Maps every color token from old values to new, identifies all migration
layers (CSS vars, hardcoded hex, Tailwind classes, config).

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

docs/superpowers/specs/2026-03-29-color-migration-v6-design.md

@@ -0,0 +1,111 @@
+# Color Migration v5→v6 — Design Spec
+
+> **Date:** 2026-03-29
+> **Status:** Approved
+> **Scope:** Migrate all color values from design system v5 (ember orange accent) to v6 (electric blue accent, cyan info, amber warning, deeper surfaces)
+
+---
+
+## Problem
+
+DESIGN-SYSTEM.md was updated to v6 with new color values, but the actual CSS variables and hardcoded color references in the codebase still use v5 values. The UI still renders with ember orange accent, old surface depths, yellow warnings, and no info color.
+
+## Color Mapping
+
+### Accent (orange → blue)
+
+| Token | v5 (old) | v6 dark | v6 light |
+|-------|----------|---------|----------|
+| accent | #f97316 | #60a5fa | #2563eb |
+| accent-hover | #ea580c | #3b82f6 | #1d4ed8 |
+| accent-dim | rgba(249,115,22,0.10) | rgba(96,165,250,0.10) | rgba(37,99,235,0.07) |
+| accent-text | #fdba74 | #93c5fd | #1d4ed8 |
+| accent-glow | — | rgba(96,165,250,0.15) | rgba(37,99,235,0.10) |
+
+### Surfaces (deeper charcoal)
+
+| Token | v5 (old) | v6 |
+|-------|----------|-----|
+| page | #1a1c23 | #16181f |
+| sidebar | #10121a | #0e1016 |
+| card | #22252e | #1e2028 |
+| card-hover | #282b35 | #252830 |
+| input | #282b35 | #252830 |
+| code | #14161e | #12141a |
+| elevated | #2e3140 | #2a2d38 |
+| surface-raised (NEW) | — | #303442 |
+| border-default | #2e3240 | #2a2e3a |
+
+### Warning (yellow → amber)
+
+| Token | v5 (old) | v6 dark | v6 light |
+|-------|----------|---------|----------|
+| warning | #eab308 | #fbbf24 | #d97706 |
+| warning-dim | rgba(234,179,8,0.10) | rgba(251,191,36,0.10) | rgba(217,119,6,0.07) |
+
+### Info (NEW — cyan)
+
+| Token | v6 dark | v6 light |
+|-------|---------|----------|
+| info | #67e8f9 | #0891b2 |
+| info-dim | rgba(103,232,249,0.10) | rgba(8,145,178,0.07) |
+
+### Semantic (light mode variants added)
+
+| Token | v6 dark (unchanged) | v6 light (new) |
+|-------|---------------------|----------------|
+| success | #34d399 | #059669 |
+| success-dim | rgba(52,211,153,0.10) | rgba(5,150,105,0.07) |
+| danger | #f87171 | #dc2626 |
+| danger-dim | rgba(248,113,113,0.10) | rgba(220,38,38,0.07) |
+
+## Migration Layers
+
+### Layer 1: CSS Custom Properties (`index.css`)
+
+The `@theme` block in `frontend/src/index.css` defines all design tokens. Updating these cascades to ~80% of the codebase automatically via Tailwind utility classes (`bg-accent`, `text-primary`, `border-default`, etc.).
+
+**Changes:** Swap all color values per the mapping above. Add `info` and `info-dim` tokens. Add `surface-raised` token. Add light mode accent/semantic variants.
+
+### Layer 2: Hardcoded Hex Values
+
+Files that bypass CSS variables with inline hex colors:
+- `frontend/src/components/common/BrandLogo.tsx` — logo gradient (`#ea580c`, `#f97316`)
+- `frontend/src/pages/LandingPage.tsx` — inline styles with `#f97316`
+- `frontend/src/constants/categoryColors.ts` — color array with `#ea580c`, `#f97316`
+- `frontend/src/styles/landing.css` (if exists) — orange rgba values in shadows/glows
+- Any component with `rgba(249,115,22,...)` inline
+
+### Layer 3: Tailwind Color Classes
+
+~21 files using `orange-500`, `orange-600`, `orange-400` Tailwind classes. Replace with `blue-400`, `blue-500`, `blue-600` equivalents.
+
+### Layer 4: Configuration
+
+- `frontend/index.html` — `meta theme-color` value
+- Any PWA manifest colors
+
+## File Changes
+
+### Primary
+- `frontend/src/index.css` — CSS custom properties (the big one)
+- `frontend/index.html` — meta theme-color
+
+### Hardcoded Colors
+- `frontend/src/components/common/BrandLogo.tsx` — logo gradient
+- `frontend/src/pages/LandingPage.tsx` — inline styles
+- `frontend/src/constants/categoryColors.ts` — color array
+- Any landing.css / component CSS files with hardcoded orange
+
+### Tailwind Classes (grep for orange-400/500/600)
+- ~21 component files — mechanical find-and-replace
+
+### Warning Yellow
+- Any files with hardcoded `#eab308` — replace with `#fbbf24`
+
+## Out of Scope
+
+- Typography changes (none in v6)
+- Layout/spacing changes (none in v6)
+- Component structure changes (none in v6)
+- Adding the light mode toggle UI (separate feature)