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/pages/FlowAssistPage.tsx

@@ -4,23 +4,23 @@ export default function FlowAssistPage() {
   return (
     <div className="p-6">
       <div className="mb-6">
-        <h1 className="font-heading text-2xl font-bold tracking-tight text-[#e2e5eb]">
+        <h1 className="font-heading text-2xl font-bold tracking-tight text-foreground">
           <span className="inline-flex items-center gap-2">
             <WandSparkles size={24} style={{ color: '#f472b6' }} />
             Flow Assist
           </span>
         </h1>
-        <p className="mt-1 text-sm text-[#848b9b]">
+        <p className="mt-1 text-sm text-muted-foreground">
           Build flows from natural language — describe what you need and Flow Assist will generate the decision tree or procedural steps.
         </p>
       </div>
 
       <div className="card-flat p-8 text-center">
-        <WandSparkles size={40} className="mx-auto mb-4 text-[#848b9b]" />
-        <h2 className="font-heading text-lg font-semibold text-[#e2e5eb] mb-2">
+        <WandSparkles size={40} className="mx-auto mb-4 text-muted-foreground" />
+        <h2 className="font-heading text-lg font-semibold text-foreground mb-2">
           Coming Soon
         </h2>
-        <p className="text-sm text-[#848b9b] max-w-md mx-auto">
+        <p className="text-sm text-muted-foreground max-w-md mx-auto">
           Flow Assist will be available here as a dedicated conversational flow builder.
           In the meantime, use the AI panel in the Flow Editor to generate flows.
         </p>