refactor: normalize FlowPilot/Assistant/ScriptBuilder to design system tokens

Replace hardcoded Tailwind color utilities with semantic CSS variable tokens
across 31 files in the FlowPilot, Assistant Chat, and Script Builder feature
communities — the areas graphify identified as design-system-free.

- text-blue-400 → text-accent, bg-blue-500/10 → bg-accent-dim, border-blue-500/20 → border-accent/20
- text-amber-400 → text-warning, bg-amber-400/10 → bg-warning-dim, border-l-amber-500 → border-l-warning
- text-rose-400/500 → text-danger, bg-rose-500/10 → bg-danger-dim
- text-emerald-400 → text-success, bg-emerald-500/10 → bg-success-dim, border-l-emerald-500 → border-l-success
- bg-white/[0.08] → bg-elevated (opacity hack → semantic surface token)
- bg-gradient-to-r from-blue-500 to-blue-400 → bg-accent (no gradient surfaces)
- bg-[#60a5fa] → bg-accent (hard-coded hex removed)

Also adds graphify-out/ to .gitignore.

Theme resilience: accent color has changed twice in 5 weeks. Semantic tokens
mean the next change is a 1-line edit in index.css, not 110 grep-and-replace.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/script-builder/ScriptBuilderChat.tsx

@@ -57,7 +57,7 @@ export function ScriptBuilderChat({
         >
           {msg.role === 'assistant' && (
             <div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(96,165,250,0.1)] flex items-center justify-center mt-0.5">
-              <Bot size={16} className="text-blue-400" />
+              <Bot size={16} className="text-accent" />
             </div>
           )}
 
@@ -99,10 +99,10 @@ export function ScriptBuilderChat({
       {isLoading && (
         <div className="flex gap-3 justify-start">
           <div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(96,165,250,0.1)] flex items-center justify-center">
-            <Bot size={16} className="text-blue-400" />
+            <Bot size={16} className="text-accent" />
           </div>
           <div className="card-flat rounded-xl px-4 py-3 text-sm flex items-center gap-2">
-            <Loader2 size={14} className="animate-spin text-blue-400" />
+            <Loader2 size={14} className="animate-spin text-accent" />
             <span className="text-muted-foreground">Generating script...</span>
           </div>
         </div>

frontend/src/components/script-builder/ScriptCodeBlock.tsx

@@ -55,7 +55,7 @@ export function ScriptCodeBlock({
     <div className="mt-3 rounded-lg border bg-[rgba(0,0,0,0.3)] border-[rgba(255,255,255,0.06)] overflow-hidden">
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-[rgba(255,255,255,0.06)]">
-        <span className="font-mono text-xs text-blue-400 truncate">
+        <span className="font-mono text-xs text-accent truncate">
           {filename || 'script'}
         </span>
         {lineCount != null && (
@@ -110,14 +110,14 @@ export function ScriptCodeBlock({
             "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
           )}
         >
-          {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+          {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
           {copied ? 'Copied' : 'Copy'}
         </button>
         <button
           onClick={(e) => { e.stopPropagation(); onSave() }}
           className={cn(
             "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-            "bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
+            "bg-success-dim border border-success/20 text-success hover:bg-emerald-500/15"
           )}
         >
           <BookmarkPlus size={14} />

frontend/src/components/script-builder/ScriptPreviewModal.tsx

@@ -62,7 +62,7 @@ export function ScriptPreviewModal({
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-[rgba(255,255,255,0.06)]">
           <div className="flex items-center gap-3 min-w-0">
-            <span className="font-mono text-sm text-blue-400 truncate">
+            <span className="font-mono text-sm text-accent truncate">
               {filename || 'script'}
             </span>
             <span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[rgba(255,255,255,0.06)] text-muted-foreground">
@@ -77,14 +77,14 @@ export function ScriptPreviewModal({
                 "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
               )}
             >
-              {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+              {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
               {copied ? 'Copied' : 'Copy'}
             </button>
             <button
               onClick={onSave}
               className={cn(
                 "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-                "bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
+                "bg-success-dim border border-success/20 text-success hover:bg-emerald-500/15"
               )}
             >
               <BookmarkPlus size={14} />