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

@@ -165,7 +165,7 @@ export function TerminalTabs({
             ${
               activeTerminalId === terminal.id
                 ? 'bg-neo-progress text-black'
-                : 'bg-[#3a3a3a] text-white hover:bg-[#4a4a4a]'
+                : 'bg-[#3a3a3a] text-white hover:bg-neo-text-secondary'
             }
           `}
           onClick={() => onSelect(terminal.id)}
@@ -180,7 +180,7 @@ export function TerminalTabs({
               onChange={(e) => setEditValue(e.target.value)}
               onBlur={submitEdit}
               onKeyDown={handleKeyDown}
-              className="bg-white text-black px-1 py-0 text-sm font-mono border-2 border-black w-24 outline-none"
+              className="bg-neo-card text-neo-text px-1 py-0 text-sm font-mono border-2 border-black w-24 outline-none"
               onClick={(e) => e.stopPropagation()}
             />
           ) : (
@@ -212,7 +212,7 @@ export function TerminalTabs({
       {/* Add new terminal button */}
       <button
         onClick={onCreate}
-        className="flex items-center justify-center w-8 h-8 border-2 border-black bg-[#3a3a3a] text-white hover:bg-[#4a4a4a] transition-colors"
+        className="flex items-center justify-center w-8 h-8 border-2 border-black bg-[#3a3a3a] text-white hover:bg-neo-text-secondary transition-colors"
         title="New terminal"
       >
         <Plus className="w-4 h-4" />
@@ -222,8 +222,8 @@ export function TerminalTabs({
       {contextMenu.visible && (
         <div
           ref={contextMenuRef}
-          className="fixed z-50 bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] py-1 min-w-[120px]"
-          style={{ left: contextMenu.x, top: contextMenu.y }}
+          className="fixed z-50 bg-neo-card border-2 border-[var(--color-neo-border)] py-1 min-w-[120px]"
+          style={{ left: contextMenu.x, top: contextMenu.y, boxShadow: 'var(--shadow-neo-md)' }}
         >
           <button
             onClick={handleContextMenuRename}