# 🎨 Task&Coffee Color Palette

**Usage examples?** See [STYLE_GUIDE.md](./STYLE_GUIDE.md)  
**Quick reference?** See [STYLES_CHEATSHEET.md](./STYLES_CHEATSHEET.md)  
**Back to main?** See [README.md](../README.md)

---

## Mirage Palette - Visual Guide

```
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                    MIRAGE COLOR SCALE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 50  ░░░░░░░░░   #f4f6fb   Lightest - heading text on dark bg
100  ▒▒▒▒▒▒▒▒▒   #e7edf7   Card foreground text
200  ▓▓▓▓▓▓▓▓▓   #cbd9ec   Main foreground text
300  ▓▓▓▓▓▓▓▓▓   #9db8dc   Muted foreground text
────────────────────────────────────────────────────────────
400  ████████    #6893c8   PRIMARY ACCENT ⭐
500  ████████    #4474b3   Accent hover state
────────────────────────────────────────────────────────────
600  ████████    #335b96   Secondary, elevated cards
700  ████████    #2a4a7a   Dark cards alternative
800  ████████    #264066   Muted elements, popovers
900  ████████    #243756   CARDS ⭐
950  ████████    #111928   BACKGROUND (darkest) ⭐

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

---

## 🌟 Semantic Color Mapping

### Background & Surfaces
```
--background          #111928  (mirage-950)  Main app background
--card                #243756  (mirage-900)  Card surfaces
--popover             #264066  (mirage-800)  Floating elements
--muted               #264066  (mirage-800)  Subtle backgrounds
--sidebar             #111928  (mirage-950)  Navigation rail
```

### Foreground & Text
```
--foreground          #cbd9ec  (mirage-200)  Primary text
--card-foreground     #e7edf7  (mirage-100)  Text on cards
--muted-foreground    #9db8dc  (mirage-300)  Secondary text
--popover-foreground  #e7edf7  (mirage-100)  Text in popovers
```

### Interactive Elements
```
--primary             #6893c8  (mirage-400)  Primary actions, links
--primary-foreground  #111928  (mirage-950)  Text on primary
--secondary           #2a4a7a  (mirage-700)  Secondary actions
--accent              #4474b3  (mirage-500)  Hover states
```

### Borders & Inputs
```
--border              rgba(157, 184, 220, 0.15)  Subtle borders
--input               rgba(157, 184, 220, 0.2)   Input borders
--ring                #6893c8  (mirage-400)       Focus ring
```

---

## 💫 Neon Accent Colors

```
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                    NEON ACCENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔵 Neon Blue     #c6e2ff     Light blue with glow effect
   Glow color:   rgba(30, 132, 242, 0.6)
   
💗 Neon Pink     #ffc5ec     Light pink with glow effect
   Glow color:   rgba(255, 20, 147, 0.6)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

---

## 🎯 Usage by Element Type

### Text Colors
```
Headings:           mirage-200 (#cbd9ec)
Body text:          mirage-200 (#cbd9ec)
Secondary text:     mirage-300 (#9db8dc)
Disabled text:      mirage-300 (#9db8dc) with opacity
```

### Backgrounds
```
Page background:    mirage-950 (#111928)
Card background:    mirage-900 (#243756)
Hover background:   mirage-800 (#264066)
Active background:  mirage-700 (#2a4a7a)
```

### Buttons
```
Primary:            mirage-400 (#6893c8) bg
Primary hover:      mirage-500 (#4474b3) bg
Secondary:          mirage-700 (#2a4a7a) bg
Secondary hover:    mirage-600 (#335b96) bg
Ghost hover:        mirage-800 (#264066) bg
```

### Borders
```
Default:            mirage-300 with 15% opacity
Input:              mirage-300 with 20% opacity
Focus:              mirage-400 (#6893c8) solid
Divider:            mirage-800 (#264066)
```

---

## 🌈 Color Relationships

```
                     LIGHT ↑
                     
    ┌─────────────────────────────────┐
    │  mirage-50  │ Lightest text     │
    │  mirage-100 │ Card text         │
    │  mirage-200 │ Main text         │
    │  mirage-300 │ Muted text        │
    ├─────────────────────────────────┤
    │  mirage-400 │ PRIMARY ⭐        │  ← Interactive
    │  mirage-500 │ Hover state       │
    ├─────────────────────────────────┤
    │  mirage-600 │ Secondary         │
    │  mirage-700 │ Alt cards         │
    │  mirage-800 │ Muted bg          │
    │  mirage-900 │ CARDS ⭐          │  ← Surfaces
    │  mirage-950 │ BACKGROUND ⭐     │
    └─────────────────────────────────┘
    
                     DARK ↓
```

---

## 📊 Contrast Ratios (WCAG)

```
Background (950) + Text (200):     AAA  ✓  (14.2:1)
Card (900) + Card Text (100):      AAA  ✓  (12.8:1)
Primary (400) + Primary FG (950):  AA   ✓  (5.2:1)
Muted (800) + Muted Text (300):    AA   ✓  (4.8:1)
```

All color combinations meet WCAG AA standards minimum! 🎉

---

## 🎨 Example Compositions

### Card with Neon Accent
```
┌────────────────────────────────┐
│  mirage-900 background         │
│  ┌──────────────────────────┐  │
│  │  mirage-100 text         │  │
│  │  mirage-300 muted text   │  │
│  │                          │  │
│  │  [mirage-400 button]     │  │
│  │   + neon blue glow       │  │
│  └──────────────────────────┘  │
└────────────────────────────────┘
```

### Primary Button
```
┌──────────────────────┐
│  mirage-400 bg       │  ← Background
│  mirage-950 text     │  ← Text
│  + subtle shadow     │
│  hover: neon glow    │  ← Neon effect on hover
└──────────────────────┘
```

### Today's Task Column
```
┌────────────────────────────────┐
│  mirage-400/10 background      │  ← 10% opacity
│  + mirage-400 border (2px)     │  ← Solid border
│  + neon-blue glow              │  ← Glow effect
│                                │
│  Tasks: mirage-900 cards       │
└────────────────────────────────┘
```

---

## 🔄 Dark Mode Toggle

When dark mode is active (`.dark` class):

```
Background:    mirage-900 → mirage-950
Cards:         mirage-700 → mirage-900
Primary:       mirage-300 → mirage-400
Text:          mirage-100 → mirage-200
```

Currently configured for dark-first design.

---

## 💡 Best Practices

1. **Depth hierarchy:**
   - Background: mirage-950
   - Elevated: mirage-900
   - More elevated: mirage-800

2. **Text contrast:**
   - Always use mirage-100/200 for text on dark backgrounds
   - Use mirage-300 for less important text

3. **Neon sparingly:**
   - Use neon effects only for:
     - Brand elements (logo, headers)
     - Important CTAs
     - Today's tasks/current items
   - Don't overuse - it should feel special

4. **Accessible focus states:**
   - Always use mirage-400 for focus rings
   - Add 3px ring with 50% opacity

---

## 🚀 Quick Reference

| Element | Light Value | Dark Value | Usage |
|---------|-------------|------------|-------|
| Page BG | `mirage-950` | `mirage-900` | Main background |
| Card BG | `mirage-900` | `mirage-700` | Surface |
| Text | `mirage-200` | `mirage-100` | Primary text |
| Primary | `mirage-400` | `mirage-300` | CTA buttons |
| Border | `mirage-300/15%` | `mirage-300/20%` | Dividers |

---

**See also:**
- `STYLE_GUIDE.md` - Complete style documentation
- `STYLES_CHEATSHEET.md` - Quick usage examples
- `src/lib/styles.js` - Tailwind class presets

