/* ==========================================================================
   Utility Classes – Responsive Spacing
   ==========================================================================
   Tailwind-style utility classes that map to the fluid spacing tokens
   defined in design-tokens.css (--space-xs … --space-xxl).
   ========================================================================== */

/* -----------------------------------------------------------------------
   MARGIN – all sides
   ----------------------------------------------------------------------- */
.m-0   { margin: 0; }
.m-xs  { margin: var(--space-xs); }
.m-sm  { margin: var(--space-sm); }
.m-base { margin: var(--space-base); }
.m-md  { margin: var(--space-md); }
.m-lg  { margin: var(--space-lg); }
.m-xl  { margin: var(--space-xl); }
.m-xxl { margin: var(--space-xxl); }

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

/* margin-right */
.mr-0   { margin-right: 0; }
.mr-xs  { margin-right: var(--space-xs); }
.mr-sm  { margin-right: var(--space-sm); }
.mr-base { margin-right: var(--space-base); }
.mr-md  { margin-right: var(--space-md); }
.mr-lg  { margin-right: var(--space-lg); }
.mr-xl  { margin-right: var(--space-xl); }
.mr-xxl { margin-right: var(--space-xxl); }

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

/* margin-left */
.ml-0   { margin-left: 0; }
.ml-xs  { margin-left: var(--space-xs); }
.ml-sm  { margin-left: var(--space-sm); }
.ml-base { margin-left: var(--space-base); }
.ml-md  { margin-left: var(--space-md); }
.ml-lg  { margin-left: var(--space-lg); }
.ml-xl  { margin-left: var(--space-xl); }
.ml-xxl { margin-left: var(--space-xxl); }

/* margin-inline (left + right) */
.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-base { margin-left: var(--space-base); margin-right: var(--space-base); }
.mx-md  { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg  { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.mx-xl  { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }

/* margin-block (top + bottom) */
.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-base { margin-top: var(--space-base); margin-bottom: var(--space-base); }
.my-md  { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg  { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl  { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }

/* -----------------------------------------------------------------------
   PADDING – all sides
   ----------------------------------------------------------------------- */
.p-0   { padding: 0; }
.p-xs  { padding: var(--space-xs); }
.p-sm  { padding: var(--space-sm); }
.p-base { padding: var(--space-base); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }

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

/* padding-right */
.pr-0   { padding-right: 0; }
.pr-xs  { padding-right: var(--space-xs); }
.pr-sm  { padding-right: var(--space-sm); }
.pr-base { padding-right: var(--space-base); }
.pr-md  { padding-right: var(--space-md); }
.pr-lg  { padding-right: var(--space-lg); }
.pr-xl  { padding-right: var(--space-xl); }
.pr-xxl { padding-right: var(--space-xxl); }

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

/* padding-left */
.pl-0   { padding-left: 0; }
.pl-xs  { padding-left: var(--space-xs); }
.pl-sm  { padding-left: var(--space-sm); }
.pl-base { padding-left: var(--space-base); }
.pl-md  { padding-left: var(--space-md); }
.pl-lg  { padding-left: var(--space-lg); }
.pl-xl  { padding-left: var(--space-xl); }
.pl-xxl { padding-left: var(--space-xxl); }

/* padding-inline (left + right) */
.px-0   { padding-left: 0; padding-right: 0; }
.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-base { padding-left: var(--space-base); padding-right: var(--space-base); }
.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-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }

/* padding-block (top + bottom) */
.py-0   { padding-top: 0; padding-bottom: 0; }
.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-base { padding-top: var(--space-base); padding-bottom: var(--space-base); }
.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-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }

/* -----------------------------------------------------------------------
   GAP
   ----------------------------------------------------------------------- */
.gap-0   { gap: 0; }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-base { gap: var(--space-base); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-xxl { gap: var(--space-xxl); }

/* column-gap */
.gap-x-0   { column-gap: 0; }
.gap-x-xs  { column-gap: var(--space-xs); }
.gap-x-sm  { column-gap: var(--space-sm); }
.gap-x-base { column-gap: var(--space-base); }
.gap-x-md  { column-gap: var(--space-md); }
.gap-x-lg  { column-gap: var(--space-lg); }
.gap-x-xl  { column-gap: var(--space-xl); }
.gap-x-xxl { column-gap: var(--space-xxl); }

/* row-gap */
.gap-y-0   { row-gap: 0; }
.gap-y-xs  { row-gap: var(--space-xs); }
.gap-y-sm  { row-gap: var(--space-sm); }
.gap-y-base { row-gap: var(--space-base); }
.gap-y-md  { row-gap: var(--space-md); }
.gap-y-lg  { row-gap: var(--space-lg); }
.gap-y-xl  { row-gap: var(--space-xl); }
.gap-y-xxl { row-gap: var(--space-xxl); }