# 🎨 Car Repair Shop - Theme Standardization

## Color Palette Standard
Based on your app.css configuration where zinc maps to slate colors.

### Primary Colors (Use ZINC everywhere)
- **Backgrounds**: `bg-white dark:bg-zinc-800`
- **Cards/Containers**: `bg-white dark:bg-zinc-800` with `border border-zinc-200 dark:border-zinc-700`
- **Secondary Backgrounds**: `bg-zinc-50 dark:bg-zinc-900`
- **Borders**: `border-zinc-200 dark:border-zinc-700`

### Typography
- **Primary Text**: `text-zinc-900 dark:text-white`
- **Secondary Text**: `text-zinc-600 dark:text-zinc-400` 
- **Muted Text**: `text-zinc-500 dark:text-zinc-500`

### Interactive Elements
- **Accent**: `text-accent` / `bg-accent` (indigo-500/300)
- **Links**: `text-accent hover:text-accent-content`
- **Buttons**: Use Flux components (`flux:button`)

### Form Elements
- **Inputs**: Use Flux components (`flux:input`, `flux:select`)
- **Focus States**: Handled by Flux automatically

### Table Elements
- **Headers**: `bg-zinc-50 dark:bg-zinc-900`
- **Borders**: `divide-zinc-200 dark:divide-zinc-700`
- **Hover**: `hover:bg-zinc-50 dark:hover:bg-zinc-700`

### Status Colors (Keep these for badges)
- **Success**: `bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200`
- **Warning**: `bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200`
- **Error**: `bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200`
- **Info**: `bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200`

## Components to Standardize
1. Job Cards - Currently using gray colors
2. Work Orders - Currently using zinc (good)
3. Customers - Mixed gray/zinc colors
4. Service Orders - Using zinc (good)
5. Users - Recently updated to stone (needs zinc)
6. All other modules

## Implementation Priority
1. Fix color inconsistencies (gray → zinc)
2. Standardize form components to use Flux
3. Ensure dark mode compatibility
4. Update status badges for consistency