# Tokens

Canonical Aetheria glass values. Prefer these strings.

## Canvas & frost

| Token | Value | Use |
|-------|--------|-----|
| `--canvas-bg` | `#03040c` | Page (alt `#060713`, `#04050d`) |
| `--glass-card` | `rgba(255, 255, 255, 0.08)` | Panels (vault uses `0.05`) |
| `--glass-hover` | `rgba(255, 255, 255, 0.14)` | Hover fill |
| `--glass-active` | `rgba(255, 255, 255, 0.2)` | Pressed |
| `--glass-panel` | `rgba(14, 18, 38, 0.6)` | Denser chrome (vault/toolbar) |
| `--glass-border` | `rgba(255, 255, 255, 0.16)` | Default hairline |
| `--glass-border-strong` | `rgba(255, 255, 255, 0.35)` | Hover / CTA edge |
| `--glass-border-subtle` | `rgba(255, 255, 255, 0.08)` | Nested wells |
| `--glass-blur-sm` | `blur(10px)` | Tiny chips |
| `--glass-blur-md` | `blur(18px)` | Cards (vault `20px`) |
| `--glass-blur-lg` | `blur(30px)` | Modals / hero glass |
| `--glass-shadow` | `0 12px 40px 0 rgba(0, 0, 0, 0.45)` | Depth under frost |

Always set **both** `backdrop-filter` and `-webkit-backdrop-filter`.

## Accents

| Token | Value | Use |
|-------|--------|-----|
| `--color-primary` | `#a855f7` | Brand, active, glow |
| `--color-primary-glow` | `rgba(168, 85, 247, 0.4)` | Button / orb glow |
| `--color-secondary` | `#3b82f6` | Secondary spark |
| `--color-cyan` | `#06b6d4` | Info / browse |
| `--color-emerald` | `#10b981` | Success |
| `--color-rose` | `#f43f5e` | Danger / live |
| `--color-amber` | `#f59e0b` | Warning |

Orb fills (background only): `#7c3aed`, `#1e40af`, `#db2777`, `#059669` — heavily `filter: blur(100px)`.

## Type

| Token | Value |
|-------|--------|
| `--text-pure` / `--text-main` | `#ffffff` |
| `--text-dim` | `rgba(255, 255, 255, 0.7)` |
| `--text-faint` / `--text-muted` | `rgba(255, 255, 255, 0.4)` |

Face: **Plus Jakarta Sans**. Data: **JetBrains Mono**.

## Radii & motion

| Token | Typical |
|-------|---------|
| `--radius-xl` | 24–28px |
| `--radius-lg` | 16–20px |
| `--radius-md` | 12–14px |
| `--radius-pill` | `9999px` |
| `--ease-smooth` | `cubic-bezier(0.4, 0, 0.2, 1)` |
| `--ease-bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |

## Orbs (required for frost to read)

Fixed full-viewport layer, `pointer-events: none`, 3–4 large blurred circles. Without orbs, glass looks like dirty gray.