Refactor settings UI with CSS variables and reorganize tabs

[Jkaotlic]

Summary

This PR modernizes the settings interface by introducing a comprehensive CSS variable system for consistent theming, reorganizing the settings tabs for better UX, and enhancing visual components with improved styling.

Key Changes

Design System

• Added CSS custom properties (:root variables) for colors, spacing, and border radius
• Implemented a cohesive color palette with primary, secondary, success, danger, and warning states
• Standardized spacing and border radius values across the application

Settings UI Refactoring

• Tab reorganization: Restructured settings tabs from [Timer, Clock, Display, Help] to [Timer, Theme, Sound, Display, Help]
  • Moved clock settings into the Timer tab
  • Extracted theme selection into dedicated Theme tab
  • Extracted sound settings into dedicated Sound tab
• Styled select elements: Created .settings-select class replacing inline styles with consistent appearance and hover/focus states
• Theme card redesign: Replaced .theme-btn with new .theme-card component featuring:
  • Color swatch preview
  • Theme name display
  • Improved hover and active states
  • Grid layout with 4 columns

Visual Enhancements

• Timer progress bar: Added animated progress indicator with gradient backgrounds and state-based styling (success, warning, danger)
• Settings dividers: Introduced .settings-divider for visual section separation
• Improved form controls: Enhanced select dropdowns with custom SVG arrows and better visual feedback

Code Quality

• Removed redundant inline styles in favor of CSS classes
• Improved clock style change handler to properly disable sync when manually changed
• Optimized theme button selection to only remove active class from previous button (BUG-023 fix)
• Cleaned up display select initialization by removing unnecessary inline styles

Accessibility

• Added proper focus states with box-shadow indicators
• Maintained semantic HTML structure
• Improved visual hierarchy with consistent spacing

https://claude.ai/code/session_01Lp415PqrY2c9nhnTwxm1Sr