# Design System - Color Scheme

## Overview
A cohesive color system based on the signature Orange→Pink→Blue gradient used throughout the application. All UI elements should use colors from this palette for consistency.

---

## Brand Colors (Primary)

The core brand colors derived from the ripple effect gradient.

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Orange** | #FB923C | rgb(251, 146, 60) | Primary accent, active states |
| **Pink** | #F472B6 | rgb(244, 114, 182) | Secondary accent, warnings |
| **Blue** | #93C5FD | rgb(147, 197, 253) | Tertiary accent, success |

---

## Extended Palette

### Orange Scale

| Name | Hex | Usage |
|------|-----|-------|
| Orange 50 | #FFF7ED | Light backgrounds |
| Orange 100 | #FFEDD5 | Hover backgrounds |
| Orange 200 | #FED7AA | Borders, dividers |
| Orange 300 | #FDBA74 | Icons, secondary |
| Orange 400 | #FB923C | **Primary brand** |
| Orange 500 | #F97316 | Active states |
| Orange 600 | #EA580C | Text on light |
| Orange 700 | #C2410C | Dark text |

### Pink Scale

| Name | Hex | Usage |
|------|-----|-------|
| Pink 50 | #FDF2F8 | Light backgrounds |
| Pink 100 | #FCE7F3 | Hover backgrounds |
| Pink 200 | #FBCFE8 | Borders, dividers |
| Pink 300 | #F9A8D4 | Icons, secondary |
| Pink 400 | #F472B6 | **Primary brand** |
| Pink 500 | #EC4899 | Active states |
| Pink 600 | #DB2777 | Text on light |
| Pink 700 | #BE185D | Dark text |

### Blue Scale

| Name | Hex | Usage |
|------|-----|-------|
| Blue 50 | #EFF6FF | Light backgrounds |
| Blue 100 | #DBEAFE | Hover backgrounds |
| Blue 200 | #BFDBFE | Borders, dividers |
| Blue 300 | #93C5FD | **Primary brand** |
| Blue 400 | #60A5FA | Active states |
| Blue 500 | #3B82F6 | Links, actions |
| Blue 600 | #2563EB | Text on light |
| Blue 700 | #1D4ED8 | Dark text |

---

## Neutral Scale

| Name | Hex | Usage |
|------|-----|-------|
| Gray 50 | #FAFAFA | Page backgrounds |
| Gray 100 | #F5F5F5 | Card backgrounds |
| Gray 200 | #E5E5E5 | Borders, dividers |
| Gray 300 | #D4D4D4 | Disabled states |
| Gray 400 | #A3A3A3 | Placeholder text |
| Gray 500 | #737373 | Secondary text |
| Gray 600 | #525252 | Body text |
| Gray 700 | #404040 | Headings |
| Gray 800 | #262626 | Primary text |
| Gray 900 | #171717 | High contrast |

---

## Semantic Colors

### Status Labels

| Status | Background | Text | Description |
|--------|------------|------|-------------|
| **To Do** | #E5E5E5 (Gray 200) | #404040 (Gray 700) | Neutral, pending |
| **In Progress** | #FFEDD5 (Orange 100) | #C2410C (Orange 700) | Active, working |
| **Done** | #DBEAFE (Blue 100) | #1D4ED8 (Blue 700) | Complete, success |
| **Blocked** | #FCE7F3 (Pink 100) | #BE185D (Pink 700) | Warning, attention |

### UI States

| State | Color | Hex |
|-------|-------|-----|
| Default | Gray 700 | #404040 |
| Hover | Gray 900 | #171717 |
| Active | Orange 500 | #F97316 |
| Disabled | Gray 400 | #A3A3A3 |
| Error | Pink 600 | #DB2777 |
| Success | Blue 600 | #2563EB |

---

## Text Colors

| Usage | Color | Hex |
|-------|-------|-----|
| Primary text | Gray 800 | #262626 |
| Secondary text | Gray 600 | #525252 |
| Tertiary text | Gray 500 | #737373 |
| Muted text | Gray 400 | #A3A3A3 |
| Link | Blue 500 | #3B82F6 |
| Link hover | Blue 600 | #2563EB |

---

## Background Colors

| Usage | Color | Hex |
|-------|-------|-----|
| Page | Gray 50 | #FAFAFA |
| Card | White | #FFFFFF |
| Header | Gray 50 | #FAFAFA |
| Hover | Gray 100 | #F5F5F5 |
| Selected | Orange 50 | #FFF7ED |

---

## Border Colors

| Usage | Color | Hex |
|-------|-------|-----|
| Default | Gray 200 | #E5E5E5 |
| Hover | Gray 300 | #D4D4D4 |
| Focus | Orange 400 | #FB923C |
| Error | Pink 400 | #F472B6 |

---

## Ripple Effect Colors

Used in the signature hover animation.

```css
@keyframes cellRipple {
  0%   { background-color: rgba(251, 146, 60, 0.85); }  /* Orange */
  40%  { background-color: rgba(244, 114, 182, 0.75); } /* Pink */
  70%  { background-color: rgba(147, 197, 253, 0.6); }  /* Blue */
  100% { background-color: transparent; }
}
```

---

## CSS Custom Properties

```css
:root {
  /* Brand Colors */
  --color-orange: #FB923C;
  --color-pink: #F472B6;
  --color-blue: #93C5FD;

  /* Orange Scale */
  --color-orange-50: #FFF7ED;
  --color-orange-100: #FFEDD5;
  --color-orange-200: #FED7AA;
  --color-orange-300: #FDBA74;
  --color-orange-400: #FB923C;
  --color-orange-500: #F97316;
  --color-orange-600: #EA580C;
  --color-orange-700: #C2410C;

  /* Pink Scale */
  --color-pink-50: #FDF2F8;
  --color-pink-100: #FCE7F3;
  --color-pink-200: #FBCFE8;
  --color-pink-300: #F9A8D4;
  --color-pink-400: #F472B6;
  --color-pink-500: #EC4899;
  --color-pink-600: #DB2777;
  --color-pink-700: #BE185D;

  /* Blue Scale */
  --color-blue-50: #EFF6FF;
  --color-blue-100: #DBEAFE;
  --color-blue-200: #BFDBFE;
  --color-blue-300: #93C5FD;
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;

  /* Gray Scale */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #D4D4D4;
  --color-gray-400: #A3A3A3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  /* Semantic */
  --color-text-primary: var(--color-gray-800);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-400);
  --color-bg-page: var(--color-gray-50);
  --color-bg-card: #FFFFFF;
  --color-border: var(--color-gray-200);
}
```

---

## Usage Guidelines

1. **Primary actions** use Orange
2. **Secondary/warning states** use Pink
3. **Success/completion states** use Blue
4. **Neutral states** use Gray scale
5. **Always pair light backgrounds with dark text from the same color family**
6. **Maintain sufficient contrast** (4.5:1 minimum for text)