/*
 * Utility classes for vertical spacing using spacing tokens
 *
 * Provides:
 *  - margin-top utilities: .space-top-{token}
 *  - margin-bottom utilities: .space-bottom-{token}
 *
 * Available tokens mirror those defined in b1-tokens.css:
 * 3xs, 2xs, xs, sm, base, md, lg, xl, 2xl, 3xl, 4xl, 5xl
 */

/* Margin Top utilities */
.space-top-3xs { margin-top: var(--spacing-3xs); }
.space-top-2xs { margin-top: var(--spacing-2xs); }
.space-top-xs  { margin-top: var(--spacing-xs); }
.space-top-sm  { margin-top: var(--spacing-sm); }
.space-top-base{ margin-top: var(--spacing-base); }
.space-top-md  { margin-top: var(--spacing-md); }
.space-top-lg  { margin-top: var(--spacing-lg); }
.space-top-xl  { margin-top: var(--spacing-xl); }
.space-top-2xl { margin-top: var(--spacing-2xl); }
.space-top-3xl { margin-top: var(--spacing-3xl); }
.space-top-4xl { margin-top: var(--spacing-4xl); }
.space-top-5xl { margin-top: var(--spacing-5xl); }

/* Margin Bottom utilities */
.space-bottom-3xs { margin-bottom: var(--spacing-3xs); }
.space-bottom-2xs { margin-bottom: var(--spacing-2xs); }
.space-bottom-xs  { margin-bottom: var(--spacing-xs); }
.space-bottom-sm  { margin-bottom: var(--spacing-sm); }
.space-bottom-base{ margin-bottom: var(--spacing-base); }
.space-bottom-md  { margin-bottom: var(--spacing-md); }
.space-bottom-lg  { margin-bottom: var(--spacing-lg); }
.space-bottom-xl  { margin-bottom: var(--spacing-xl); }
.space-bottom-2xl { margin-bottom: var(--spacing-2xl); }
.space-bottom-3xl { margin-bottom: var(--spacing-3xl); }
.space-bottom-4xl { margin-bottom: var(--spacing-4xl); }
.space-bottom-5xl { margin-bottom: var(--spacing-5xl); }

/* Padding Left utilities */
.pad-left-3xs { padding-left: var(--spacing-3xs); }
.pad-left-2xs { padding-left: var(--spacing-2xs); }
.pad-left-xs  { padding-left: var(--spacing-xs); }
.pad-left-sm  { padding-left: var(--spacing-sm); }
.pad-left-base{ padding-left: var(--spacing-base); }
.pad-left-md  { padding-left: var(--spacing-md); }
.pad-left-lg  { padding-left: var(--spacing-lg); }
.pad-left-xl  { padding-left: var(--spacing-xl); }
.pad-left-2xl { padding-left: var(--spacing-2xl); }
.pad-left-3xl { padding-left: var(--spacing-3xl); }
.pad-left-4xl { padding-left: var(--spacing-4xl); }
.pad-left-5xl { padding-left: var(--spacing-5xl); }

/* Padding Right utilities */
.pad-right-3xs { padding-right: var(--spacing-3xs); }
.pad-right-2xs { padding-right: var(--spacing-2xs); }
.pad-right-xs  { padding-right: var(--spacing-xs); }
.pad-right-sm  { padding-right: var(--spacing-sm); }
.pad-right-base{ padding-right: var(--spacing-base); }
.pad-right-md  { padding-right: var(--spacing-md); }
.pad-right-lg  { padding-right: var(--spacing-lg); }
.pad-right-xl  { padding-right: var(--spacing-xl); }
.pad-right-2xl { padding-right: var(--spacing-2xl); }
.pad-right-3xl { padding-right: var(--spacing-3xl); }
.pad-right-4xl { padding-right: var(--spacing-4xl); }
.pad-right-5xl { padding-right: var(--spacing-5xl); }