initial commit

.cursor/rules/color-theme.mdc

@@ -0,0 +1,117 @@
+---
+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);
+}
+```