feat(ui): comprehensive design system improvements

This PR addresses 53 design issues identified in the UI codebase,
implementing a more consistent and polished neobrutalism design system.

Typography:
- Improved font stacks with proper fallbacks
- Added font smoothing for crisp text rendering

Color/Theme:
- Added neutral scale (50-900) for consistent grays
- Added semantic log level colors with dark mode variants
- Added category colors for feature cards
- Added GLM badge color variable
- Full dark mode support for all new variables

Design Tokens:
- Spacing scale (xs to 2xl)
- Z-index scale (dropdown to toast)
- Border radius tokens
- Inset shadow variants

Animations:
- New transition timing variables
- New easing curves (bounce, smooth, out-back)
- Slide-in animations (top/bottom/left)
- Bounce, shake, scale-pop animations
- Stagger delay utilities
- Enhanced YOLO fire effect with parallax layers

Components:
- Button size variants (sm/lg/icon) and loading state
- Input variants (error/disabled/textarea)
- Badge color and size variants
- Card elevation variants (elevated/flat/sunken)
- Progress bar shimmer animation
- Stronger modal backdrop with blur
- Neobrutalist tooltips
- Enhanced empty state with striped pattern

Component Fixes:
- Replaced hardcoded colors with CSS variables
- Fixed ProgressDashboard percentage alignment
- Improved ChatMessage role-specific styling
- Consistent category badge colors in FeatureModal
- Improved step input styling in forms

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

ui/src/components/FeatureCard.tsx

@@ -7,16 +7,17 @@ interface FeatureCardProps {
   isInProgress?: boolean
 }
 
-// Generate consistent color for category
+// Generate consistent color for category using CSS variable references
+// These map to the --color-neo-category-* variables defined in globals.css
 function getCategoryColor(category: string): string {
   const colors = [
-    '#ff006e', // pink
-    '#00b4d8', // cyan
-    '#70e000', // green
-    '#ffd60a', // yellow
-    '#ff5400', // orange
-    '#8338ec', // purple
-    '#3a86ff', // blue
+    'var(--color-neo-category-pink)',
+    'var(--color-neo-category-cyan)',
+    'var(--color-neo-category-green)',
+    'var(--color-neo-category-yellow)',
+    'var(--color-neo-category-orange)',
+    'var(--color-neo-category-purple)',
+    'var(--color-neo-category-blue)',
   ]
 
   let hash = 0
@@ -36,18 +37,18 @@ export function FeatureCard({ feature, onClick, isInProgress }: FeatureCardProps
       className={`
         w-full text-left neo-card p-4 cursor-pointer
         ${isInProgress ? 'animate-pulse-neo' : ''}
-        ${feature.passes ? 'border-[var(--color-neo-done)]' : ''}
+        ${feature.passes ? 'border-neo-done' : ''}
       `}
     >
       {/* Header */}
       <div className="flex items-start justify-between gap-2 mb-2">
         <span
           className="neo-badge"
-          style={{ backgroundColor: categoryColor, color: 'white' }}
+          style={{ backgroundColor: categoryColor, color: 'var(--color-neo-text-on-bright)' }}
         >
           {feature.category}
         </span>
-        <span className="font-mono text-sm text-[var(--color-neo-text-secondary)]">
+        <span className="font-mono text-sm text-neo-text-secondary">
           #{feature.priority}
         </span>
       </div>
@@ -58,7 +59,7 @@ export function FeatureCard({ feature, onClick, isInProgress }: FeatureCardProps
       </h3>
 
       {/* Description */}
-      <p className="text-sm text-[var(--color-neo-text-secondary)] line-clamp-2 mb-3">
+      <p className="text-sm text-neo-text-secondary line-clamp-2 mb-3">
         {feature.description}
       </p>
 
@@ -66,18 +67,18 @@ export function FeatureCard({ feature, onClick, isInProgress }: FeatureCardProps
       <div className="flex items-center gap-2 text-sm">
         {isInProgress ? (
           <>
-            <Loader2 size={16} className="animate-spin text-[var(--color-neo-progress)]" />
-            <span className="text-[var(--color-neo-progress)] font-bold">Processing...</span>
+            <Loader2 size={16} className="animate-spin text-neo-progress" />
+            <span className="text-neo-progress font-bold">Processing...</span>
           </>
         ) : feature.passes ? (
           <>
-            <CheckCircle2 size={16} className="text-[var(--color-neo-done)]" />
-            <span className="text-[var(--color-neo-done)] font-bold">Complete</span>
+            <CheckCircle2 size={16} className="text-neo-done" />
+            <span className="text-neo-done font-bold">Complete</span>
           </>
         ) : (
           <>
-            <Circle size={16} className="text-[var(--color-neo-text-secondary)]" />
-            <span className="text-[var(--color-neo-text-secondary)]">Pending</span>
+            <Circle size={16} className="text-neo-text-secondary" />
+            <span className="text-neo-text-secondary">Pending</span>
           </>
         )}
       </div>