## CSS Variables Reference

Below is a non-exhaustive list of variables exposed by the themes. Inspect the generated CSS for the full set.

### Color
- `--color-primary-500`, `--color-primary-600`, `--color-primary-default`
- `--color-secondary-500`, `--color-secondary-default`
- `--color-background-default`, `--color-background-surface`, `--color-surface-default`
- `--color-error-default`, `--color-success-default`, `--color-warning-default`
- `--color-neutral-50` ... `--color-neutral-900`

Example override:
```css
:root, :host {
  --color-primary-default: #f97316; /* orange */
}
```

### Typography
- `--typography-font-family-default`, `--typography-font-family-sans`, `--typography-font-family-serif`
- `--typography-font-size-xs|sm|md|lg|xl|2xl|3xl|4xl`
- `--typography-font-weight-light|regular|medium|semibold|bold`

Example override:
```css
:root, :host {
  --typography-font-family-default: 'Inter', system-ui, sans-serif;
  --typography-font-size-md: 1rem;
}
```

### Spacing
- `--spacing-0|1|2|3|4|5|6|8|10|12|16|20|24`
- Legacy: `--spacing-xs|sm|md|lg`

### Radius
- `--radius-none|sm|md|lg|xl|2xl|full`

### Motion
- `--motion-fast|default|slow`

### Shadows
- `--shadow-sm|md|lg|xl`