feat(ui): sweep remaining components for Deep Space consistency

Replace old design tokens and hardcoded colors across 29 files:
- bg-primary/text-primary-foreground -> bg-accent/text-white
- text-muted-foreground -> text-text-muted
- text-destructive/bg-destructive -> text-error/bg-error
- bg-muted -> bg-elevated (background usage)
- Hardcoded green/red/yellow/emerald/amber/slate -> semantic tokens
- Remove shadow-md/lg from cards, tooltips, topology nodes
- rounded-xl -> rounded-lg on cards/panels
- focus:ring-1 focus:ring-ring -> focus:border-accent on inputs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx

@@ -672,7 +672,7 @@ function DeviceDetailPage() {
 
             {/* Interface Utilization */}
             <div className="rounded-lg border border-border bg-surface p-4">
-              <h3 className="text-sm font-medium text-muted-foreground mb-3">Interface Utilization</h3>
+              <h3 className="text-sm font-medium text-text-muted mb-3">Interface Utilization</h3>
               <InterfaceGauges tenantId={tenantId} deviceId={deviceId} active={activeTab === 'overview'} />
             </div>
 

frontend/src/routes/_authenticated/traffic.tsx

@@ -13,25 +13,25 @@ export const Route = createFileRoute('/_authenticated/traffic')({
 
 function cpuColor(cpu: number | null): string {
   if (cpu === null) return 'text-text-muted'
-  if (cpu < 50) return 'text-emerald-400'
-  if (cpu < 80) return 'text-yellow-400'
-  return 'text-red-400'
+  if (cpu < 50) return 'text-success'
+  if (cpu < 80) return 'text-warning'
+  return 'text-error'
 }
 
 function memColor(mem: number | null): string {
   if (mem === null) return 'text-text-muted'
-  if (mem < 60) return 'text-emerald-400'
-  if (mem < 85) return 'text-yellow-400'
-  return 'text-red-400'
+  if (mem < 60) return 'text-success'
+  if (mem < 85) return 'text-warning'
+  return 'text-error'
 }
 
 function statusDot(status: string) {
   const color =
     status === 'online'
-      ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.6)]'
+      ? 'bg-success'
       : status === 'degraded'
-        ? 'bg-yellow-400 shadow-[0_0_6px_rgba(250,204,21,0.6)]'
-        : 'bg-red-400 shadow-[0_0_6px_rgba(248,113,113,0.6)]'
+        ? 'bg-warning'
+        : 'bg-error'
   return <span className={cn('inline-block h-2 w-2 rounded-full', color)} />
 }
 

frontend/src/routes/_authenticated/wireless.tsx

@@ -13,9 +13,9 @@ export const Route = createFileRoute('/_authenticated/wireless')({
 
 function signalColor(signal: number | null): string {
   if (signal === null) return 'text-text-muted'
-  if (signal > -60) return 'text-emerald-400'
-  if (signal > -70) return 'text-yellow-400'
-  return 'text-red-400'
+  if (signal > -60) return 'text-success'
+  if (signal > -70) return 'text-warning'
+  return 'text-error'
 }
 
 function WirelessPage() {
@@ -105,7 +105,7 @@ function WirelessPage() {
       ) : issues.length === 0 ? (
         <Card className="border-border bg-surface">
           <CardContent className="flex flex-col items-center justify-center gap-3 p-12">
-            <CheckCircle2 className="h-10 w-10 text-emerald-400" />
+            <CheckCircle2 className="h-10 w-10 text-success" />
             <p className="text-sm font-medium text-text-secondary">
               All Clear — no wireless issues detected
             </p>
@@ -153,7 +153,7 @@ function WirelessPage() {
                   >
                     <td className="px-4 py-3 text-sm text-text-secondary">
                       <div className="flex items-center gap-2">
-                        <span className="inline-block h-2 w-2 rounded-full bg-red-400 shadow-[0_0_6px_rgba(248,113,113,0.6)]" />
+                        <span className="inline-block h-2 w-2 rounded-full bg-error" />
                         {issue.hostname}
                       </div>
                     </td>