Breakpoint and Motion Tokens

Document --bp-md beside @media (width >= 48rem). Use --motion for shared transitions.

Motion token

Hover or focus this card — the dot moves with transition: … var(--motion).

Worked example in the wild: ui/navbars shared tokens (--bp-sm/md/lg, --motion, --max).

Important CSS

:root {
  --bp-md: 48rem; /* document beside the query */
  --motion: 200ms ease;
}

@media (width >= 48rem) {
  .token-card { padding: var(--space-8); }
}

.token-card {
  transition: box-shadow var(--motion), transform var(--motion);
}