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

@@ -115,14 +115,14 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
 
         {/* Error State */}
         {isError && (
-          <div className="p-4 bg-[var(--color-neo-danger)] text-white border-3 border-[var(--color-neo-border)] mb-4">
+          <div className="p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)] mb-4">
             <div className="flex items-center gap-2">
               <AlertCircle size={18} />
               <span>Failed to load settings</span>
             </div>
             <button
               onClick={() => refetch()}
-              className="mt-2 underline text-sm"
+              className="mt-2 underline text-sm hover:opacity-70 transition-opacity"
             >
               Retry
             </button>
@@ -152,7 +152,7 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
                   className={`relative w-14 h-8 rounded-none border-3 border-[var(--color-neo-border)] transition-colors ${
                     settings.yolo_mode
                       ? 'bg-[var(--color-neo-pending)]'
-                      : 'bg-white'
+                      : 'bg-[var(--color-neo-card)]'
                   } ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
                   role="switch"
                   aria-checked={settings.yolo_mode}
@@ -189,8 +189,8 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
                     aria-checked={settings.model === model.id}
                     className={`flex-1 py-3 px-4 font-display font-bold text-sm transition-colors ${
                       settings.model === model.id
-                        ? 'bg-[var(--color-neo-accent)] text-white'
-                        : 'bg-white text-[var(--color-neo-text)] hover:bg-gray-100'
+                        ? 'bg-[var(--color-neo-accent)] text-[var(--color-neo-text-on-bright)]'
+                        : 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
                     } ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
                   >
                     {model.name}
@@ -201,7 +201,7 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
 
             {/* Update Error */}
             {updateSettings.isError && (
-              <div className="p-3 bg-red-50 border-3 border-red-200 text-red-700 text-sm">
+              <div className="p-3 bg-[var(--color-neo-error-bg)] border-3 border-[var(--color-neo-error-border)] text-[var(--color-neo-error-text)] text-sm">
                 Failed to save settings. Please try again.
               </div>
             )}