Spacing

The spacing scale is a 4px rhythm. Use it for gaps, padding, layout breathing room, and shell spacing before reaching for custom values.

Spacing scale

Token	Used for	Value
`--sp-0`	Reset / none	0px
`--sp-1`	Tight nudges	4px
`--sp-2`	Dense controls	8px
`--sp-3`	Default compact gaps	12px
`--sp-4`	Base padding	16px
`--sp-5`	Roomy control groups	20px
`--sp-6`	Section rhythm	24px
`--sp-7`	Large stack spacing	28px
`--sp-8`	Panel / hero gaps	32px
`--sp-9`	Bridge between 32 and 40	36px
`--sp-10`	Large section spacing	40px

Use --sp-2 to --sp-4 for controls, badges, nav links, and dense rows.

Use --sp-6 to --sp-10 for card groups, page sections, heroes, and footer breathing room.

.sp-card__body {
  padding: var(--sp-4);
}

.sp-header__inner {
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}