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

frontend/src/components/WinkeyerPanel.tsx

@@ -103,7 +103,7 @@ export function WinkeyerPanel({
         <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground shrink-0">
           {source === 'icom' ? 'Icom CW' : 'WinKeyer'}
         </span>
-        <span className={cn('size-2 rounded-full', connected ? (status.busy ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500') : 'bg-muted-foreground/40')}
+        <span className={cn('size-2 rounded-full', connected ? (status.busy ? 'bg-warning animate-pulse' : 'bg-success') : 'bg-muted-foreground/40')}
           title={connected ? (status.busy ? t('wkp.sending') : t('wkp.connectedV', { version: status.version })) : t('wkp.disconnected')} />
         <div className="flex-1" />
         {source === 'icom' ? (
@@ -142,7 +142,7 @@ export function WinkeyerPanel({
           <Label className="text-xs w-8 shrink-0">TX</Label>
           <div className={cn(
             'flex-1 min-w-0 h-8 rounded-md border border-border bg-muted/30 px-2.5 flex items-center font-mono text-sm tracking-wide truncate',
-            status.busy ? 'text-emerald-700' : 'text-muted-foreground',
+            status.busy ? 'text-success' : 'text-muted-foreground',
           )}>
             {sent || <span className="opacity-50">—</span>}
             {status.busy && <span className="ml-0.5 animate-pulse">▌</span>}
@@ -174,7 +174,7 @@ export function WinkeyerPanel({
                 </button>
               ))}
             </div>
-            {breakIn === 0 && <span className="text-[10px] text-amber-600">{t('wkp.bkOffWarn')}</span>}
+            {breakIn === 0 && <span className="text-[10px] text-warning">{t('wkp.bkOffWarn')}</span>}
           </div>
         )}
 
@@ -225,7 +225,7 @@ export function WinkeyerPanel({
               value={autoCallSecs} onChange={(e) => onSetAutoCallSecs(parseInt(e.target.value) || 0)} />
             <span className="text-[9px] text-muted-foreground">sec</span>
           </div>
-          {autoCall && <span className="text-[10px] text-amber-600/80">{t('wkp.loopHint')}</span>}
+          {autoCall && <span className="text-[10px] text-warning/80">{t('wkp.loopHint')}</span>}
         </div>
 
         {/* Macro buttons F1… — single-line (F-key + label) to keep the panel short. */}
@@ -247,7 +247,7 @@ export function WinkeyerPanel({
             </button>
           ))}
         </div>
-        {status.error && <div className="text-[11px] text-rose-600">{status.error}</div>}
+        {status.error && <div className="text-[11px] text-danger">{status.error}</div>}
       </div>
     </section>
   );