# Color System — BBC Golden Hour

Warm palette only. Gold to plum, never blue (except for backgrounds/photography).

## The 18 colors

### Brand warm — gradient family

| Token | Hex | Role |
|---|---|---|
| `--gold` | `#D4A03C` | Primary accent, CTA borders, headlines on dark, stat numbers |
| `--amber` | `#E8932A` | Mid-warmth, gradient mid-stop |
| `--sunset` | `#D46830` | Energy accent, gradient |
| `--ember` | `#B8423A` | Depth, urgency, primary CTA button bg |
| `--berry` | `#8A2A3A` | Gradient anchor (cooler end), sophistication |
| `--rust` | `#DB4C05` | Hot mid-stop in warm gradients |
| `--maroon` | `#940300` | Deep warm gradient anchor |
| `--maroon-d` | `#4D0000` | Deepest warm gradient anchor (darkest) |

### Surfaces — dark

| Token | Hex | Role |
|---|---|---|
| `--night` | `#1A1412` | Dark surface, card backgrounds |
| `--deep` | `#0a0806` | Page background, maximum drama |

### Surfaces — light

| Token | Hex | Role |
|---|---|---|
| `--white` | `#FAF6F0` | Text on dark, cream-white surfaces |
| `--cream` | `#F2EBE0` | Light page backgrounds |
| `--sand` | `#E8DFD2` | Subtle section backgrounds |

### Text & utility

| Token | Hex | Role |
|---|---|---|
| `--stone` | `#B8AFA2` | Secondary text, muted labels, body on dark |
| `--warm-text` | `#FFC9A7` | Warm sub-text on dark hero surfaces |
| `--charcoal` | `#3A3632` | Dark text on light backgrounds |

### Restricted — backgrounds only

| Token | Hex | Role |
|---|---|---|
| `--dusk` | `#1B2A4A` | Background photography ONLY. Never gradient/button/text. |
| `--sky` | `#2C4A7C` | Background photography ONLY. Never gradient/button/text. |

## Gradients

The brand has four canonical gradients. Use the variable, never re-author by hand.

```css
--gradient-brand:     linear-gradient(90deg, #D4A03C, #E8932A, #D46830, #B8423A);
--gradient-warm:      linear-gradient(-25deg, #E6C487 7%, #E4762F 25%, #DB4C05 49%, #940300 82%, #4D0000 99%);
--gradient-warm-rev:  linear-gradient(0deg,   #4D0000 2%, #940300 19%, #DB4C05 51%, #E4762F 75%, #E6C487 93%);
--gradient-bumblebee: linear-gradient(135deg, #D4A03C 1%, #E8932A 18%, #D46830 41%, #B8423A 73%, #8A2A3A 91%);
```

| Gradient | Use case |
|---|---|
| `--gradient-brand` | Section dividers, gradient bars |
| `--gradient-warm` | Hero backgrounds (light to dark, top-left → bottom-right) |
| `--gradient-warm-rev` | Hero backgrounds (dark to light) |
| `--gradient-bumblebee` | Text-clip on accent words, primary buttons, stat numbers |

## Surface combos

These are the canonical combinations. Don't invent new ones.

### 1. Dark drama (most decks)
- Background: `--deep` or `--night`
- Headline: `--white` + accent words gradient-clipped
- Body: `--white` or `--stone`
- **Always grain overlay on top**

### 2. Light editorial (proposals, docs)
- Background: `--cream` or `--white`
- Headline: gradient-clipped on `--gradient-bumblebee` or solid `--charcoal`
- Body: `--charcoal`
- Eyebrow: solid `--charcoal` or `--ember`

### 3. Warm hero (cover slides, hero sections)
- Background: `--gradient-warm` or photographic background plate
- Headline: `--white`
- Body: `--white` or `--warm-text`

### 4. Cinematic photo (founders slide, mid-deck breaks)
- Background: photograph (mountain, founders, character art)
- Overlay: subtle dark vignette
- Text: `--white` only

## Color decision tree

When you don't know what color to use:

1. **Headline accent word?** → `--gradient-bumblebee` text-clip
2. **Headline base?** → `--white` on dark, `--charcoal` on light
3. **Body on dark?** → `--white` for primary, `--stone` for secondary
4. **Body on light?** → `--charcoal` for primary, `--stone` for muted
5. **Primary CTA?** → `--ember` solid OR `--gradient-bumblebee`
6. **Secondary CTA?** → outline (transparent + 2px border)
7. **Border / divider?** → `--gradient-brand` as `border-image`
8. **Background?** → `--deep`, `--night`, `--cream`, `--white`, OR a hero photograph

## Anti-patterns

- ❌ Cool blue/purple gradients — BBC is **warm only**
- ❌ Pure black `#000` — use `--deep` `#0a0806` instead (warmer)
- ❌ Pure white `#fff` — use `--white` `#FAF6F0` instead (cream tint)
- ❌ Using `--dusk` or `--sky` for text or buttons — backgrounds/photography only
- ❌ Mixing gradients in same view — pick one and commit
- ❌ Gradient on long sentences (>5 words) — illegible