Theme System Refactor (#6)

# Dashboard State Lift + Theme System Refactor

## Summary

Refactored dashboard state ownership, centralized theme semantics, and simplified component styling across the application.

## Changes

### Dashboard State Refactor

* Moved dashboard state management from `Dashboard.view` into `Dashboard.tsx`
* Added centralized `DashboardState` initialization in parent container
* Introduced memoized dashboard state setter callbacks:

  * `toggleFlow`
  * `setFlow`
  * `togglePeriodType`
  * `toggleComparison`
  * `setSelectedPeriodId`
  * `setSelectedGroupKey`
* Added `DashboardStateSetters` memoized object for prop-driven state management
* Removed `onFlowChange` callback pattern
* Converted dashboard component into stateless view layer
* Renamed component export flow:

  * `Dashboard.tsx` → removed
  * `Dashboard.view.tsx` → primary implementation

### Dashboard Models Cleanup

* Removed legacy palette configuration interfaces:

  * `ColorDefinition`
  * `ThemeAwarePalette`
* Removed config-level style palette support from `DashboardConfig`
* Renamed `DashboardProps` → `DashboardViewProps`
* Added reusable `ColorScheme` interface
* Simplified component color contract:

  * `primary`
  * `surface`
  * `text`

### Theme Architecture Refactor

* Moved `AppTheme.tsx` into `shared-theme`
* Added centralized semantic theme system
* Introduced `themeConfig.ts` with semantic tokens:

  * surface
  * border
  * text
* Added `semantic` extension to MUI theme typing
* Added `flows` palette extension:

  * outflows
  * inflows
* Centralized flow colors inside theme primitives
* Added CSS semantic variables:

  * `--bg-page`
  * `--bg-card`
  * `--bg-elevated`
  * `--border-default`
  * `--border-subtle`
  * `--text-primary`
  * `--text-secondary`
  * `--text-muted`

### Theme Mode Improvements

* Added explicit `ColorMode` type
* Expanded `ColorModeContext`:

  * `mode`
  * `setMode`
  * `toggleColorMode`
* Added `CssBaseline`
* Added configurable `defaultMode`
* Simplified dark theme palette handling
* Standardized dark surfaces and shadows
* Reduced excessive dark-mode glow/shadow intensity

### Dashboard UI Styling Improvements

* Replaced hardcoded dashboard palette config with theme palette usage
* Updated dashboard background gradients to use alpha-based semantic colors
* Replaced `colorScheme.light` usage with `colorScheme.surface`
* Standardized border usage with theme divider tokens
* Removed manual dark-mode conditional styling where redundant
* Simplified card and progress styling logic

### Shared Theme Customization Cleanup

Updated customization layers for improved consistency:

* `inputs`
* `navigation`
* `feedback`
* `surfaces`

Key improvements:

* Reduced dark-mode contrast harshness
* Unified divider usage
* Replaced hardcoded grayscale backgrounds with semantic surfaces
* Simplified hover and active state styling
* Reduced shadow intensity across components
* Improved dark-mode readability and layering

### Home Page Styling Cleanup

* Replaced manual RGBA handling with `alpha()` utility
* Improved dark-mode glassmorphism consistency
* Updated CTA hover shadow to use theme primary color

### Miscellaneous Cleanup

* Updated imports to new theme structure
* Removed unused legacy color mode components:

  * `ColorModeIconDropdown.tsx`
  * `ColorModeSelect.tsx`
* Removed dashboard config style palette definitions
* Simplified flow-based color derivation logic

## Result

* Cleaner separation of stateful vs presentational dashboard logic
* Centralized semantic theming system
* Consistent dark/light mode behavior
* Reduced styling duplication
* Improved maintainability and extensibility of theme architecture
* Simplified dashboard component contracts
* Better UI consistency across surfaces and controls

Reviewed-on: #6
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

src/shared-theme/customizations/surfaces.ts

@@ -40,7 +40,7 @@ export const surfacesCustomizations: Components<Theme> = {
         '&:hover': { backgroundColor: gray[50] },
         '&:focus-visible': { backgroundColor: 'transparent' },
         ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
+          '&:hover': { backgroundColor: alpha(theme.palette.common.white, 0.06) },
         }),
       }),
     },
@@ -67,7 +67,7 @@ export const surfacesCustomizations: Components<Theme> = {
           border: `1px solid ${(theme.vars || theme).palette.divider}`,
           boxShadow: 'none',
           ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
+            backgroundColor: (theme.vars || theme).palette.background.paper,
           }),
           variants: [
             {
@@ -79,7 +79,7 @@ export const surfacesCustomizations: Components<Theme> = {
                 boxShadow: 'none',
                 background: 'hsl(0, 0%, 100%)',
                 ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
+                  background: alpha((theme.vars || theme).palette.background.paper, 0.6),
                 }),
               },
             },