---
alwaysApply: true
---
# Frontend Color Theme Guidelines

## Color Palette

### Primary Colors
- **Primary Peach**: `#FFCDB2` - Main brand color, used for primary buttons, links, and accents
- **Secondary Coral**: `#FFB4A2` - Used for gradients and secondary elements
- **Light Pink**: `#E5989B` - Hover states and secondary buttons
- **Medium Mauve**: `#B5838D` - Alternative secondary color
- **Dark Purple**: `#6D6875` - Text and dark accents

### Background Colors
- **Dark Mode Background**: `#6D6875` - Main dark theme background
- **Light Mode Background**: `#FFCDB2` - Main light theme background (very light)
- **Card Background**: `white` - Card and component backgrounds

### Text Colors
- **Primary Text (Dark)**: `#6D6875` - Main text color in light mode
- **Primary Text (Light)**: `rgba(255, 255, 255, 0.87)` - Main text color in dark mode
- **Secondary Text**: `#B5838D` - Subtitle and body text
- **Accent Text**: `#E5989B` - Card subtitles and accent text

### Interactive States
- **Hover Effects**: Use `transform: translateY(-2px)` for subtle lift animations
- **Focus Rings**: `rgba(255, 205, 178, 0.3)` - Peach focus outline
- **Shadows**: `rgba(255, 205, 178, 0.3)` for primary elements, `rgba(229, 152, 155, 0.3)` for secondary

## CSS Custom Properties

Always define colors using CSS custom properties in [src/index.css](mdc:src/index.css):

```css
:root {
  /* Primary Colors */
  --color-primary: #FFCDB2;
  --color-primary-dark: #FFB4A2;
  --color-secondary: #E5989B;
  --color-secondary-dark: #B5838D;
  --color-dark: #6D6875;
  
  /* Background Colors */
  --color-bg-dark: #6D6875;
  --color-bg-light: #FFCDB2;
  --color-bg-card: white;
  
  /* Text Colors */
  --color-text-primary: #6D6875;
  --color-text-primary-light: rgba(255, 255, 255, 0.87);
  --color-text-secondary: #B5838D;
  --color-text-accent: #E5989B;
  
  /* Interactive Colors */
  --color-focus: rgba(255, 205, 178, 0.3);
  --color-shadow-primary: rgba(255, 205, 178, 0.3);
  --color-shadow-secondary: rgba(229, 152, 155, 0.3);
}
```

## Component Styling Guidelines

### Buttons
Follow the patterns in [src/components/Button.css](mdc:src/components/Button.css):
- Use gradient backgrounds for primary/secondary buttons
- Implement hover animations with `translateY(-2px)`
- Apply consistent focus states with green outline
- Use semantic class names: `.btn-primary`, `.btn-secondary`, `.btn-outline`, `.btn-ghost`

### Cards
Follow the patterns in [src/components/Card.css](mdc:src/components/Card.css):
- Use white background with subtle shadows
- Implement hover animations with `translateY(-8px)`
- Use consistent border radius (16px)
- Apply image hover effects with `scale(1.05)`

### Links
- Primary color: `#FFCDB2`
- Hover color: `#E5989B` (dark mode), `#B5838D` (light mode)
- No text decoration by default

## Dark/Light Mode Support

Always include both dark and light mode variants using `@media (prefers-color-scheme: light)` in [src/index.css](mdc:src/index.css).

## Accessibility

- Maintain minimum contrast ratios (4.5:1 for normal text, 3:1 for large text)
- Use focus indicators with `--color-focus`
- Ensure hover states are distinct from focus states
- Test with color blindness simulators

## File Organization

- Global styles and CSS custom properties: [src/index.css](mdc:src/index.css)
- Component-specific styles: Individual `.css` files in [src/components/](mdc:src/components/)
- Utility classes: [src/App.css](mdc:src/App.css)
- Consider creating a dedicated [src/styles/](mdc:src/styles/) directory for theme files

## Usage Examples

```css
/* Button with theme colors */
.my-button {
  background: var(--color-primary);
  color: var(--color-dark);
  box-shadow: 0 4px 12px var(--color-shadow-primary);
}

/* Card with theme colors */
.my-card {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 1px solid rgba(109, 104, 117, 0.1);
}
```