## Brief overview Project-specific frontend color theme guidelines for the vibing application. Defines a cohesive peach/coral/pink color palette with specific CSS custom properties, component styling patterns, and accessibility requirements. ## Color palette usage - Always use the defined peach-coral color scheme: Primary Peach (#FFCDB2), Secondary Coral (#FFB4A2), Light Pink (#E5989B), Medium Mauve (#B5838D), Dark Purple (#6D6875) - Implement CSS custom properties in src/index.css for all color definitions - Use semantic color naming: --color-primary, --color-secondary, --color-bg-dark, --color-text-primary, etc. - Support both dark and light modes using @media (prefers-color-scheme: light) ## Component styling patterns - Buttons: Use gradient backgrounds, implement translateY(-2px) hover animations, apply consistent focus states with peach outline - Cards: White backgrounds with subtle shadows, translateY(-8px) hover animations, 16px border radius, scale(1.05) image hover effects - Links: Primary color #FFCDB2, hover colors #E5989B (dark mode) or #B5838D (light mode), no text decoration by default - Use semantic CSS class names: .btn-primary, .btn-secondary, .btn-outline, .btn-ghost ## Interactive states and animations - Apply subtle lift animations using transform: translateY(-2px) for hover effects - Use rgba(255, 205, 178, 0.3) for focus rings and primary shadows - Use rgba(229, 152, 155, 0.3) for secondary shadows - Ensure hover states are distinct from focus states for accessibility ## File organization structure - Place global styles and CSS custom properties in src/index.css - Create individual .css files in src/components/ for component-specific styles - Use src/App.css for utility classes - Consider src/styles/ directory for additional theme files when needed ## Accessibility requirements - Maintain minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text - Use --color-focus for focus indicators - Test with color blindness simulators - Ensure all interactive elements have proper focus states