# Spacing Tokens

Spacing tokens use the `--space-*` naming pattern and map directly to the foundation spacing scale.

If a token changes in `specs/ux/foundations/spacing.md`, update the matching token in this file.

## Usage

Use spacing tokens for:

- `padding`
- `margin`
- `gap`
- `row-gap`
- `column-gap`
- layout offsets

## Token Mapping

| CSS Token | Foundation Token | Value |
| --- | --- | ---: |
| `--space-0` | `0` | `0px` |
| `--space-50` | `50` | `2px` |
| `--space-100` | `100` | `4px` |
| `--space-150` | `150` | `6px` |
| `--space-200` | `200` | `8px` |
| `--space-250` | `250` | `10px` |
| `--space-300` | `300` | `12px` |
| `--space-350` | `350` | `14px` |
| `--space-400` | `400` | `16px` |
| `--space-450` | `450` | `18px` |
| `--space-500` | `500` | `20px` |
| `--space-550` | `550` | `22px` |
| `--space-600` | `600` | `24px` |
| `--space-650` | `650` | `26px` |
| `--space-700` | `700` | `28px` |
| `--space-750` | `750` | `30px` |
| `--space-800` | `800` | `32px` |
| `--space-850` | `850` | `34px` |
| `--space-900` | `900` | `36px` |
| `--space-950` | `950` | `38px` |
| `--space-1000` | `1000` | `40px` |
| `--space-1050` | `1050` | `42px` |
| `--space-1100` | `1100` | `44px` |
| `--space-1150` | `1150` | `46px` |
| `--space-1200` | `1200` | `48px` |

## Raw Values

Do not use raw spacing values in component styles.

```css
/* Wrong */
.card {
  padding: 16px;
  gap: 8px;
}

/* Correct */
.card {
  padding: var(--space-400);
  gap: var(--space-200);
}
```