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/kb-accelerator/SuccessScreen.tsx

@@ -18,10 +18,10 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
       </div>
 
       <div>
-        <h2 className="text-xl font-heading font-semibold text-[#e2e5eb]">
+        <h2 className="text-xl font-heading font-semibold text-foreground">
           Flow Created Successfully
         </h2>
-        <p className="text-sm text-[#848b9b] mt-2">
+        <p className="text-sm text-muted-foreground mt-2">
           Your KB article has been converted into a {result.tree_type === 'troubleshooting' ? 'troubleshooting' : 'project'} flow
           and added to your library.
         </p>
@@ -32,7 +32,7 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
           onClick={onViewFlow}
           className={cn(
             'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all',
-            'bg-[#22d3ee] text-white',
+            'bg-primary text-white',
             'hover:brightness-110 active:scale-[0.98]'
           )}
         >
@@ -43,7 +43,7 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
           onClick={onConvertAnother}
           className={cn(
             'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium transition-colors',
-            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
             'hover:border-[rgba(255,255,255,0.12)]'
           )}
         >