From 6564272987f7ebe28d80e1693b6f716957df8145 Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Thu, 26 Feb 2026 16:04:19 -0800
Subject: [PATCH] refactor(theme): migrate high-priority components to new
 token system

- social-card.tsx: status colors, borders, surfaces
- assignment-panel.tsx: all hardcoded hex colors replaced
- graph-node-card.tsx: node styles, borders, glows, text colors
---
 src/components/graph/assignment-panel.tsx | 98 +++++++++++------------
 src/components/graph/graph-node-card.tsx  | 62 +++++++-------
 src/components/social/social-card.tsx     | 68 ++++++++--------
 3 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/src/components/graph/assignment-panel.tsx b/src/components/graph/assignment-panel.tsx
index 0f0e65d..5aea05f 100644
--- a/src/components/graph/assignment-panel.tsx
+++ b/src/components/graph/assignment-panel.tsx
@@ -244,10 +244,10 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
     };
 
     const renderTaskItem = (issue: BeadIssue, showAssignButton: boolean = false, archetypeBadges: AgentArchetype[] = []) => (
-        <div key={issue.id} className="flex items-center gap-2 p-2 bg-[#0a111a] rounded-md border border-[var(--ui-border-soft)]">
+        <div key={issue.id} className="flex items-center gap-2 p-2 bg-[var(--surface-input)] rounded-md border border-[var(--border-subtle)]">
             <div className="flex-1 min-w-0">
-                <div className="text-[10px] font-mono text-[var(--ui-text-muted)]">{issue.id}</div>
-                <div className="text-xs text-[var(--ui-text-primary)] truncate">{truncateTitle(issue.title)}</div>
+                <div className="text-[10px] font-mono text-[var(--text-tertiary)]">{issue.id}</div>
+                <div className="text-xs text-[var(--text-primary)] truncate">{truncateTitle(issue.title)}</div>
             </div>
             {archetypeBadges.length > 0 && (
                 <div className="flex gap-1">
@@ -269,17 +269,17 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                 <div className="relative">
                     <button
                         onClick={() => setQuickAssignDropdown(quickAssignDropdown === issue.id ? null : issue.id)}
-                        className="h-6 w-6 flex items-center justify-center rounded bg-[var(--ui-accent-info)]/20 hover:bg-[var(--ui-accent-info)]/30 text-[var(--ui-accent-info)] transition-colors"
+                        className="h-6 w-6 flex items-center justify-center rounded bg-[var(--accent-info)]/20 hover:bg-[var(--accent-info)]/30 text-[var(--accent-info)] transition-colors"
                     >
                         <UserPlus className="w-3 h-3" />
                     </button>
                     {quickAssignDropdown === issue.id && (
-                        <div className="absolute right-0 top-full mt-1 z-10 bg-[#111f2b] border border-[var(--ui-border-soft)] rounded-md shadow-lg py-1 min-w-[120px]">
+                        <div className="absolute right-0 top-full mt-1 z-10 bg-[var(--surface-tertiary)] border border-[var(--border-subtle)] rounded-md shadow-lg py-1 min-w-[120px]">
                             {archetypes.map((a: AgentArchetype) => (
                                 <button
                                     key={a.id}
                                     onClick={() => handleQuickAssign(issue.id, a.id)}
-                                    className="w-full px-3 py-1.5 text-left text-xs text-[var(--ui-text-primary)] hover:bg-[#1a2d3d] transition-colors"
+                                    className="w-full px-3 py-1.5 text-left text-xs text-[var(--text-primary)] hover:bg-[var(--surface-hover)] transition-colors"
                                 >
                                     {a.name}
                                 </button>
@@ -296,14 +296,14 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
             <div className="flex gap-2">
                 <button
                     onClick={() => setShowArchetypeList(!showArchetypeList)}
-                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 border rounded-lg text-sm font-medium text-[var(--ui-text-primary)] transition-colors ${showArchetypeList ? 'bg-[#1a2d3d] border-[var(--ui-accent-info)]' : 'bg-[#111f2b] hover:bg-[#1a2d3d] border-[var(--ui-border-soft)]'}`}
+                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 border rounded-lg text-sm font-medium text-[var(--text-primary)] transition-colors ${showArchetypeList ? 'bg-[var(--surface-active)] border-[var(--accent-info)]' : 'bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] border-[var(--border-subtle)]'}`}
                 >
-                    <Blocks className="w-4 h-4 text-[var(--ui-accent-info)]" />
+                    <Blocks className="w-4 h-4 text-[var(--accent-info)]" />
                     Archetypes
                 </button>
                 <button
                     onClick={() => setShowTemplateList(!showTemplateList)}
-                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 border rounded-lg text-sm font-medium text-[var(--ui-text-primary)] transition-colors ${showTemplateList ? 'bg-[#1a2d3d] border-amber-500' : 'bg-[#111f2b] hover:bg-[#1a2d3d] border-[var(--ui-border-soft)]'}`}
+                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 border rounded-lg text-sm font-medium text-[var(--text-primary)] transition-colors ${showTemplateList ? 'bg-[var(--surface-active)] border-[var(--accent-warning)]' : 'bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] border-[var(--border-subtle)]'}`}
                 >
                     <FileCode2 className="w-4 h-4 text-amber-500" />
                     Templates
@@ -349,20 +349,20 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
             />
 
             {selectedEpic && (
-                <div className="bg-[#111f2b] rounded-xl border border-purple-500/30 flex flex-col overflow-hidden">
-                    <div className="px-4 py-3 border-b border-[var(--ui-border-soft)] bg-[#14202e] flex items-center gap-2">
+                <div className="bg-[var(--surface-tertiary)] rounded-xl border border-purple-500/30 flex flex-col overflow-hidden">
+                    <div className="px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2">
                         <Layers className="w-4 h-4 text-purple-400" />
-                        <h3 className="font-semibold text-sm text-[var(--ui-text-primary)]">Epic Template</h3>
+                        <h3 className="font-semibold text-sm text-[var(--text-primary)]">Epic Template</h3>
                     </div>
                     <div className="p-4 space-y-3">
                         <div>
-                            <div className="text-[10px] font-mono text-[var(--ui-text-muted)] uppercase tracking-wider mb-1">{selectedEpic.id}</div>
-                            <div className="text-sm font-semibold text-[var(--ui-text-primary)] leading-snug">{selectedEpic.title}</div>
+                            <div className="text-[10px] font-mono text-[var(--text-tertiary)] uppercase tracking-wider mb-1">{selectedEpic.id}</div>
+                            <div className="text-sm font-semibold text-[var(--text-primary)] leading-snug">{selectedEpic.title}</div>
                         </div>
 
                         {epicTemplate ? (
                             <div className="space-y-3">
-                                <div className="bg-[#0a111a] rounded-md p-3 border border-[var(--ui-border-soft)]">
+                                <div className="bg-[var(--surface-input)] rounded-md p-3 border border-[var(--border-subtle)]">
                                     <div className="flex items-center gap-2 mb-2">
                                         <div
                                             className="h-6 w-6 rounded flex items-center justify-center text-xs font-bold"
@@ -373,13 +373,13 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                                         >
                                             {epicTemplate.icon || 'T'}
                                         </div>
-                                        <div className="font-semibold text-sm text-[var(--ui-text-primary)]">{epicTemplate.name}</div>
+                                        <div className="font-semibold text-sm text-[var(--text-primary)]">{epicTemplate.name}</div>
                                     </div>
                                     {epicTemplate.description && (
-                                        <div className="text-xs text-[var(--ui-text-muted)] mb-3">{epicTemplate.description}</div>
+                                        <div className="text-xs text-[var(--text-tertiary)] mb-3">{epicTemplate.description}</div>
                                     )}
                                     <div>
-                                        <div className="text-[10px] font-mono text-[var(--ui-text-muted)] uppercase tracking-wider mb-2">Team Roster</div>
+                                        <div className="text-[10px] font-mono text-[var(--text-tertiary)] uppercase tracking-wider mb-2">Team Roster</div>
                                         <div className="space-y-1">
                                             {Array.from(new Set(epicTemplate.team.map(m => m.archetypeId))).map(archetypeId => {
                                                 const archetype = archetypes.find((a: AgentArchetype) => a.id === archetypeId);
@@ -396,8 +396,8 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                                                         >
                                                             {getArchetypeDisplayChar(archetype)}
                                                         </div>
-                                                        <span className="text-[var(--ui-text-primary)]">{archetype.name}</span>
-                                                        <span className="text-[var(--ui-text-muted)] ml-auto">x{count}</span>
+                                                        <span className="text-[var(--text-primary)]">{archetype.name}</span>
+                                                        <span className="text-[var(--text-tertiary)] ml-auto">x{count}</span>
                                                     </div>
                                                 );
                                             })}
@@ -407,7 +407,7 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                                 <div className="flex gap-2">
                                     <button
                                         onClick={() => setShowTemplateList(true)}
-                                        className="flex-1 py-1.5 text-xs font-medium text-[var(--ui-text-muted)] bg-[#0a111a] border border-[var(--ui-border-soft)] rounded-md hover:bg-[#14202e] transition-colors"
+                                        className="flex-1 py-1.5 text-xs font-medium text-[var(--text-tertiary)] bg-[var(--surface-input)] border border-[var(--border-subtle)] rounded-md hover:bg-[var(--surface-hover)] transition-colors"
                                     >
                                         Change Template
                                     </button>
@@ -425,7 +425,7 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                             </div>
                         ) : (
                             <div className="space-y-3">
-                                <div className="text-xs text-[var(--ui-text-muted)] text-center py-3">
+                                <div className="text-xs text-[var(--text-tertiary)] text-center py-3">
                                     No template assigned
                                 </div>
                                 <button
@@ -441,26 +441,26 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
             )}
 
             {selectedIssue && selectedIssue.issue_type !== 'epic' && (
-                <div className="bg-[#111f2b] rounded-xl border border-[var(--ui-accent-info)]/30 flex flex-col overflow-hidden">
-                    <div className="px-4 py-3 border-b border-[var(--ui-border-soft)] bg-[#14202e] flex items-center gap-2">
-                        <Zap className="w-4 h-4 text-[var(--ui-accent-info)]" />
-                        <h3 className="font-semibold text-sm text-[var(--ui-text-primary)]">Task Assignment</h3>
+                <div className="bg-[var(--surface-tertiary)] rounded-xl border border-[var(--accent-info)]/30 flex flex-col overflow-hidden">
+                    <div className="px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2">
+                        <Zap className="w-4 h-4 text-[var(--accent-info)]" />
+                        <h3 className="font-semibold text-sm text-[var(--text-primary)]">Task Assignment</h3>
                     </div>
                     <div className="p-4 space-y-4">
                         <div>
-                            <div className="text-[10px] font-mono text-[var(--ui-text-muted)] uppercase tracking-wider mb-1">{selectedIssue.id}</div>
-                            <div className="text-sm font-semibold text-[var(--ui-text-primary)] leading-snug">{selectedIssue.title}</div>
-                            <div className="text-xs text-[var(--ui-text-muted)] mt-1">Status: <span className="font-semibold uppercase">{selectedIssue.status}</span></div>
+                            <div className="text-[10px] font-mono text-[var(--text-tertiary)] uppercase tracking-wider mb-1">{selectedIssue.id}</div>
+                            <div className="text-sm font-semibold text-[var(--text-primary)] leading-snug">{selectedIssue.title}</div>
+                            <div className="text-xs text-[var(--text-tertiary)] mt-1">Status: <span className="font-semibold uppercase">{selectedIssue.status}</span></div>
                         </div>
 
                         {(selectedIssue.status === 'open' || selectedIssue.status === 'blocked') ? (
                             <div className="space-y-3">
                                 <div>
-                                    <label className="text-xs font-medium text-[var(--ui-text-muted)] mb-1.5 block">Assign Agent Archetype</label>
+                                    <label className="text-xs font-medium text-[var(--text-tertiary)] mb-1.5 block">Assign Agent Archetype</label>
                                     <select
                                         value={selectedArchetypeForPrep}
                                         onChange={(e) => setSelectedArchetypeForPrep(e.target.value)}
-                                        className="w-full bg-[#0a111a] border border-[var(--ui-border-soft)] rounded-md px-3 py-2 text-sm text-[var(--ui-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--ui-accent-info)]"
+                                        className="w-full bg-[var(--surface-input)] border border-[var(--border-subtle)] rounded-md px-3 py-2 text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--accent-info)]"
                                     >
                                         <option value="" disabled>Select archetype...</option>
                                         {archetypes.map((a: AgentArchetype) => (
@@ -471,7 +471,7 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                                 <button
                                     onClick={handlePrepTask}
                                     disabled={!selectedArchetypeForPrep || isPrepping || prepSuccess}
-                                    className={`w-full py-2 text-white text-sm font-bold rounded-md disabled:opacity-50 transition-colors flex items-center justify-center ${prepSuccess ? 'bg-emerald-500' : 'bg-[var(--ui-accent-info)] hover:bg-[var(--ui-accent-info)]/90'}`}
+                                    className={`w-full py-2 text-[var(--text-inverse)] text-sm font-bold rounded-md disabled:opacity-50 transition-colors flex items-center justify-center ${prepSuccess ? 'bg-[var(--accent-success)]' : 'bg-[var(--accent-info)] hover:bg-[var(--accent-info)]/90'}`}
                                 >
                                     {isPrepping ? <Loader2 className="w-4 h-4 animate-spin" /> : prepSuccess ? 'Prep Successful!' : 'Prep Task for Swarm'}
                                 </button>
@@ -485,20 +485,20 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                 </div>
             )}
 
-            <div className="bg-[#111f2b] rounded-xl border border-[var(--ui-border-soft)] flex flex-col overflow-hidden">
+            <div className="bg-[var(--surface-tertiary)] rounded-xl border border-[var(--border-subtle)] flex flex-col overflow-hidden">
                 <button
                     onClick={() => setNeedsAgentCollapsed(!needsAgentCollapsed)}
-                    className="w-full px-4 py-3 border-b border-[var(--ui-border-soft)] bg-[#14202e] flex items-center gap-2 hover:bg-[#1a2d3d] transition-colors"
+                    className="w-full px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2 hover:bg-[var(--surface-hover)] transition-colors"
                 >
-                    {needsAgentCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--ui-text-muted)]" /> : <ChevronDown className="w-4 h-4 text-[var(--ui-text-muted)]" />}
+                    {needsAgentCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--text-tertiary)]" /> : <ChevronDown className="w-4 h-4 text-[var(--text-tertiary)]" />}
                     <AlertCircle className="w-4 h-4 text-orange-400" />
-                    <h3 className="font-semibold text-sm text-[var(--ui-text-primary)]">Needs Agent</h3>
-                    <span className="ml-auto text-xs text-[var(--ui-text-muted)]">{needsAgentTasks.length}</span>
+                    <h3 className="font-semibold text-sm text-[var(--text-primary)]">Needs Agent</h3>
+                    <span className="ml-auto text-xs text-[var(--text-tertiary)]">{needsAgentTasks.length}</span>
                 </button>
                 {!needsAgentCollapsed && (
                     <div className="max-h-40 overflow-y-auto p-3 space-y-2 custom-scrollbar">
                         {needsAgentTasks.length === 0 ? (
-                            <div className="text-center text-[var(--ui-text-muted)] text-xs py-2">
+                            <div className="text-center text-[var(--text-tertiary)] text-xs py-2">
                                 All actionable tasks have agents assigned
                             </div>
                         ) : (
@@ -511,17 +511,17 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
             <div className="bg-[#111f2b] rounded-xl border border-[var(--ui-border-soft)] flex flex-col overflow-hidden">
                 <button
                     onClick={() => setPreAssignedCollapsed(!preAssignedCollapsed)}
-                    className="w-full px-4 py-3 border-b border-[var(--ui-border-soft)] bg-[#14202e] flex items-center gap-2 hover:bg-[#1a2d3d] transition-colors"
+                    className="w-full px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2 hover:bg-[var(--surface-hover)] transition-colors"
                 >
                     {preAssignedCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--ui-text-muted)]" /> : <ChevronDown className="w-4 h-4 text-[var(--ui-text-muted)]" />}
                     <Clock className="w-4 h-4 text-amber-400" />
-                    <h3 className="font-semibold text-sm text-[var(--ui-text-primary)]">Pre-assigned</h3>
+                    <h3 className="font-semibold text-sm text-[var(--text-primary)]">Pre-assigned</h3>
                     <span className="ml-auto text-xs text-[var(--ui-text-muted)]">{preAssignedTasks.length}</span>
                 </button>
                 {!preAssignedCollapsed && (
                     <div className="max-h-40 overflow-y-auto p-3 space-y-2 custom-scrollbar">
                         {preAssignedTasks.length === 0 ? (
-                            <div className="text-center text-[var(--ui-text-muted)] text-xs py-2">
+                            <div className="text-center text-[var(--text-tertiary)] text-xs py-2">
                                 No pre-assigned tasks waiting
                             </div>
                         ) : (
@@ -537,25 +537,25 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                 )}
             </div>
 
-            <div className="flex-1 bg-[#111f2b] rounded-xl border border-[var(--ui-border-soft)] flex flex-col overflow-hidden min-h-0">
+            <div className="flex-1 bg-[var(--surface-tertiary)] rounded-xl border border-[var(--border-subtle)] flex flex-col overflow-hidden min-h-0">
                 <button
                     onClick={() => setSquadRosterCollapsed(!squadRosterCollapsed)}
-                    className="w-full px-4 py-3 border-b border-[var(--ui-border-soft)] bg-[#14202e] flex items-center gap-2 hover:bg-[#1a2d3d] transition-colors"
+                    className="w-full px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2 hover:bg-[var(--surface-hover)] transition-colors"
                 >
                     {squadRosterCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--ui-text-muted)]" /> : <ChevronDown className="w-4 h-4 text-[var(--ui-text-muted)]" />}
                     <Users className="w-4 h-4 text-emerald-500" />
-                    <h3 className="font-semibold text-sm text-[var(--ui-text-primary)]">Squad Roster</h3>
-                    <span className="ml-auto text-xs text-[var(--ui-text-muted)]">{activeRoster.length} active</span>
+                    <h3 className="font-semibold text-sm text-[var(--text-primary)]">Squad Roster</h3>
+                    <span className="ml-auto text-xs text-[var(--text-tertiary)]">{activeRoster.length} active</span>
                 </button>
                 {!squadRosterCollapsed && (
                     <div className="flex-1 overflow-y-auto p-3 space-y-2 custom-scrollbar">
                         {activeRoster.length === 0 ? (
-                            <div className="text-center text-[var(--ui-text-muted)] text-xs py-4">
+                            <div className="text-center text-[var(--text-tertiary)] text-xs py-4">
                                 No active agents
                             </div>
                         ) : (
                             activeRoster.map(({ issue, archetype }) => (
-                                <div key={issue.id} className="flex items-center gap-2 p-2 bg-[#0a111a] rounded-md border border-[var(--ui-border-soft)]">
+                                <div key={issue.id} className="flex items-center gap-2 p-2 bg-[var(--surface-input)] rounded-md border border-[var(--border-subtle)]">
                                     <div
                                         className="h-6 w-6 rounded flex items-center justify-center text-xs font-bold"
                                         style={{
@@ -566,8 +566,8 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                                         {archetype ? getArchetypeDisplayChar(archetype) : '?'}
                                     </div>
                                     <div className="flex-1 min-w-0">
-                                        <div className="text-xs font-medium text-[var(--ui-text-primary)] truncate">{issue.assignee}</div>
-                                        <div className="text-[10px] text-[var(--ui-text-muted)] truncate">{issue.id}</div>
+                                        <div className="text-xs font-medium text-[var(--text-primary)] truncate">{issue.assignee}</div>
+                                        <div className="text-[10px] text-[var(--text-tertiary)] truncate">{issue.id}</div>
                                     </div>
                                 </div>
                             ))
diff --git a/src/components/graph/graph-node-card.tsx b/src/components/graph/graph-node-card.tsx
index 7b8018e..bf0907f 100644
--- a/src/components/graph/graph-node-card.tsx
+++ b/src/components/graph/graph-node-card.tsx
@@ -71,8 +71,8 @@ function statusDot(status: BeadIssue['status']): string {
  */
 function nodeStyle(kind: GraphNodeData['kind']): string {
     return kind === 'epic'
-        ? 'bg-sky-500/10 border-sky-400/30'
-        : 'bg-slate-800/60 border-white/10';
+        ? 'bg-[var(--graph-node-epic)] border-[var(--accent-info)]/30'
+        : 'bg-[var(--graph-node-default)] border-[var(--border-subtle)]';
 }
 
 /**
@@ -224,23 +224,23 @@ export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeDa
                     data.isCycleNode ? 'ring-2 ring-rose-400/55' : ''
                     } ${
                     data.isActionable && !selected
-                        ? 'ring-1 ring-emerald-400/30 shadow-[0_0_20px_rgba(16,185,129,0.12)]'
+                        ? 'ring-1 ring-[var(--accent-success)]/30 shadow-[var(--glow-success)]'
                         : ''
                     } ${
                     selected
-                        ? 'border-sky-400/50 shadow-[0_20px_48px_-8px_rgba(0,0,0,0.5)] ring-1 ring-sky-400/20 node-select-pulse'
-                        : 'hover:border-white/20 hover:shadow-[0_8px_32px_-4px_rgba(0,0,0,0.3)]'
+                        ? 'border-[var(--accent-info)]/50 shadow-[var(--shadow-lg)] ring-1 ring-[var(--accent-info)]/20 node-select-pulse'
+                        : 'hover:border-[var(--border-default)] hover:shadow-[var(--shadow-md)]'
                     } ${
                     data.isDimmed ? 'opacity-30' : 'opacity-100'
                     }`}
             >
-                <div className="flex items-center justify-between gap-2 border-b border-white/5 pb-1.5 mb-1.5">
-                    <span className="font-mono text-[9px] uppercase tracking-[0.12em] text-text-muted/60">{id}</span>
+                <div className="flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] pb-1.5 mb-1.5">
+                    <span className="font-mono text-[9px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]/60">{id}</span>
                     <div className="flex items-center gap-1.5 flex-wrap">
                         {assignedArchetypes.map((archetype) => (
                             <span
                                 key={archetype.id}
-                                className="rounded-md px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-white ring-1"
+                                className="rounded-md px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--text-inverse)] ring-1"
                                 style={{
                                     backgroundColor: `${archetype.color}20`,
                                     borderColor: `${archetype.color}40`,
@@ -251,42 +251,42 @@ export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeDa
                             </span>
                         ))}
                         {data.isActionable ? (
-                            <span className="rounded-md bg-emerald-500/15 px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-emerald-400 ring-1 ring-emerald-500/20">
+                            <span className="rounded-md bg-[var(--status-ready)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-success)] ring-1 ring-[var(--accent-success)]/20">
                                 Ready
                             </span>
                         ) : null}
                         {data.status === 'in_progress' ? (
-                            <span className="rounded-md bg-amber-400/10 px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-amber-400">
+                            <span className="rounded-md bg-[var(--status-in-progress)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-warning)]">
                                 In Progress
                             </span>
                         ) : data.status === 'blocked' ? (
-                            <span className="rounded-md bg-rose-400/10 px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-rose-400">
+                            <span className="rounded-md bg-[var(--status-blocked)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-danger)]">
                                 Blocked
                             </span>
                         ) : data.status === 'closed' ? (
-                            <span className="rounded-md bg-emerald-400/10 px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-emerald-400">
+                            <span className="rounded-md bg-[var(--status-closed)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-success)]">
                                 Done
                             </span>
                         ) : null}
-                        <span className="text-[9px] font-bold uppercase tracking-wider text-text-muted/40">p{data.priority}</span>
-                        <span className={`h-2 w-2 rounded-full ring-2 ring-black/40 ${statusDot(data.status)}`} />
+                        <span className="text-[9px] font-bold uppercase tracking-wider text-[var(--text-tertiary)]/40">p{data.priority}</span>
+                        <span className={`h-2 w-2 rounded-full ring-2 ring-[var(--alpha-black-medium)] ${statusDot(data.status)}`} />
                     </div>
                 </div>
 
-                <p className={`text-[15px] font-bold leading-[1.2] tracking-tight text-text-strong group-hover:text-sky-100 transition-colors ${data.status === 'closed' ? 'line-through opacity-70' : ''}`}>
+                <p className={`text-[15px] font-bold leading-[1.2] tracking-tight text-[var(--text-primary)] group-hover:text-[var(--accent-info)] transition-colors ${data.status === 'closed' ? 'line-through opacity-70' : ''}`}>
                     {data.title}
                 </p>
 
                 {data.blockerTooltipLines.length > 0 ? (
-                    <div className="mt-2 border-t border-white/5 pt-1.5">
-                        <p className="text-[8px] font-bold uppercase tracking-widest text-rose-400/70 mb-0.5">Waiting on</p>
+                    <div className="mt-2 border-t border-[var(--border-subtle)] pt-1.5">
+                        <p className="text-[8px] font-bold uppercase tracking-widest text-[var(--accent-danger)]/70 mb-0.5">Waiting on</p>
                         {data.blockerTooltipLines.slice(0, 2).map((line) => (
-                            <p key={line} className="text-[9px] text-text-muted/70 truncate leading-tight">
+                            <p key={line} className="text-[9px] text-[var(--text-tertiary)]/70 truncate leading-tight">
                                 {line}
                             </p>
                         ))}
                         {data.blockerTooltipLines.length > 2 ? (
-                            <p className="text-[8px] text-text-muted/50">
+                            <p className="text-[8px] text-[var(--text-tertiary)]/50">
                                 +{data.blockerTooltipLines.length - 2} more
                             </p>
                         ) : null}
@@ -294,14 +294,14 @@ export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeDa
                 ) : null}
 
                 {!isClosed && archetypes.length > 0 ? (
-                    <div className="mt-2 border-t border-white/5 pt-2">
+                    <div className="mt-2 border-t border-[var(--border-subtle)] pt-2">
                         {assignSuccess ? (
-                            <div className="text-[9px] text-emerald-400 font-medium mb-1.5">
+                            <div className="text-[9px] text-[var(--accent-success)] font-medium mb-1.5">
                                 {assignSuccess}
                             </div>
                         ) : null}
                         {assignError ? (
-                            <div className="text-[9px] text-rose-400 font-medium mb-1.5">
+                            <div className="text-[9px] text-[var(--accent-danger)] font-medium mb-1.5">
                                 {assignError}
                             </div>
                         ) : null}
@@ -338,7 +338,7 @@ export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeDa
                                 <button
                                     type="button"
                                     disabled={isAssigning}
-                                    className="flex items-center gap-1.5 w-full rounded-md bg-white/5 hover:bg-white/10 px-2 py-1.5 text-[9px] font-medium text-text-muted/80 transition-colors disabled:opacity-50"
+                                    className="flex items-center gap-1.5 w-full rounded-md bg-[var(--alpha-white-low)] hover:bg-[var(--alpha-white-medium)] px-2 py-1.5 text-[9px] font-medium text-[var(--text-tertiary)]/80 transition-colors disabled:opacity-50"
                                 >
                                     {isAssigning ? (
                                         <Loader2 className="h-3 w-3 animate-spin" />
@@ -351,7 +351,7 @@ export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeDa
                             </DropdownMenu.Trigger>
                             <DropdownMenu.Portal>
                                 <DropdownMenu.Content
-                                    className="min-w-[180px] rounded-lg border border-white/10 bg-[#0d0f14]/95 p-1 shadow-[0_12px_32px_rgba(0,0,0,0.6)] backdrop-blur-lg z-50"
+                                    className="min-w-[180px] rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-overlay)] p-1 shadow-[var(--shadow-lg)] backdrop-blur-lg z-50"
                                     sideOffset={4}
                                 >
                                     {archetypes.map((archetype) => {
@@ -364,7 +364,7 @@ export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeDa
                                                 className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-[11px] font-medium outline-none cursor-pointer transition-colors ${
                                                     isAssigned
                                                         ? 'opacity-50 cursor-not-allowed'
-                                                        : 'text-text-strong hover:bg-white/10 focus:bg-white/10'
+                                                        : 'text-[var(--text-primary)] hover:bg-[var(--alpha-white-low)] focus:bg-[var(--alpha-white-low)]'
                                                 }`}
                                             >
                                                 <span
@@ -373,7 +373,7 @@ export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeDa
                                                 />
                                                 <span>{archetype.name}</span>
                                                 {isAssigned && (
-                                                    <span className="ml-auto text-[9px] text-text-muted/60">Assigned</span>
+                                                    <span className="ml-auto text-[9px] text-[var(--text-tertiary)]/60">Assigned</span>
                                                 )}
                                             </DropdownMenu.Item>
                                         );
@@ -387,23 +387,23 @@ export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeDa
 
             {hovered ? (
                 <div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 animate-fade-in">
-                    <div className="max-w-xs rounded-lg border border-white/10 bg-[#0d0f14]/95 px-3 py-2 shadow-[0_12px_32px_rgba(0,0,0,0.6)] backdrop-blur-lg">
+                    <div className="max-w-xs rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-overlay)] px-3 py-2 shadow-[var(--shadow-lg)] backdrop-blur-lg">
                         {data.isActionable ? (
                             <>
-                                <p className="text-[10px] font-bold text-emerald-400">Ready to work</p>
-                                <p className="mt-0.5 text-[10px] text-text-muted/80">
+                                <p className="text-[10px] font-bold text-[var(--accent-success)]">Ready to work</p>
+                                <p className="mt-0.5 text-[10px] text-[var(--text-tertiary)]/80">
                                     No open blockers. {data.blocks} task{data.blocks === 1 ? '' : 's'} depend{data.blocks === 1 ? 's' : ''} on this.
                                 </p>
                             </>
                         ) : (
                             <>
-                                <p className="text-[10px] font-bold text-rose-400">
+                                <p className="text-[10px] font-bold text-[var(--accent-danger)]">
                                     Blocked by {data.blockedBy} task{data.blockedBy === 1 ? '' : 's'}
                                 </p>
                                 {data.blockerTooltipLines.length > 0 ? (
                                     <ul className="mt-1 space-y-0.5">
                                         {data.blockerTooltipLines.map((line) => (
-                                            <li key={line} className="text-[9px] text-text-muted/80">
+                                            <li key={line} className="text-[9px] text-[var(--text-tertiary)]/80">
                                                 &bull; {line}
                                             </li>
                                         ))}
diff --git a/src/components/social/social-card.tsx b/src/components/social/social-card.tsx
index d693e39..24211e3 100644
--- a/src/components/social/social-card.tsx
+++ b/src/components/social/social-card.tsx
@@ -34,8 +34,8 @@ function handleCardKeyDown(event: KeyboardEvent<HTMLDivElement>, onClick?: Mouse
 function statusVisual(status: SocialCardData['status']) {
   if (status === 'blocked') {
     return {
-      border: '#ff4c72',
-      badgeBg: 'rgba(255, 76, 114, 0.25)',
+      border: 'var(--accent-danger)',
+      badgeBg: 'var(--status-blocked)',
       badgeText: '#ffd5df',
       chipText: 'Blocked',
     };
@@ -43,8 +43,8 @@ function statusVisual(status: SocialCardData['status']) {
 
   if (status === 'in_progress') {
     return {
-      border: '#ffb24a',
-      badgeBg: 'rgba(255, 178, 74, 0.25)',
+      border: 'var(--accent-warning)',
+      badgeBg: 'var(--status-in-progress)',
       badgeText: '#ffe5c7',
       chipText: 'Active',
     };
@@ -52,17 +52,17 @@ function statusVisual(status: SocialCardData['status']) {
 
   if (status === 'ready') {
     return {
-      border: '#35d98f',
-      badgeBg: 'rgba(53, 217, 143, 0.25)',
+      border: 'var(--accent-success)',
+      badgeBg: 'var(--status-ready)',
       badgeText: '#d6ffe7',
       chipText: 'Ready',
     };
   }
 
   return {
-    border: 'var(--ui-border-strong)',
-    badgeBg: 'rgba(168, 164, 154, 0.15)',
-    badgeText: 'var(--ui-text-muted)',
+    border: 'var(--border-default)',
+    badgeBg: 'var(--status-closed)',
+    badgeText: 'var(--text-tertiary)',
     chipText: 'Closed',
   };
 }
@@ -75,7 +75,7 @@ function dependencyPanel(
   if (details.length === 0) return null;
 
   return (
-    <div className="rounded-md border border-[var(--ui-border-soft)] bg-[color-mix(in_srgb,var(--ui-bg-panel)_82%,black)] px-2.5 py-2">
+    <div className="rounded-md border border-[var(--border-subtle)] bg-[var(--surface-tertiary)] px-2.5 py-2">
       <p className="mb-1 font-mono text-[10px] uppercase tracking-[0.12em]" style={{ color }}>
         {title}
       </p>
@@ -83,20 +83,20 @@ function dependencyPanel(
         {details.slice(0, 1).map((item) => (
           <div
             key={`${title}-${item.id}`}
-            className="rounded border border-[var(--ui-border-soft)] bg-[color-mix(in_srgb,var(--ui-bg-card)_88%,black)] px-2 py-1.5"
+            className="rounded border border-[var(--border-subtle)] bg-[var(--surface-quaternary)] px-2 py-1.5"
           >
             <div className="mb-0.5 flex items-center gap-1">
-              <span className="h-1.5 w-1.5 rounded-full bg-[var(--ui-accent-info)]" />
-              <span className="font-mono text-[10px] text-[var(--ui-text-muted)]">{item.id}</span>
+              <span className="h-1.5 w-1.5 rounded-full bg-[var(--accent-info)]" />
+              <span className="font-mono text-[10px] text-[var(--text-tertiary)]">{item.id}</span>
             </div>
-            <p className="line-clamp-1 text-xs text-[var(--ui-text-primary)]">{item.title}</p>
+            <p className="line-clamp-1 text-xs text-[var(--text-primary)]">{item.title}</p>
             {item.epic ? (
-              <p className="line-clamp-1 text-[10px] text-[var(--ui-accent-info)]">↳ {item.epic}</p>
+              <p className="line-clamp-1 text-[10px] text-[var(--accent-info)]">↳ {item.epic}</p>
             ) : null}
           </div>
         ))}
       </div>
-      {details.length > 1 ? <p className="mt-1 text-[11px] text-[var(--ui-text-muted)]">+{details.length - 1} more</p> : null}
+      {details.length > 1 ? <p className="mt-1 text-[11px] text-[var(--text-tertiary)]">+{details.length - 1} more</p> : null}
     </div>
   );
 }
@@ -127,12 +127,12 @@ export function SocialCard({
       tabIndex={0}
       aria-label={`Open ${data.title}`}
       className={cn(
-        'group relative flex min-h-[290px] cursor-pointer flex-col rounded-[14px] border px-3.5 py-3 text-left transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]',
+        'group relative flex min-h-[290px] cursor-pointer flex-col rounded-[14px] border px-3.5 py-3 text-left transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-info)]',
         className,
       )}
       style={{
-        background: 'var(--ui-bg-card)',
-        borderColor: selected ? status.border : 'var(--ui-border-strong)',
+        background: 'var(--surface-quaternary)',
+        borderColor: selected ? status.border : 'var(--border-default)',
         boxShadow: selected
           ? `0 0 0 2px ${status.border}, 0 20px 40px -20px rgba(0,0,0,0.6)`
           : '0 4px 12px -6px rgba(0,0,0,0.4)',
@@ -143,24 +143,24 @@ export function SocialCard({
           <Badge className="rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.1em]" style={{ backgroundColor: status.badgeBg, color: status.badgeText }}>
             {status.chipText}
           </Badge>
-          <span className="font-mono text-[11px] text-[var(--ui-accent-info)]">{data.priority}</span>
-          <span className="truncate font-mono text-[11px] text-[var(--ui-text-muted)]">{data.id}</span>
+          <span className="font-mono text-[11px] text-[var(--accent-info)]">{data.priority}</span>
+          <span className="truncate font-mono text-[11px] text-[var(--text-tertiary)]">{data.id}</span>
           {unreadCount > 0 ? (
-            <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--ui-accent-action-red)] px-1 text-[10px] font-semibold text-white">
+            <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--accent-danger)] px-1 text-[10px] font-semibold text-[var(--text-inverse)]">
               {unreadCount}
             </span>
           ) : null}
         </div>
       </div>
 
-      <h3 className="line-clamp-2 text-[27px] font-semibold leading-[1.13] tracking-[-0.01em] text-[var(--ui-text-primary)]">{data.title}</h3>
-      <p className="mt-1.5 line-clamp-3 min-h-[56px] text-[13px] leading-relaxed text-[var(--ui-text-muted)]">
+      <h3 className="line-clamp-2 text-[27px] font-semibold leading-[1.13] tracking-[-0.01em] text-[var(--text-primary)]">{data.title}</h3>
+      <p className="mt-1.5 line-clamp-3 min-h-[56px] text-[13px] leading-relaxed text-[var(--text-tertiary)]">
         {description || 'No summary provided yet.'}
       </p>
 
       <div className="mt-2 flex flex-col gap-2">
-        {dependencyPanel('Blocked By', 'var(--ui-accent-blocked)', blockedByDetails)}
-        {dependencyPanel('Unblocks', 'var(--ui-accent-ready)', unblocksDetails)}
+        {dependencyPanel('Blocked By', 'var(--accent-danger)', blockedByDetails)}
+        {dependencyPanel('Unblocks', 'var(--accent-success)', unblocksDetails)}
       </div>
 
       <div className="mt-2 flex items-center gap-2">
@@ -173,17 +173,17 @@ export function SocialCard({
             size="sm"
           />
         ))}
-        {data.agents.length === 0 ? <span className="text-xs text-[var(--ui-text-muted)]">No crew</span> : null}
+        {data.agents.length === 0 ? <span className="text-xs text-[var(--text-tertiary)]">No crew</span> : null}
       </div>
 
-      <div className="mt-auto border-t border-[var(--ui-border-soft)] pt-1.5">
-        <div className="mb-1.5 flex items-center justify-between text-xs text-[var(--ui-text-muted)]">
+      <div className="mt-auto border-t border-[var(--border-subtle)] pt-1.5">
+        <div className="mb-1.5 flex items-center justify-between text-xs text-[var(--text-tertiary)]">
           <span className="inline-flex items-center gap-1"><Clock3 className="h-3.5 w-3.5" aria-hidden="true" />{updatedLabel}</span>
-          <span className="font-mono text-[11px] text-[var(--ui-accent-ready)]">stage active</span>
+          <span className="font-mono text-[11px] text-[var(--accent-success)]">stage active</span>
         </div>
 
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3 text-xs text-[var(--ui-text-muted)]">
+          <div className="flex items-center gap-3 text-xs text-[var(--text-tertiary)]">
             <span className="inline-flex items-center gap-1"><Link2 className="h-3.5 w-3.5" aria-hidden="true" />{dependencyCount ?? data.blocks.length + data.unblocks.length}</span>
             <span className="inline-flex items-center gap-1"><MessageCircle className="h-3.5 w-3.5" aria-hidden="true" />{commentCount ?? 0}</span>
           </div>
@@ -195,7 +195,7 @@ export function SocialCard({
                 event.stopPropagation();
                 onJumpToGraph?.(data.id);
               }}
-              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-accent-info)] transition-colors hover:bg-white/5"
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--border-subtle)] bg-[var(--surface-tertiary)] text-[var(--accent-info)] transition-colors hover:bg-[var(--alpha-white-low)]"
               aria-label="Open in graph"
             >
               <GitBranch className="h-3.5 w-3.5" aria-hidden="true" />
@@ -206,7 +206,7 @@ export function SocialCard({
                 event.stopPropagation();
                 onJumpToActivity?.(data.id);
               }}
-              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-accent-warning)] transition-colors hover:bg-white/5"
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--border-subtle)] bg-[var(--surface-tertiary)] text-[var(--accent-warning)] transition-colors hover:bg-[var(--alpha-white-low)]"
               aria-label="Open in activity"
             >
               <Orbit className="h-3.5 w-3.5" aria-hidden="true" />
@@ -217,7 +217,7 @@ export function SocialCard({
                 event.stopPropagation();
                 onOpenThread?.();
               }}
-              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-accent-ready)] transition-colors hover:bg-white/5"
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--border-subtle)] bg-[var(--surface-tertiary)] text-[var(--accent-success)] transition-colors hover:bg-[var(--alpha-white-low)]"
               aria-label="Open thread"
             >
               <Activity className="h-3.5 w-3.5" aria-hidden="true" />