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/flowpilot/ProposalDetail.tsx

@@ -105,7 +105,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
         {proposal.proposed_diff && (() => {
           const diff = proposal.proposed_diff as { diff_description?: string; new_nodes?: Array<{ title?: string; question?: string; description?: string }> }
           return (
-            <div className="card-flat border-l-2 border-l-amber-500 p-4">
+            <div className="card-flat border-l-2 border-l-warning p-4">
               <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-2">Proposed Changes</h4>
               {diff.diff_description && (
                 <p className="text-sm text-foreground">{diff.diff_description}</p>
@@ -114,8 +114,8 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
                 <div className="mt-3 space-y-1.5">
                   <p className="text-xs font-medium text-muted-foreground">New nodes:</p>
                   {diff.new_nodes.map((node, i) => (
-                    <div key={i} className="rounded-lg bg-emerald-500/5 border border-emerald-500/10 px-3 py-2 text-xs text-foreground">
-                      <span className="text-emerald-400">+ </span>
+                    <div key={i} className="rounded-lg bg-success/5 border border-success/10 px-3 py-2 text-xs text-foreground">
+                      <span className="text-success">+ </span>
                       {node.title || node.question || node.description || 'New node'}
                     </div>
                   ))}
@@ -196,7 +196,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
               <button
                 onClick={() => handleAction('approve')}
                 disabled={isSubmitting}
-                className="flex items-center gap-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-4 py-2 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 transition-colors"
+                className="flex items-center gap-2 rounded-lg bg-success-dim border border-success/20 px-4 py-2 text-sm font-medium text-success hover:bg-success/20 disabled:opacity-40 transition-colors"
               >
                 {isSubmitting ? <Loader2 size={14} className="animate-spin" /> : <CheckCircle2 size={14} />}
                 Approve & Publish
@@ -225,7 +225,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
             <button
               onClick={() => showRejectConfirm ? handleAction('reject') : setShowRejectConfirm(true)}
               disabled={isSubmitting}
-              className="flex items-center gap-2 rounded-lg bg-rose-500/10 border border-rose-500/20 px-4 py-2 text-sm font-medium text-rose-500 hover:bg-rose-500/20 disabled:opacity-40 transition-colors"
+              className="flex items-center gap-2 rounded-lg bg-danger-dim border border-danger/20 px-4 py-2 text-sm font-medium text-danger hover:bg-danger/20 disabled:opacity-40 transition-colors"
             >
               <XCircle size={14} />
               {showRejectConfirm ? 'Confirm Reject' : 'Reject'}