/* ========================================
   SPACING UTILITY CLASSES
   ======================================== */

/* Base spacing scale (similar to Tailwind) */
:root {
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */
  --spacing-32: 8rem;     /* 128px */
  --spacing-40: 10rem;    /* 160px */
  --spacing-48: 12rem;    /* 192px */
  --spacing-56: 14rem;    /* 224px */
  --spacing-64: 16rem;    /* 256px */
}

/* MARGIN UTILITIES */
/* All margins */
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }
.m-10 { margin: var(--spacing-10); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }
.m-32 { margin: var(--spacing-32); }
.m-auto { margin: auto; }

/* Horizontal margins */
.mx-0 { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
.mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
.mx-10 { margin-left: var(--spacing-10); margin-right: var(--spacing-10); }
.mx-12 { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }
.mx-16 { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }
.mx-20 { margin-left: var(--spacing-20); margin-right: var(--spacing-20); }
.mx-24 { margin-left: var(--spacing-24); margin-right: var(--spacing-24); }
.mx-32 { margin-left: var(--spacing-32); margin-right: var(--spacing-32); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Vertical margins */
.my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.my-10 { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); }
.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }
.my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
.my-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
.my-24 { margin-top: var(--spacing-24); margin-bottom: var(--spacing-24); }
.my-32 { margin-top: var(--spacing-32); margin-bottom: var(--spacing-32); }

/* Individual margins */
.mt-0 { margin-top: var(--spacing-0); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-20 { margin-top: var(--spacing-20); }
.mt-24 { margin-top: var(--spacing-24); }
.mt-32 { margin-top: var(--spacing-32); }

.mr-0 { margin-right: var(--spacing-0); }
.mr-1 { margin-right: var(--spacing-1); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-3 { margin-right: var(--spacing-3); }
.mr-4 { margin-right: var(--spacing-4); }
.mr-5 { margin-right: var(--spacing-5); }
.mr-6 { margin-right: var(--spacing-6); }
.mr-8 { margin-right: var(--spacing-8); }
.mr-10 { margin-right: var(--spacing-10); }
.mr-12 { margin-right: var(--spacing-12); }
.mr-16 { margin-right: var(--spacing-16); }
.mr-20 { margin-right: var(--spacing-20); }
.mr-24 { margin-right: var(--spacing-24); }
.mr-32 { margin-right: var(--spacing-32); }

.mb-0 { margin-bottom: var(--spacing-0) !important; }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-20 { margin-bottom: var(--spacing-20); }
.mb-24 { margin-bottom: var(--spacing-24); }
.mb-32 { margin-bottom: var(--spacing-32); }

.ml-0 { margin-left: var(--spacing-0); }
.ml-1 { margin-left: var(--spacing-1); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-3 { margin-left: var(--spacing-3); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-5 { margin-left: var(--spacing-5); }
.ml-6 { margin-left: var(--spacing-6); }
.ml-8 { margin-left: var(--spacing-8); }
.ml-10 { margin-left: var(--spacing-10); }
.ml-12 { margin-left: var(--spacing-12); }
.ml-16 { margin-left: var(--spacing-16); }
.ml-20 { margin-left: var(--spacing-20); }
.ml-24 { margin-left: var(--spacing-24); }
.ml-32 { margin-left: var(--spacing-32); }

/* PADDING UTILITIES */
/* All padding */
.p-0 { padding: var(--spacing-0); }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }
.p-10 { padding: var(--spacing-10); }
.p-12 { padding: var(--spacing-12); }
.p-16 { padding: var(--spacing-16); }
.p-20 { padding: var(--spacing-20); }
.p-24 { padding: var(--spacing-24); }
.p-32 { padding: var(--spacing-32); }

/* Horizontal padding */
.px-0 { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }
.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
.px-10 { padding-left: var(--spacing-10); padding-right: var(--spacing-10); }
.px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
.px-16 { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
.px-20 { padding-left: var(--spacing-20); padding-right: var(--spacing-20); }
.px-24 { padding-left: var(--spacing-24); padding-right: var(--spacing-24); }
.px-32 { padding-left: var(--spacing-32); padding-right: var(--spacing-32); }

/* Vertical padding */
.py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
.py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.py-24 { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); }
.py-32 { padding-top: var(--spacing-32); padding-bottom: var(--spacing-32); }

/* Individual padding */
.pt-0 { padding-top: var(--spacing-0); }
.pt-1 { padding-top: var(--spacing-1); }
.pt-2 { padding-top: var(--spacing-2); }
.pt-3 { padding-top: var(--spacing-3); }
.pt-4 { padding-top: var(--spacing-4); }
.pt-5 { padding-top: var(--spacing-5); }
.pt-6 { padding-top: var(--spacing-6); }
.pt-8 { padding-top: var(--spacing-8); }
.pt-10 { padding-top: var(--spacing-10); }
.pt-12 { padding-top: var(--spacing-12); }
.pt-16 { padding-top: var(--spacing-16); }
.pt-20 { padding-top: var(--spacing-20); }
.pt-24 { padding-top: var(--spacing-24); }
.pt-32 { padding-top: var(--spacing-32); }

.pr-0 { padding-right: var(--spacing-0); }
.pr-1 { padding-right: var(--spacing-1); }
.pr-2 { padding-right: var(--spacing-2); }
.pr-3 { padding-right: var(--spacing-3); }
.pr-4 { padding-right: var(--spacing-4); }
.pr-5 { padding-right: var(--spacing-5); }
.pr-6 { padding-right: var(--spacing-6); }
.pr-8 { padding-right: var(--spacing-8); }
.pr-10 { padding-right: var(--spacing-10); }
.pr-12 { padding-right: var(--spacing-12); }
.pr-16 { padding-right: var(--spacing-16); }
.pr-20 { padding-right: var(--spacing-20); }
.pr-24 { padding-right: var(--spacing-24); }
.pr-32 { padding-right: var(--spacing-32); }

.pb-0 { padding-bottom: var(--spacing-0); }
.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-5 { padding-bottom: var(--spacing-5); }
.pb-6 { padding-bottom: var(--spacing-6); }
.pb-8 { padding-bottom: var(--spacing-8); }
.pb-10 { padding-bottom: var(--spacing-10); }
.pb-12 { padding-bottom: var(--spacing-12); }
.pb-16 { padding-bottom: var(--spacing-16); }
.pb-20 { padding-bottom: var(--spacing-20); }
.pb-24 { padding-bottom: var(--spacing-24); }
.pb-32 { padding-bottom: var(--spacing-32); }

.pl-0 { padding-left: var(--spacing-0); }
.pl-1 { padding-left: var(--spacing-1); }
.pl-2 { padding-left: var(--spacing-2); }
.pl-3 { padding-left: var(--spacing-3); }
.pl-4 { padding-left: var(--spacing-4); }
.pl-5 { padding-left: var(--spacing-5); }
.pl-6 { padding-left: var(--spacing-6); }
.pl-8 { padding-left: var(--spacing-8); }
.pl-10 { padding-left: var(--spacing-10); }
.pl-12 { padding-left: var(--spacing-12); }
.pl-16 { padding-left: var(--spacing-16); }
.pl-20 { padding-left: var(--spacing-20); }
.pl-24 { padding-left: var(--spacing-24); }
.pl-32 { padding-left: var(--spacing-32); }

/* NEGATIVE MARGINS */
.-m-1 { margin: calc(-1 * var(--spacing-1)); }
.-m-2 { margin: calc(-1 * var(--spacing-2)); }
.-m-3 { margin: calc(-1 * var(--spacing-3)); }
.-m-4 { margin: calc(-1 * var(--spacing-4)); }
.-m-5 { margin: calc(-1 * var(--spacing-5)); }
.-m-6 { margin: calc(-1 * var(--spacing-6)); }
.-m-8 { margin: calc(-1 * var(--spacing-8)); }
.-m-10 { margin: calc(-1 * var(--spacing-10)); }
.-m-12 { margin: calc(-1 * var(--spacing-12)); }
.-m-16 { margin: calc(-1 * var(--spacing-16)); }

.-mx-1 { margin-left: calc(-1 * var(--spacing-1)); margin-right: calc(-1 * var(--spacing-1)); }
.-mx-2 { margin-left: calc(-1 * var(--spacing-2)); margin-right: calc(-1 * var(--spacing-2)); }
.-mx-3 { margin-left: calc(-1 * var(--spacing-3)); margin-right: calc(-1 * var(--spacing-3)); }
.-mx-4 { margin-left: calc(-1 * var(--spacing-4)); margin-right: calc(-1 * var(--spacing-4)); }
.-mx-5 { margin-left: calc(-1 * var(--spacing-5)); margin-right: calc(-1 * var(--spacing-5)); }
.-mx-6 { margin-left: calc(-1 * var(--spacing-6)); margin-right: calc(-1 * var(--spacing-6)); }
.-mx-8 { margin-left: calc(-1 * var(--spacing-8)); margin-right: calc(-1 * var(--spacing-8)); }
.-mx-10 { margin-left: calc(-1 * var(--spacing-10)); margin-right: calc(-1 * var(--spacing-10)); }
.-mx-12 { margin-left: calc(-1 * var(--spacing-12)); margin-right: calc(-1 * var(--spacing-12)); }
.-mx-16 { margin-left: calc(-1 * var(--spacing-16)); margin-right: calc(-1 * var(--spacing-16)); }

.-my-1 { margin-top: calc(-1 * var(--spacing-1)); margin-bottom: calc(-1 * var(--spacing-1)); }
.-my-2 { margin-top: calc(-1 * var(--spacing-2)); margin-bottom: calc(-1 * var(--spacing-2)); }
.-my-3 { margin-top: calc(-1 * var(--spacing-3)); margin-bottom: calc(-1 * var(--spacing-3)); }
.-my-4 { margin-top: calc(-1 * var(--spacing-4)); margin-bottom: calc(-1 * var(--spacing-4)); }
.-my-5 { margin-top: calc(-1 * var(--spacing-5)); margin-bottom: calc(-1 * var(--spacing-5)); }
.-my-6 { margin-top: calc(-1 * var(--spacing-6)); margin-bottom: calc(-1 * var(--spacing-6)); }
.-my-8 { margin-top: calc(-1 * var(--spacing-8)); margin-bottom: calc(-1 * var(--spacing-8)); }
.-my-10 { margin-top: calc(-1 * var(--spacing-10)); margin-bottom: calc(-1 * var(--spacing-10)); }
.-my-12 { margin-top: calc(-1 * var(--spacing-12)); margin-bottom: calc(-1 * var(--spacing-12)); }
.-my-16 { margin-top: calc(-1 * var(--spacing-16)); margin-bottom: calc(-1 * var(--spacing-16)); }

.-mt-1 { margin-top: calc(-1 * var(--spacing-1)); }
.-mt-2 { margin-top: calc(-1 * var(--spacing-2)); }
.-mt-3 { margin-top: calc(-1 * var(--spacing-3)); }
.-mt-4 { margin-top: calc(-1 * var(--spacing-4)); }
.-mt-5 { margin-top: calc(-1 * var(--spacing-5)); }
.-mt-6 { margin-top: calc(-1 * var(--spacing-6)); }
.-mt-8 { margin-top: calc(-1 * var(--spacing-8)); }
.-mt-10 { margin-top: calc(-1 * var(--spacing-10)); }
.-mt-12 { margin-top: calc(-1 * var(--spacing-12)); }
.-mt-16 { margin-top: calc(-1 * var(--spacing-16)); }

.-mr-1 { margin-right: calc(-1 * var(--spacing-1)); }
.-mr-2 { margin-right: calc(-1 * var(--spacing-2)); }
.-mr-3 { margin-right: calc(-1 * var(--spacing-3)); }
.-mr-4 { margin-right: calc(-1 * var(--spacing-4)); }
.-mr-5 { margin-right: calc(-1 * var(--spacing-5)); }
.-mr-6 { margin-right: calc(-1 * var(--spacing-6)); }
.-mr-8 { margin-right: calc(-1 * var(--spacing-8)); }
.-mr-10 { margin-right: calc(-1 * var(--spacing-10)); }
.-mr-12 { margin-right: calc(-1 * var(--spacing-12)); }
.-mr-16 { margin-right: calc(-1 * var(--spacing-16)); }

.-mb-1 { margin-bottom: calc(-1 * var(--spacing-1)); }
.-mb-2 { margin-bottom: calc(-1 * var(--spacing-2)); }
.-mb-3 { margin-bottom: calc(-1 * var(--spacing-3)); }
.-mb-4 { margin-bottom: calc(-1 * var(--spacing-4)); }
.-mb-5 { margin-bottom: calc(-1 * var(--spacing-5)); }
.-mb-6 { margin-bottom: calc(-1 * var(--spacing-6)); }
.-mb-8 { margin-bottom: calc(-1 * var(--spacing-8)); }
.-mb-10 { margin-bottom: calc(-1 * var(--spacing-10)); }
.-mb-12 { margin-bottom: calc(-1 * var(--spacing-12)); }
.-mb-16 { margin-bottom: calc(-1 * var(--spacing-16)); }

.-ml-1 { margin-left: calc(-1 * var(--spacing-1)); }
.-ml-2 { margin-left: calc(-1 * var(--spacing-2)); }
.-ml-3 { margin-left: calc(-1 * var(--spacing-3)); }
.-ml-4 { margin-left: calc(-1 * var(--spacing-4)); }
.-ml-5 { margin-left: calc(-1 * var(--spacing-5)); }
.-ml-6 { margin-left: calc(-1 * var(--spacing-6)); }
.-ml-8 { margin-left: calc(-1 * var(--spacing-8)); }
.-ml-10 { margin-left: calc(-1 * var(--spacing-10)); }
.-ml-12 { margin-left: calc(-1 * var(--spacing-12)); }
.-ml-16 { margin-left: calc(-1 * var(--spacing-16)); }

/* SPACE BETWEEN UTILITIES */
.space-x-1 > * + * { margin-left: var(--spacing-1); }
.space-x-2 > * + * { margin-left: var(--spacing-2); }
.space-x-3 > * + * { margin-left: var(--spacing-3); }
.space-x-4 > * + * { margin-left: var(--spacing-4); }
.space-x-5 > * + * { margin-left: var(--spacing-5); }
.space-x-6 > * + * { margin-left: var(--spacing-6); }
.space-x-8 > * + * { margin-left: var(--spacing-8); }

.space-y-1 > * + * { margin-top: var(--spacing-1); }
.space-y-2 > * + * { margin-top: var(--spacing-2); }
.space-y-3 > * + * { margin-top: var(--spacing-3); }
.space-y-4 > * + * { margin-top: var(--spacing-4); }
.space-y-5 > * + * { margin-top: var(--spacing-5); }
.space-y-6 > * + * { margin-top: var(--spacing-6); }
.space-y-8 > * + * { margin-top: var(--spacing-8); }

/* RESPONSIVE SPACING (Optional - uncomment if needed) */
/*
@media (min-width: 768px) {
  .md\:m-0 { margin: var(--spacing-0); }
  .md\:m-1 { margin: var(--spacing-1); }
  .md\:m-2 { margin: var(--spacing-2); }
  .md\:m-4 { margin: var(--spacing-4); }
  .md\:m-8 { margin: var(--spacing-8); }
  .md\:p-0 { padding: var(--spacing-0); }
  .md\:p-1 { padding: var(--spacing-1); }
  .md\:p-2 { padding: var(--spacing-2); }
  .md\:p-4 { padding: var(--spacing-4); }
  .md\:p-8 { padding: var(--spacing-8); }
}

@media (min-width: 1024px) {
  .lg\:m-0 { margin: var(--spacing-0); }
  .lg\:m-1 { margin: var(--spacing-1); }
  .lg\:m-2 { margin: var(--spacing-2); }
  .lg\:m-4 { margin: var(--spacing-4); }
  .lg\:m-8 { margin: var(--spacing-8); }
  .lg\:p-0 { padding: var(--spacing-0); }
  .lg\:p-1 { padding: var(--spacing-1); }
  .lg\:p-2 { padding: var(--spacing-2); }
  .lg\:p-4 { padding: var(--spacing-4); }
  .lg\:p-8 { padding: var(--spacing-8); }
}
*/