feat(frontend): IMPHNEN design deep integration — full 5-layer redesign

Layer 0 — Foundation:
- Dark mode palette (30+ CSS var pairs in [data-theme='dark'])
- CSS-first theme engine in styles.css (@theme + CSS vars)
- UseTheme hook with light/dark/system support + localStorage persistence
- Fixed animation keyframes (shimmer 1.5s canonical, glowPulse moved to CSS)
- Smooth theme switch transitions via .theme-transitioning class

Layer 1 — Shared UI Components:
- Badge: success/warning variants now use CSS vars (bg-success-soft text-success)
- Toast: rewritten with CSS vars, z-index fixed (40), repositioned top-right
- Skeleton: added variant prop (rounded/circular/rectangular)
- EmptyState: new component with icon + title + description + action
- Button: added tertiary variant + icon-sm size
- Card: added elevated/bordered variants
- Input: added soft variant

Layer 2 — Layout & Navigation:
- TabStrip: new horizontal tab navigation with spring underline indicator (z-30)
- Sidebar: expanded by default (w-64), brand assets always visible
- Header: simplified brand bar, removed redundant page titles, added ThemeToggle
- MobileTabBar: enhanced with spring dot indicator + glass bg + safe area
- DashboardLayout: integrated TabStrip between Header and content
- ParticleBackground: lazy render, skips on mobile/reduced-motion

Layer 3 — Feature Components:
- MessageCard: 30+ hardcoded hex replacements → semantic CSS vars
- MessagesPanel: stat badges use Badge component variants
- DashboardStats: StatCard with variant system (primary/success/warning/destructive)
- UserSummaryList/UserProfileDetail/ChannelProfileDetail: all hardcoded colors → CSS vars
- AudioVisualizer: reads --primary CSS var at paint time
- ActiveSpeakers/RecordingsSubPanel: hardcoded colors → CSS vars

Layer 4 — Polish:
- EmptyState integrated across messages/dashboard/live panels
- Theme toggle wired in Header + App root
- Hover state audit for consistency
- Entry animations verified (cardStagger/cardItem pattern in all panels)

Resolves DESIGN_TOKENS.md §13.x issues: hardcoded colors, shimmer mismatch,
glow-pulse fragmentation, z-index collisions, toast positioning.

services/frontend/DESIGN_TOKENS.md

@@ -633,7 +633,7 @@ Framer Motion `AnimatePresence` and `motion` components (used extensively in Mes
 
 ## 13. Known Issues & Technical Debt
 
-### 13.1 Hardcoded Utility Colors — Not Using CSS Variables
+### 13.1 Hardcoded Utility Colors — Not Using CSS Variables — RESOLVED in redesign (all components migrated to CSS vars)
 
 Several components bypass the OKLCH custom property system and use Tailwind's built-in `emerald-*`, `amber-*`, `red-*`, `blue-*`, `orange-*`, `yellow-*`, `violet-*`, `cyan-*`, `purple-*`, `sky-*`, `pink-*` utility classes directly. These will not respond to theme changes.
 
@@ -692,13 +692,13 @@ const primaryColor = getComputedStyle(document.documentElement)
 // Convert OKLCH to hex or use Canvas oklch() if available
 ```
 
-### 13.4 `glow-pulse` Keyframe Fragmentation
+### 13.4 `glow-pulse` Keyframe Fragmentation — RESOLVED in T02 (moved to styles.css)
 
 The `glowPulse` keyframes are defined in `tailwind.config.js` but NOT in `styles.css`. The class `animate-glow-pulse` is referenced by `ParticleBackground.tsx`. Under Tailwind 4's CSS-first configuration, keyframes should live in the stylesheet. The config-only definition works but is inconsistent with `bar-pulse`, `shimmer`, `fadeInUp`, and `fadeIn` which are in `styles.css`.
 
 **Fix**: Move `@keyframes glowPulse { ... }` into `styles.css`.
 
-### 13.5 `shimmer` Duration Mismatch
+### 13.5 `shimmer` Duration Mismatch — RESOLVED in T02 (CSS canonical at 1.5s)
 
 `styles.css`: `animation: shimmer 1.5s ease-in-out infinite`
 `tailwind.config.js`: `shimmer: "shimmer 2s linear infinite"` (also uses `linear` vs. `ease-in-out`)
@@ -707,13 +707,13 @@ The CSS class `.animate-shimmer` (used by `Skeleton.tsx`) references the CSS-bas
 
 **Fix**: Align both sources. Pick one canonical definition.
 
-### 13.6 Z-Index Scale Not Formalized
+### 13.6 Z-Index Scale Not Formalized — RESOLVED (z-index registry established in layout)
 
 No defined z-index scale or Sass/CSS variables. Values jump from 50 to 9999. The chatbot's `z-[9999]` is brittle — any overlay/modal added later risks overlap issues.
 
 **Fix**: Define z-index custom properties: `--z-header: 10`, `--z-overlay: 50`, `--z-modal: 100`, `--z-toast: 50`, etc.
 
-### 13.7 Toast Container z-index Collision
+### 13.7 Toast Container z-index Collision — RESOLVED in T06 (toast now z-40, positioned top-right)
 
 Toast container (`z-50`) and MobileTabBar (`z-50`) at same z-index. On mobile, toasts could be partially hidden behind the tab bar since toasts use `bottom-4` and the tab bar is `bottom-0`. In practice the toast gap prevents overlap, but this is fragile.
 
@@ -723,6 +723,14 @@ Toast container (`z-50`) and MobileTabBar (`z-50`) at same z-index. On mobile, t
 
 ---
 
+## 14. Dark Mode
+
+Dark mode is driven by `[data-theme="dark"]` CSS custom property overrides in `styles.css`.
+The theme is managed by `useTheme()` hook (`shared/hooks/useTheme.ts`).
+See the full palette in `docs/superpowers/specs/2026-07-02-bete-frontend-redesign-design.md`.
+
+---
+
 ## Appendix: File Map
 
 | Token / Concern            | Canonical Source                             |