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

@@ -31,26 +31,29 @@ export function AssistantPanel({ projectName, isOpen, onClose }: AssistantPanelP
         className={`
           fixed right-0 top-0 bottom-0 z-50
           w-[400px] max-w-[90vw]
-          bg-white
+          bg-neo-card
           border-l-4 border-[var(--color-neo-border)]
-          shadow-[-8px_0_0px_rgba(0,0,0,1)]
           transform transition-transform duration-300 ease-out
           flex flex-col
           ${isOpen ? 'translate-x-0' : 'translate-x-full'}
         `}
+        style={{ boxShadow: 'var(--shadow-neo-left-lg)' }}
         role="dialog"
         aria-label="Project Assistant"
         aria-hidden={!isOpen}
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-progress)]">
+        <div className="flex items-center justify-between px-4 py-3 border-b-3 border-neo-border bg-neo-progress">
           <div className="flex items-center gap-2">
-            <div className="bg-white border-2 border-[var(--color-neo-border)] p-1.5 shadow-[2px_2px_0px_rgba(0,0,0,1)]">
+            <div
+              className="bg-neo-card border-2 border-neo-border p-1.5"
+              style={{ boxShadow: 'var(--shadow-neo-sm)' }}
+            >
               <Bot size={18} />
             </div>
             <div>
-              <h2 className="font-display font-bold text-white">Project Assistant</h2>
-              <p className="text-xs text-white/80 font-mono">{projectName}</p>
+              <h2 className="font-display font-bold text-neo-text-on-bright">Project Assistant</h2>
+              <p className="text-xs text-neo-text-on-bright opacity-80 font-mono">{projectName}</p>
             </div>
           </div>
           <button
@@ -58,9 +61,9 @@ export function AssistantPanel({ projectName, isOpen, onClose }: AssistantPanelP
             className="
               neo-btn neo-btn-ghost
               p-2
-              bg-white/20 border-white/40
-              hover:bg-white/30
-              text-white
+              bg-[var(--color-neo-card)] border-[var(--color-neo-border)]
+              hover:bg-[var(--color-neo-bg)]
+              text-[var(--color-neo-text)]
             "
             title="Close Assistant (Press A)"
             aria-label="Close Assistant"