# Centralized Color Palette System

This document describes the unified color system implemented for the Bakery IA frontend application.

## 🎯 Overview

The application now uses a **centralized color configuration** that ensures consistent theming across both light and dark modes while maintaining a professional bakery brand identity.

## 📁 File Structure

```
src/styles/
├── colors.js              # 🏛️ Single source of truth for all colors
├── themes/
│   ├── light.css          # 🌞 Light theme CSS variables
│   └── dark.css           # 🌙 Dark theme CSS variables
├── components.css         # 🧩 CSS utility classes
├── globals.css           # 🌐 Base styles
└── animations.css        # ✨ Animation definitions
```

## 🏛️ Centralized Color Configuration (`colors.js`)

### Base Color Palette

- **Primary**: Warm Orange (#d97706) - Bakery brand color
- **Secondary**: Professional Sage Green (#16a34a) - Complements the brand
- **Semantic Colors**: Success, Warning, Error, Info with full scale support
- **Neutral**: Professional grayscale for text and backgrounds

### Professional Bakery Colors

Special accent colors inspired by bakery products:
- `sourdough`, `wholeWheat`, `brioche`, `rye`, `croissant`
- `danish`, `espresso`, `latte`, `chocolate`, `vanilla`
- And more for specialized use cases

### Chart Colors

Colorblind-safe data visualization palette:
- 8 distinct colors optimized for accessibility
- Different brightness levels for light/dark themes

## 🎨 Theme System

### Light Theme
- Clean, professional appearance
- High contrast for accessibility
- Warm whites and light grays

### Dark Theme  
- Rich dark backgrounds (#0f172a, #1e293b)
- Enhanced color brightness for readability
- Maintains brand consistency

## 🔧 Usage

### 1. In CSS (Recommended)
```css
.my-component {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.primary-button {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}
```

### 2. Tailwind Classes
```jsx
<div className="bg-primary-600 text-white">
  Primary content
</div>

<div className="bg-secondary-500 text-white">
  Secondary content  
</div>
```

### 3. CSS Utility Classes
```jsx
<div className="bg-bg-primary text-text-primary border-border-primary">
  Themed content
</div>
```

## 🏗️ CSS Variable Structure

### Semantic Colors
```css
--color-primary: #d97706           /* Main brand color */
--color-primary-light: #f59e0b     /* Lighter variant */
--color-primary-dark: #b45309      /* Darker variant */
--color-primary-50: #fffbeb        /* Lightest scale */
--color-primary-900: #78350f       /* Darkest scale */
```

### Theme-Specific Colors
```css
--bg-primary: #ffffff              /* Main background */
--bg-secondary: #f8fafc            /* Secondary background */
--text-primary: #0f172a            /* Primary text */
--text-secondary: #475569          /* Secondary text */
--border-primary: #e2e8f0          /* Main borders */
```

### Component Colors
```css
--card-bg: #ffffff                 /* Card backgrounds */
--input-bg: #ffffff                /* Input backgrounds */
--nav-bg: #ffffff                  /* Navigation background */
```

## 🎪 Available Utility Classes

The system automatically generates utility classes for all color variables:

### Background Classes
- `.bg-bg-primary`, `.bg-bg-secondary`, `.bg-bg-tertiary`
- `.bg-color-primary`, `.bg-color-secondary`, `.bg-color-success`

### Text Classes  
- `.text-text-primary`, `.text-text-secondary`, `.text-text-tertiary`
- `.text-color-primary`, `.text-color-error`, `.text-color-success`

### Border Classes
- `.border-border-primary`, `.border-border-secondary`
- `.border-color-primary`, `.border-color-error`

## 🌓 Theme Switching

The application automatically applies the correct color values based on the theme class:

```html
<!-- Light theme -->
<html class="light">
  <!-- Colors from light.css applied -->
</html>

<!-- Dark theme -->
<html class="dark">
  <!-- Colors from dark.css applied -->
</html>
```

## ✅ Benefits

1. **Single Source of Truth**: All colors defined in one place
2. **Consistent Theming**: Automatic light/dark theme support  
3. **Brand Consistency**: Professional bakery color palette
4. **Accessibility**: WCAG 2.1 AA compliant contrast ratios
5. **Developer Experience**: Easy to use utility classes
6. **Maintainability**: Change colors in one place, update everywhere

## 🔄 Migration Guide

### From Hardcoded Colors
```jsx
// ❌ Before
<div className="bg-orange-600 text-white">

// ✅ After  
<div className="bg-color-primary text-text-inverse">
```

### From Old CSS Variables
```css
/* ❌ Before */
.component {
  background: #d97706;
}

/* ✅ After */
.component {
  background: var(--color-primary);
}
```

## 🎯 Best Practices

1. **Always use CSS variables** instead of hardcoded hex values
2. **Prefer semantic classes** like `text-text-primary` over `text-gray-900`
3. **Test in both themes** to ensure proper contrast
4. **Use bakery colors** for brand-specific elements
5. **Use chart colors** for data visualizations

## 🔍 Color Reference

### Primary Palette
- **Primary**: #d97706 (Orange) - Main brand color
- **Secondary**: #16a34a (Sage Green) - Professional complement
- **Success**: #059669 (Green) - Positive actions
- **Warning**: #ea580c (Orange variant) - Caution states
- **Error**: #dc2626 (Red) - Error states
- **Info**: #0284c7 (Blue) - Informational content

### Theme Backgrounds
- **Light**: #ffffff, #f8fafc, #f1f5f9
- **Dark**: #0f172a, #1e293b, #334155

This centralized system ensures consistent, accessible, and maintainable color usage throughout the application while supporting both light and dark themes seamlessly.