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/assistant/ChatMessage.tsx

@@ -16,8 +16,8 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
       <div
         className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
           role === 'assistant'
-            ? 'bg-primary/15 text-[#22d3ee]'
-            : 'bg-white/[0.08] text-[#848b9b]'
+            ? 'bg-primary/15 text-primary'
+            : 'bg-white/[0.08] text-muted-foreground'
         }`}
       >
         {role === 'assistant' ? <Sparkles size={14} /> : <User size={14} />}
@@ -28,8 +28,8 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         <div
           className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${
             role === 'user'
-              ? 'bg-primary/15 text-[#e2e5eb]'
-              : 'bg-[#191c25] text-[#e2e5eb] border border-[#1e2130]'
+              ? 'bg-primary/15 text-foreground'
+              : 'bg-input text-foreground border border-border'
           }`}
         >
           <MarkdownContent content={content} className="text-[0.875rem] leading-relaxed" />
@@ -38,7 +38,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         {/* Suggested flows (assistant only) */}
         {role === 'assistant' && suggestedFlows && suggestedFlows.length > 0 && (
           <div className="space-y-1.5">
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
               Related Flows
             </span>
             {suggestedFlows.map(flow => (