fix: replace hardcoded colors with CSS variables in branching components

All semantic colors now use design system tokens:
- #34d399 → text-success / bg-success-dim
- #f87171 → text-danger / bg-danger-dim
- #eab308 → text-warning / bg-warning-dim
- yellow-400 → text-warning / bg-warning-dim / border-warning
- #ea580c → hover:bg-accent-hover
- red-400 → text-danger / bg-danger-dim

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/SessionQueuePage.tsx

@@ -33,9 +33,9 @@ export default function SessionQueuePage() {
             <div key={item.handoff_id} className="bg-card border border-default rounded-lg p-4 flex items-center justify-between hover:border-hover transition-colors">
               <div className="flex-1">
                 <div className="flex items-center gap-2 mb-1">
-                  {item.intent === 'escalate' ? <ArrowUpRight size={14} className="text-red-400" /> : <Pause size={14} className="text-yellow-400" />}
+                  {item.intent === 'escalate' ? <ArrowUpRight size={14} className="text-danger" /> : <Pause size={14} className="text-warning" />}
                   <span className="text-sm font-medium text-heading">{item.problem_summary || 'Untitled session'}</span>
-                  {item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-red-400/10 text-red-400">Elevated</span>}
+                  {item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-danger-dim text-danger">Elevated</span>}
                 </div>
                 {item.engineer_notes && <p className="text-xs text-secondary">{item.engineer_notes}</p>}
                 <div className="flex items-center gap-2 mt-1 text-xs text-muted">