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/widgets/Header.tsx

@@ -1,122 +1,131 @@
-import { motion } from "framer-motion";
-import { Wifi, WifiOff } from "lucide-react";
-import type { DashboardTab } from "../entities/ui/types.js";
+import { Moon, Shield, ShieldOff, Sun, Wifi, WifiOff } from "lucide-react";
 import type { VoiceStatus } from "../entities/voice/types.js";
-import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
+import { useTheme } from "../shared/hooks/useTheme";
 import { cn } from "../shared/lib/utils";
 import { Badge } from "../shared/ui";
 import type { WsStatus } from "../shared/ws/socket";
 
-const titles: Record<DashboardTab, string> = {
-  messages: "Messages & Moderation",
-  live: "Voice & Media",
-  dashboard: "Dashboard",
-};
+/* ─── Theme Toggle ─────────────────────────────────────────────────────── */
+function ThemeToggle() {
+  const { resolvedTheme, toggle } = useTheme();
+  return (
+    <button
+      onClick={toggle}
+      className="rounded-lg p-2 text-[#666666] hover:bg-[#f0f0f0] hover:text-[#1a1a1a] transition-colors duration-150"
+      aria-label="Toggle theme"
+    >
+      {resolvedTheme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </button>
+  );
+}
 
-const subtitles: Record<DashboardTab, string> = {
-  messages: "Capture, analyse, and moderate Discord messages.",
-  live: "Join voice channels, play media, stream audio, and browse recordings.",
-  dashboard: "Server statistics, user profiles, and AI moderation overview.",
-};
+/* ─── WS Indicator ─────────────────────────────────────────────────────── */
+function WsIndicator({ status }: { status: WsStatus }) {
+  const isConnected = status === "connected";
+  return (
+    <div className="flex items-center gap-1.5">
+      {isConnected ? (
+        <Wifi className="h-3 w-3 text-[#22c55e]" />
+      ) : (
+        <WifiOff className="h-3 w-3 text-[#e4405f]" />
+      )}
+      <span
+        className={cn(
+          "text-xs font-medium",
+          isConnected ? "text-[#22c55e]" : "text-[#e4405f]",
+        )}
+      >
+        {status === "connected"
+          ? "Online"
+          : status === "connecting"
+            ? "Nyambung..."
+            : status === "error"
+              ? "Error"
+              : "Putus"}
+      </span>
+    </div>
+  );
+}
 
+/* ─── Voice Indicator ──────────────────────────────────────────────────── */
+function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
+  const isConnected = voiceStatus.connected;
+  return (
+    <div className="flex items-center gap-1.5">
+      {isConnected ? (
+        <Shield className="h-3 w-3 text-[#23a1eb]" />
+      ) : (
+        <ShieldOff className="h-3 w-3 text-[#999999]" />
+      )}
+      <span
+        className={cn(
+          "text-xs font-medium",
+          isConnected ? "text-[#23a1eb]" : "text-[#999999]",
+        )}
+      >
+        {isConnected
+          ? voiceStatus.activeChannelName || "Tersambung"
+          : "Siaga"}
+      </span>
+    </div>
+  );
+}
+
+/* ─── Main Header ──────────────────────────────────────────────────────── */
 interface HeaderProps {
-  activeTab: DashboardTab;
   wsStatus: WsStatus;
   voiceStatus: VoiceStatus;
 }
 
-/** Dot indicator colour for WS badge */
-function wsDotColor(status: WsStatus): string {
-  switch (status) {
-    case "connected":
-      return "bg-emerald-400";
-    case "error":
-      return "bg-red-400";
-    case "connecting":
-    case "disconnected":
-      return "bg-gray-400";
-  }
-}
-
-function WsIndicator({ status }: { status: WsStatus }) {
-  const dot = wsDotColor(status);
+export function Header({ wsStatus, voiceStatus }: HeaderProps) {
   return (
-    <div className="flex items-center gap-1.5">
-      <span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
-      <span className="text-xs font-medium capitalize">{status}</span>
-    </div>
-  );
-}
+    <header className="sticky top-0 z-10 border-b border-[#e0e0e0]/50 bg-white/70 backdrop-blur-md px-4 py-3">
+      <div className="mx-auto flex max-w-[1280px] items-center justify-between">
+        {/* ── Left: Logo + Brand ──────────────────────────────────────── */}
+        <div className="flex items-center gap-3">
+          <img
+            src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
+            alt="IMPHNEN"
+            className="h-8 w-8"
+          />
+          <h1 className="font-sans text-lg font-bold tracking-tight text-[#1a1a1a]">
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#23a1eb] to-[#1877f2]">
+              IMPHNEN
+            </span>
+            <span className="mx-1.5 text-[#666666]">·</span>
+            <span className="font-semibold text-[#666666]">
+              Guild Watcher
+            </span>
+          </h1>
+        </div>
 
-/** Voice status indicator dot */
-function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
-  const isConnected = voiceStatus.connected;
-  const dot = isConnected ? "bg-primary" : "bg-gray-300";
-  const label = isConnected
-    ? voiceStatus.activeChannelName || "connected"
-    : "idle";
-  return (
-    <div className="flex items-center gap-1.5">
-      <span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
-      <span className="text-xs font-medium">{label}</span>
-    </div>
-  );
-}
-
-export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
-  return (
-    <header className="sticky top-0 z-10 border-b border-border/50 bg-background/70 px-4 py-4 backdrop-blur-sm md:px-8">
-      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        {/* Left: IMPHNEN brand + tab title */}
-        <motion.div
-          key={activeTab}
-          variants={fadeSlideUp}
-          initial="initial"
-          animate="animate"
-          className="flex items-center gap-3"
-        >
-          <div className="flex items-center gap-3">
-            <img
-              src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
-              alt="IMPHNEN"
-              className="h-7 w-7"
-            />
-            <h1 className="text-xl font-bold tracking-tight">
-              <span className="gradient-text">IMPHNEN</span>
-              <span className="mx-2 text-muted-foreground">·</span>
-              {titles[activeTab]}
-            </h1>
-          </div>
-          <p className="text-sm text-muted-foreground hidden md:block">
-            {subtitles[activeTab]}
-          </p>
-        </motion.div>
-
-        {/* Right: status badges */}
-        <div className="flex flex-wrap items-center gap-2">
-          {/* WS Badge */}
-          <Badge
-            variant="outline"
-            className="border-border bg-card/50 px-3 py-1.5 text-xs text-muted-foreground"
-          >
-            {wsStatus === "connected" ? (
-              <Wifi className="mr-1.5 h-3 w-3 text-emerald-400" />
-            ) : (
-              <WifiOff className="mr-1.5 h-3 w-3 text-red-400" />
-            )}
-            <WsIndicator status={wsStatus} />
-          </Badge>
-
-          {/* Voice Badge */}
+        {/* ── Right: Status + Theme ──────────────────────────────────── */}
+        <div className="flex items-center gap-2">
           <Badge
             variant="outline"
             className={cn(
-              "border-border bg-card/50 px-3 py-1.5 text-xs",
-              voiceStatus.connected ? "text-primary" : "text-muted-foreground",
+              "border-[#e0e0e0] bg-white/50 px-2.5 py-1 text-xs",
+              wsStatus === "connected"
+                ? "text-[#22c55e]"
+                : wsStatus === "error"
+                  ? "text-[#e4405f]"
+                  : "text-[#999999]",
+            )}
+          >
+            <WsIndicator status={wsStatus} />
+          </Badge>
+
+          <Badge
+            variant="outline"
+            className={cn(
+              "border-[#e0e0e0] bg-white/50 px-2.5 py-1 text-xs",
+              voiceStatus.connected ? "text-[#23a1eb]" : "text-[#666666]",
             )}
           >
             <VoiceIndicator voiceStatus={voiceStatus} />
           </Badge>
+
+          <ThemeToggle />
         </div>
       </div>
     </header>