# Tokens

Canonical values from the Aetheria Royal HTML labs. Prefer these exact strings.

## Color

| Token | Value | Use |
|-------|--------|-----|
| `--bg-void` | `#050609` | Page / OS canvas (alt `#050608`) |
| `--bg-base` | `#0a0d13` | Secondary canvas / wells |
| `--bg-surface` | `#10141d` | Cards, bars |
| `--bg-surface-elevated` | `#161b26` | Buttons, inner tiles |
| `--bg-surface-glass` | `rgba(16, 20, 29, 0.94)` | Sticky chrome (nav, dock) |
| `--text-main` | `#f8fafc` | Titles, body on dark |
| `--text-gold` | `#f3dc8d` | Gold labels |
| `--text-secondary` | `#cbd5e1` | Body |
| `--text-muted` | `#8492a6` | Meta, captions |
| `--gold-primary` | `#d4af37` | 24K brand, borders, icons |
| `--gold-light` | `#fbeea8` | Highlights, sheen, hover type |
| `--gold-deep` | `#997819` | Gradient anchors |
| `--gold-gradient` | `linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 60%, #fbf5b7 85%, #aa771c 100%)` | Primary pills, brand tiles |
| `--gold-gradient-h` | `linear-gradient(90deg, #aa771c 0%, #d4af37 50%, #fcf6ba 100%)` | Progress / bars |
| `--gold-glow` | `0 0 25px rgba(212, 175, 55, 0.35)` | Under primary buttons |
| `--gold-glow-subtle` | `0 4px 18px rgba(212, 175, 55, 0.16)` | Hover on ghost controls |
| `--color-emerald` | `#10b981` | Success only |
| `--color-amber` | `#f59e0b` | Warning only |
| `--color-rose` | `#f43f5e` | Danger / live only |

Highlights (emerald, amber, rose) are **badges and dots**, not page themes. Do not replace gold with `#ffd700` or amber-500.

## Outlines (required)

| Token | Value |
|-------|--------|
| `--border-gold-subtle` | `1px solid rgba(212, 175, 55, 0.22)` |
| `--border-gold-mid` | `1px solid rgba(212, 175, 55, 0.45)` |
| `--border-gold-strong` | `1.5px solid rgba(212, 175, 55, 0.8)` |
| `--border-dark` | `1px solid rgba(255, 255, 255, 0.08)` |

Subtle = cards. Mid = nav / selected chrome. Strong = primary CTA edge (often paired with `1px solid #ffe992` or `#fff` on gold pills). Dark = nested tiles.

## Shadows

| Token | Value |
|-------|--------|
| `--shadow-raised` | `0 12px 35px -8px rgba(0, 0, 0, 0.9), 0 4px 14px rgba(0, 0, 0, 0.6)` |
| `--shadow-raised-sm` | `0 6px 18px rgba(0, 0, 0, 0.7)` |
| `--shadow-raised-lg` | `0 18px 45px rgba(0, 0, 0, 0.95), 0 0 30px rgba(212, 175, 55, 0.2)` |
| `--shadow-inset` | `inset 2px 2px 6px rgba(0, 0, 0, 0.9), inset -2px -2px 6px rgba(255, 255, 255, 0.04)` |

Light is a **whisper** on the top-left inset highlight (`white/0.04`). Depth is almost-black drop shadow. Do not use dual clay neu shadows (`#ffffff` + gray).

## Type

- **UI:** `Plus Jakarta Sans`, weights 300–800, `-webkit-font-smoothing: antialiased`
- **Brand / micro-labels:** `Cinzel` 600–900, uppercase, gold, wide tracking
- **Display headings:** `Syne` 600–800
- **Data / IDs:** `JetBrains Mono` 500–800
- **Arabic:** `Cairo` 600–900 (see `tools/04-health-os.html`)

## Radii

| Token | Typical |
|-------|---------|
| `--radius-xl` | 26–28px shells |
| `--radius-lg` | 18–20px inner cards |
| `--radius-md` | 12–14px controls |
| `--radius-sm` | 8px tiny wells |
| `--radius-pill` | `9999px` buttons, chips, nav, dock |

## Motion

| Token | Value |
|-------|--------|
| `--ease-smooth` | `cubic-bezier(0.25, 1, 0.5, 1)` |
| `--ease-bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |

Hover: 180–250ms. Press: instant press-in. Decorative kinetic demos: see `tools/11-kinetic-lab.html` — do not dump all 25 animations onto a CRUD screen.

## Scrollbars

```css
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.5); }
```

## Tailwind mapping (if you must)

```js
boxShadow: {
  lux: '0 12px 35px -8px rgba(0,0,0,0.9), 0 4px 14px rgba(0,0,0,0.6)',
  'lux-sm': '0 6px 18px rgba(0,0,0,0.7)',
  'lux-in': 'inset 2px 2px 6px rgba(0,0,0,0.9), inset -2px -2px 6px rgba(255,255,255,0.04)',
  gold: '0 0 25px rgba(212,175,55,0.35)',
},
colors: {
  void: '#050609',
  surface: '#10141d',
  elevated: '#161b26',
  gold: '#d4af37',
  'gold-light': '#fbeea8',
}
```

Still add `border: 1px solid rgba(212,175,55,0.22)` and the top sheen — Tailwind `shadow-lux` alone is incomplete.