/* Custom Spacing System */

:root {
  /* Base unit for spacing (you can adjust this value) */
  --spacing-unit: 0.25rem;
  
  /* Generate spacing variables from 1 to 128 */
  --space-1: calc(1 * var(--spacing-unit));    /* 0.25rem */
  --space-2: calc(2 * var(--spacing-unit));    /* 0.5rem */
  --space-3: calc(3 * var(--spacing-unit));    /* 0.75rem */
  --space-4: calc(4 * var(--spacing-unit));    /* 1rem */
  --space-5: calc(5 * var(--spacing-unit));    /* 1.25rem */
  --space-6: calc(6 * var(--spacing-unit));    /* 1.5rem */
  --space-8: calc(8 * var(--spacing-unit));    /* 2rem */
  --space-10: calc(10 * var(--spacing-unit));  /* 2.5rem */
  --space-12: calc(12 * var(--spacing-unit));  /* 3rem */
  --space-16: calc(16 * var(--spacing-unit));  /* 4rem */
  --space-20: calc(20 * var(--spacing-unit));  /* 5rem */
  --space-24: calc(24 * var(--spacing-unit));  /* 6rem */
  --space-32: calc(32 * var(--spacing-unit));  /* 8rem */
  --space-40: calc(40 * var(--spacing-unit));  /* 10rem */
  --space-48: calc(48 * var(--spacing-unit));  /* 12rem */
  --space-56: calc(56 * var(--spacing-unit));  /* 14rem */
  --space-64: calc(64 * var(--spacing-unit));  /* 16rem */
  --space-72: calc(72 * var(--spacing-unit));  /* 18rem */
  --space-80: calc(80 * var(--spacing-unit));  /* 20rem */
  --space-96: calc(96 * var(--spacing-unit));  /* 24rem */
  --space-128: calc(128 * var(--spacing-unit)); /* 32rem */
}

/* Padding utility classes */
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }
.p-10 { padding: var(--space-10) !important; }
.p-12 { padding: var(--space-12) !important; }
.p-16 { padding: var(--space-16) !important; }
.p-20 { padding: var(--space-20) !important; }
.p-24 { padding: var(--space-24) !important; }
.p-32 { padding: var(--space-32) !important; }
.p-40 { padding: var(--space-40) !important; }
.p-48 { padding: var(--space-48) !important; }
.p-56 { padding: var(--space-56) !important; }
.p-64 { padding: var(--space-64) !important; }
.p-72 { padding: var(--space-72) !important; }
.p-80 { padding: var(--space-80) !important; }
.p-96 { padding: var(--space-96) !important; }
.p-128 { padding: var(--space-128) !important; }

/* Padding X axis (left and right) */
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
.px-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
.px-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
.px-16 { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
.px-20 { padding-left: var(--space-20) !important; padding-right: var(--space-20) !important; }
.px-24 { padding-left: var(--space-24) !important; padding-right: var(--space-24) !important; }
.px-32 { padding-left: var(--space-32) !important; padding-right: var(--space-32) !important; }
.px-40 { padding-left: var(--space-40) !important; padding-right: var(--space-40) !important; }
.px-48 { padding-left: var(--space-48) !important; padding-right: var(--space-48) !important; }
.px-64 { padding-left: var(--space-64) !important; padding-right: var(--space-64) !important; }
.px-80 { padding-left: var(--space-80) !important; padding-right: var(--space-80) !important; }
.px-96 { padding-left: var(--space-96) !important; padding-right: var(--space-96) !important; }

/* Padding Y axis (top and bottom) */
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.py-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
.py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
.py-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
.py-20 { padding-top: var(--space-20) !important; padding-bottom: var(--space-20) !important; }
.py-24 { padding-top: var(--space-24) !important; padding-bottom: var(--space-24) !important; }
.py-32 { padding-top: var(--space-32) !important; padding-bottom: var(--space-32) !important; }
.py-40 { padding-top: var(--space-40) !important; padding-bottom: var(--space-40) !important; }
.py-48 { padding-top: var(--space-48) !important; padding-bottom: var(--space-48) !important; }
.py-64 { padding-top: var(--space-64) !important; padding-bottom: var(--space-64) !important; }
.py-80 { padding-top: var(--space-80) !important; padding-bottom: var(--space-80) !important; }
.py-96 { padding-top: var(--space-96) !important; padding-bottom: var(--space-96) !important; }

/* Individual padding directions */
/* Top padding */
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pt-10 { padding-top: var(--space-10) !important; }
.pt-12 { padding-top: var(--space-12) !important; }
.pt-16 { padding-top: var(--space-16) !important; }
.pt-20 { padding-top: var(--space-20) !important; }
.pt-24 { padding-top: var(--space-24) !important; }
.pt-32 { padding-top: var(--space-32) !important; }
.pt-40 { padding-top: var(--space-40) !important; }
.pt-48 { padding-top: var(--space-48) !important; }
.pt-56 { padding-top: var(--space-56) !important; }
.pt-64 { padding-top: var(--space-64) !important; }
.pt-72 { padding-top: var(--space-72) !important; }
.pt-80 { padding-top: var(--space-80) !important; }
.pt-96 { padding-top: var(--space-96) !important; }
.pt-128 { padding-top: var(--space-128) !important; }

/* Right padding */
.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-5 { padding-right: var(--space-5) !important; }
.pr-6 { padding-right: var(--space-6) !important; }
.pr-8 { padding-right: var(--space-8) !important; }
.pr-10 { padding-right: var(--space-10) !important; }
.pr-12 { padding-right: var(--space-12) !important; }
.pr-16 { padding-right: var(--space-16) !important; }
.pr-20 { padding-right: var(--space-20) !important; }
.pr-24 { padding-right: var(--space-24) !important; }
.pr-32 { padding-right: var(--space-32) !important; }
.pr-40 { padding-right: var(--space-40) !important; }
.pr-48 { padding-right: var(--space-48) !important; }
.pr-56 { padding-right: var(--space-56) !important; }
.pr-64 { padding-right: var(--space-64) !important; }
.pr-72 { padding-right: var(--space-72) !important; }
.pr-80 { padding-right: var(--space-80) !important; }
.pr-96 { padding-right: var(--space-96) !important; }
.pr-128 { padding-right: var(--space-128) !important; }

/* Bottom padding */
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.pb-10 { padding-bottom: var(--space-10) !important; }
.pb-12 { padding-bottom: var(--space-12) !important; }
.pb-16 { padding-bottom: var(--space-16) !important; }
.pb-20 { padding-bottom: var(--space-20) !important; }
.pb-24 { padding-bottom: var(--space-24) !important; }
.pb-32 { padding-bottom: var(--space-32) !important; }
.pb-40 { padding-bottom: var(--space-40) !important; }
.pb-48 { padding-bottom: var(--space-48) !important; }
.pb-56 { padding-bottom: var(--space-56) !important; }
.pb-64 { padding-bottom: var(--space-64) !important; }
.pb-72 { padding-bottom: var(--space-72) !important; }
.pb-80 { padding-bottom: var(--space-80) !important; }
.pb-96 { padding-bottom: var(--space-96) !important; }
.pb-128 { padding-bottom: var(--space-128) !important; }

/* Left padding */
.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-5 { padding-left: var(--space-5) !important; }
.pl-6 { padding-left: var(--space-6) !important; }
.pl-8 { padding-left: var(--space-8) !important; }
.pl-10 { padding-left: var(--space-10) !important; }
.pl-12 { padding-left: var(--space-12) !important; }
.pl-16 { padding-left: var(--space-16) !important; }
.pl-20 { padding-left: var(--space-20) !important; }
.pl-24 { padding-left: var(--space-24) !important; }
.pl-32 { padding-left: var(--space-32) !important; }
.pl-40 { padding-left: var(--space-40) !important; }
.pl-48 { padding-left: var(--space-48) !important; }
.pl-56 { padding-left: var(--space-56) !important; }
.pl-64 { padding-left: var(--space-64) !important; }
.pl-72 { padding-left: var(--space-72) !important; }
.pl-80 { padding-left: var(--space-80) !important; }
.pl-96 { padding-left: var(--space-96) !important; }
.pl-128 { padding-left: var(--space-128) !important; }

/* Margin utility classes */
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-10 { margin: var(--space-10) !important; }
.m-12 { margin: var(--space-12) !important; }
.m-16 { margin: var(--space-16) !important; }
.m-20 { margin: var(--space-20) !important; }
.m-24 { margin: var(--space-24) !important; }
.m-32 { margin: var(--space-32) !important; }
.m-40 { margin: var(--space-40) !important; }
.m-48 { margin: var(--space-48) !important; }
.m-56 { margin: var(--space-56) !important; }
.m-64 { margin: var(--space-64) !important; }
.m-72 { margin: var(--space-72) !important; }
.m-80 { margin: var(--space-80) !important; }
.m-96 { margin: var(--space-96) !important; }
.m-128 { margin: var(--space-128) !important; }

/* Margin X and Y axis */
.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mx-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }
.mx-12 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
.mx-16 { margin-left: var(--space-16) !important; margin-right: var(--space-16) !important; }
.mx-20 { margin-left: var(--space-20) !important; margin-right: var(--space-20) !important; }
.mx-24 { margin-left: var(--space-24) !important; margin-right: var(--space-24) !important; }
.mx-32 { margin-left: var(--space-32) !important; margin-right: var(--space-32) !important; }
.mx-40 { margin-left: var(--space-40) !important; margin-right: var(--space-40) !important; }
.mx-48 { margin-left: var(--space-48) !important; margin-right: var(--space-48) !important; }
.mx-64 { margin-left: var(--space-64) !important; margin-right: var(--space-64) !important; }
.mx-80 { margin-left: var(--space-80) !important; margin-right: var(--space-80) !important; }

.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.my-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }
.my-12 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
.my-16 { margin-top: var(--space-16) !important; margin-bottom: var(--space-16) !important; }
.my-20 { margin-top: var(--space-20) !important; margin-bottom: var(--space-20) !important; }
.my-24 { margin-top: var(--space-24) !important; margin-bottom: var(--space-24) !important; }
.my-32 { margin-top: var(--space-32) !important; margin-bottom: var(--space-32) !important; }
.my-40 { margin-top: var(--space-40) !important; margin-bottom: var(--space-40) !important; }
.my-48 { margin-top: var(--space-48) !important; margin-bottom: var(--space-48) !important; }
.my-64 { margin-top: var(--space-64) !important; margin-bottom: var(--space-64) !important; }
.my-80 { margin-top: var(--space-80) !important; margin-bottom: var(--space-80) !important; }

/* Individual margin directions */
/* Top margin */
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-10 { margin-top: var(--space-10) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }
.mt-20 { margin-top: var(--space-20) !important; }
.mt-24 { margin-top: var(--space-24) !important; }
.mt-32 { margin-top: var(--space-32) !important; }
.mt-40 { margin-top: var(--space-40) !important; }
.mt-48 { margin-top: var(--space-48) !important; }
.mt-56 { margin-top: var(--space-56) !important; }
.mt-64 { margin-top: var(--space-64) !important; }
.mt-72 { margin-top: var(--space-72) !important; }
.mt-80 { margin-top: var(--space-80) !important; }
.mt-96 { margin-top: var(--space-96) !important; }
.mt-128 { margin-top: var(--space-128) !important; }

/* Right margin */
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-5 { margin-right: var(--space-5) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.mr-10 { margin-right: var(--space-10) !important; }
.mr-12 { margin-right: var(--space-12) !important; }
.mr-16 { margin-right: var(--space-16) !important; }
.mr-20 { margin-right: var(--space-20) !important; }
.mr-24 { margin-right: var(--space-24) !important; }
.mr-32 { margin-right: var(--space-32) !important; }
.mr-40 { margin-right: var(--space-40) !important; }
.mr-48 { margin-right: var(--space-48) !important; }
.mr-56 { margin-right: var(--space-56) !important; }
.mr-64 { margin-right: var(--space-64) !important; }
.mr-72 { margin-right: var(--space-72) !important; }
.mr-80 { margin-right: var(--space-80) !important; }
.mr-96 { margin-right: var(--space-96) !important; }
.mr-128 { margin-right: var(--space-128) !important; }

/* Bottom margin */
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }
.mb-20 { margin-bottom: var(--space-20) !important; }
.mb-24 { margin-bottom: var(--space-24) !important; }
.mb-32 { margin-bottom: var(--space-32) !important; }
.mb-40 { margin-bottom: var(--space-40) !important; }
.mb-48 { margin-bottom: var(--space-48) !important; }
.mb-56 { margin-bottom: var(--space-56) !important; }
.mb-64 { margin-bottom: var(--space-64) !important; }
.mb-72 { margin-bottom: var(--space-72) !important; }
.mb-80 { margin-bottom: var(--space-80) !important; }
.mb-96 { margin-bottom: var(--space-96) !important; }
.mb-128 { margin-bottom: var(--space-128) !important; }

/* Left margin */
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-5 { margin-left: var(--space-5) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-8 { margin-left: var(--space-8) !important; }
.ml-10 { margin-left: var(--space-10) !important; }
.ml-12 { margin-left: var(--space-12) !important; }
.ml-16 { margin-left: var(--space-16) !important; }
.ml-20 { margin-left: var(--space-20) !important; }
.ml-24 { margin-left: var(--space-24) !important; }
.ml-32 { margin-left: var(--space-32) !important; }
.ml-40 { margin-left: var(--space-40) !important; }
.ml-48 { margin-left: var(--space-48) !important; }
.ml-56 { margin-left: var(--space-56) !important; }
.ml-64 { margin-left: var(--space-64) !important; }
.ml-72 { margin-left: var(--space-72) !important; }
.ml-80 { margin-left: var(--space-80) !important; }
.ml-96 { margin-left: var(--space-96) !important; }
.ml-128 { margin-left: var(--space-128) !important; }

/* Negative margin variants */
.mt-n1 { margin-top: calc(-1 * var(--space-1)) !important; }
.mt-n2 { margin-top: calc(-1 * var(--space-2)) !important; }
.mt-n3 { margin-top: calc(-1 * var(--space-3)) !important; }
.mt-n4 { margin-top: calc(-1 * var(--space-4)) !important; }
.mt-n5 { margin-top: calc(-1 * var(--space-5)) !important; }
.mt-n6 { margin-top: calc(-1 * var(--space-6)) !important; }
.mt-n8 { margin-top: calc(-1 * var(--space-8)) !important; }
.mt-n10 { margin-top: calc(-1 * var(--space-10)) !important; }
.mt-n12 { margin-top: calc(-1 * var(--space-12)) !important; }
.mt-n16 { margin-top: calc(-1 * var(--space-16)) !important; }

.mr-n1 { margin-right: calc(-1 * var(--space-1)) !important; }
.mr-n2 { margin-right: calc(-1 * var(--space-2)) !important; }
.mr-n3 { margin-right: calc(-1 * var(--space-3)) !important; }
.mr-n4 { margin-right: calc(-1 * var(--space-4)) !important; }
.mr-n5 { margin-right: calc(-1 * var(--space-5)) !important; }
.mr-n6 { margin-right: calc(-1 * var(--space-6)) !important; }
.mr-n8 { margin-right: calc(-1 * var(--space-8)) !important; }

.mb-n1 { margin-bottom: calc(-1 * var(--space-1)) !important; }
.mb-n2 { margin-bottom: calc(-1 * var(--space-2)) !important; }
.mb-n3 { margin-bottom: calc(-1 * var(--space-3)) !important; }
.mb-n4 { margin-bottom: calc(-1 * var(--space-4)) !important; }
.mb-n5 { margin-bottom: calc(-1 * var(--space-5)) !important; }
.mb-n6 { margin-bottom: calc(-1 * var(--space-6)) !important; }
.mb-n8 { margin-bottom: calc(-1 * var(--space-8)) !important; }

.ml-n1 { margin-left: calc(-1 * var(--space-1)) !important; }
.ml-n2 { margin-left: calc(-1 * var(--space-2)) !important; }
.ml-n3 { margin-left: calc(-1 * var(--space-3)) !important; }
.ml-n4 { margin-left: calc(-1 * var(--space-4)) !important; }
.ml-n5 { margin-left: calc(-1 * var(--space-5)) !important; }
.ml-n6 { margin-left: calc(-1 * var(--space-6)) !important; }
.ml-n8 { margin-left: calc(-1 * var(--space-8)) !important; }

/* Fractional spacing for more precision */
.p-0-5 { padding: calc(0.5 * var(--spacing-unit)) !important; } /* 0.125rem */
.m-0-5 { margin: calc(0.5 * var(--spacing-unit)) !important; }  /* 0.125rem */

/* Gap utility classes for flexbox and grid layouts */
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }
.gap-10 { gap: var(--space-10) !important; }
.gap-12 { gap: var(--space-12) !important; }
.gap-16 { gap: var(--space-16) !important; }
.gap-20 { gap: var(--space-20) !important; }
.gap-24 { gap: var(--space-24) !important; }
.gap-32 { gap: var(--space-32) !important; }
.gap-40 { gap: var(--space-40) !important; }
.gap-48 { gap: var(--space-48) !important; }
.gap-64 { gap: var(--space-64) !important; }