# Spacing

Every margin, padding, and gap must come from Arrow's spacing scale via utility classes. **Never hardcode `px`, `rem`, or inline `margin`/`padding`.**

## Scale

Arrow's spacer values are: `0`, `h` (half), `1`, `2`, `3`, `4`, `5`, `6`, `7` (extended values `10`–`12` exist for very large gaps). The visual scale ramps roughly geometrically — `h` is the smallest non-zero step.

## Utility families

| Direction | Padding | Margin |
|-----------|---------|--------|
| All sides | `tdds:pa-{value}` | `tdds:ma-{value}` |
| Top | `tdds:pt-{value}` | `tdds:mt-{value}` |
| Bottom | `tdds:pb-{value}` | `tdds:mb-{value}` |
| Left | `tdds:pl-{value}` | `tdds:ml-{value}` |
| Right | `tdds:pr-{value}` | `tdds:mr-{value}` |
| Horizontal (l + r) | `tdds:px-{value}` | `tdds:mx-{value}` |
| Vertical (t + b) | `tdds:py-{value}` | `tdds:my-{value}` |

Gap utilities for flex / grid / row containers:

| Class | Effect |
|-------|--------|
| `tdds:gap-{0..7}` | Sets `gap` between flex/grid children |

Vertical-only spacer block (occupies space without margin collapse):

| Class | Effect |
|-------|--------|
| `tdds:spacer-{0,h,1..7}` | Empty block of fixed vertical height |

## Responsive prefixes

Combine breakpoint prefixes with any spacing utility. Breakpoints: `sm` (600px), `md` (768px), `lg` (1024px), `xl` (1180px), `xxl` (1400px).

```tsx
<div className="tdds:pa-2 tdds:md:pa-4 tdds:lg:pa-6">
  Padding grows with viewport
</div>
```

## Decision tree

| Goal | Use |
|------|-----|
| Spacing between siblings | `tdds:gap-*` on the flex/grid parent — preferred over per-child margin |
| Inset content from a card edge | `tdds:pa-*` on the container |
| Section rhythm (vertical) | `tdds:py-*` or `tdds:mt-*` / `tdds:mb-*` |
| Tight inline (label + input) | `tdds:gap-1` or `tdds:gap-h` |
| Page section breathing room | `tdds:py-5` or `tdds:py-6` |
| Responsive density (compact mobile, generous desktop) | `tdds:pa-2 tdds:md:pa-4 tdds:lg:pa-5` |

## Examples

```tsx
{/* Card with responsive padding */}
<div className="tdds:pa-3 tdds:md:pa-4">…</div>

{/* Stack with consistent gap */}
<div className="tdds:display-flex tdds:gap-2" style={{ flexDirection: 'column' }}>
  <Item />
  <Item />
</div>

{/* Grid row with gutter */}
<div className="tdds:row tdds:gap-3">
  <div className="tdds:col-12 tdds:md:col-6">…</div>
  <div className="tdds:col-12 tdds:md:col-6">…</div>
</div>
```

## Hard rule

**All spacing must use Arrow tokens — never hardcoded values.** `style={{ marginTop: 16 }}` is a bug; `className="tdds:mt-3"` is correct.
