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

# Design System: Agency Creative — Colour Palette & Roles

## Primary

| Role | Hex | Usage |
|------|-----|-------|
| Primary | `#7c3aed` | Buttons, key links, active states |
| Primary Light | `#a78bfa` | Hover states, secondary emphasis |
| Primary Dark | `#5b21b6` | Active/pressed states |
| Primary Gradient | `linear-gradient(135deg, #7c3aed, #ec4899)` | Hero sections, primary CTAs, feature highlights |

## Accent

| Role | Hex | Usage |
|------|-----|-------|
| Accent | `#ec4899` | Secondary actions, highlights, gradient endpoint |
| Accent Light | `#f472b6` | Hover variant |
| Accent Dark | `#be185d` | Active variant |
| Tertiary | `#f59e0b` | Occasional warm pop — awards, stars, limited use |

## Text

| Role | Dark | Light | Usage |
|------|------|-------|-------|
| Text Primary | `#f8fafc` | `#0f0f0f` | Headings, primary body |
| Text Secondary | `#a1a1aa` | `#52525b` | Descriptions, captions |
| Text Tertiary | `#52525b` | `#a1a1aa` | Placeholders, metadata |
| Text On Gradient | `#ffffff` | — | Text over gradient backgrounds |

## Surface

| Role | Dark | Light | Usage |
|------|------|-------|-------|
| Background | `#0f0f0f` | `#ffffff` | Page background |
| Surface 1 | `#18181b` | `#fafafa` | Cards, sections |
| Surface 2 | `#27272a` | `#f4f4f5` | Elevated cards, dropdowns |
| Surface 3 | `#3f3f46` | — | Active states, hover backgrounds |
| Border Default | `#27272a` | `#e4e4e7` | Subtle borders |
| Border Accent | `#7c3aed` | — | Active/focused borders |

## Semantic

| Role | Hex | Usage |
|------|-----|-------|
| Success | `#34d399` | Confirmations, sent states |
| Warning | `#fbbf24` | Caution, review needed |
| Error | `#f87171` | Errors, destructive actions |
| Info | `#60a5fa` | Help text, informational |

## Shadows

| Role | Value | Usage |
|------|-------|-------|
| Gradient Glow | `0 8px 32px rgba(124, 58, 237, 0.3)` | Primary CTAs, hero elements |
| Pink Glow | `0 8px 32px rgba(236, 72, 153, 0.25)` | Accent elements, hover effects |
| Dark Lift | `0 4px 24px rgba(0, 0, 0, 0.5)` | Cards in dark mode |
| Light Lift | `0 4px 24px rgba(0, 0, 0, 0.08)` | Cards in light mode |
