docs(01-01): complete design token foundation plan

- Add 01-01-SUMMARY.md with full task record and decisions
- Update STATE.md with progress, decisions, and session info (50% phase complete)
- Update ROADMAP.md plan progress (phase 1: 1/2 plans done)
- Mark DSGN-01, DSGN-02, DSGN-05 requirements complete

.planning/phases/01-design-token-foundation/01-01-SUMMARY.md

@@ -0,0 +1,109 @@
+---
+phase: 01-design-token-foundation
+plan: 01
+subsystem: frontend/design-tokens
+tags: [css-variables, oklch, tailwind, palette, vitest, tdd]
+dependency_graph:
+  requires: []
+  provides:
+    - pastel oklch CSS variable system in index.css
+    - palette.ts typed category color module
+    - vitest test infrastructure
+  affects:
+    - frontend/src/index.css
+    - frontend/src/lib/palette.ts
+    - All future component visual work in Plan 02
+tech_stack:
+  added:
+    - vitest@4.0.18
+    - "@testing-library/react@16.3.2"
+    - "@testing-library/jest-dom@6.9.1"
+    - "@testing-library/user-event@14.6.1"
+    - jsdom@28.1.0
+  patterns:
+    - oklch pastel color tokens with non-zero chroma in :root
+    - Single-source-of-truth palette module with typed exports
+    - TDD with vitest globals and jsdom environment
+key_files:
+  created:
+    - frontend/src/lib/palette.ts
+    - frontend/src/lib/palette.test.ts
+    - frontend/src/test-setup.ts
+  modified:
+    - frontend/src/index.css
+    - frontend/vite.config.ts
+    - frontend/package.json
+decisions:
+  - "oklch pastel tokens replace all zero-chroma neutrals in :root (--card and --popover remain pure white as locked)"
+  - "--success (oklch 0.55 0.15 145) and --warning (oklch 0.70 0.14 75) semantic tokens added to :root and registered in @theme inline"
+  - "--chart-1 through --chart-5 values synced with palette.ts base colors for bill, variable_expense, debt, saving, investment categories"
+  - "palette.ts exports amountColorClass() with isIncome/isAvailable path (positive=text-success, negative=text-destructive) and expense path (over-budget=text-warning)"
+metrics:
+  duration: "~4 minutes"
+  completed_date: "2026-03-11"
+  tasks_completed: 3
+  files_created: 3
+  files_modified: 3
+---
+
+# Phase 1 Plan 01: Design Token Foundation Summary
+
+Pastel oklch CSS variable system and palette.ts module established as the foundation layer for all subsequent visual work, with vitest test infrastructure installed and 20 unit tests passing.
+
+## Tasks Completed
+
+| Task | Name | Commit | Files |
+|------|------|--------|-------|
+| 1 | Install test infrastructure and set up vitest | cbf3552 | frontend/package.json, frontend/vite.config.ts, frontend/src/test-setup.ts |
+| 2 | Replace CSS tokens with pastel oklch values and add success/warning tokens | 3f97d07 | frontend/src/index.css |
+| 3 | Create palette.ts and palette.test.ts (TDD) | d5fc10d (RED), 6859b30 (GREEN) | frontend/src/lib/palette.ts, frontend/src/lib/palette.test.ts |
+
+## What Was Built
+
+**Pastel CSS variable system (`frontend/src/index.css`):**
+- All `:root` tokens now use oklch values with non-zero chroma (lavender tint, hue ~280-290) except for the intentionally pure-white `--card` and `--popover`
+- `--chart-1` through `--chart-5` mapped to category base colors (bill=blue 250, variable_expense=amber 85, debt=rose 15, saving=violet 280, investment=pink 320)
+- New `--success` (green 145) and `--warning` (amber 75) semantic tokens in `:root`
+- `--color-success` and `--color-warning` registered in `@theme inline` enabling Tailwind utilities `text-success`, `text-warning`
+
+**Typed palette module (`frontend/src/lib/palette.ts`):**
+- `CategoryType` union: income | bill | variable_expense | debt | saving | investment | carryover
+- `CategoryShades` interface with light/medium/base oklch strings
+- `palette` Record — single source of truth, base colors match CSS chart tokens
+- `headerGradient(type)` — returns `React.CSSProperties` with `linear-gradient(to right, light, medium)`
+- `overviewHeaderGradient()` — multi-stop gradient (carryover.light → saving.light → income.light)
+- `amountColorClass(opts)` — returns `text-success`/`text-warning`/`text-destructive`/`''` per locked rules
+
+**Test infrastructure:**
+- vitest 4.0.18 with jsdom environment and globals
+- `test-setup.ts` imports `@testing-library/jest-dom` matchers
+- 20 unit tests covering all exports and edge cases — all passing
+
+## Decisions Made
+
+1. `--card` and `--popover` intentionally remain `oklch(1 0 0)` (pure white) per locked design decision — cards float visually on the tinted background
+2. `--success-foreground` and `--warning-foreground` use near-white `oklch(0.99 0 0)` — neutral foreground on colored semantic backgrounds is correct and intentional
+3. Sidebar tokens use slightly deeper lavender (hue 280, chroma 0.01-0.02) vs background (hue 290, chroma 0.005) for subtle visual distinction
+4. `overviewHeaderGradient()` uses carryover/saving/income lights (sky→lavender→green) for the FinancialOverview header identity
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Self-Check
+
+### Files Exist
+
+- frontend/src/lib/palette.ts: FOUND
+- frontend/src/lib/palette.test.ts: FOUND
+- frontend/src/test-setup.ts: FOUND
+- frontend/src/index.css: FOUND (modified)
+
+### Commits Exist
+
+- cbf3552 (Task 1): FOUND
+- 3f97d07 (Task 2): FOUND
+- d5fc10d (Task 3 RED): FOUND
+- 6859b30 (Task 3 GREEN): FOUND
+
+## Self-Check: PASSED