# ZABA & ZINGO — Colour System

> One accent rules the house: **Terra `#A53A2A`**. Everything else is warm-neutral.
> Two themes are first-class: **dark (default, cinematic)** and **creme (daylight)**.
> WCAG 2.1 AA contrast is mandatory in **both**.

---

## Core palette

### Dark theme (default)

| Token | Value | Role |
|-------|-------|------|
| `--zz-bg` | `#22201f` | warm-dark background (canonical) |
| `--zz-bg-deep` | `#141311` | cinematic deep (hero mosaics, collection) |
| `--zz-panel` | `#1c1b18` | raised surface / cards |
| `--zz-panel-2` | `#16140f` | deepest surface / wells |
| `--zz-ink` | `#f3eee4` | primary text (cream) |
| `--zz-ink-strong` | `#fbf7ec` | max-contrast text / display |
| `--zz-ink-dim` | `rgba(243,238,228,.60)` | secondary text |
| `--zz-ink-mute` | `rgba(243,238,228,.40)` | tertiary / disabled |
| `--zz-line` | `rgba(243,238,228,.12)` | hairline borders |
| `--zz-line-strong` | `rgba(243,238,228,.20)` | emphasised border |

### Creme theme (light)

| Token | Value | Role |
|-------|-------|------|
| `--zz-bg` | `#fffada` | creme background |
| `--zz-panel` | `#ffffff` | raised surface |
| `--zz-panel-2` | `#f6f0d8` | well |
| `--zz-ink` | `#22201f` | primary text |
| `--zz-ink-strong` | `#16140f` | max-contrast text |
| `--zz-ink-dim` | `rgba(34,32,31,.62)` | secondary |
| `--zz-ink-mute` | `rgba(34,32,31,.42)` | tertiary |
| `--zz-line` | `rgba(34,32,31,.13)` | hairline |
| `--zz-line-strong` | `rgba(34,32,31,.22)` | emphasised |

### Accents (theme-independent)

| Token | Value | Role |
|-------|-------|------|
| `--zz-accent` (**Terra**) | `#A53A2A` | **the** accent — CTA, Live, links, focus |
| `--zz-accent-hi` | `#c14a37` | Terra hover / active |
| `--zz-sand` | `#c9bfa8` | storefront / editorial second accent |
| `--zz-sand-hi` | `#d9d0bb` | Sand hover |
| `--zz-bronze` | `#8a6a3f` | metal detail (login / keychain lineage) |

**One value = one meaning.** A colour never doubles as two semantics on the same surface.

---

## Per-world accents (Collection cosmology)

Each collection world keeps the dark shell and swaps **only the accent** (`--ac`).
House motto stays `DON'T BELIEVE EVERYTHING`.

| World | Code | Accent | Note |
|-------|------|--------|------|
| Space | SPX | `#c9bfa8` | sand/silver |
| Moon | MNX | `#c9bfa8` | silver |
| Mars | MRX | `#c05a2a` | orange · bg `#150906` |
| Earth | EAX | `#c98a5e` | warm clay |
| Aurum | AUX | `#c8a24a` | gold |
| Abrasax | ABX | `#7f8f6a` | olive |
| Eden | EDX | `#8fae7a` | green |

```css
[data-world="mars"]{ --zz-accent:#c05a2a; --zz-bg:#150906; }
[data-world="earth"]{ --zz-accent:#c98a5e; }
```

---

## Semantic tokens (derive, don't hardcode)

| Token | Maps to |
|-------|---------|
| `--zz-link` | `--zz-accent` |
| `--zz-focus` | `--zz-accent` |
| `--zz-live` | `--zz-accent` (the "live" dot / badge) |
| `--zz-cta-bg` | `--zz-accent` → hover `--zz-accent-hi` |
| `--zz-cta-ink` | `#fffada` (creme, on Terra) |
| `--zz-selection` | `--zz-accent` @ 28% |

---

## Contrast (AA, both themes)

- Body ink on bg: `#f3eee4` on `#22201f` ≈ **12.4:1** ✓ · `#22201f` on `#fffada` ≈ **13.9:1** ✓
- `--zz-ink-dim` is for **≥16px** text only (stays ≥4.5:1); never for small labels.
- CTA: creme `#fffada` on Terra `#A53A2A` ≈ **4.8:1** ✓ (large/semibold text & buttons).
- Run the pre-delivery contrast guard (`tools/contrast-check.mjs`, exit 0 required) before shipping.