refactor: replace hardcoded hex values with Tailwind semantic tokens

3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

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

frontend/src/components/common/ConfirmDialog.tsx

@@ -34,8 +34,8 @@ export function ConfirmDialog({
             onClick={onClose}
             disabled={isLoading}
             className={cn(
-              'rounded-xl border border-[#1e2130] px-4 py-2 text-sm font-medium',
-              'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
+              'rounded-xl border border-border px-4 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
           >
@@ -49,7 +49,7 @@ export function ConfirmDialog({
               'disabled:opacity-50 disabled:cursor-not-allowed',
               confirmVariant === 'destructive'
                 ? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20'
-                : 'bg-[#22d3ee] text-white hover:brightness-110'
+                : 'bg-primary text-white hover:brightness-110'
             )}
           >
             {isLoading ? 'Processing...' : confirmLabel}
@@ -57,7 +57,7 @@ export function ConfirmDialog({
         </div>
       }
     >
-      <p className="text-sm text-[#848b9b]">{message}</p>
+      <p className="text-sm text-muted-foreground">{message}</p>
     </Modal>
   )
 }