feat: Themes added, 4 themes available (3 dark, 1 light)

frontend/src/components/RotorCompass.tsx

@@ -75,22 +75,22 @@ export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLa
       <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/40 border-b border-border shrink-0">
         <Compass className="size-4 text-primary shrink-0" />
         <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Rotor</span>
-        <span className={cn('size-2 rounded-full', rotorEnabled ? 'bg-emerald-500' : 'bg-muted-foreground/40')}
+        <span className={cn('size-2 rounded-full', rotorEnabled ? 'bg-success' : 'bg-muted-foreground/40')}
           title={rotorEnabled ? 'Rotator connected' : 'Rotator disabled'} />
         <div className="flex-1" />
         {pattern && (
           <span
             className={cn('px-1 py-px rounded text-[9px] font-bold tracking-wide',
-              pattern === 'reverse' ? 'bg-amber-200 text-amber-900'
-                : pattern === 'bi' ? 'bg-sky-200 text-sky-900'
-                : 'bg-emerald-200 text-emerald-900')}
+              pattern === 'reverse' ? 'bg-warning-muted text-warning-muted-foreground'
+                : pattern === 'bi' ? 'bg-info-muted text-info-muted-foreground'
+                : 'bg-success-muted text-success-muted-foreground')}
             title={pattern === 'reverse' ? 'Ultrabeam reversed — radiates opposite the boom'
               : pattern === 'bi' ? 'Ultrabeam bidirectional — radiates both ways'
               : 'Ultrabeam normal'}>
             {pattern === 'reverse' ? 'REV' : pattern === 'bi' ? 'BI' : 'NORM'}
           </span>
         )}
-        <span className="font-mono text-sm font-bold text-emerald-700 tabular-nums">
+        <span className="font-mono text-sm font-bold text-success tabular-nums">
           {headLabel != null ? `${Math.round(headLabel).toString().padStart(3, '0')}°` : '—'}
         </span>
         {onClose && (