diff --git a/.gitignore b/.gitignore
index 758ce880..caa3f59a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -234,3 +234,7 @@ package-lock.json
 .worktrees/
 .gstack/
 .gitnexus
+
+# graphify knowledge graph outputs
+graphify-out/
+.graphify_python
diff --git a/frontend/src/components/assistant/ChatMessage.tsx b/frontend/src/components/assistant/ChatMessage.tsx
index 0cba31c7..d905aada 100644
--- a/frontend/src/components/assistant/ChatMessage.tsx
+++ b/frontend/src/components/assistant/ChatMessage.tsx
@@ -17,7 +17,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
           role === 'assistant'
             ? 'bg-primary/15 text-primary'
-            : 'bg-white/[0.08] text-muted-foreground'
+            : 'bg-elevated text-muted-foreground'
         }`}
       >
         {role === 'assistant' ? <Sparkles size={14} /> : <User size={14} />}
diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx
index 9c450050..28c19239 100644
--- a/frontend/src/components/assistant/ChatSidebar.tsx
+++ b/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} />
diff --git a/frontend/src/components/assistant/ConcludeSessionModal.tsx b/frontend/src/components/assistant/ConcludeSessionModal.tsx
index 9f995c8d..207e3743 100644
--- a/frontend/src/components/assistant/ConcludeSessionModal.tsx
+++ b/frontend/src/components/assistant/ConcludeSessionModal.tsx
@@ -36,7 +36,7 @@ const OUTCOMES: { value: ConclusionOutcome; label: string; description: string;
     label: 'Resolved',
     description: 'Issue has been fixed or answered',
     icon: CheckCircle2,
-    color: 'text-emerald-400',
+    color: 'text-success',
     bg: 'bg-emerald-400/10',
     border: 'border-emerald-400/30',
   },
@@ -45,17 +45,17 @@ const OUTCOMES: { value: ConclusionOutcome; label: string; description: string;
     label: 'Escalate',
     description: 'Needs to be handed off or escalated',
     icon: ArrowUpRight,
-    color: 'text-amber-400',
-    bg: 'bg-amber-400/10',
-    border: 'border-amber-400/30',
+    color: 'text-warning',
+    bg: 'bg-warning-dim',
+    border: 'border-warning/30',
   },
   {
     value: 'paused',
     label: 'Paused',
     description: 'Continuing later — saving progress',
     icon: Pause,
-    color: 'text-blue-400',
-    bg: 'bg-blue-400/10',
+    color: 'text-accent',
+    bg: 'bg-accent-dim',
     border: 'border-blue-400/30',
   },
 ]
@@ -362,7 +362,7 @@ export function ConcludeSessionModal({
               </div>
 
               {error && (
-                <div className="text-sm text-rose-400 bg-rose-400/10 border border-rose-400/20 rounded-lg px-4 py-2">
+                <div className="text-sm text-danger bg-danger-dim border border-danger/20 rounded-lg px-4 py-2">
                   {error}
                 </div>
               )}
@@ -410,7 +410,7 @@ export function ConcludeSessionModal({
                       <div className="h-3 bg-elevated rounded w-4/5" />
                     </div>
                   ) : streamError ? (
-                    <div className="flex items-center gap-2 text-sm text-amber-400">
+                    <div className="flex items-center gap-2 text-sm text-warning">
                       <AlertTriangle size={14} />
                       {streamError}
                     </div>
@@ -467,7 +467,7 @@ export function ConcludeSessionModal({
               {/* Paused/Escalated: generating spinner */}
               {(outcome === 'paused' || outcome === 'escalated') && generatingUpdate && (
                 <div className="flex flex-col items-center justify-center py-8 gap-3">
-                  <Loader2 size={24} className="animate-spin text-blue-400" />
+                  <Loader2 size={24} className="animate-spin text-accent" />
                   <p className="text-sm text-muted-foreground">Generating status update...</p>
                 </div>
               )}
@@ -544,7 +544,7 @@ export function ConcludeSessionModal({
                 {outcome === 'paused' && (
                   <button
                     onClick={handleResumeNew}
-                    className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-blue-400 bg-blue-400/10 border border-blue-400/20 hover:bg-blue-400/15 transition-all"
+                    className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-accent bg-accent-dim border border-accent/20 hover:bg-accent/15 transition-all"
                   >
                     <RefreshCw size={14} />
                     Resume in New Chat
@@ -566,7 +566,7 @@ export function ConcludeSessionModal({
                     className={cn(
                       'flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all',
                       copied
-                        ? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
+                        ? 'bg-emerald-400/15 text-success border border-emerald-400/30'
                         : 'bg-primary text-white hover:brightness-110 active:scale-[0.98]'
                     )}
                   >
diff --git a/frontend/src/components/assistant/TaskLane.tsx b/frontend/src/components/assistant/TaskLane.tsx
index 21bc91db..81d36a23 100644
--- a/frontend/src/components/assistant/TaskLane.tsx
+++ b/frontend/src/components/assistant/TaskLane.tsx
@@ -368,7 +368,7 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
           <section>
             <div className="sticky top-0 z-10 pb-2" style={{ background: 'var(--color-bg-page)' }}>
               <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[1.2px] text-muted-foreground pl-0.5">
-                <span className="w-1.5 h-1.5 rounded-full bg-[#60a5fa]" />
+                <span className="w-1.5 h-1.5 rounded-full bg-accent" />
                 Diagnostic Checks
                 {actionTasks.every(a => a.state === 'done' || a.state === 'skipped') && (
                   <Check size={10} className="text-success" />
diff --git a/frontend/src/components/flowpilot/AISessionListItem.tsx b/frontend/src/components/flowpilot/AISessionListItem.tsx
index c936c844..23c2e234 100644
--- a/frontend/src/components/flowpilot/AISessionListItem.tsx
+++ b/frontend/src/components/flowpilot/AISessionListItem.tsx
@@ -9,9 +9,9 @@ interface AISessionListItemProps {
 
 const STATUS_CONFIG = {
   active: { icon: Clock, color: 'text-primary', label: 'Active' },
-  paused: { icon: Pause, color: 'text-amber-400', label: 'Paused' },
-  resolved: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Resolved' },
-  escalated: { icon: ArrowUpRight, color: 'text-amber-400', label: 'Escalated' },
+  paused: { icon: Pause, color: 'text-warning', label: 'Paused' },
+  resolved: { icon: CheckCircle2, color: 'text-success', label: 'Resolved' },
+  escalated: { icon: ArrowUpRight, color: 'text-warning', label: 'Escalated' },
   abandoned: { icon: AlertCircle, color: 'text-text-muted', label: 'Abandoned' },
 } as const
 
@@ -64,7 +64,7 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
           </div>
         </div>
         {session.session_rating && (
-          <span className="font-sans text-xs text-xs text-amber-400">
+          <span className="font-sans text-xs text-xs text-warning">
             {'★'.repeat(session.session_rating)}
           </span>
         )}
diff --git a/frontend/src/components/flowpilot/EscalateModal.tsx b/frontend/src/components/flowpilot/EscalateModal.tsx
index 035d00bc..bd2be240 100644
--- a/frontend/src/components/flowpilot/EscalateModal.tsx
+++ b/frontend/src/components/flowpilot/EscalateModal.tsx
@@ -35,9 +35,9 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
   return (
     <Modal isOpen={open} onClose={handleClose} title="Escalate Session" size="sm">
       <div className="space-y-4">
-        <div className="flex items-start gap-3 rounded-xl border border-amber-400/20 bg-amber-400/5 p-3">
-          <AlertTriangle size={16} className="text-amber-400 shrink-0 mt-0.5" />
-          <p className="text-sm text-amber-400">
+        <div className="flex items-start gap-3 rounded-xl border border-warning/20 bg-warning/5 p-3">
+          <AlertTriangle size={16} className="text-warning shrink-0 mt-0.5" />
+          <p className="text-sm text-warning">
             This will mark the session as requesting escalation. Team members will see it in their escalation queue and can pick it up with full context.
           </p>
         </div>
@@ -70,7 +70,7 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
           <button
             onClick={handleSubmit}
             disabled={!reason.trim() || reason.trim().length < 5 || isProcessing}
-            className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-amber-500/90 px-4 py-2.5 min-h-[44px] text-sm font-semibold text-white hover:bg-amber-500 active:scale-[0.98] disabled:opacity-40 transition-all"
+            className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-warning px-4 py-2.5 min-h-[44px] text-sm font-semibold text-white hover:bg-warning active:scale-[0.98] disabled:opacity-40 transition-all"
           >
             {isProcessing ? (
               <Loader2 size={14} className="animate-spin" />
diff --git a/frontend/src/components/flowpilot/FlowPilotActionBar.tsx b/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
index df72f812..0ad4f482 100644
--- a/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
@@ -91,7 +91,7 @@ export function FlowPilotActionBar({
         <button
           onClick={() => { setShowResolve(true); setShowEscalate(false) }}
           disabled={!canResolve || isProcessing}
-          className="flex items-center justify-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+          className="flex items-center justify-center gap-1.5 rounded-lg bg-success-dim border border-success/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-success hover:bg-success/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
         >
           <CheckCircle2 size={15} />
           Resolve
@@ -99,7 +99,7 @@ export function FlowPilotActionBar({
         <button
           onClick={() => setShowEscalate(true)}
           disabled={!canEscalate || isProcessing}
-          className="flex items-center justify-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+          className="flex items-center justify-center gap-1.5 rounded-lg bg-warning-dim border border-warning/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-warning hover:bg-warning/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
         >
           <ArrowUpRight size={15} />
           Escalate
@@ -108,7 +108,7 @@ export function FlowPilotActionBar({
           <button
             onClick={() => setShowStatusUpdate(true)}
             disabled={isProcessing}
-            className="flex items-center justify-center gap-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+            className="flex items-center justify-center gap-1.5 rounded-lg bg-accent-dim border border-accent/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-accent hover:bg-accent/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
             title="Share Update"
           >
             <FileText size={15} />
@@ -166,7 +166,7 @@ export function FlowPilotActionBar({
               <button
                 onClick={handleResolve}
                 disabled={resolutionSummary.length < 5 || submitting}
-                className="rounded-lg bg-emerald-500/20 border border-emerald-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors"
+                className="rounded-lg bg-success/20 border border-success/30 px-4 py-2 min-h-[44px] text-sm font-medium text-success hover:bg-success/30 disabled:opacity-50 transition-colors"
               >
                 {submitting ? 'Resolving...' : 'Resolve Session'}
               </button>
@@ -193,7 +193,7 @@ export function FlowPilotActionBar({
               <button
                 onClick={handleAbandon}
                 disabled={submitting}
-                className="rounded-lg bg-rose-500/20 border border-rose-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-rose-400 hover:bg-rose-500/30 disabled:opacity-50 transition-colors"
+                className="rounded-lg bg-danger/20 border border-danger/30 px-4 py-2 min-h-[44px] text-sm font-medium text-danger hover:bg-danger/30 disabled:opacity-50 transition-colors"
               >
                 {submitting ? 'Closing...' : 'Close Session'}
               </button>
diff --git a/frontend/src/components/flowpilot/FlowPilotIntake.tsx b/frontend/src/components/flowpilot/FlowPilotIntake.tsx
index a0ff603c..5946dfac 100644
--- a/frontend/src/components/flowpilot/FlowPilotIntake.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotIntake.tsx
@@ -155,7 +155,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 </div>
                 <button
                   onClick={handleClearTicket}
-                  className="ml-2 rounded-md p-1 text-muted-foreground hover:bg-white/[0.06] hover:text-foreground transition-colors"
+                  className="ml-2 rounded-md p-1 text-muted-foreground hover:bg-elevated hover:text-foreground transition-colors"
                 >
                   <X size={14} />
                 </button>
@@ -215,7 +215,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 Pull from Ticket
               </button>
               {psaChecked && !psaConnection && (
-                <span className="flex items-center gap-1 text-[0.625rem] text-amber-400/80">
+                <span className="flex items-center gap-1 text-[0.625rem] text-warning/80">
                   <AlertTriangle size={10} />
                   No PSA connected
                 </span>
diff --git a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
index 88794982..adbe3478 100644
--- a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
@@ -243,17 +243,17 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
                   <button
                     type="button"
                     onClick={() => handleRemoveUpload(upload.id)}
-                    className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors"
+                    className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-danger/20 transition-colors"
                   >
                     <X size={8} className="text-muted-foreground" />
                   </button>
                 )}
                 {upload.status === 'error' && (
                   <div
-                    className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer"
+                    className="absolute inset-0 bg-danger/20 border-2 border-danger flex items-center justify-center cursor-pointer"
                     onClick={() => retryUpload(upload.id)}
                   >
-                    <RotateCcw size={10} className="text-rose-500" />
+                    <RotateCcw size={10} className="text-danger" />
                   </div>
                 )}
               </div>
diff --git a/frontend/src/components/flowpilot/FlowPilotSession.tsx b/frontend/src/components/flowpilot/FlowPilotSession.tsx
index b3693feb..70697ff6 100644
--- a/frontend/src/components/flowpilot/FlowPilotSession.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotSession.tsx
@@ -148,7 +148,7 @@ export function FlowPilotSession({
             <div className="mb-4">
               <button
                 onClick={() => setShowShareCommunication(true)}
-                className="flex items-center gap-2 rounded-lg bg-blue-500/10 border border-blue-500/20 px-4 py-2.5 text-sm font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
+                className="flex items-center gap-2 rounded-lg bg-accent-dim border border-accent/20 px-4 py-2.5 text-sm font-medium text-accent hover:bg-accent/20 transition-colors"
               >
                 <FileText size={16} />
                 {shareLabel}
diff --git a/frontend/src/components/flowpilot/FlowPilotStepCard.tsx b/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
index f9520fd7..865404cd 100644
--- a/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
@@ -161,7 +161,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
     <div
       className={cn(
         'card-flat p-3 sm:p-4 lg:p-5',
-        isResolutionSuggestion && 'border-emerald-500/30'
+        isResolutionSuggestion && 'border-success/30'
       )}
     >
       {/* Context message */}
@@ -175,7 +175,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
       <div className="flex items-start gap-3 mb-4">
         <span className={cn(
           'mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg',
-          isResolutionSuggestion ? 'bg-emerald-500/10 text-emerald-400' : 'bg-accent-dim text-primary'
+          isResolutionSuggestion ? 'bg-success-dim text-success' : 'bg-accent-dim text-primary'
         )}>
           <Icon size={14} />
         </span>
@@ -197,7 +197,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
             <div className="flex flex-col gap-2 sm:flex-row">
               <button
                 onClick={() => handleResolutionResponse(true)}
-                className="flex-1 min-h-[44px] rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-4 py-2.5 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors"
+                className="flex-1 min-h-[44px] rounded-lg bg-success-dim border border-success/20 px-4 py-2.5 text-sm font-medium text-success hover:bg-success/20 transition-colors"
               >
                 Yes, this is resolved
               </button>
diff --git a/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx b/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
index 1ea639d6..d46880a1 100644
--- a/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
+++ b/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
@@ -128,7 +128,7 @@ export function InSessionScriptGenerator({
                 onClick={handleCopy}
                 className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
               >
-                {copied ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}
+                {copied ? <Check size={12} className="text-success" /> : <Copy size={12} />}
                 {copied ? 'Copied' : 'Copy'}
               </button>
             </div>
diff --git a/frontend/src/components/flowpilot/ProposalCard.tsx b/frontend/src/components/flowpilot/ProposalCard.tsx
index 466eb855..183f9b4f 100644
--- a/frontend/src/components/flowpilot/ProposalCard.tsx
+++ b/frontend/src/components/flowpilot/ProposalCard.tsx
@@ -2,9 +2,9 @@ import { GitBranch, ArrowUpRight, Sparkles, Clock, Hash } from 'lucide-react'
 import type { FlowProposalSummary } from '@/types/flow-proposal'
 
 const TYPE_CONFIG = {
-  new_flow: { label: 'New Flow', color: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20', icon: Sparkles },
-  enhancement: { label: 'Enhancement', color: 'text-amber-400 bg-amber-400/10 border-amber-400/20', icon: ArrowUpRight },
-  branch_addition: { label: 'Branch', color: 'text-blue-400 bg-blue-400/10 border-blue-400/20', icon: GitBranch },
+  new_flow: { label: 'New Flow', color: 'text-success bg-emerald-400/10 border-emerald-400/20', icon: Sparkles },
+  enhancement: { label: 'Enhancement', color: 'text-warning bg-warning-dim border-warning/20', icon: ArrowUpRight },
+  branch_addition: { label: 'Branch', color: 'text-accent bg-accent-dim border-accent/20', icon: GitBranch },
   auto_reinforced: { label: 'Reinforced', color: 'text-muted-foreground bg-card border-border', icon: Sparkles },
 } as const
 
diff --git a/frontend/src/components/flowpilot/ProposalDetail.tsx b/frontend/src/components/flowpilot/ProposalDetail.tsx
index 9b343e86..358310fd 100644
--- a/frontend/src/components/flowpilot/ProposalDetail.tsx
+++ b/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'}
diff --git a/frontend/src/components/flowpilot/SessionBriefing.tsx b/frontend/src/components/flowpilot/SessionBriefing.tsx
index 553712ab..4d076fa0 100644
--- a/frontend/src/components/flowpilot/SessionBriefing.tsx
+++ b/frontend/src/components/flowpilot/SessionBriefing.tsx
@@ -38,7 +38,7 @@ export function SessionBriefing({
   const pkg = escalationPackage
 
   return (
-    <div className="card-flat border-l-2 border-l-amber-500 p-5 space-y-4">
+    <div className="card-flat border-l-2 border-l-warning p-5 space-y-4">
       <div>
         <h3 className="font-heading text-base font-semibold text-foreground">
           Escalation from {originalEngineerName || 'another engineer'}
@@ -60,7 +60,7 @@ export function SessionBriefing({
       {pkg.escalation_reason && (
         <div>
           <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">Why escalated</h4>
-          <p className="text-sm text-amber-400">{pkg.escalation_reason}</p>
+          <p className="text-sm text-warning">{pkg.escalation_reason}</p>
         </div>
       )}
 
@@ -111,7 +111,7 @@ export function SessionBriefing({
           <ul className="space-y-1">
             {pkg.suggested_next_steps.map((s, i) => (
               <li key={i} className="text-sm text-foreground flex items-start gap-2">
-                <span className="text-emerald-400 mt-0.5">→</span>
+                <span className="text-success mt-0.5">→</span>
                 {s}
               </li>
             ))}
diff --git a/frontend/src/components/flowpilot/SessionDocView.tsx b/frontend/src/components/flowpilot/SessionDocView.tsx
index 0694d453..959e57e0 100644
--- a/frontend/src/components/flowpilot/SessionDocView.tsx
+++ b/frontend/src/components/flowpilot/SessionDocView.tsx
@@ -55,38 +55,38 @@ export function SessionDocView({
             currentPushStatus === 'sent'
               ? 'border-emerald-400/20 bg-emerald-400/5'
               : currentPushStatus === 'pending_retry'
-                ? 'border-amber-400/20 bg-amber-400/5'
-                : 'border-rose-500/20 bg-rose-500/5'
+                ? 'border-warning/20 bg-warning/5'
+                : 'border-danger/20 bg-rose-500/5'
           }`}
         >
           {currentPushStatus === 'sent' && (
             <>
-              <CheckCircle2 size={16} className="text-emerald-400 shrink-0" />
-              <span className="text-sm text-emerald-400">
+              <CheckCircle2 size={16} className="text-success shrink-0" />
+              <span className="text-sm text-success">
                 Documentation pushed to ticket {ticketId ? `#${ticketId}` : ''}
               </span>
             </>
           )}
           {currentPushStatus === 'pending_retry' && (
             <>
-              <Loader2 size={16} className="text-amber-400 shrink-0 animate-spin" />
-              <span className="text-sm text-amber-400">
+              <Loader2 size={16} className="text-warning shrink-0 animate-spin" />
+              <span className="text-sm text-warning">
                 Documentation queued for push — will sync shortly
               </span>
             </>
           )}
           {currentPushStatus === 'failed' && (
             <>
-              <AlertTriangle size={16} className="text-rose-500 shrink-0" />
+              <AlertTriangle size={16} className="text-danger shrink-0" />
               <div className="flex-1">
-                <span className="text-sm text-rose-500">
+                <span className="text-sm text-danger">
                   Failed to push to ticket{currentPushError ? ` — ${currentPushError}` : ''}
                 </span>
               </div>
               <button
                 onClick={handleRetry}
                 disabled={retrying}
-                className="flex items-center gap-1.5 rounded-lg bg-rose-500/10 px-3 py-1.5 text-xs font-medium text-rose-500 hover:bg-rose-500/20 transition-colors disabled:opacity-50"
+                className="flex items-center gap-1.5 rounded-lg bg-danger-dim px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-50"
               >
                 {retrying ? <Loader2 size={12} className="animate-spin" /> : <RefreshCw size={12} />}
                 Retry
@@ -98,9 +98,9 @@ export function SessionDocView({
 
       {/* Member mapping warning */}
       {memberMappingWarning && (
-        <div className="rounded-xl border border-blue-400/20 bg-blue-400/5 px-4 py-3 flex items-start gap-3">
-          <Info size={16} className="text-blue-400 shrink-0 mt-0.5" />
-          <span className="text-sm text-blue-400">
+        <div className="rounded-xl border border-accent/20 bg-accent/5 px-4 py-3 flex items-start gap-3">
+          <Info size={16} className="text-accent shrink-0 mt-0.5" />
+          <span className="text-sm text-accent">
             Time entry was not created — {memberMappingWarning} Session timing is included in the ticket note.
           </span>
         </div>
@@ -137,12 +137,12 @@ export function SessionDocView({
 
       {/* Outcome */}
       {(documentation.resolution_summary || documentation.escalation_reason) && (
-        <div className={`card-flat p-4 border-l-2 ${documentation.resolution_summary ? 'border-l-emerald-500' : 'border-l-amber-500'}`}>
+        <div className={`card-flat p-4 border-l-2 ${documentation.resolution_summary ? 'border-l-success' : 'border-l-warning'}`}>
           <div className="flex items-center gap-2 mb-1">
             {documentation.resolution_summary ? (
-              <CheckCircle2 size={14} className="text-emerald-400" />
+              <CheckCircle2 size={14} className="text-success" />
             ) : (
-              <ArrowUpRight size={14} className="text-amber-400" />
+              <ArrowUpRight size={14} className="text-warning" />
             )}
             <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground">
               {documentation.resolution_summary ? 'Resolved' : 'Escalated'}
@@ -219,8 +219,8 @@ export function SessionDocView({
                   size={20}
                   className={
                     (currentRating ?? 0) >= star
-                      ? 'fill-amber-400 text-amber-400'
-                      : 'text-muted-foreground hover:text-amber-400'
+                      ? 'fill-warning text-warning'
+                      : 'text-muted-foreground hover:text-warning'
                   }
                 />
               </button>
diff --git a/frontend/src/components/flowpilot/SimilarSessions.tsx b/frontend/src/components/flowpilot/SimilarSessions.tsx
index f1f20004..4970b230 100644
--- a/frontend/src/components/flowpilot/SimilarSessions.tsx
+++ b/frontend/src/components/flowpilot/SimilarSessions.tsx
@@ -80,9 +80,9 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
               className={cn(
                 'text-[0.5rem] font-sans text-xs uppercase',
                 session.status === 'resolved'
-                  ? 'text-emerald-400'
+                  ? 'text-success'
                   : session.status === 'escalated'
-                    ? 'text-amber-400'
+                    ? 'text-warning'
                     : 'text-muted-foreground'
               )}
             >
diff --git a/frontend/src/components/flowpilot/StatusUpdateModal.tsx b/frontend/src/components/flowpilot/StatusUpdateModal.tsx
index 0eeaadd6..19672599 100644
--- a/frontend/src/components/flowpilot/StatusUpdateModal.tsx
+++ b/frontend/src/components/flowpilot/StatusUpdateModal.tsx
@@ -184,7 +184,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
           {/* Step 3: Generating */}
           {step === 'generating' && (
             <div className="flex flex-col items-center justify-center py-8 gap-3">
-              <Loader2 size={24} className="animate-spin text-blue-400" />
+              <Loader2 size={24} className="animate-spin text-accent" />
               <p className="text-sm text-muted-foreground">
                 {audience === 'request_info' ? 'Drafting information request...' : audience === 'email_draft' ? 'Generating email draft...' : audience === 'client_update' ? 'Generating client update...' : 'Generating ticket notes...'}
               </p>
@@ -196,7 +196,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
             <div className="space-y-4">
               {/* Meta badges */}
               <div className="flex items-center gap-2 flex-wrap">
-                <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
+                <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-accent-dim text-accent border border-accent/20">
                   {AUDIENCES.find(a => a.value === result.audience)?.label}
                 </span>
                 <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-[rgba(255,255,255,0.06)] text-muted-foreground border border-[rgba(255,255,255,0.08)]">
@@ -224,8 +224,8 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
                   className={cn(
                     'flex items-center gap-2 rounded-lg px-4 py-2 min-h-[44px] text-sm font-medium transition-colors',
                     copied
-                      ? 'bg-emerald-500/20 border border-emerald-500/30 text-emerald-400'
-                      : 'bg-blue-500/10 border border-blue-500/20 text-blue-400 hover:bg-blue-500/20'
+                      ? 'bg-success/20 border border-success/30 text-success'
+                      : 'bg-accent-dim border border-accent/20 text-accent hover:bg-accent/20'
                   )}
                 >
                   {copied ? <Check size={16} /> : <Copy size={16} />}
diff --git a/frontend/src/components/script-builder/ScriptBuilderChat.tsx b/frontend/src/components/script-builder/ScriptBuilderChat.tsx
index 875b2803..e90efae7 100644
--- a/frontend/src/components/script-builder/ScriptBuilderChat.tsx
+++ b/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>
diff --git a/frontend/src/components/script-builder/ScriptCodeBlock.tsx b/frontend/src/components/script-builder/ScriptCodeBlock.tsx
index 4daa6392..be397439 100644
--- a/frontend/src/components/script-builder/ScriptCodeBlock.tsx
+++ b/frontend/src/components/script-builder/ScriptCodeBlock.tsx
@@ -108,7 +108,7 @@ export function ScriptCodeBlock({
         </button>
         <button
           onClick={(e) => { e.stopPropagation(); onSave() }}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-default text-secondary hover:text-primary hover:border-hover hover:bg-elevated"
         >
           <BookmarkPlus size={14} />
           Save to Library
diff --git a/frontend/src/components/script-builder/ScriptPreviewModal.tsx b/frontend/src/components/script-builder/ScriptPreviewModal.tsx
index 33b1b655..f1191692 100644
--- a/frontend/src/components/script-builder/ScriptPreviewModal.tsx
+++ b/frontend/src/components/script-builder/ScriptPreviewModal.tsx
@@ -78,7 +78,7 @@ export function ScriptPreviewModal({
             </button>
             <button
               onClick={onSave}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-primary text-white hover:brightness-110"
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-accent text-white hover:brightness-110"
             >
               <BookmarkPlus size={14} />
               Save to Library
diff --git a/frontend/src/pages/AssistantChatPage.tsx b/frontend/src/pages/AssistantChatPage.tsx
index b3d40d3a..ebf0e2c7 100644
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -739,13 +739,13 @@ export default function AssistantChatPage() {
                             </div>
                           )}
                           {upload.status === 'done' && (
-                            <button type="button" onClick={() => handleRemoveUpload(upload.id)} className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors">
+                            <button type="button" onClick={() => handleRemoveUpload(upload.id)} className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-danger/20 transition-colors">
                               <X size={8} className="text-muted-foreground" />
                             </button>
                           )}
                           {upload.status === 'error' && (
-                            <div className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer" onClick={() => retryUpload(upload.id)}>
-                              <RotateCcw size={10} className="text-rose-500" />
+                            <div className="absolute inset-0 bg-danger/20 border-2 border-danger flex items-center justify-center cursor-pointer" onClick={() => retryUpload(upload.id)}>
+                              <RotateCcw size={10} className="text-danger" />
                             </div>
                           )}
                         </div>
@@ -786,11 +786,11 @@ export default function AssistantChatPage() {
                       )}
                       {messages.length >= 2 && (
                         <>
-                          <button type="button" onClick={() => setShowStatusUpdate(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-blue-400 hover:bg-blue-500/10 transition-colors disabled:opacity-40" title="Share status update">
+                          <button type="button" onClick={() => setShowStatusUpdate(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-accent hover:bg-accent-dim transition-colors disabled:opacity-40" title="Share status update">
                             <FileText size={14} />
                             <span className="hidden sm:inline">Update</span>
                           </button>
-                          <button type="button" onClick={() => setShowConclude(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-amber-400 hover:bg-amber-400/10 transition-colors disabled:opacity-40" title="Conclude session">
+                          <button type="button" onClick={() => setShowConclude(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-warning hover:bg-warning-dim transition-colors disabled:opacity-40" title="Conclude session">
                             <Flag size={14} />
                             <span className="hidden sm:inline">Conclude</span>
                           </button>
diff --git a/frontend/src/pages/FlowPilotSessionPage.tsx b/frontend/src/pages/FlowPilotSessionPage.tsx
index 55927daf..0d9dd91c 100644
--- a/frontend/src/pages/FlowPilotSessionPage.tsx
+++ b/frontend/src/pages/FlowPilotSessionPage.tsx
@@ -108,7 +108,7 @@ export default function FlowPilotSessionPage() {
     return (
       <div className="flex items-center justify-center min-h-[50vh]">
         <div className="card-flat p-6 text-center max-w-md">
-          <p className="text-sm text-rose-400">{fp.error}</p>
+          <p className="text-sm text-danger">{fp.error}</p>
           <button
             onClick={() => window.location.reload()}
             className="mt-3 text-xs text-muted-foreground hover:text-foreground transition-colors"
@@ -160,15 +160,15 @@ export default function FlowPilotSessionPage() {
           className="flex items-center gap-3 border-b px-5 py-3 shrink-0"
           style={{ borderColor: 'var(--color-border-default)' }}
         >
-          <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-500/10">
-            <Sparkles size={14} className="text-amber-400" />
+          <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-warning-dim">
+            <Sparkles size={14} className="text-warning" />
           </span>
           <div className="flex-1 min-w-0">
             <h1 className="font-heading text-sm font-semibold text-foreground truncate">
               Escalation Pickup — {fp.session.problem_summary || 'FlowPilot Session'}
             </h1>
           </div>
-          <span className="font-sans text-xs rounded-md bg-amber-500/10 px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-amber-400 border border-amber-500/20">
+          <span className="font-sans text-xs rounded-md bg-warning-dim px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-warning border border-warning/20">
             Awaiting pickup
           </span>
         </div>
@@ -196,8 +196,8 @@ export default function FlowPilotSessionPage() {
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
           <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
             <div className="flex items-center gap-3 mb-3">
-              <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-500/10">
-                <AlertTriangle size={18} className="text-amber-400" />
+              <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-warning-dim">
+                <AlertTriangle size={18} className="text-warning" />
               </span>
               <h2 className="text-lg font-heading font-semibold text-foreground">Active Session</h2>
             </div>
@@ -207,7 +207,7 @@ export default function FlowPilotSessionPage() {
             <div className="flex gap-2">
               <button
                 onClick={() => blocker.reset()}
-                className="flex-1 rounded-lg bg-gradient-to-r from-blue-500 to-blue-400 px-4 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
+                className="flex-1 rounded-lg bg-accent px-4 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
               >
                 Stay in Session
               </button>
@@ -246,7 +246,7 @@ export default function FlowPilotSessionPage() {
               <button
                 onClick={() => setShowResolve(true)}
                 disabled={!fp.canResolve || fp.isProcessing}
-                className="flex items-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-3 py-1.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                className="flex items-center gap-1.5 rounded-lg bg-success-dim border border-success/20 px-3 py-1.5 text-xs font-medium text-success hover:bg-success/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
               >
                 <CheckCircle2 size={13} />
                 Resolve
@@ -254,7 +254,7 @@ export default function FlowPilotSessionPage() {
               <button
                 onClick={() => setShowEscalate(true)}
                 disabled={!fp.canEscalate || fp.isProcessing}
-                className="flex items-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20 px-3 py-1.5 text-xs font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                className="flex items-center gap-1.5 rounded-lg bg-warning-dim border border-warning/20 px-3 py-1.5 text-xs font-medium text-warning hover:bg-warning/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
               >
                 <ArrowUpRight size={13} />
                 Escalate
@@ -263,7 +263,7 @@ export default function FlowPilotSessionPage() {
                 <button
                   onClick={() => setShowStatusUpdate(true)}
                   disabled={fp.isProcessing}
-                  className="flex items-center gap-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20 px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                  className="flex items-center gap-1.5 rounded-lg bg-accent-dim border border-accent/20 px-3 py-1.5 text-xs font-medium text-accent hover:bg-accent/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
                   title="Share Update"
                 >
                   <FileText size={13} />
@@ -291,7 +291,7 @@ export default function FlowPilotSessionPage() {
                       </button>
                       <button
                         onClick={() => { setShowOverflow(false); setShowAbandon(true) }}
-                        className="flex w-full items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
+                        className="flex w-full items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-danger hover:bg-danger-dim transition-colors"
                       >
                         <X size={13} />
                         Close Session
@@ -317,7 +317,7 @@ export default function FlowPilotSessionPage() {
                     <button
                       onClick={() => { setShowOverflow(false); setShowResolve(true) }}
                       disabled={!fp.canResolve}
-                      className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-emerald-400 hover:bg-emerald-500/10 transition-colors disabled:opacity-40"
+                      className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-success hover:bg-success-dim transition-colors disabled:opacity-40"
                     >
                       <CheckCircle2 size={14} />
                       Resolve
@@ -325,7 +325,7 @@ export default function FlowPilotSessionPage() {
                     <button
                       onClick={() => { setShowOverflow(false); setShowEscalate(true) }}
                       disabled={!fp.canEscalate}
-                      className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-amber-400 hover:bg-amber-500/10 transition-colors disabled:opacity-40"
+                      className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-warning hover:bg-warning-dim transition-colors disabled:opacity-40"
                     >
                       <ArrowUpRight size={14} />
                       Escalate
@@ -333,7 +333,7 @@ export default function FlowPilotSessionPage() {
                     {fp.allSteps.length >= 2 && (
                       <button
                         onClick={() => { setShowOverflow(false); setShowStatusUpdate(true) }}
-                        className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-blue-400 hover:bg-blue-500/10 transition-colors"
+                        className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-accent hover:bg-accent-dim transition-colors"
                       >
                         <FileText size={14} />
                         Share Update
@@ -349,7 +349,7 @@ export default function FlowPilotSessionPage() {
                     </button>
                     <button
                       onClick={() => { setShowOverflow(false); setShowAbandon(true) }}
-                      className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-muted-foreground hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
+                      className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-muted-foreground hover:text-danger hover:bg-danger-dim transition-colors"
                     >
                       <X size={14} />
                       Close Session
@@ -364,8 +364,8 @@ export default function FlowPilotSessionPage() {
         {/* Status badge — non-active states */}
         {fp.session.status !== 'active' && (
           <span className={`flex items-center gap-1.5 text-[0.625rem] uppercase tracking-wider font-sans ${
-            fp.session.status === 'resolved' ? 'text-emerald-400' :
-            fp.session.status === 'escalated' ? 'text-amber-400' :
+            fp.session.status === 'resolved' ? 'text-success' :
+            fp.session.status === 'escalated' ? 'text-warning' :
             fp.session.status === 'paused' ? 'text-muted-foreground' :
             'text-muted-foreground'
           }`}>
@@ -437,7 +437,7 @@ export default function FlowPilotSessionPage() {
                   }
                 }}
                 disabled={resolutionSummary.length < 5 || submitting}
-                className="rounded-lg bg-emerald-500/20 border border-emerald-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors"
+                className="rounded-lg bg-success/20 border border-success/30 px-4 py-2 min-h-[44px] text-sm font-medium text-success hover:bg-success/30 disabled:opacity-50 transition-colors"
               >
                 {submitting ? 'Resolving...' : 'Resolve Session'}
               </button>
@@ -473,7 +473,7 @@ export default function FlowPilotSessionPage() {
                   }
                 }}
                 disabled={submitting}
-                className="rounded-lg bg-rose-500/20 border border-rose-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-rose-400 hover:bg-rose-500/30 disabled:opacity-50 transition-colors"
+                className="rounded-lg bg-danger/20 border border-danger/30 px-4 py-2 min-h-[44px] text-sm font-medium text-danger hover:bg-danger/30 disabled:opacity-50 transition-colors"
               >
                 {submitting ? 'Closing...' : 'Close Session'}
               </button>