/* ============================================================================
   SPACING UTILITIES
   ============================================================================ */


/* Padding — All Sides */
.p-0   { padding: 0; }
.p-3xs { padding: var(--space-3xs); }
.p-2xs { padding: var(--space-2xs); }
.p-xs  { padding: var(--space-xs); }
.p-sm  { padding: var(--space-sm); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }
.p-4xl { padding: var(--space-4xl); }


/* Padding — Horizontal (X) */
.px-0   { padding-left: 0; padding-right: 0; }
.px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
.px-xs  { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
.px-sm  { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
.px-md  { padding-left: var(--space-md);  padding-right: var(--space-md); }
.px-lg  { padding-left: var(--space-lg);  padding-right: var(--space-lg); }
.px-xl  { padding-left: var(--space-xl);  padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
.px-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); }


/* Padding — Vertical (Y) */
.py-0   { padding-top: 0; padding-bottom: 0; }
.py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
.py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
.py-xs  { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
.py-sm  { padding-top: var(--space-sm);  padding-bottom: var(--space-sm); }
.py-md  { padding-top: var(--space-md);  padding-bottom: var(--space-md); }
.py-lg  { padding-top: var(--space-lg);  padding-bottom: var(--space-lg); }
.py-xl  { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }


/* Padding — Individual Sides */
.pt-xs  { padding-top: var(--space-xs); }
.pt-sm  { padding-top: var(--space-sm); }
.pt-md  { padding-top: var(--space-md); }
.pt-lg  { padding-top: var(--space-lg); }
.pt-xl  { padding-top: var(--space-xl); }

.pb-xs  { padding-bottom: var(--space-xs); }
.pb-sm  { padding-bottom: var(--space-sm); }
.pb-md  { padding-bottom: var(--space-md); }
.pb-lg  { padding-bottom: var(--space-lg); }
.pb-xl  { padding-bottom: var(--space-xl); }

.pl-xs  { padding-left: var(--space-xs); }
.pl-sm  { padding-left: var(--space-sm); }
.pl-md  { padding-left: var(--space-md); }
.pl-lg  { padding-left: var(--space-lg); }

.pr-xs  { padding-right: var(--space-xs); }
.pr-sm  { padding-right: var(--space-sm); }
.pr-md  { padding-right: var(--space-md); }
.pr-lg  { padding-right: var(--space-lg); }


/* Margin — All Sides */
.m-0    { margin: 0; }
.m-auto { margin: auto; }
.m-xs   { margin: var(--space-xs); }
.m-sm   { margin: var(--space-sm); }
.m-md   { margin: var(--space-md); }
.m-lg   { margin: var(--space-lg); }
.m-xl   { margin: var(--space-xl); }
.m-2xl  { margin: var(--space-2xl); }


/* Margin — Horizontal (X) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0    { margin-left: 0; margin-right: 0; }
.mx-xs   { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm   { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md   { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg   { margin-left: var(--space-lg); margin-right: var(--space-lg); }


/* Margin — Vertical (Y) */
.my-0  { margin-top: 0; margin-bottom: 0; }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }


/* Margin — Individual Sides */
.mt-0  { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

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

.ml-auto { margin-left: auto; }
.ml-xs   { margin-left: var(--space-xs); }
.ml-sm   { margin-left: var(--space-sm); }
.ml-md   { margin-left: var(--space-md); }

.mr-auto { margin-right: auto; }
.mr-xs   { margin-right: var(--space-xs); }
.mr-sm   { margin-right: var(--space-sm); }
.mr-md   { margin-right: var(--space-md); }