/**
 * Spacing Utilities
 *
 * Margin and padding utility classes based on the 8px spacing
 * scale defined in variables.css.
 *
 * Naming convention:
 *   m-{size}   — margin all sides
 *   mt-{size}  — margin-top
 *   mb-{size}  — margin-bottom
 *   ml-{size}  — margin-left
 *   mr-{size}  — margin-right
 *   mx-{size}  — margin left + right
 *   my-{size}  — margin top + bottom
 *
 *   p-{size}   — padding all sides
 *   pt-{size}  — padding-top
 *   pb-{size}  — padding-bottom
 *   pl-{size}  — padding-left
 *   pr-{size}  — padding-right
 *   px-{size}  — padding left + right
 *   py-{size}  — padding top + bottom
 *
 * Sizes: xs | sm | md | lg | xl | 2xl | 3xl
 *
 * Special: m-auto, mx-auto for centering
 */


/* =========================================================
   Margin — all sides
   ========================================================= */

.m-0    { margin: 0                     !important; }
.m-xs   { margin: var(--spacing-xs)     !important; }
.m-sm   { margin: var(--spacing-sm)     !important; }
.m-md   { margin: var(--spacing-md)     !important; }
.m-lg   { margin: var(--spacing-lg)     !important; }
.m-xl   { margin: var(--spacing-xl)     !important; }
.m-2xl  { margin: var(--spacing-2xl)    !important; }
.m-3xl  { margin: var(--spacing-3xl)    !important; }
.m-auto { margin: auto                  !important; }


/* =========================================================
   Margin — top
   ========================================================= */

.mt-0   { margin-top: 0                  !important; }
.mt-xs  { margin-top: var(--spacing-xs)  !important; }
.mt-sm  { margin-top: var(--spacing-sm)  !important; }
.mt-md  { margin-top: var(--spacing-md)  !important; }
.mt-lg  { margin-top: var(--spacing-lg)  !important; }
.mt-xl  { margin-top: var(--spacing-xl)  !important; }
.mt-2xl { margin-top: var(--spacing-2xl) !important; }
.mt-3xl { margin-top: var(--spacing-3xl) !important; }


/* =========================================================
   Margin — bottom
   ========================================================= */

.mb-0   { margin-bottom: 0                  !important; }
.mb-xs  { margin-bottom: var(--spacing-xs)  !important; }
.mb-sm  { margin-bottom: var(--spacing-sm)  !important; }
.mb-md  { margin-bottom: var(--spacing-md)  !important; }
.mb-lg  { margin-bottom: var(--spacing-lg)  !important; }
.mb-xl  { margin-bottom: var(--spacing-xl)  !important; }
.mb-2xl { margin-bottom: var(--spacing-2xl) !important; }
.mb-3xl { margin-bottom: var(--spacing-3xl) !important; }


/* =========================================================
   Margin — left
   ========================================================= */

.ml-0    { margin-left: 0                  !important; }
.ml-xs   { margin-left: var(--spacing-xs)  !important; }
.ml-sm   { margin-left: var(--spacing-sm)  !important; }
.ml-md   { margin-left: var(--spacing-md)  !important; }
.ml-lg   { margin-left: var(--spacing-lg)  !important; }
.ml-xl   { margin-left: var(--spacing-xl)  !important; }
.ml-2xl  { margin-left: var(--spacing-2xl) !important; }
.ml-3xl  { margin-left: var(--spacing-3xl) !important; }
.ml-auto { margin-left: auto               !important; }


/* =========================================================
   Margin — right
   ========================================================= */

.mr-0    { margin-right: 0                  !important; }
.mr-xs   { margin-right: var(--spacing-xs)  !important; }
.mr-sm   { margin-right: var(--spacing-sm)  !important; }
.mr-md   { margin-right: var(--spacing-md)  !important; }
.mr-lg   { margin-right: var(--spacing-lg)  !important; }
.mr-xl   { margin-right: var(--spacing-xl)  !important; }
.mr-2xl  { margin-right: var(--spacing-2xl) !important; }
.mr-3xl  { margin-right: var(--spacing-3xl) !important; }
.mr-auto { margin-right: auto               !important; }


/* =========================================================
   Margin — horizontal (left + right)
   ========================================================= */

.mx-0    { margin-left: 0;                  margin-right: 0                  !important; }
.mx-xs   { margin-left: var(--spacing-xs);  margin-right: var(--spacing-xs)  !important; }
.mx-sm   { margin-left: var(--spacing-sm);  margin-right: var(--spacing-sm)  !important; }
.mx-md   { margin-left: var(--spacing-md);  margin-right: var(--spacing-md)  !important; }
.mx-lg   { margin-left: var(--spacing-lg);  margin-right: var(--spacing-lg)  !important; }
.mx-xl   { margin-left: var(--spacing-xl);  margin-right: var(--spacing-xl)  !important; }
.mx-2xl  { margin-left: var(--spacing-2xl); margin-right: var(--spacing-2xl) !important; }
.mx-3xl  { margin-left: var(--spacing-3xl); margin-right: var(--spacing-3xl) !important; }
.mx-auto { margin-left: auto;               margin-right: auto               !important; }


/* =========================================================
   Margin — vertical (top + bottom)
   ========================================================= */

.my-0   { margin-top: 0;                  margin-bottom: 0                  !important; }
.my-xs  { margin-top: var(--spacing-xs);  margin-bottom: var(--spacing-xs)  !important; }
.my-sm  { margin-top: var(--spacing-sm);  margin-bottom: var(--spacing-sm)  !important; }
.my-md  { margin-top: var(--spacing-md);  margin-bottom: var(--spacing-md)  !important; }
.my-lg  { margin-top: var(--spacing-lg);  margin-bottom: var(--spacing-lg)  !important; }
.my-xl  { margin-top: var(--spacing-xl);  margin-bottom: var(--spacing-xl)  !important; }
.my-2xl { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl) !important; }
.my-3xl { margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-3xl) !important; }


/* =========================================================
   Padding — all sides
   ========================================================= */

.p-0   { padding: 0                  !important; }
.p-xs  { padding: var(--spacing-xs)  !important; }
.p-sm  { padding: var(--spacing-sm)  !important; }
.p-md  { padding: var(--spacing-md)  !important; }
.p-lg  { padding: var(--spacing-lg)  !important; }
.p-xl  { padding: var(--spacing-xl)  !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.p-3xl { padding: var(--spacing-3xl) !important; }


/* =========================================================
   Padding — top
   ========================================================= */

.pt-0   { padding-top: 0                  !important; }
.pt-xs  { padding-top: var(--spacing-xs)  !important; }
.pt-sm  { padding-top: var(--spacing-sm)  !important; }
.pt-md  { padding-top: var(--spacing-md)  !important; }
.pt-lg  { padding-top: var(--spacing-lg)  !important; }
.pt-xl  { padding-top: var(--spacing-xl)  !important; }
.pt-2xl { padding-top: var(--spacing-2xl) !important; }
.pt-3xl { padding-top: var(--spacing-3xl) !important; }


/* =========================================================
   Padding — bottom
   ========================================================= */

.pb-0   { padding-bottom: 0                  !important; }
.pb-xs  { padding-bottom: var(--spacing-xs)  !important; }
.pb-sm  { padding-bottom: var(--spacing-sm)  !important; }
.pb-md  { padding-bottom: var(--spacing-md)  !important; }
.pb-lg  { padding-bottom: var(--spacing-lg)  !important; }
.pb-xl  { padding-bottom: var(--spacing-xl)  !important; }
.pb-2xl { padding-bottom: var(--spacing-2xl) !important; }
.pb-3xl { padding-bottom: var(--spacing-3xl) !important; }


/* =========================================================
   Padding — left
   ========================================================= */

.pl-0   { padding-left: 0                  !important; }
.pl-xs  { padding-left: var(--spacing-xs)  !important; }
.pl-sm  { padding-left: var(--spacing-sm)  !important; }
.pl-md  { padding-left: var(--spacing-md)  !important; }
.pl-lg  { padding-left: var(--spacing-lg)  !important; }
.pl-xl  { padding-left: var(--spacing-xl)  !important; }
.pl-2xl { padding-left: var(--spacing-2xl) !important; }
.pl-3xl { padding-left: var(--spacing-3xl) !important; }


/* =========================================================
   Padding — right
   ========================================================= */

.pr-0   { padding-right: 0                  !important; }
.pr-xs  { padding-right: var(--spacing-xs)  !important; }
.pr-sm  { padding-right: var(--spacing-sm)  !important; }
.pr-md  { padding-right: var(--spacing-md)  !important; }
.pr-lg  { padding-right: var(--spacing-lg)  !important; }
.pr-xl  { padding-right: var(--spacing-xl)  !important; }
.pr-2xl { padding-right: var(--spacing-2xl) !important; }
.pr-3xl { padding-right: var(--spacing-3xl) !important; }


/* =========================================================
   Padding — horizontal (left + right)
   ========================================================= */

.px-0   { padding-left: 0;                  padding-right: 0                  !important; }
.px-xs  { padding-left: var(--spacing-xs);  padding-right: var(--spacing-xs)  !important; }
.px-sm  { padding-left: var(--spacing-sm);  padding-right: var(--spacing-sm)  !important; }
.px-md  { padding-left: var(--spacing-md);  padding-right: var(--spacing-md)  !important; }
.px-lg  { padding-left: var(--spacing-lg);  padding-right: var(--spacing-lg)  !important; }
.px-xl  { padding-left: var(--spacing-xl);  padding-right: var(--spacing-xl)  !important; }
.px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl) !important; }
.px-3xl { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl) !important; }


/* =========================================================
   Padding — vertical (top + bottom)
   ========================================================= */

.py-0   { padding-top: 0;                  padding-bottom: 0                  !important; }
.py-xs  { padding-top: var(--spacing-xs);  padding-bottom: var(--spacing-xs)  !important; }
.py-sm  { padding-top: var(--spacing-sm);  padding-bottom: var(--spacing-sm)  !important; }
.py-md  { padding-top: var(--spacing-md);  padding-bottom: var(--spacing-md)  !important; }
.py-lg  { padding-top: var(--spacing-lg);  padding-bottom: var(--spacing-lg)  !important; }
.py-xl  { padding-top: var(--spacing-xl);  padding-bottom: var(--spacing-xl)  !important; }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl) !important; }
.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl) !important; }