# Colors & radius

Every design token from @rahhal/themes. Tokens are stored as HSL channels (so Tailwind opacity modifiers compose) AND surfaced as #RRGGBB hex for cross-platform consumers (iOS, Android, slides, Figma). Light + dark are the two themes; system preference is auto-detected on web.

## Cross-platform mapping

- **Web (consumer):** `hsl(var(--token))` — stays compatible with Tailwind opacity modifiers (`bg-primary/50`).
- **iOS / SwiftUI:** `Color(hex: "#RRGGBB")` — use the hex column for the active theme.
- **Android / Compose:** `Color(0xFFRRGGBB)` — uppercase the alpha + hex.
- **Slides / Figma / Print:** copy the hex value directly.

### Surfaces

Backgrounds for the canvas, cards, popovers, and quiet/loud emphasis regions.

| token | css var | tailwind | light hex | light hsl | dark hex | dark hsl |
| --- | --- | --- | --- | --- | --- | --- |
| `background` | `--background` | `bg-background` | #ffffff | 0 0% 100% | #000000 | 0 0% 0% |
| `card` | `--card` | `bg-card` | #f2f2f7 | 240 23.8% 95.9% | #1c1c1e | 240 3.4% 11.4% |
| `popover` | `--popover` | `bg-popover` | #ffffff | 0 0% 100% | #2c2c2e | 240 2.2% 17.6% |
| `muted` | `--muted` | `bg-muted` | #f2f2f7 | 240 23.8% 95.9% | #1c1c1e | 240 3.4% 11.4% |
| `accent` | `--accent` | `bg-accent` | #d9eef9 | 200.6 72.7% 91.4% | #0e2f3f | 199.6 63.6% 15.1% |

### Text on surface

Foreground colors paired with their surface counterparts.

| token | css var | tailwind | light hex | light hsl | dark hex | dark hsl |
| --- | --- | --- | --- | --- | --- | --- |
| `foreground` | `--foreground` | `bg-foreground` | #000000 | 0 0% 0% | #ffffff | 0 0% 100% |
| `cardForeground` | `--card-foreground` | `bg-card-foreground` | #000000 | 0 0% 0% | #ffffff | 0 0% 100% |
| `popoverForeground` | `--popover-foreground` | `bg-popover-foreground` | #000000 | 0 0% 0% | #ffffff | 0 0% 100% |
| `mutedForeground` | `--muted-foreground` | `bg-muted-foreground` | #6c6c70 | 240 1.8% 43.1% | #98989f | 240 3.5% 61% |
| `accentForeground` | `--accent-foreground` | `bg-accent-foreground` | #0a3344 | 197.6 74.4% 15.3% | #d6ecf7 | 200 67.3% 90.4% |

### Brand

Primary CTAs and the quieter secondary surface.

| token | css var | tailwind | light hex | light hsl | dark hex | dark hsl |
| --- | --- | --- | --- | --- | --- | --- |
| `primary` | `--primary` | `bg-primary` | #0095d5 | 198 100% 41.8% | #2aa8e8 | 200.2 80.5% 53.7% |
| `primaryForeground` | `--primary-foreground` | `bg-primary-foreground` | #ffffff | 0 0% 100% | #001722 | 199.4 100% 6.7% |
| `secondary` | `--secondary` | `bg-secondary` | #e5e5ea | 240 10.6% 90.8% | #2c2c2e | 240 2.2% 17.6% |
| `secondaryForeground` | `--secondary-foreground` | `bg-secondary-foreground` | #1c1c1e | 240 3.4% 11.4% | #ffffff | 0 0% 100% |

### State

Destructive surfaces for errors and irreversible actions.

| token | css var | tailwind | light hex | light hsl | dark hex | dark hsl |
| --- | --- | --- | --- | --- | --- | --- |
| `destructive` | `--destructive` | `bg-destructive` | #ff3b30 | 3.2 100% 59.4% | #ff453a | 3.4 100% 61.4% |
| `destructiveForeground` | `--destructive-foreground` | `bg-destructive-foreground` | #ffffff | 0 0% 100% | #ffffff | 0 0% 100% |

### Chrome

Borders, input outlines, and focus-rings.

| token | css var | tailwind | light hex | light hsl | dark hex | dark hsl |
| --- | --- | --- | --- | --- | --- | --- |
| `border` | `--border` | `bg-border` | #c6c6c8 | 240 1.8% 78% | #38383a | 240 1.8% 22.4% |
| `input` | `--input` | `bg-input` | #c6c6c8 | 240 1.8% 78% | #38383a | 240 1.8% 22.4% |
| `ring` | `--ring` | `bg-ring` | #0095d5 | 198 100% 41.8% | #2aa8e8 | 200.2 80.5% 53.7% |

### Radius

| token | css var | tailwind | value |
| --- | --- | --- | --- |
| `radius.sm` | `--radius-sm` | `rounded-sm` | 0.25rem |
| `radius.md` | `--radius-md` | `rounded-md` | 0.5rem |
| `radius.lg` | `--radius-lg` | `rounded-lg` | 0.75rem |
| `radius.xl` | `--radius-xl` | `rounded-xl` | 1rem |