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/src/features/dashboard/components/DashboardStats.tsx

@@ -66,22 +66,22 @@ export function DashboardStatsContent() {
       title: "Today's Messages",
       value: stats.today_messages.toLocaleString(),
       icon: MessageSquare,
-      color: "text-emerald-500",
-      bg: "bg-emerald-100",
+      color: "text-success",
+      bg: "bg-success-soft",
     },
     {
       title: "Total Users",
       value: stats.total_users.toLocaleString(),
       icon: Users,
-      color: "text-blue-500",
-      bg: "bg-blue-100",
+      color: "text-primary",
+      bg: "bg-primary-soft",
     },
     {
       title: "Active Users (24h)",
       value: stats.active_users_24h.toLocaleString(),
       icon: UserCheck,
-      color: "text-violet-500",
-      bg: "bg-violet-100",
+      color: "text-tertiary",
+      bg: "bg-tertiary-soft",
     },
     {
       title: "Flagged",
@@ -94,23 +94,23 @@ export function DashboardStatsContent() {
       title: "Clean",
       value: stats.total_clean.toLocaleString(),
       icon: ShieldAlert,
-      color: "text-emerald-600",
-      bg: "bg-emerald-100",
+      color: "text-success",
+      bg: "bg-success-soft",
     },
     {
       title: "Voice Recordings",
       value: stats.total_voice_recordings.toLocaleString(),
       icon: Mic,
-      color: "text-cyan-500",
-      bg: "bg-cyan-100",
+      color: "text-info",
+      bg: "bg-info-soft",
       onClick: () => patchUIState({ activeTab: "live" }),
     },
     {
       title: "AI Profiles",
       value: stats.total_profiles.toLocaleString(),
       icon: Users,
-      color: "text-amber-500",
-      bg: "bg-amber-100",
+      color: "text-warning",
+      bg: "bg-warning-soft",
     },
   ];
 
@@ -207,7 +207,7 @@ export function DashboardStatsContent() {
                 <p className="text-xs text-muted-foreground mt-1">Pending</p>
               </div>
               <div className="rounded-xl border border-border bg-card p-4 text-center">
-                <p className="text-2xl font-bold text-amber-500">
+                <p className="text-2xl font-bold text-warning">
                   {stats.moderation_overview.processing}
                 </p>
                 <p className="text-xs text-muted-foreground mt-1">Processing</p>