/* === Spacing Utilities ===
 * Margin and padding helpers.
 * Naming: {property}{sides}-{size}
 *   m  = margin,  p  = padding
 *   t  = top,     r  = right,  b  = bottom,  l  = left
 *   x  = left+right,  y  = top+bottom
 *   2xs..3xl = spacing scale from variables
 */

.m-0   { margin: 0; }
.m-xs  { margin: var(--spacing-xs); }
.m-sm  { margin: var(--spacing-sm); }
.m-md  { margin: var(--spacing-md); }
.m-lg  { margin: var(--spacing-lg); }
.m-xl  { margin: var(--spacing-xl); }

.mt-0  { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-0   { padding: 0; }
.p-sm  { padding: var(--spacing-sm); }
.p-md  { padding: var(--spacing-md); }
.p-lg  { padding: var(--spacing-lg); }

.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }