refactor: replace hardcoded hex values with Tailwind semantic tokens

3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

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

frontend/src/components/dashboard/RecentFlowPilotSessions.tsx

@@ -46,10 +46,10 @@ export function RecentFlowPilotSessions() {
         className="flex items-center justify-between px-5 py-3"
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
-        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Sessions</h3>
+        <h3 className="font-heading text-sm font-bold text-foreground">Recent Sessions</h3>
         <Link
           to="/sessions"
-          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
         >
           History <ArrowRight size={10} />
         </Link>
@@ -69,11 +69,11 @@ export function RecentFlowPilotSessions() {
             >
               <StatusIcon size={14} style={{ color: config.color }} className="shrink-0" />
               <div className="flex-1 min-w-0">
-                <p className="text-sm text-[#e2e5eb] truncate">
+                <p className="text-sm text-foreground truncate">
                   {session.problem_summary || 'Session'}
                 </p>
               </div>
-              <span className="shrink-0 font-sans text-xs text-[#848b9b]">
+              <span className="shrink-0 font-sans text-xs text-muted-foreground">
                 {timeAgo(session.resolved_at || session.created_at)}
               </span>
             </button>