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

# Color Palette & Roles

## Primary

- **Stripe Purple** (`#533afd`): Primary brand color, CTA backgrounds, link text, interactive highlights, active states, selected elements.
- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Primary headings, nav text, strong labels.
- **Pure White** (`#ffffff`): Page background, card surfaces, button text on dark backgrounds.

## Brand & Dark

- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Dark sections, footer backgrounds, immersive brand moments.
- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. Darkest neutral for maximum depth.

## Accent Colors

- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Icons, alerts, accent elements.
- **Magenta** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Gradients and decorative highlights.
- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Magenta-themed cards and badges.

## Interactive (Purple Scale)

- **Purple Hover** (`#4434d4`): Hover states on primary elements.
- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Range selector and input highlight.
- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Icon hover states.
- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. Subdued hover backgrounds.

## Text Scale

- **Label** (`#273951`): `--hds-color-input-text-label`. Form labels, secondary headings.
- **Body** (`#64748d`): Secondary text, descriptions, captions.

## Status

- **Success Green** (`#15be53`): Status badges, success indicators (0.2–0.4 alpha for backgrounds/borders).
- **Success Text** (`#108c3d`): Success badge text.
- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Warning and highlight accent.

## Surface & Borders

- **Border Default** (`#e5edf5`): Cards, dividers, containers.
- **Border Purple** (`#b9b9f9`): Active/selected state borders on buttons and inputs.
- **Border Soft Purple** (`#d6d9fc`): Secondary elements with subtle purple tint.
- **Border Magenta** (`#ffd7ef`): Magenta-themed elements.
- **Border Dashed** (`#362baa`): Drop zones and placeholder elements.

## Shadow Colors

- **Shadow Blue** (`rgba(50,50,93,0.25)`): Primary shadow, blue-tinted.
- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Elevated elements.
- **Shadow Black** (`rgba(0,0,0,0.1)`): Secondary shadow layer for depth.
- **Shadow Ambient** (`rgba(23,23,23,0.08)`): Subtle elevation.
- **Shadow Soft** (`rgba(23,23,23,0.06)`): Minimal ambient lift.
