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/FeatureModal.tsx

@@ -4,6 +4,26 @@ import { useSkipFeature, useDeleteFeature } from '../hooks/useProjects'
 import { EditFeatureForm } from './EditFeatureForm'
 import type { Feature } from '../lib/types'
 
+// Generate consistent color for category (matches FeatureCard pattern)
+function getCategoryColor(category: string): string {
+  const colors = [
+    '#ff006e', // pink (accent)
+    '#00b4d8', // cyan (progress)
+    '#70e000', // green (done)
+    '#ffd60a', // yellow (pending)
+    '#ff5400', // orange (danger)
+    '#8338ec', // purple
+    '#3a86ff', // blue
+  ]
+
+  let hash = 0
+  for (let i = 0; i < category.length; i++) {
+    hash = category.charCodeAt(i) + ((hash << 5) - hash)
+  }
+
+  return colors[Math.abs(hash) % colors.length]
+}
+
 interface FeatureModalProps {
   feature: Feature
   projectName: string
@@ -59,7 +79,10 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
         {/* Header */}
         <div className="flex items-start justify-between p-6 border-b-3 border-[var(--color-neo-border)]">
           <div>
-            <span className="neo-badge bg-[var(--color-neo-accent)] text-white mb-2">
+            <span
+              className="neo-badge mb-2"
+              style={{ backgroundColor: getCategoryColor(feature.category), color: 'var(--color-neo-text-on-bright)' }}
+            >
               {feature.category}
             </span>
             <h2 className="font-display text-2xl font-bold">
@@ -78,12 +101,12 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
         <div className="p-6 space-y-6">
           {/* Error Message */}
           {error && (
-            <div className="flex items-center gap-3 p-4 bg-[var(--color-neo-danger)] text-white border-3 border-[var(--color-neo-border)]">
+            <div className="flex items-center gap-3 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
               <AlertCircle size={20} />
               <span>{error}</span>
               <button
                 onClick={() => setError(null)}
-                className="ml-auto"
+                className="ml-auto hover:opacity-70 transition-opacity"
               >
                 <X size={16} />
               </button>