feat(ui): overhaul frontend with IMPHNEN visual identity

- Update CSS foundation: HSL→oklch color tokens, Poppins font, new utilities
- Replace Three.js sakura particles with CSS glow orbs
- Rebrand Header with IMPHNEN logo and gradient text
- Update all UI components (Button, Card, Badge, Input, Select, Tabs, Toast)
- Apply IMPHNEN design patterns (glass, gradient, grid) to layout
- Remove all hardcoded #7EC8E3/#FFB7C5/#FCA5A5 references
- Standardize rounded-xl across all components
- Replace emoji toasts with Lucide icons

Co-Authored-By: Claude <noreply@anthropic.com>

services/frontend/src/features/live/components/ActiveSpeakers.tsx

@@ -18,12 +18,12 @@ export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
         return (
           <div
             key={key}
-            className="flex items-center gap-3 rounded-xl border border-sky-200 bg-white p-3"
+            className="flex items-center gap-3 rounded-xl border border-border bg-card p-3"
           >
             <img
               src={s.avatar}
               alt=""
-              className="h-8 w-8 rounded-full object-cover ring-2 ring-[#7EC8E3]/40"
+              className="h-8 w-8 rounded-full object-cover ring-2 ring-primary/30"
             />
             <div className="min-w-0">
               <div className="truncate text-sm font-medium">{s.username}</div>

services/frontend/src/features/live/components/AudioVisualizer.tsx

@@ -21,10 +21,10 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
     const barWidth = width / levels.length;
     const maxBarHeight = height * 0.85;
 
-    // Sky-blue to pink gradient
+    // IMPHNEN blue gradient
     const gradient = ctx.createLinearGradient(0, 0, 0, height);
-    gradient.addColorStop(0, "#7EC8E3");
-    gradient.addColorStop(1, "#FFB7C5");
+    gradient.addColorStop(0, "#23a1eb");
+    gradient.addColorStop(1, "#3eb0f2");
 
     for (let i = 0; i < levels.length; i++) {
       const level = levels[i];
@@ -54,7 +54,7 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
         ref={canvasRef}
         width={512}
         height={128}
-        className="w-full rounded-xl bg-sky-50/30"
+        className="w-full rounded-lg bg-primary/5"
         style={{ height: "128px" }}
       />
     </div>

services/frontend/src/features/live/components/MusicSubPanel.tsx

@@ -43,7 +43,7 @@ export function MusicSubPanel({
   };
 
   return (
-    <div className="rounded-2xl border border-sky-200 bg-white p-4 shadow-md space-y-4">
+    <div className="rounded-xl border border-border bg-card p-4 shadow-sm space-y-4">
       <Input
         value={source}
         onChange={(e) => setSource(e.target.value)}
@@ -51,7 +51,7 @@ export function MusicSubPanel({
         placeholder="YouTube URL, Spotify track, or search terms"
       />
       <div className="flex items-center gap-3">
-        <Volume2 className="h-4 w-4 shrink-0 text-[#7EC8E3]" />
+        <Volume2 className="h-4 w-4 shrink-0 text-primary" />
         <input
           type="range"
           min={0}
@@ -59,18 +59,14 @@ export function MusicSubPanel({
           step={1}
           value={draftVolume}
           onChange={(e) => setDraftVolume(Number(e.target.value))}
-          className="h-2 w-full cursor-pointer accent-[#7EC8E3]"
+          className="h-2 w-full cursor-pointer accent-primary"
         />
         <span className="w-10 shrink-0 text-right text-sm tabular-nums text-muted-foreground">
           {draftVolume}%
         </span>
       </div>
       <div className="flex flex-wrap gap-2">
-        <Button
-          className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
-          disabled={loading || !source.trim()}
-          onClick={submit}
-        >
+        <Button disabled={loading || !source.trim()} onClick={submit}>
           <Music2 className="mr-1.5 h-4 w-4" /> Queue
         </Button>
         <Button variant="secondary" disabled={loading} onClick={onSkip}>

services/frontend/src/features/live/components/NowPlaying.tsx

@@ -11,10 +11,10 @@ export function NowPlaying({ current, queue }: NowPlayingProps) {
   if (!current) return null;
 
   return (
-    <div className="rounded-2xl border border-sky-200 bg-white shadow-md">
+    <div className="rounded-xl border border-border bg-card shadow-sm">
       <div className="p-4">
         <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#7EC8E3]/15 text-[#7EC8E3]">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
             {current.mode === "screen" ? (
               <MonitorUp className="h-5 w-5" />
             ) : (
@@ -34,15 +34,15 @@ export function NowPlaying({ current, queue }: NowPlayingProps) {
       </div>
 
       {queue.length > 0 && (
-        <div className="border-t border-sky-100 p-4">
+        <div className="border-t border-border p-4">
           <div className="mb-2 text-sm font-medium">Queue ({queue.length})</div>
           <div className="space-y-1.5">
             {queue.map((item, i) => (
               <div
                 key={`${item.source}-${i}`}
-                className="flex items-center gap-3 rounded-lg border-l-2 border-l-[#7EC8E3] border border-sky-200 bg-white p-2.5 text-sm"
+                className="flex items-center gap-3 rounded-lg border-l-2 border-l-primary border-border bg-card p-2.5 text-sm"
               >
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#7EC8E3]/15 text-xs font-medium text-[#7EC8E3]">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
                   {i + 1}
                 </span>
                 <div className="min-w-0">

services/frontend/src/features/live/components/RecordingsSubPanel.tsx

@@ -42,7 +42,7 @@ export function RecordingsSubPanel() {
         {[1, 2, 3].map((i) => (
           <div
             key={i}
-            className="flex items-center gap-4 rounded-xl border border-sky-200 bg-white p-4"
+            className="flex items-center gap-4 rounded-xl border border-border bg-card p-4"
           >
             <Skeleton className="h-10 w-10 rounded-xl" />
             <div className="flex-1 space-y-2">
@@ -83,7 +83,7 @@ export function RecordingsSubPanel() {
           key={rec.id}
           className="flex items-center gap-4 rounded-xl border border-sky-200 bg-white p-4"
         >
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#7EC8E3]/15 text-[#7EC8E3]">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
             <Mic className="h-5 w-5" />
           </div>
           <div className="min-w-0 flex-1">
@@ -120,7 +120,7 @@ export function RecordingsSubPanel() {
                 href={rec.download_url}
                 target="_blank"
                 rel="noreferrer"
-                className="rounded-lg bg-[#7EC8E3] px-3 py-1.5 text-sm font-medium text-white hover:bg-[#7EC8E3]/80"
+                className="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
               >
                 <Download className="h-4 w-4" />
               </a>

services/frontend/src/features/live/components/ScreenSubPanel.tsx

@@ -24,7 +24,7 @@ export function ScreenSubPanel({
   };
 
   return (
-    <div className="rounded-2xl border border-sky-200 bg-white p-4 shadow-md space-y-4">
+    <div className="rounded-xl border border-border bg-card p-4 shadow-sm space-y-4">
       <Input
         value={source}
         onChange={(e) => setSource(e.target.value)}
@@ -32,11 +32,7 @@ export function ScreenSubPanel({
         placeholder="Screen share URL or local file path"
       />
       <div className="flex flex-wrap gap-2">
-        <Button
-          className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
-          disabled={loading || !source.trim()}
-          onClick={submit}
-        >
+        <Button disabled={loading || !source.trim()} onClick={submit}>
           <MonitorUp className="mr-1.5 h-4 w-4" /> Start
         </Button>
         <Button variant="secondary" disabled={loading} onClick={onSkip}>

services/frontend/src/features/live/components/VoiceConnectionCard.tsx

@@ -36,10 +36,10 @@ export function VoiceConnectionCard({
   onStreamingToggle,
 }: VoiceConnectionCardProps) {
   return (
-    <div className="rounded-2xl border border-sky-200 bg-white shadow-md">
+    <div className="rounded-xl border border-border bg-card shadow-sm">
       <div className="p-6">
         <h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
-          <Radio className="h-5 w-5 text-[#7EC8E3]" /> Voice Bridge
+          <Radio className="h-5 w-5 text-primary" /> Voice Bridge
         </h3>
         <p className="mt-1 text-sm text-muted-foreground">
           Join a Discord voice channel, listen, and transmit audio.
@@ -75,7 +75,7 @@ export function VoiceConnectionCard({
           <Button
             disabled={!selectedGuild || !selectedChannel || voiceLoading}
             onClick={onJoin}
-            className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
           >
             {status.connected ? "Reconnect" : "Join Voice"}
           </Button>