/* ==========================================================================
   Utilities: Spacing
   ========================================================================== */

/*
 * Spacing utility classes using design tokens.
 * Uses the u- prefix for utility classes.
 */

/* Margin utilities */
.u-margin-0 { margin: 0; }
.u-margin-xs { margin: var(--space-xs); }
.u-margin-sm { margin: var(--space-sm); }
.u-margin-md { margin: var(--space-md); }
.u-margin-lg { margin: var(--space-lg); }
.u-margin-xl { margin: var(--space-xl); }

/* Margin top */
.u-margin-top-0 { margin-top: 0; }
.u-margin-top-xs { margin-top: var(--space-xs); }
.u-margin-top-sm { margin-top: var(--space-sm); }
.u-margin-top-md { margin-top: var(--space-md); }
.u-margin-top-lg { margin-top: var(--space-lg); }
.u-margin-top-xl { margin-top: var(--space-xl); }

/* Margin bottom */
.u-margin-bottom-0 { margin-bottom: 0; }
.u-margin-bottom-xs { margin-bottom: var(--space-xs); }
.u-margin-bottom-sm { margin-bottom: var(--space-sm); }
.u-margin-bottom-md { margin-bottom: var(--space-md); }
.u-margin-bottom-lg { margin-bottom: var(--space-lg); }
.u-margin-bottom-xl { margin-bottom: var(--space-xl); }

/* Padding utilities */
.u-padding-0 { padding: 0; }
.u-padding-xs { padding: var(--space-xs); }
.u-padding-sm { padding: var(--space-sm); }
.u-padding-md { padding: var(--space-md); }
.u-padding-lg { padding: var(--space-lg); }
.u-padding-xl { padding: var(--space-xl); }

/* Padding top */
.u-padding-top-0 { padding-top: 0; }
.u-padding-top-xs { padding-top: var(--space-xs); }
.u-padding-top-sm { padding-top: var(--space-sm); }
.u-padding-top-md { padding-top: var(--space-md); }
.u-padding-top-lg { padding-top: var(--space-lg); }
.u-padding-top-xl { padding-top: var(--space-xl); }

/* Padding bottom */
.u-padding-bottom-0 { padding-bottom: 0; }
.u-padding-bottom-xs { padding-bottom: var(--space-xs); }
.u-padding-bottom-sm { padding-bottom: var(--space-sm); }
.u-padding-bottom-md { padding-bottom: var(--space-md); }
.u-padding-bottom-lg { padding-bottom: var(--space-lg); }
.u-padding-bottom-xl { padding-bottom: var(--space-xl); }