---
estimated_steps: 71
estimated_files: 1
skills_used: []
---

# T01: Define dark theme palette and replace all hardcoded colors with CSS custom properties

Replace every hardcoded color in frontend/src/App.css with CSS custom properties. The file has ~1770 lines with ~193 hex color references and ~24 rgba values, zero existing CSS variables.

## Steps

1. Add a `:root` block at the top of App.css (after the reset, before `.app-header`) defining all semantic color tokens. Use the mapping from the research doc:
   - `--color-bg-page: #0f0f14` (near-black page background)
   - `--color-bg-surface: #1a1a24` (card/surface background, replaces #fff in most card contexts)
   - `--color-bg-surface-hover: #22222e` (hover states, replaces #f9fafb, #f3f4f6)
   - `--color-bg-input: #1a1a24` (form input backgrounds, replaces #fff on inputs)
   - `--color-text-primary: #e2e2ea` (primary text, replaces #1a1a2e, #374151)
   - `--color-text-secondary: #8b8b9a` (secondary text, replaces #6b7280)
   - `--color-text-muted: #6b6b7a` (muted text, replaces #9ca3af)
   - `--color-border: #2a2a38` (borders, replaces #e2e2e8, #d1d5db)
   - `--color-accent: #22d3ee` (cyan-400, replaces all #6366f1 indigo)
   - `--color-accent-hover: #67e8f9` (cyan-300, replaces #a5b4fc)
   - `--color-accent-subtle: rgba(34, 211, 238, 0.1)` (replaces rgba(99,102,241,0.1))
   - `--color-accent-focus: rgba(34, 211, 238, 0.15)` (replaces rgba(99,102,241,0.15))
   - `--color-bg-header: #0a0a12` (header background, replaces #1a1a2e on header)
   - `--color-bg-transcript: #12121a` (transcript/code block background, replaces #f9fafb on .detail-transcript)
   - `--color-overlay: rgba(0, 0, 0, 0.6)` (dialog overlay, replaces rgba(0,0,0,0.4))
   - `--color-shadow: rgba(0, 0, 0, 0.2)` (box shadows, replaces rgba(0,0,0,0.04) and similar)
   - `--color-shadow-heavy: rgba(0, 0, 0, 0.4)` (heavier shadow for dialogs)
   - Status badge colors (dark-theme variants preserving semantic meaning):
     - `--color-badge-pending-bg: #422006` / `--color-badge-pending-text: #fcd34d`
     - `--color-badge-approved-bg: #052e16` / `--color-badge-approved-text: #6ee7b7`
     - `--color-badge-edited-bg: #1e1b4b` / `--color-badge-edited-text: #93c5fd`
     - `--color-badge-rejected-bg: #450a0a` / `--color-badge-rejected-text: #fca5a5`
   - Semantic button colors:
     - `--color-btn-approve: #059669` / `--color-btn-approve-hover: #047857`
     - `--color-btn-reject: #dc2626` / `--color-btn-reject-hover: #b91c1c`
   - Mode toggle colors (keep green/amber as-is — they work on dark)
   - Header text: `--color-text-on-header: rgba(255, 255, 255, 0.8)` / `--color-text-on-header-hover: #fff`
   - Active tab/filter: `--color-text-active: #e2e2ea` / `--color-border-active: #22d3ee`
   - Error: `--color-error: #f87171` (replaces #dc2626 for text — needs more contrast on dark)
   - Error bg: `--color-error-bg: #450a0a` / `--color-error-border: #7f1d1d` (replaces #fef2f2/#fecaca)

2. Work through App.css section by section, replacing every hardcoded color with the appropriate `var(--*)` reference:
   - Base: body color and background
   - App header: background, text colors
   - Stats cards: background, border, shadow, label colors, count colors
   - Filter tabs: border, text colors, active state
   - Cards: background, border, shadow, hover border/shadow
   - Queue cards: same as cards plus hover accent
   - Status badges: all four variants
   - Buttons: background, border, text, hover states, approve/reject variants
   - Mode toggle: dot colors, label color, switch colors
   - Pagination: text color
   - Detail page: link colors, field label/value colors, transcript background
   - Form fields: input background, border, text, focus ring
   - Dialogs: overlay, dialog background, shadow, hint text
   - Loading/empty states: text colors
   - Error text
   - PUBLIC PAGES section: all color references for home hero, search, nav cards, technique pages, creators browse, topics browse, creator detail, etc.

3. Handle the `#2d2d4e` color (used 3 times, appears to be a dark variant of header) — map to `--color-bg-header` or a new `--color-bg-header-alt` if distinct.

4. Handle `#555` (used once for `.card p`) — map to `--color-text-secondary`.

5. Handle `.app-header nav a.active` or similar active states — ensure cyan accent is used for active navigation links.

6. Verify the build: `cd frontend && npm run build`. Must succeed with zero errors.

## Must-Haves

- [ ] Every hex color (#xxx) in App.css is replaced with a var(--*) reference
- [ ] Every rgba() color in App.css is replaced with a var(--*) reference
- [ ] :root block defines a complete semantic palette (30+ custom properties)
- [ ] Accent color is cyan (#22d3ee) throughout, replacing all indigo (#6366f1)
- [ ] Status badges use dark-theme variants that remain visually distinct
- [ ] Form input focus rings use cyan accent
- [ ] `npm run build` succeeds in frontend/

## Verification

- `cd frontend && npm run build` exits 0
- `grep -cE '#[0-9a-fA-F]{3,8}' frontend/src/App.css` returns 0 (no remaining hardcoded hex colors)
- `grep -c 'var(--' frontend/src/App.css` returns 190+ (all colors use custom properties)
- `grep -c 'rgba(' frontend/src/App.css` returns 0 outside the :root block (all rgba in var references)

## Inputs

- `frontend/src/App.css` — the single CSS file containing all styling with hardcoded colors

## Expected Output

- `frontend/src/App.css` — fully refactored with :root custom properties and all hardcoded colors replaced

## Inputs

- `frontend/src/App.css`

## Expected Output

- `frontend/src/App.css`

## Verification

cd frontend && npm run build && echo 'Build OK' && echo "Remaining hex colors: $(grep -cE '#[0-9a-fA-F]{3,8}' src/App.css)" && echo "CSS var references: $(grep -c 'var(--' src/App.css)"
