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/sidebar/ActivityItem.tsx

@@ -49,7 +49,7 @@ export function ActivityItem({
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors',
         'hover:bg-[rgba(255,255,255,0.03)]',
-        isRecent ? 'text-[#6b7280] text-[0.72rem]' : 'text-[#e2e8f0] text-[0.8rem]'
+        isRecent ? 'text-text-rail-label text-[0.72rem]' : 'text-[#e2e8f0] text-[0.8rem]'
       )}
       title={`${treeName}${ticketNumber ? ` (${ticketNumber})` : ''} — click to resume`}
       aria-label={
@@ -83,7 +83,7 @@ export function ActivityItem({
         />
       )}
       {status === 'recent' && (
-        <span className="h-1 w-1 shrink-0 rounded-full bg-[#3d4350]" />
+        <span className="h-1 w-1 shrink-0 rounded-full bg-muted-foreground" />
       )}
 
       {/* Flow name */}
@@ -96,7 +96,7 @@ export function ActivityItem({
         </span>
       )}
       {isRecent && timestamp && (
-        <span className="shrink-0 font-label text-[0.5625rem] text-[#5a6170]">
+        <span className="shrink-0 font-label text-[0.5625rem] text-text-muted">
           {formatRelativeTime(timestamp)}
         </span>
       )}