# Current Color Usage Inventory

## Mantine Color Variables Used

### Basic Colors
- White: `var(--mantine-color-white)`
- Black: `var(--mantine-color-black)`
- Body: `var(--mantine-color-body)`

### Blue Shades
- Blue-0: `var(--mantine-color-blue-0)`
- Blue-1: `var(--mantine-color-blue-1)`
- Blue-4: `var(--mantine-color-blue-4)`
- Blue-6: `var(--mantine-color-blue-6)`
- Blue-7: `var(--mantine-color-blue-7)`
- Blue-filled: `var(--mantine-color-blue-filled)`

### Gray Shades
- Gray-0: `var(--mantine-color-gray-0)`
- Gray-3: `var(--mantine-color-gray-3)`
- Gray-4: `var(--mantine-color-gray-4)`
- Gray-5: `var(--mantine-color-gray-5)`
- Gray-7: `var(--mantine-color-gray-7)`

### Dark Shades
- Dark-0: `var(--mantine-color-dark-0)`
- Dark-4: `var(--mantine-color-dark-4)`
- Dark-6: `var(--mantine-color-dark-6)`
- Dark-8: `var(--mantine-color-dark-8)`

## Color Usage By Component

### HeroTitle
- Background: `light-dark(var(--mantine-color-white), var(--mantine-color-dark-8))`
- Text: `light-dark(var(--mantine-color-black), var(--mantine-color-white))`

### Welcome
- Text: `light-dark(var(--mantine-color-black), var(--mantine-color-white))`

### HeaderSimple
- Background: `var(--mantine-color-body)`
- Border: `light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))`
- Text: `light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0))`
- Menu Background: `light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6))`
- Active Item Background: `var(--mantine-color-blue-filled)`
- Active Item Text: `var(--mantine-color-white)`

### ContactIcons
- Icon Color: `var(--mantine-color-white)`
- Icon Hover Color: `var(--mantine-color-blue-0)`
- Text Color: `var(--mantine-color-white)`

### Contact
- Background: `light-dark(var(--mantine-color-white), var(--mantine-color-dark-8))`

### ContactUs
- Gradient: `linear-gradient(to bottom right, var(--mantine-color-blue-4) 0%, var(--mantine-color-blue-7) 100%)`
- Title Color: `var(--mantine-color-white)`
- Subtitle Color: `var(--mantine-color-blue-0)`
- Form Background: `var(--mantine-color-white)`
- Form Button Text: `var(--mantine-color-white)`
- Form Button Hover: `var(--mantine-color-blue-1)`
- Input Background: `var(--mantine-color-white)`
- Input Border: `var(--mantine-color-gray-4)`
- Input Text: `var(--mantine-color-black)`
- Input Placeholder: `var(--mantine-color-gray-5)`
- Submit Button Background: `var(--mantine-color-blue-6)`

## Issues Identified
- Inconsistent use of blue shades across components
- Mix of direct color variables and light-dark functions
- No centralized theme definition with brand colors
- No semantic color naming (e.g., primary, secondary, etc.)

## Next Steps
- Define a comprehensive color palette in theme.ts
- Create semantic color tokens
- Standardize light/dark mode transitions