# Color System

The IO color palette is based on Apple's design language.

## Light Mode Palette

| Token | Value | Usage |
|---|---|---|
| `--color-bg-primary` | #ffffff | Page background |
| `--color-bg-secondary` | #f5f5f7 | Sections, cards |
| `--color-text-primary` | #1d1d1f | Body text |
| `--color-text-secondary` | #6e6e73 | Secondary text |
| `--color-accent` | #0071e3 | Links, CTAs, focus |

## Dark Mode Palette

| Token | Value | Usage |
|---|---|---|
| `--color-bg-dark` | #000000 | Dark sections |
| `--color-bg-dark-secondary` | #1d1d1f | Dark cards |
| `--color-text-on-dark` | #f5f5f7 | Text on dark |
| `--color-text-on-dark-dim` | #86868b | Muted on dark |
| `--color-accent-on-dark` | #2997ff | Accent on dark |

## Semantic Colors

| Token | Value | Usage |
|---|---|---|
| `--color-success` | #28cd41 | Success states |
| `--color-warning` | #ff9f0a | Warning states |
| `--color-danger` | #ff3b30 | Error states |