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/tree-editor/FlowCanvasAnswerNode.tsx

@@ -20,18 +20,18 @@ function FlowCanvasAnswerNodeComponent({ data, selected }: NodeProps) {
 
       <div
         className={cn(
-          'w-[280px] rounded-xl border-2 border-dashed border-[#1e2130] bg-[#14161d]/50 transition-all',
+          'w-[280px] rounded-xl border-2 border-dashed border-border bg-card/50 transition-all',
           !picking && 'cursor-pointer hover:border-primary/40 hover:bg-accent/30',
           selected && 'ring-1 ring-primary'
         )}
         onClick={() => !picking && setPicking(true)}
       >
-        <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-[#e2e5eb] text-center">
+        <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-foreground text-center">
           {label}
         </div>
 
         {!picking ? (
-          <div className="pb-2.5 text-center text-[10px] text-[#848b9b] font-sans text-xs">
+          <div className="pb-2.5 text-center text-[10px] text-muted-foreground font-sans text-xs">
             + Choose Type
           </div>
         ) : (