# Tokens

Canonical values from the Blood Red HTML labs. Prefer these exact strings.

## Color

| Token | Value | Use |
|-------|--------|-----|
| `--bg-void` | `#070304` | Page / OS canvas (black with blood) |
| `--bg-base` | `#100608` | Secondary canvas / wells |
| `--bg-surface` | `#1c0a10` | Cards, bars (oxblood) |
| `--bg-surface-elevated` | `#2a1018` | Buttons, inner tiles |
| `--bg-surface-glass` | `rgba(18, 6, 10, 0.94)` | Sticky chrome (nav, dock) |
| `--blood-primary` | `#8b1538` | Crimson wash, live accents |
| `--blood-deep` | `#4a0a16` | Outer plate ring, deep wells |
| `--blood-light` | `#c41e3a` | Hover blood, rare sparks |
| `--text-main` | `#f6efe6` | Ivory titles |
| `--text-gold` | `#ead7a0` | Gold labels |
| `--text-secondary` | `#d4c4b0` | Body |
| `--text-muted` | `#9a8478` | Meta, captions |
| `--gold-primary` | `#c9a227` | Antique plate, borders, icons |
| `--gold-light` | `#f0e0a8` | Sheen, hover type |
| `--gold-deep` | `#8a6a1a` | Gradient anchors |
| `--gold-gradient` | `linear-gradient(135deg, #8a6a1a 0%, #e8d48a 22%, #c9a227 48%, #f5e6b8 72%, #9a7520 100%)` | Primary pills |
| `--gold-glow` | `0 0 26px rgba(201, 162, 39, 0.42), 0 0 48px rgba(139, 21, 56, 0.28)` | Under primary buttons |
| `--color-emerald` | `#10b981` | Success only |
| `--color-amber` | `#f59e0b` | Warning only |
| `--color-rose` | `#f43f5e` | Danger only (blood is the theme, rose is the alarm) |

Do not replace antique gold with `#ffd700` or blood with `#ff0000`.

## Outlines (gold plating)

| Token | Value |
|-------|--------|
| `--border-gold-subtle` | `1px solid rgba(201, 162, 39, 0.32)` |
| `--border-gold-mid` | `1px solid rgba(201, 162, 39, 0.58)` |
| `--border-gold-strong` | `1.5px solid rgba(240, 224, 168, 0.85)` |
| `--border-dark` | `1px solid rgba(139, 21, 56, 0.35)` |

Cards also take a **double-bezel**: `0 0 0 1px #0a0305, 0 0 0 2px gold, 0 0 0 4px #4a0a16`.

## Shadows

| Token | Value |
|-------|--------|
| `--shadow-raised` | `0 14px 38px -8px rgba(0,0,0,0.92), 0 0 0 1px rgba(10,3,5,0.9), 0 0 0 2px rgba(201,162,39,0.42)` |
| `--shadow-raised-sm` | `0 6px 16px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,162,39,0.28)` |
| `--shadow-inset` | `inset 3px 3px 8px rgba(0,0,0,0.92), inset -1px -1px 4px rgba(201,162,39,0.08)` |

## Type

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

## Radii

| Token | Typical |
|-------|---------|
| `--radius-xl` | 16px plaques |
| `--radius-lg` | 12px inner |
| `--radius-md` | 10px controls |
| `--radius-pill` | `9999px` gold CTAs, chips, dock |

## Damask

Fixed `body::before` repeating fleur SVG, `opacity: 0.18`, `mix-blend-mode: overlay`. Optional grain `body::after`. Without damask the kit looks like generic dark red, not Victorian.