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

@@ -207,9 +207,9 @@ export function SpecCreationChat({
   return (
     <div className="flex flex-col h-full bg-[var(--color-neo-bg)]">
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)] bg-white">
+      <div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]">
         <div className="flex items-center gap-3">
-          <h2 className="font-display font-bold text-lg text-[#1a1a1a]">
+          <h2 className="font-display font-bold text-lg text-[var(--color-neo-text)]">
             Create Spec: {projectName}
           </h2>
           <ConnectionIndicator />
@@ -245,12 +245,12 @@ export function SpecCreationChat({
 
       {/* Error banner */}
       {error && (
-        <div className="flex items-center gap-2 p-3 bg-[var(--color-neo-danger)] text-white border-b-3 border-[var(--color-neo-border)]">
+        <div className="flex items-center gap-2 p-3 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-b-3 border-[var(--color-neo-error-border)]">
           <AlertCircle size={16} />
           <span className="flex-1 text-sm">{error}</span>
           <button
             onClick={() => setError(null)}
-            className="p-1 hover:bg-white/20 rounded"
+            className="p-1 hover:opacity-70 transition-opacity rounded"
           >
             <X size={14} />
           </button>
@@ -304,7 +304,7 @@ export function SpecCreationChat({
       {/* Input area */}
       {!isComplete && (
         <div
-          className="p-4 border-t-3 border-[var(--color-neo-border)] bg-white"
+          className="p-4 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]"
           onDrop={handleDrop}
           onDragOver={handleDragOver}
         >
@@ -314,7 +314,8 @@ export function SpecCreationChat({
               {pendingAttachments.map((attachment) => (
                 <div
                   key={attachment.id}
-                  className="relative group border-2 border-[var(--color-neo-border)] p-1 bg-white shadow-[2px_2px_0px_rgba(0,0,0,1)]"
+                  className="relative group border-2 border-[var(--color-neo-border)] p-1 bg-[var(--color-neo-card)]"
+                  style={{ boxShadow: 'var(--shadow-neo-sm)' }}
                 >
                   <img
                     src={attachment.previewUrl}
@@ -323,7 +324,7 @@ export function SpecCreationChat({
                   />
                   <button
                     onClick={() => handleRemoveAttachment(attachment.id)}
-                    className="absolute -top-2 -right-2 bg-[var(--color-neo-danger)] text-white rounded-full p-0.5 border-2 border-[var(--color-neo-border)] hover:scale-110 transition-transform"
+                    className="absolute -top-2 -right-2 bg-[var(--color-neo-danger)] text-[var(--color-neo-text-on-bright)] rounded-full p-0.5 border-2 border-[var(--color-neo-border)] hover:scale-110 transition-transform"
                     title="Remove attachment"
                   >
                     <X size={12} />
@@ -409,22 +410,22 @@ export function SpecCreationChat({
             <div className="flex items-center gap-2">
               {initializerStatus === 'starting' ? (
                 <>
-                  <Loader2 size={20} className="animate-spin" />
-                  <span className="font-bold">
+                  <Loader2 size={20} className="animate-spin text-[var(--color-neo-text-on-bright)]" />
+                  <span className="font-bold text-[var(--color-neo-text-on-bright)]">
                     Starting agent{yoloEnabled ? ' (YOLO mode)' : ''}...
                   </span>
                 </>
               ) : initializerStatus === 'error' ? (
                 <>
-                  <AlertCircle size={20} className="text-white" />
-                  <span className="font-bold text-white">
+                  <AlertCircle size={20} className="text-[var(--color-neo-text-on-bright)]" />
+                  <span className="font-bold text-[var(--color-neo-text-on-bright)]">
                     {initializerError || 'Failed to start agent'}
                   </span>
                 </>
               ) : (
                 <>
-                  <CheckCircle2 size={20} />
-                  <span className="font-bold">Specification created successfully!</span>
+                  <CheckCircle2 size={20} className="text-[var(--color-neo-text-on-bright)]" />
+                  <span className="font-bold text-[var(--color-neo-text-on-bright)]">Specification created successfully!</span>
                 </>
               )}
             </div>
@@ -432,7 +433,7 @@ export function SpecCreationChat({
               {initializerStatus === 'error' && onRetryInitializer && (
                 <button
                   onClick={onRetryInitializer}
-                  className="neo-btn bg-white"
+                  className="neo-btn bg-[var(--color-neo-card)]"
                 >
                   <RotateCcw size={14} />
                   Retry
@@ -444,7 +445,7 @@ export function SpecCreationChat({
                   <button
                     onClick={() => setYoloEnabled(!yoloEnabled)}
                     className={`neo-btn text-sm py-2 px-3 ${
-                      yoloEnabled ? 'neo-btn-warning' : 'bg-white'
+                      yoloEnabled ? 'neo-btn-warning' : 'bg-[var(--color-neo-card)]'
                     }`}
                     title="YOLO Mode: Skip testing for rapid prototyping"
                   >