---
name: color-scheme
description: "Výběr a implementace barevného schématu projektu. Použij když uživatel chce: změnit barvy, nastavit barevné schéma, upravit design, vybrat paletu, změnit vzhled projektu, nastavit primární barvu, upravit CSS proměnné, redesign barev. 
argument-hint: "Popiš preferované barvy"
---

# Skill: Výběr barevného schématu

## Co tento skill dělá

Na základě kontextu projektu nabídne 3 barevná schémata (podložená výzkumem), jedno doporučí a po schválení uživatelem implementuje hodnoty do CSS proměnných v `src/styles.css`.

Detailní výzkum a vědecké reference jsou dostupné v [docs/colors-research.md](../../docs/colors-research.md).

---

## Postup

### Krok 1 — Zjisti kontext

Pokud uživatel nepopsal kontext, zeptej se na **jednu otázku** kombinující všechny potřebné informace:

> „Popiš mi projekt v pár slovech — co dělá, pro koho je určen a jaký dojem má vyvolávat? (např. *fintech aplikace pro firmy, profesionální a důvěryhodný dojem* nebo *wellness e-shop, klidný a přírodní pocit*)"

Na základě odpovědi vyhodnoť:
- **Typ projektu**: SaaS / e-commerce / zdraví / kreativní / obecný
- **Cílová skupina**: firmy (B2B) / spotřebitelé (B2C) / kreativci
- **Požadovaný dojem**: důvěra / klid / energie / kreativita / příroda

### Krok 2 — Nabídni 3 schémata

Vždy nabídni všechna 3 schémata níže. Jedno z nich označ jako **⭐ Doporučeno** na základě kontextu z Kroku 1. Doporučení řiď pravidlem:

| Kontext | Doporučené schéma |
|---------|------------------|
| B2B, finance, vzdělávání, obecný web | Modrá důvěra |
| Zdraví, wellness, ekologie, food, finance | Zelená harmonie |
| Startup, kreativní agentura, e-commerce, hospitality | Teplý kreativní |

Pokud kontext nespadá jednoznačně do jedné kategorie, doporučuj **Modrou důvěru** — je kulturně nejbezpečnější.

---

### Schéma 1: Modrá důvěra (Blue Trust)
*Profesionální, důvěryhodné, klidné. Inspirace: LinkedIn, PayPal, Samsung.*

| Proměnná | Hodnota | Popis |
|----------|---------|-------|
| `--color-bg` | `#F8FAFC` | Chladná téměř-bílá |
| `--color-surface` | `#FFFFFF` | Povrch karet |
| `--color-primary` | `#1E40AF` | Tmavě modrá (blue-800) |
| `--color-primary-hover` | `#1E3A8A` | Hover stav |
| `--color-text` | `#1E293B` | Hlavní text (slate-800) |
| `--color-text-secondary` | `#374151` | Sekundární text |
| `--color-text-light` | `#64748B` | Pomocný text |
| `--color-border` | `#E2E8F0` | Dělítka (slate-200) |
| `--color-border-light` | `#F1F5F9` | Jemná dělítka |
| Akcent / CTA barva | `#F59E0B` | Amber — použít pro tlačítka CTA s tmavým textem `#1E293B` |

**Tmavý režim (`[data-theme="dark"]`):**

| Proměnná | Hodnota |
|----------|---------|
| `--color-bg` | `#0F172A` |
| `--color-surface` | `#1E293B` |
| `--color-border` | `#334155` |
| `--color-text` | `#F1F5F9` |
| `--color-text-secondary` | `#94A3B8` |
| `--color-primary-hover` | `#60A5FA` |

---

### Schéma 2: Zelená harmonie (Green Harmony)
*Klidné, přírodní, léčivé. Inspirace: Starbucks, Whole Foods, Robinhood.*

| Proměnná | Hodnota | Popis |
|----------|---------|-------|
| `--color-bg` | `#F0FDF4` | Mint-white (green-50) |
| `--color-surface` | `#FFFFFF` | Povrch karet |
| `--color-primary` | `#15803D` | Středně zelená (green-700) |
| `--color-primary-hover` | `#166534` | Hover stav |
| `--color-text` | `#14532D` | Hlavní text (green-900) |
| `--color-text-secondary` | `#1F2937` | Sekundární text |
| `--color-text-light` | `#6B7280` | Pomocný text |
| `--color-border` | `#D1FAE5` | Dělítka (green-100) |
| `--color-border-light` | `#ECFDF5` | Jemná dělítka |
| Akcent / CTA barva | `#D97706` | Amber-600 — teplý komplementární akcent s bílým textem |

**Tmavý režim (`[data-theme="dark"]`):**

| Proměnná | Hodnota |
|----------|---------|
| `--color-bg` | `#052E16` |
| `--color-surface` | `#14532D` |
| `--color-border` | `#166534` |
| `--color-text` | `#DCFCE7` |
| `--color-text-secondary` | `#86EFAC` |
| `--color-primary-hover` | `#4ADE80` |

---

### Schéma 3: Teplý kreativní (Warm Creative)
*Přátelské, energické, moderní. Inspirace: Airbnb, Figma, Pinterest.*

| Proměnná | Hodnota | Popis |
|----------|---------|-------|
| `--color-bg` | `#FFFAF7` | Teplá krémová off-white |
| `--color-surface` | `#FFFFFF` | Povrch karet |
| `--color-primary` | `#E11D48` | Rose-600 / korálová |
| `--color-primary-hover` | `#BE123C` | Hover stav |
| `--color-text` | `#1E1B4B` | Hlavní text (indigo-950) |
| `--color-text-secondary` | `#374151` | Sekundární text |
| `--color-text-light` | `#6B7280` | Pomocný text |
| `--color-border` | `#FCE7F3` | Dělítka (pink-100) |
| `--color-border-light` | `#FFF1F2` | Jemná dělítka |
| Akcent / CTA barva | `#4F46E5` | Indigo-600 — split-komplementární akcent s bílým textem |

**Tmavý režim (`[data-theme="dark"]`):**

| Proměnná | Hodnota |
|----------|---------|
| `--color-bg` | `#1C1017` |
| `--color-surface` | `#2D1B2E` |
| `--color-border` | `#4A1D2F` |
| `--color-text` | `#FCE7F3` |
| `--color-text-secondary` | `#F9A8D4` |
| `--color-primary-hover` | `#FB7185` |

---

### Krok 3 — Prezentuj schémata

Zobraz všechna 3 schémata přehledně s jejich hodnotami. Formát prezentace:

```
## 1. Modrá důvěra — Profesionální a důvěryhodné
Primární: #1E40AF | Pozadí: #F8FAFC | CTA akcent: #F59E0B
Vhodné pro: B2B, SaaS, finance, vzdělávání

## 2. Zelená harmonie — Klidné a přírodní
...

## ⭐ 3. Teplý kreativní — Doporučeno pro váš projekt
...
```

Pak se zeptej:
> „Které schéma chcete implementovat? (1 / 2 / 3) Nebo chcete něco upravit?"

### Krok 4 — Implementace (po schválení)

Teprve po potvrzení uživatele uprav soubor `src/styles.css`:

1. **Přepiš hodnoty v bloku `:root {}`** — nahraď stávající CSS proměnné hodnotami zvoleného schématu
2. **Přepiš hodnoty v bloku `[data-theme="dark"] {}`** — použij tmavorežimové hodnoty zvoleného schématu
3. **Neupravuj** žádné jiné proměnné (kategorie, layoutové hodnoty jako `--hour-height`, `--sidebar-width` apod.)
4. Informuj uživatele o provedených změnách — vypiš seznam přepsaných proměnných

> **Poznámka k CTA akcentu:** Hodnota akcentu (amber / indigo) není v CSS proměnných jako `--color-primary` — slouží jako doporučení pro barvu tlačítek. Pokud projekt používá separátní proměnnou pro CTA tlačítka, uprav i tu. Jinak zmiň hodnotu a nech na uživateli, kde ji použít.

---

## Přístupnost

Všechna schémata splňují **WCAG AA** (kontrast ≥ 4,5:1 pro normální text). Při jakýchkoliv úpravách hex hodnot upozorni na riziko porušení kontrastu a doporučuj ověření přes [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/).