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

@@ -193,7 +193,7 @@ function ChatItem({
       className={cn(
         'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
         confirming
-          ? 'bg-rose-500/10 border border-rose-500/20'
+          ? 'bg-danger-dim border border-danger/20'
           : isActive
             ? 'bg-accent-dim text-foreground'
             : 'text-muted-foreground hover:bg-input hover:text-foreground'
@@ -203,10 +203,10 @@ function ChatItem({
       <div className="flex-1 min-w-0">
         {confirming ? (
           <div className="flex items-center gap-2">
-            <span className="text-[0.75rem] text-rose-400 font-medium">Delete?</span>
+            <span className="text-[0.75rem] text-danger font-medium">Delete?</span>
             <button
               onClick={e => { e.stopPropagation(); onDelete(); setConfirming(false) }}
-              className="text-[0.6875rem] font-medium text-rose-400 hover:text-rose-300 px-1.5 py-0.5 rounded bg-rose-500/15 hover:bg-rose-500/25 transition-colors"
+              className="text-[0.6875rem] font-medium text-danger hover:text-danger px-1.5 py-0.5 rounded bg-danger/15 hover:bg-danger/25 transition-colors"
             >
               Yes
             </button>
@@ -230,14 +230,14 @@ function ChatItem({
         <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
           <button
             onClick={e => { e.stopPropagation(); onTogglePin() }}
-            className="p-1 rounded hover:bg-white/[0.08]"
+            className="p-1 rounded hover:bg-elevated"
             title={chat.pinned ? 'Unpin' : 'Pin'}
           >
             <Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
           </button>
           <button
             onClick={e => { e.stopPropagation(); setConfirming(true) }}
-            className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
+            className="p-1 rounded hover:bg-elevated text-muted-foreground hover:text-danger"
             title="Delete"
           >
             <Trash2 size={12} />