# Tokens

These tokens are the baseline shared across Payd Labs product UIs. They are
extracted from Stables, Sentinel, Knowhere, Dispatch, OneLink, and Secret Share.

## Color

| Token | Light | Dark | Use |
|---|---:|---:|---|
| `--color-primary` | `#10263E` | `#e2e8f0` | Payd navy, dark-mode primary text |
| `--color-primary-light` | `#1a3a5c` | `#cbd5e1` | Navy hover or emphasis |
| `--color-primary-dark` | `#0a1829` | `#f1f5f9` | Deep navy, dark text on green |
| `--color-accent` | `#18D26E` | `#4ae08e` | Primary action, success, selected |
| `--color-accent-dark` | `#12a557` | `#4ae08e` | Accent text on pale green |
| `--color-success` | `#18D26E` | `#4ae08e` | Positive status |
| `--color-warning` | `#f59e0b` | `#fbbf24` | Attention, pending, partial |
| `--color-error` | `#ef4444` | `#f87171` | Failure, destructive, invalid |
| `--color-info` | `#3b82f6` | `#60a5fa` | Informational state |
| `--color-surface` | `#ffffff` | `#0f1419` | App background or card surface |
| `--color-surface-secondary` | `#f8fafc` | `#161b22` | Page background, table header |
| `--color-surface-tertiary` | `#f1f5f9` | `#1c2128` | Hover, input fill, skeleton |
| `--color-border` | `#e2e8f0` | `#30363d` | Default 1px border |
| `--color-border-medium` | `#cbd5e1` | `#484f58` | Hover or stronger border |
| `--color-text` | `#10263E` | `#e6edf3` | Body text |
| `--color-text-secondary` | `#475569` | `#8b949e` | Secondary labels |
| `--color-text-tertiary` | `#94a3b8` | `#6e7681` | Hints, timestamps |

## Alpha Tokens

Use alpha tokens instead of new one-off colors:

```css
--color-primary-50: rgba(16, 38, 62, 0.05);
--color-primary-100: rgba(16, 38, 62, 0.1);
--color-accent-50: rgba(24, 210, 110, 0.05);
--color-accent-100: rgba(24, 210, 110, 0.1);
--color-accent-200: rgba(24, 210, 110, 0.2);
```

## Typography

| Token | Value | Use |
|---|---|---|
| `--font-heading` | `"Space Grotesk", sans-serif` | Headings, metric values, nav labels, badges |
| `--font-body` | `"Nunito", sans-serif` | Body text, forms, tables, descriptions |
| `--font-mono` | `"JetBrains Mono", monospace` | IDs, addresses, refs, code, OTP input |

## Radius

| Token | Value | Use |
|---|---:|---|
| `--radius-sm` | `0.375rem` / 6px | Tiny pills, compact action chips |
| `--radius-md` | `0.5rem` / 8px | Buttons, inputs, nav items, panels |
| `--radius-lg` | `0.75rem` / 12px | Cards, login panels, tables |
| `--radius-xl` | `0.875rem` / 14px | Larger workflow cards |
| `--radius-full` | `9999px` | Pills, avatars, circular icons |

Use 8px as the default control radius and 12px as the default card radius.
Avoid larger radius unless the component is intentionally soft, isolated, or
round.

## Shadows

```css
--shadow-soft: 0 2px 8px -2px rgba(16, 38, 62, 0.08);
--shadow-medium: 0 4px 16px -4px rgba(16, 38, 62, 0.12);
--shadow-strong: 0 8px 24px -8px rgba(16, 38, 62, 0.16);
--shadow-glow-accent: 0 0 20px -5px rgba(24, 210, 110, 0.4);
```

Default cards often use border only. Use `--shadow-soft` for login panels,
elevated menus, or card groups that need separation. Reserve glow for accent
actions that need clear affordance.

## Spacing

| Size | Value | Use |
|---|---:|---|
| 1 | 4px | Icon gaps, tiny dividers |
| 2 | 8px | Control inner gaps |
| 3 | 12px | Compact cards, nav stack, table gaps |
| 4 | 16px | Small screen page padding, card padding |
| 5 | 20px | Card header/body padding |
| 6 | 24px | Desktop page padding |
| 8 | 32px | Login header spacing, major section separation |

## Motion

Motion is short and functional:

- Theme and color transitions: 150-200ms.
- Page or route fade: 150-300ms.
- Enter-up motion: 8-12px vertical movement.
- Active button/card scale: 0.98.
- Skeleton shimmer: 1.5s where loading is meaningful.