Redesign UI with comprehensive theming system and visual polish

[super3]

Summary

This PR introduces a comprehensive design system overhaul with CSS custom properties for theming, refined visual hierarchy, improved animations, and enhanced component styling throughout the application.

Key Changes

Design System & Theming

• Added CSS custom properties (:root variables) for consistent color palette management across the entire application
• Implemented a complete color system including background layers, text hierarchy, borders, accent colors, and semantic colors (success/danger)
• Updated all hardcoded color values to use CSS variables for maintainability and future theme support

Visual Refinements

• Enhanced typography with improved font smoothing and refined font weights
• Updated border radius values for more consistent and modern appearance (8px → 10px for buttons, 16px → 18px for messages)
• Improved spacing and padding throughout components for better visual breathing room
• Refined transition timings and easing functions for smoother interactions

Component Improvements

• Sidebar: Expanded width increased from 200px to 220px, improved button styling with better hover states and active states
• Brand Logo: Added gradient background with glow effect and proper SVG icon styling
• Messages: Added entrance animations, improved styling with gradients for user messages, added visual indicator (checkmark icon) for assistant messages
• Input Area: Enhanced send button with gradient background, improved focus states with glow effect, and active state management based on input content
• Todo Items: Improved checkbox styling with gradient backgrounds, better hover effects, and smooth transitions
• Dropdowns: Added animation on open, improved shadow depth and border styling
• Progress Bar: Added visual progress indicator for task completion with gradient styling

Interactive Enhancements

• Added messageIn animation for message entrance
• Added dropdownIn animation for dropdown menus
• Improved send button active state that responds to input and quoted task presence
• Enhanced hover and active states across all interactive elements with consistent transitions
• Added visual feedback for copied state on copy button

Mobile Improvements

• Updated mobile toggle button styling with better contrast and hover states
• Improved sidebar shadow on mobile expansion

Accessibility & Polish

• Improved text contrast with refined color palette
• Better visual hierarchy with updated font weights and sizes
• Smoother scrollbar styling with conditional visibility
• Enhanced empty state with improved icon styling and gradient border effect
• Better focus states for form inputs with glow effects

Notable Implementation Details

• All color values now reference CSS custom properties, enabling easy theme switching in the future
• Consistent use of cubic-bezier(0.4, 0, 0.2, 1) easing for primary animations
• Gradient backgrounds used strategically for accent elements (buttons, badges, icons)
• Box shadows refined for better depth perception with multiple shadow layers
• Typography refined with improved letter-spacing and text-transform adjustments

https://claude.ai/code/session_014nwqkHNr87St7Bdo8QL4B6

[railway-app]

🚅 Deployed to the padtask-pr-18 environment in padtask

Service	Status	Web	Updated (UTC)
padtask	✅ Success (View Logs)	Web	May 1, 2026 at 2:48 pm