<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Playful Vibrant — Colour Palette

## Primary

| Role | Hex | CSS Variable | Usage |
|------|-----|-------------|-------|
| Primary | `#6366f1` | `--color-primary` | Primary buttons, active links, key UI elements |
| Primary Light | `#818cf8` | `--color-primary-light` | Hover states, secondary indicators |
| Primary Dark | `#4f46e5` | `--color-primary-dark` | Active/pressed states |
| Primary Subtle | `#eef2ff` | `--color-primary-subtle` | Tinted backgrounds, selected states |
| Primary Gradient | `linear-gradient(135deg, #6366f1, #8b5cf6)` | — | Hero CTAs, feature highlights |

## Accent

| Role | Hex | CSS Variable | Usage |
|------|-----|-------------|-------|
| Accent | `#f43f5e` | `--color-accent` | Notifications, badges, urgent CTAs, hearts/likes |
| Accent Light | `#fb7185` | `--color-accent-light` | Hover on accent elements |
| Accent Dark | `#e11d48` | `--color-accent-dark` | Active/pressed accent |
| Accent Subtle | `#fff1f2` | `--color-accent-subtle` | Accent-tinted backgrounds |

## Extended Palette

| Role | Hex | CSS Variable | Usage |
|------|-----|-------------|-------|
| Amber | `#f59e0b` | `--color-amber` | Warnings, stars, ratings, achievements |
| Emerald | `#10b981` | `--color-emerald` | Success, online status, completions |
| Cyan | `#06b6d4` | `--color-cyan` | Info, tips, secondary features |
| Purple | `#8b5cf6` | `--color-purple` | Premium, special content, gradients |

## Text

| Role | Hex | CSS Variable | Usage |
|------|-----|-------------|-------|
| Heading | `#1e1b4b` | `--color-text` | All headings (deep indigo-black) |
| Body | `#374151` | `--color-text-body` | Paragraph text |
| Secondary | `#6b7280` | `--color-text-secondary` | Captions, metadata |
| Tertiary | `#9ca3af` | `--color-text-tertiary` | Placeholders, disabled |
| Inverse | `#FFFFFF` | `--color-text-inverse` | Text on dark/coloured backgrounds |

## Surface

| Role | Hex | CSS Variable | Usage |
|------|-----|-------------|-------|
| Background | `#FAFAFA` | `--color-surface` | Page background |
| Surface | `#FFFFFF` | `--color-surface-white` | Cards, elevated elements |
| Surface Indigo | `#eef2ff` | `--color-surface-indigo` | Feature sections, hero backgrounds |
| Surface Rose | `#fff1f2` | `--color-surface-rose` | Promotional sections |
| Surface Amber | `#fffbeb` | `--color-surface-amber` | Achievement/reward sections |
| Border | `#E5E7EB` | `--color-border` | Subtle borders (used sparingly) |
