refactor: update component styles to use theme-aware colors and improve UI consistency

services/frontend/src/components/CategoryDrilldown.tsx

@@ -71,7 +71,7 @@ export function CategoryDrilldown({
                 <span className="w-36 shrink-0 truncate text-ink-soft">
                   {c.name}
                 </span>
-                <div className="h-2 flex-1 overflow-hidden rounded-full bg-white/5">
+                <div className="h-2 flex-1 overflow-hidden rounded-full bg-hairline">
                   <div
                     className="h-full rounded-full bg-signal"
                     style={{ width: `${pct}%` }}

services/frontend/src/components/ModerationHeatmap.tsx

@@ -8,9 +8,9 @@ import { cn } from "@/lib/utils";
 export function ModerationHeatmap({ hours }: { hours: HourlyModeration[] }) {
   const max = hours.reduce((m, h) => Math.max(m, h.total), 0);
   const intensity = (v: number) => {
-    if (max <= 0) return "bg-white/5";
+    if (max <= 0) return "bg-hairline";
     const t = Math.max(0, Math.min(1, v / max));
-    if (t < 0.25) return "bg-white/[0.06]";
+    if (t < 0.25) return "bg-surface-2";
     if (t < 0.5) return "bg-signal/25";
     if (t < 0.75) return "bg-signal/50";
     return "bg-vermilion/60";

services/frontend/src/components/ScamDomains.tsx

@@ -48,9 +48,9 @@ export function ScamDomains({ domains }: { domains: FlaggedDomain[] }) {
                 <span className="w-44 shrink-0 truncate font-mono text-ink-soft">
                   {d.domain}
                 </span>
-                <div className="h-2 flex-1 overflow-hidden rounded-full bg-white/5">
+                <div className="h-2 flex-1 overflow-hidden rounded-full bg-hairline">
                   <div
-                    className="h-full rounded-full bg-[#8b5cf6]"
+                    className="h-full rounded-full bg-signal"
                     style={{ width: `${pct}%` }}
                   />
                 </div>

services/frontend/src/components/TopChannels.tsx

@@ -53,9 +53,9 @@ export function TopChannels({ channels }: { channels: FlaggedChannel[] }) {
                 <span className="w-40 shrink-0 truncate text-ink-soft">
                   {c.channel_name ?? c.channel_id}
                 </span>
-                <div className="h-2 flex-1 overflow-hidden rounded-full bg-white/5">
+                <div className="h-2 flex-1 overflow-hidden rounded-full bg-hairline">
                   <div
-                    className="h-full rounded-full bg-[#f59e0b]"
+                    className="h-full rounded-full bg-amber"
                     style={{ width: `${pct}%` }}
                   />
                 </div>

services/frontend/src/components/TopicTrends.tsx

@@ -29,7 +29,7 @@ function BarRow({
   return (
     <div className="flex items-center gap-3 text-sm">
       <span className="w-32 shrink-0 truncate text-ink-soft">{label}</span>
-      <div className="h-2 flex-1 overflow-hidden rounded-full bg-white/5">
+      <div className="h-2 flex-1 overflow-hidden rounded-full bg-hairline">
         <div
           className="h-full rounded-full"
           style={{ width: `${pct}%`, background: color }}

services/frontend/src/components/charts/waveform.tsx

@@ -17,7 +17,7 @@ export function Equalizer({
           {Array.from({ length: 28 }).map((_, i) => (
             <span
               key={`eq-${i}`}
-              className="flex-1 rounded-full bg-white/10"
+              className="flex-1 rounded-full bg-hairline"
               style={{ height: "12%" }}
             />
           ))}

services/frontend/src/components/chatbot/chatbot.tsx

@@ -169,7 +169,7 @@ export function Chatbot() {
               <button
                 type="button"
                 onClick={() => setExpanded(!expanded)}
-                className="rounded-[5px] p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
+                className="rounded-md p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
               >
                 {expanded ? (
                   <Minimize2 className="size-3.5" />
@@ -180,7 +180,7 @@ export function Chatbot() {
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="rounded-[5px] p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
+                className="rounded-md p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
               >
                 <X className="size-3.5" />
               </button>

services/frontend/src/components/command/command-palette.tsx

@@ -139,7 +139,7 @@ export function CommandPalette() {
             placeholder="Type a command or search…"
             className="flex-1 bg-transparent text-sm text-ink outline-none placeholder:text-ink-faint"
           />
-          <kbd className="mono rounded bg-white/8 px-1.5 py-0.5 text-[0.6rem] text-ink-faint">
+          <kbd className="mono rounded bg-surface-2 px-1.5 py-0.5 text-[0.6rem] text-ink-faint">
             ESC
           </kbd>
         </div>
@@ -156,11 +156,11 @@ export function CommandPalette() {
                   key={c.id}
                   className={`flex w-full items-center gap-3 rounded-[10px] px-3 py-2.5 text-left text-sm transition-colors ${
                     i === active
-                      ? "bg-signal/12 text-ink"
-                      : "text-ink-soft hover:bg-white/5"
+                      ? "bg-signal/15 text-ink"
+                      : "text-ink-soft hover:bg-surface"
                   }`}
                 >
-                  <span className="flex size-7 items-center justify-center rounded-[8px] bg-white/5">
+                  <span className="flex size-7 items-center justify-center rounded-[8px] bg-surface-2">
                     {c.icon}
                   </span>
                   <span className="flex-1">{c.label}</span>

services/frontend/src/components/media/mini-player.tsx

@@ -63,7 +63,7 @@ export function MiniPlayer() {
           className="flex min-w-0 flex-1 items-center gap-3"
           aria-label="Open full media player"
         >
-          <span className="relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full border border-hairline bg-white/5">
+          <span className="relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full border border-hairline bg-surface-2">
             {current.thumbnailUrl ? (
               // biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
               <img
@@ -130,7 +130,7 @@ export function MiniPlayer() {
             onClick={() => skip.mutate()}
             disabled={skip.isPending}
             aria-label="Skip to next track"
-            className="flex size-8 items-center justify-center rounded-full text-ink-soft transition-colors hover:bg-white/10 hover:text-signal active:scale-95"
+            className="flex size-8 items-center justify-center rounded-full text-ink-soft transition-colors hover:bg-surface hover:text-signal active:scale-95"
           >
             <SkipForward className="size-4" />
           </button>
@@ -151,7 +151,7 @@ export function MiniPlayer() {
             className={`hidden size-8 items-center justify-center rounded-full text-xs transition-colors sm:flex ${
               media?.loop
                 ? "bg-signal/15 text-signal"
-                : "text-ink-faint hover:bg-white/10 hover:text-ink"
+                : "text-ink-faint hover:bg-surface hover:text-ink"
             }`}
           >
             ↻

services/frontend/src/components/primitives/badge.tsx

@@ -39,7 +39,7 @@ export function Badge({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-[4px] border font-mono font-medium tracking-tight",
+        "inline-flex items-center gap-1.5 rounded-[6px] border font-mono font-medium tracking-tight",
         tones[tone],
         sizes[size],
         className,

services/frontend/src/components/primitives/button.tsx

@@ -28,10 +28,10 @@ export const buttonVariants = ({
   };
 
   const sizes = {
-    sm: "h-7 px-2.5 text-xs rounded-[5px] gap-1.5",
-    md: "h-8.5 px-3.5 text-xs rounded-[6px] gap-2",
-    lg: "h-10 px-4 text-sm rounded-[7px] gap-2.5",
-    icon: "size-8.5 rounded-[6px] p-0",
+    sm: "h-7 px-2.5 text-xs rounded-[8px] gap-1.5",
+    md: "h-8.5 px-3.5 text-xs rounded-[8px] gap-2",
+    lg: "h-10 px-4 text-sm rounded-[8px] gap-2.5",
+    icon: "size-8.5 rounded-[8px] p-0",
   };
 
   return cn(base, variants[variant], sizes[size], className);

services/frontend/src/components/primitives/card.tsx

@@ -14,8 +14,8 @@ export function GlassPanel({
   return (
     <div
       className={cn(
-        "relative rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 p-5 shadow-xl backdrop-blur-md transition-all duration-200",
-        glow && "shadow-[0_0_24px_rgba(113,112,255,0.12)] border-[#7170ff]/30",
+        "relative rounded-[10px] border border-hairline bg-surface p-5 shadow-xl backdrop-blur-md transition-all duration-200",
+        glow && "shadow-[0_0_24px_var(--color-signal-glow)] border-signal/30",
         className,
       )}
       style={style}
@@ -35,7 +35,7 @@ export function GlassCard({
   return (
     <div
       className={cn(
-        "relative rounded-[8px] border border-white/[0.06] bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.12] hover:bg-white/[0.04]",
+        "relative rounded-[8px] border border-hairline bg-surface-2 p-4 transition-all duration-200 hover:border-hairline-focus hover:bg-surface",
         className,
       )}
       style={style}

services/frontend/src/components/primitives/input.tsx

@@ -7,9 +7,9 @@ export function Input({
   return (
     <input
       className={cn(
-        "h-10 w-full rounded-[11px] bg-white/5 border border-hairline px-3.5 text-sm text-ink",
+        "h-10 w-full rounded-[8px] bg-surface-2 border border-hairline px-3.5 text-sm text-ink",
         "placeholder:text-ink-faint transition-colors",
-        "focus:outline-none focus:border-signal/50 focus:bg-white/8",
+        "focus:outline-none focus:border-signal/50 focus:bg-surface",
         className,
       )}
       {...props}
@@ -24,9 +24,9 @@ export function Textarea({
   return (
     <textarea
       className={cn(
-        "w-full rounded-[11px] bg-white/5 border border-hairline px-3.5 py-2.5 text-sm text-ink",
+        "w-full rounded-[8px] bg-surface-2 border border-hairline px-3.5 py-2.5 text-sm text-ink",
         "placeholder:text-ink-faint transition-colors resize-none",
-        "focus:outline-none focus:border-signal/50 focus:bg-white/8",
+        "focus:outline-none focus:border-signal/50 focus:bg-surface",
         className,
       )}
       {...props}

services/frontend/src/components/primitives/progress.tsx

@@ -19,7 +19,7 @@ export function Progress({
   return (
     <div
       className={cn(
-        "h-1.5 w-full overflow-hidden rounded-full bg-white/8",
+        "h-1.5 w-full overflow-hidden rounded-full bg-hairline",
         className,
       )}
     >
@@ -39,7 +39,7 @@ export function Spinner({ className }: { className?: string }) {
   return (
     <span
       className={cn(
-        "inline-block size-4 animate-spin rounded-full border-2 border-white/20 border-t-signal",
+        "inline-block size-4 animate-spin rounded-full border-2 border-hairline border-t-signal",
         className,
       )}
     />

services/frontend/src/components/primitives/select.tsx

@@ -46,7 +46,7 @@ export function Select({
         type="button"
         onClick={() => setOpen((o) => !o)}
         className={cn(
-          "flex w-full items-center justify-between gap-2 rounded-[11px] border border-hairline bg-white/5 text-left text-ink transition-colors hover:border-signal/40",
+          "flex w-full items-center justify-between gap-2 rounded-[8px] border border-hairline bg-surface-2 text-left text-ink transition-colors hover:border-signal/40",
           "focus:outline-none focus:border-signal/60",
           size === "sm" ? "h-9 px-3 text-xs" : "h-10 px-3.5 text-sm",
         )}
@@ -79,10 +79,10 @@ export function Select({
                 setOpen(false);
               }}
               className={cn(
-                "flex w-full items-center justify-between gap-2 rounded-[9px] px-3 py-2 text-left text-sm transition-colors",
+                "flex w-full items-center justify-between gap-2 rounded-[8px] px-3 py-2 text-left text-sm transition-colors",
                 o.value === value
                   ? "bg-signal/15 text-signal"
-                  : "text-ink hover:bg-white/6",
+                  : "text-ink hover:bg-surface",
               )}
             >
               <span className="truncate">{o.label}</span>

services/frontend/src/components/primitives/skeleton.tsx

@@ -7,7 +7,7 @@ export function Skeleton({
   return (
     <div
       className={cn(
-        "rounded-[10px] bg-white/[0.06] animate-shimmer relative overflow-hidden",
+        "relative overflow-hidden rounded-[10px] animate-shimmer",
         className,
       )}
       {...props}

services/frontend/src/components/primitives/toast.tsx

@@ -103,7 +103,7 @@ export function Toaster({ position = "bottom-right" }: { position?: string }) {
                 store = store.filter((x) => x.id !== t.id);
                 emit();
               }}
-              className="rounded-md p-1 text-ink-faint transition-colors hover:bg-white/8 hover:text-ink"
+              className="rounded-md p-1 text-ink-faint transition-colors hover:bg-surface hover:text-ink"
             >
               <X className="size-3.5" />
             </button>

services/frontend/src/components/shared/markdown.tsx

@@ -33,7 +33,7 @@ function renderInline(text: string, keyBase: string): ReactNode[] {
       nodes.push(
         <code
           key={`${keyBase}-c${i}`}
-          className="mono rounded bg-white/10 px-1 py-0.5 text-[0.85em] text-signal"
+          className="mono rounded bg-surface-2 px-1 py-0.5 text-[0.85em] text-signal"
         >
           {m[4]}
         </code>,
@@ -56,7 +56,7 @@ function renderBlock(content: string, keyBase: string): ReactNode[] {
       return (
         <pre
           key={`${keyBase}-pre${idx}`}
-          className="my-1.5 overflow-x-auto rounded-[10px] border border-hairline bg-black/30 p-3"
+          className="my-1.5 overflow-x-auto rounded-[10px] border border-hairline bg-surface-2 p-3"
         >
           <code className="mono block whitespace-pre text-xs text-ink-soft">
             {code.replace(/\n$/, "")}

services/frontend/src/components/shared/states.tsx

@@ -62,7 +62,7 @@ export function SkeletonRows({
       {Array.from({ length: rows }).map((_, i) => (
         <div
           key={i}
-          className="flex items-start gap-3 rounded-[12px] border border-hairline bg-white/[0.03] p-3"
+          className="flex items-start gap-3 rounded-[12px] border border-hairline bg-surface-2 p-3"
         >
           <Skeleton className="size-8 shrink-0 rounded-full" />
           <div className="flex-1 space-y-2 py-0.5">
@@ -111,7 +111,7 @@ export function EmptyState({
       )}
     >
       {icon && (
-        <span className="mb-1 flex size-14 items-center justify-center rounded-full border border-hairline bg-white/[0.04] text-ink-soft shadow-[0_0_30px_-12px_var(--color-signal-glow)]">
+        <span className="mb-1 flex size-14 items-center justify-center rounded-full border border-hairline bg-surface-2 text-ink-soft shadow-[0_0_30px_-12px_var(--color-signal-glow)]">
           {icon}
         </span>
       )}

services/frontend/src/components/shell/mobile-nav.tsx

@@ -26,14 +26,14 @@ export function MobileNav() {
             className={cn(
               "game-nav-item relative flex min-h-[44px] flex-1 flex-col items-center justify-center rounded-t-[20px] px-2 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] md:hidden",
               active
-                ? "is-active text-white"
+                ? "is-active text-signal"
                 : "text-ink-faint hover:text-ink-soft",
             )}
           >
             {active && (
               <span
                 aria-hidden="true"
-                className="absolute inset-x-4 top-0 h-[2px] bg-white shadow-[0_0_8px_var(--color-signal-glow)]"
+                className="absolute inset-x-4 top-0 h-[2px] bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
               />
             )}
             <span className="game-sweep" aria-hidden="true">

services/frontend/src/components/shell/nav-rail.tsx

@@ -28,7 +28,7 @@ function NavItem({
       aria-label={label}
       aria-current={active ? "page" : undefined}
       className={cn(
-        "nav-dock-item group relative flex size-9 items-center justify-center rounded-[7px] transition-all duration-150",
+        "nav-dock-item group relative flex size-9 items-center justify-center rounded-[8px] transition-all duration-150",
         active
           ? "is-active bg-signal/15 text-signal font-semibold shadow-xs border border-signal/30"
           : "text-ink-muted hover:bg-surface-2 hover:text-ink",
@@ -40,7 +40,7 @@ function NavItem({
         <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
       )}
       {/* Tooltip on hover */}
-      <span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-hairline bg-surface px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-ink opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
+      <span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-md border border-hairline bg-surface px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-ink opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
         {label}
       </span>
     </a>