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

@@ -152,28 +152,28 @@ export function ExpandProjectChat({
     switch (connectionStatus) {
       case 'connected':
         return (
-          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-done)]">
+          <span className="flex items-center gap-1 text-xs text-neo-done">
             <Wifi size={12} />
             Connected
           </span>
         )
       case 'connecting':
         return (
-          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-pending)]">
+          <span className="flex items-center gap-1 text-xs text-neo-pending">
             <Wifi size={12} className="animate-pulse" />
             Connecting...
           </span>
         )
       case 'error':
         return (
-          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-danger)]">
+          <span className="flex items-center gap-1 text-xs text-neo-danger">
             <WifiOff size={12} />
             Error
           </span>
         )
       default:
         return (
-          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-text-secondary)]">
+          <span className="flex items-center gap-1 text-xs text-neo-text-secondary">
             <WifiOff size={12} />
             Disconnected
           </span>
@@ -182,16 +182,16 @@ export function ExpandProjectChat({
   }
 
   return (
-    <div className="flex flex-col h-full bg-[var(--color-neo-bg)]">
+    <div className="flex flex-col h-full bg-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-neo-border bg-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-neo-text">
             Expand Project: {projectName}
           </h2>
           <ConnectionIndicator />
           {featuresCreated > 0 && (
-            <span className="flex items-center gap-1 text-sm text-[var(--color-neo-done)] font-bold">
+            <span className="flex items-center gap-1 text-sm text-neo-done font-bold">
               <Plus size={14} />
               {featuresCreated} added
             </span>
@@ -200,7 +200,7 @@ export function ExpandProjectChat({
 
         <div className="flex items-center gap-2">
           {isComplete && (
-            <span className="flex items-center gap-1 text-sm text-[var(--color-neo-done)] font-bold">
+            <span className="flex items-center gap-1 text-sm text-neo-done font-bold">
               <CheckCircle2 size={16} />
               Complete
             </span>
@@ -218,12 +218,12 @@ export function ExpandProjectChat({
 
       {/* 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-neo-error-bg text-neo-error-text border-b-3 border-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>
@@ -238,7 +238,7 @@ export function ExpandProjectChat({
               <h3 className="font-display font-bold text-lg mb-2">
                 Starting Project Expansion
               </h3>
-              <p className="text-sm text-[var(--color-neo-text-secondary)]">
+              <p className="text-sm text-neo-text-secondary">
                 Connecting to Claude to help you add new features to your project...
               </p>
               {connectionStatus === 'error' && (
@@ -268,7 +268,7 @@ export function ExpandProjectChat({
       {/* Input area */}
       {!isComplete && (
         <div
-          className="p-4 border-t-3 border-[var(--color-neo-border)] bg-white"
+          className="p-4 border-t-3 border-neo-border bg-neo-card"
           onDrop={handleDrop}
           onDragOver={handleDragOver}
         >
@@ -278,7 +278,8 @@ export function ExpandProjectChat({
               {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-neo-border p-1 bg-neo-card"
+                  style={{ boxShadow: 'var(--shadow-neo-sm)' }}
                 >
                   <img
                     src={attachment.previewUrl}
@@ -287,7 +288,7 @@ export function ExpandProjectChat({
                   />
                   <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-neo-danger text-neo-text-on-bright rounded-full p-0.5 border-2 border-neo-border hover:scale-110 transition-transform"
                     title="Remove attachment"
                   >
                     <X size={12} />
@@ -351,7 +352,7 @@ export function ExpandProjectChat({
           </div>
 
           {/* Help text */}
-          <p className="text-xs text-[var(--color-neo-text-secondary)] mt-2">
+          <p className="text-xs text-neo-text-secondary mt-2">
             Press Enter to send. Drag & drop or click <Paperclip size={12} className="inline" /> to attach images.
           </p>
         </div>
@@ -359,7 +360,7 @@ export function ExpandProjectChat({
 
       {/* Completion footer */}
       {isComplete && (
-        <div className="p-4 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-done)]">
+        <div className="p-4 border-t-3 border-neo-border bg-neo-done text-neo-text-on-bright">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <CheckCircle2 size={20} />
@@ -369,7 +370,7 @@ export function ExpandProjectChat({
             </div>
             <button
               onClick={() => onComplete(featuresCreated)}
-              className="neo-btn bg-white"
+              className="neo-btn bg-neo-card"
             >
               Close
             </button>