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

# Design System: Agency Techie — Colour Palette & Roles

## Primary

| Role | Hex | Usage |
|------|-----|-------|
| Primary | `#22d3ee` | CTAs, active states, focus rings, key links |
| Primary Hover | `#06b6d4` | Hover state |
| Primary Muted | `#164e63` | Backgrounds behind primary elements, badges |
| Primary Ghost | `rgba(34, 211, 238, 0.08)` | Subtle tints on hover for ghost buttons |

## Accent

| Role | Hex | Usage |
|------|-----|-------|
| Accent | `#a78bfa` | Secondary actions, tags, decorative highlights |
| Accent Hover | `#8b5cf6` | Hover state |
| Accent Muted | `#2e1065` | Backgrounds behind accent elements |

## Text

| Role | Hex | Usage |
|------|-----|-------|
| Text Primary | `#e2e8f0` | Headings, body text |
| Text Secondary | `#94a3b8` | Descriptions, captions, secondary labels |
| Text Tertiary | `#475569` | Placeholders, disabled text, timestamps |
| Text Inverse | `#0d1117` | Text on primary-coloured backgrounds |
| Text Code | `#22d3ee` | Inline code, terminal output, variable names |

## Surface

| Role | Hex | Usage |
|------|-----|-------|
| Background | `#0d1117` | Page background |
| Surface 1 | `#161b22` | Cards, sidebars, panels |
| Surface 2 | `#1c2333` | Elevated cards, dropdowns, modals |
| Surface 3 | `#243044` | Active states, selected rows, hover backgrounds |
| Border Default | `#1e293b` | Card borders, dividers, input borders |
| Border Subtle | `#162032` | Subtle separators, nested section dividers |
| Border Focus | `#22d3ee` | Focus rings, active input borders |

## Semantic

| Role | Hex | Usage |
|------|-----|-------|
| Success | `#4ade80` | Confirmations, passing tests, online status |
| Warning | `#fbbf24` | Caution alerts, pending states |
| Error | `#f87171` | Errors, failed tests, destructive actions |
| Info | `#60a5fa` | Informational messages, help text |

> Semantic backgrounds: apply `rgba(<r>, <g>, <b>, 0.1)` to the base colour for banner/notification backgrounds.

## Shadows

| Role | Value | Usage |
|------|-------|-------|
| Glow Primary | `0 0 12px rgba(34, 211, 238, 0.15)` | Focused inputs, active buttons |
| Glow Accent | `0 0 12px rgba(167, 139, 250, 0.12)` | Accent element emphasis |
| Shadow Subtle | `0 1px 3px rgba(0, 0, 0, 0.4)` | Slight card lift |
