# Tokens

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

## Color

| Token | Value | Use |
|-------|--------|-----|
| `--bg-base` | `#e9eef4` | Page / OS canvas |
| `--surface-card` | `#eef3f8` | Cards, bars, buttons (slightly lighter clay) |
| `--text-main` | `#0f172a` | Titles |
| `--text-secondary` | `#475569` | Body |
| `--text-muted` | `#64748b` | Meta, captions |
| `--primary-blue` | `#2563eb` | Links, active icons |
| `--primary-gradient` | `linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)` | Primary pills |
| `--primary-gradient-h` | `linear-gradient(90deg, #38bdf8 0%, #2563eb 100%)` | Progress / bars |
| `--blue-glow` | `0 8px 20px rgba(37, 99, 235, 0.35)` | Under primary buttons |
| `--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.

## Outlines (required)

| Token | Value |
|-------|--------|
| `--dark-border-thin` | `1px solid rgba(15, 23, 42, 0.45)` |
| `--dark-border-subtle` | `1px solid rgba(15, 23, 42, 0.22)` |
| `--dark-border-strong` | `1.5px solid rgba(15, 23, 42, 0.75)` |

Thin = cards and ghost buttons. Subtle = inset wells. Strong = primary CTA.

## Shadows

| Token | Value |
|-------|--------|
| `--neu-raised` | `8px 8px 18px rgba(166, 180, 200, 0.45), -8px -8px 18px #ffffff` |
| `--neu-raised-sm` | `4px 4px 10px rgba(166, 180, 200, 0.35), -4px -4px 10px #ffffff` |
| `--neu-raised-lg` | `12px 12px 28px rgba(166, 180, 200, 0.5), -12px -12px 28px #ffffff` |
| `--neu-inset` | `inset 3px 3px 6px rgba(166, 180, 200, 0.4), inset -3px -3px 6px #ffffff` |
| `--neu-inset-deep` | `inset 5px 5px 10px rgba(166, 180, 200, 0.45), inset -5px -5px 10px #ffffff` |

Light comes from **top-left** (negative offsets are white). Dark clay sits **bottom-right**. Do not reverse this.

## Type

- **UI:** `Plus Jakarta Sans`, weights 400–800, `-webkit-font-smoothing: antialiased`
- **Data / IDs:** `JetBrains Mono` 500–800
- **Arabic:** `Cairo` 500–800 (see `tools/04-health-os.html`)

## Radii

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

## Motion

| Token | Value |
|-------|--------|
| `--ease-smooth` | `cubic-bezier(0.4, 0, 0.2, 1)` |
| `--ease-bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |

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

## Tailwind mapping (if you must)

```js
boxShadow: {
  neu: '8px 8px 18px rgba(166,180,200,0.45), -8px -8px 18px #ffffff',
  'neu-sm': '4px 4px 10px rgba(166,180,200,0.35), -4px -4px 10px #ffffff',
  'neu-in': 'inset 3px 3px 6px rgba(166,180,200,0.4), inset -3px -3px 6px #ffffff',
},
colors: { clay: '#e9eef4', 'clay-card': '#eef3f8', ink: '#0f172a' }
```

Still add `border: 1px solid rgba(15,23,42,0.45)` — Tailwind `shadow-neu` alone is incomplete.