/* --------------------------------------------------
   IMEXUM Spacing Utilities
   Bootstrap-like margin, padding, gap helpers
   Uses logical properties for better LTR/RTL support
-------------------------------------------------- */

:root {
  --spacer-0: 0;
  --spacer-1: 0.25rem;  /* 4px */
  --spacer-2: 0.5rem;   /* 8px */
  --spacer-3: 1rem;     /* 16px */
  --spacer-4: 1.5rem;   /* 24px */
  --spacer-5: 3rem;     /* 48px */
  --spacer-6: 4.5rem;   /* 72px */
  --spacer-7: 6rem;     /* 96px */
}

/* -------------------------
   Margin
------------------------- */

.m-0 { margin: var(--spacer-0) !important; }
.m-1 { margin: var(--spacer-1) !important; }
.m-2 { margin: var(--spacer-2) !important; }
.m-3 { margin: var(--spacer-3) !important; }
.m-4 { margin: var(--spacer-4) !important; }
.m-5 { margin: var(--spacer-5) !important; }
.m-6 { margin: var(--spacer-6) !important; }
.m-7 { margin: var(--spacer-7) !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: var(--spacer-0) !important; }
.mt-1 { margin-top: var(--spacer-1) !important; }
.mt-2 { margin-top: var(--spacer-2) !important; }
.mt-3 { margin-top: var(--spacer-3) !important; }
.mt-4 { margin-top: var(--spacer-4) !important; }
.mt-5 { margin-top: var(--spacer-5) !important; }
.mt-6 { margin-top: var(--spacer-6) !important; }
.mt-7 { margin-top: var(--spacer-7) !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: var(--spacer-0) !important; }
.mb-1 { margin-bottom: var(--spacer-1) !important; }
.mb-2 { margin-bottom: var(--spacer-2) !important; }
.mb-3 { margin-bottom: var(--spacer-3) !important; }
.mb-4 { margin-bottom: var(--spacer-4) !important; }
.mb-5 { margin-bottom: var(--spacer-5) !important; }
.mb-6 { margin-bottom: var(--spacer-6) !important; }
.mb-7 { margin-bottom: var(--spacer-7) !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-inline-start: var(--spacer-0) !important; }
.ms-1 { margin-inline-start: var(--spacer-1) !important; }
.ms-2 { margin-inline-start: var(--spacer-2) !important; }
.ms-3 { margin-inline-start: var(--spacer-3) !important; }
.ms-4 { margin-inline-start: var(--spacer-4) !important; }
.ms-5 { margin-inline-start: var(--spacer-5) !important; }
.ms-6 { margin-inline-start: var(--spacer-6) !important; }
.ms-7 { margin-inline-start: var(--spacer-7) !important; }
.ms-auto { margin-inline-start: auto !important; }

.me-0 { margin-inline-end: var(--spacer-0) !important; }
.me-1 { margin-inline-end: var(--spacer-1) !important; }
.me-2 { margin-inline-end: var(--spacer-2) !important; }
.me-3 { margin-inline-end: var(--spacer-3) !important; }
.me-4 { margin-inline-end: var(--spacer-4) !important; }
.me-5 { margin-inline-end: var(--spacer-5) !important; }
.me-6 { margin-inline-end: var(--spacer-6) !important; }
.me-7 { margin-inline-end: var(--spacer-7) !important; }
.me-auto { margin-inline-end: auto !important; }

.mx-0 {
  margin-inline-start: var(--spacer-0) !important;
  margin-inline-end: var(--spacer-0) !important;
}

.mx-1 {
  margin-inline-start: var(--spacer-1) !important;
  margin-inline-end: var(--spacer-1) !important;
}

.mx-2 {
  margin-inline-start: var(--spacer-2) !important;
  margin-inline-end: var(--spacer-2) !important;
}

.mx-3 {
  margin-inline-start: var(--spacer-3) !important;
  margin-inline-end: var(--spacer-3) !important;
}

.mx-4 {
  margin-inline-start: var(--spacer-4) !important;
  margin-inline-end: var(--spacer-4) !important;
}

.mx-5 {
  margin-inline-start: var(--spacer-5) !important;
  margin-inline-end: var(--spacer-5) !important;
}

.mx-6 {
  margin-inline-start: var(--spacer-6) !important;
  margin-inline-end: var(--spacer-6) !important;
}

.mx-7 {
  margin-inline-start: var(--spacer-7) !important;
  margin-inline-end: var(--spacer-7) !important;
}

.mx-auto {
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}

.my-0 {
  margin-top: var(--spacer-0) !important;
  margin-bottom: var(--spacer-0) !important;
}

.my-1 {
  margin-top: var(--spacer-1) !important;
  margin-bottom: var(--spacer-1) !important;
}

.my-2 {
  margin-top: var(--spacer-2) !important;
  margin-bottom: var(--spacer-2) !important;
}

.my-3 {
  margin-top: var(--spacer-3) !important;
  margin-bottom: var(--spacer-3) !important;
}

.my-4 {
  margin-top: var(--spacer-4) !important;
  margin-bottom: var(--spacer-4) !important;
}

.my-5 {
  margin-top: var(--spacer-5) !important;
  margin-bottom: var(--spacer-5) !important;
}

.my-6 {
  margin-top: var(--spacer-6) !important;
  margin-bottom: var(--spacer-6) !important;
}

.my-7 {
  margin-top: var(--spacer-7) !important;
  margin-bottom: var(--spacer-7) !important;
}

/* -------------------------
   Padding
------------------------- */

.p-0 { padding: var(--spacer-0) !important; }
.p-1 { padding: var(--spacer-1) !important; }
.p-2 { padding: var(--spacer-2) !important; }
.p-3 { padding: var(--spacer-3) !important; }
.p-4 { padding: var(--spacer-4) !important; }
.p-5 { padding: var(--spacer-5) !important; }
.p-6 { padding: var(--spacer-6) !important; }
.p-7 { padding: var(--spacer-7) !important; }

.pt-0 { padding-top: var(--spacer-0) !important; }
.pt-1 { padding-top: var(--spacer-1) !important; }
.pt-2 { padding-top: var(--spacer-2) !important; }
.pt-3 { padding-top: var(--spacer-3) !important; }
.pt-4 { padding-top: var(--spacer-4) !important; }
.pt-5 { padding-top: var(--spacer-5) !important; }
.pt-6 { padding-top: var(--spacer-6) !important; }
.pt-7 { padding-top: var(--spacer-7) !important; }

.pb-0 { padding-bottom: var(--spacer-0) !important; }
.pb-1 { padding-bottom: var(--spacer-1) !important; }
.pb-2 { padding-bottom: var(--spacer-2) !important; }
.pb-3 { padding-bottom: var(--spacer-3) !important; }
.pb-4 { padding-bottom: var(--spacer-4) !important; }
.pb-5 { padding-bottom: var(--spacer-5) !important; }
.pb-6 { padding-bottom: var(--spacer-6) !important; }
.pb-7 { padding-bottom: var(--spacer-7) !important; }

.ps-0 { padding-inline-start: var(--spacer-0) !important; }
.ps-1 { padding-inline-start: var(--spacer-1) !important; }
.ps-2 { padding-inline-start: var(--spacer-2) !important; }
.ps-3 { padding-inline-start: var(--spacer-3) !important; }
.ps-4 { padding-inline-start: var(--spacer-4) !important; }
.ps-5 { padding-inline-start: var(--spacer-5) !important; }
.ps-6 { padding-inline-start: var(--spacer-6) !important; }
.ps-7 { padding-inline-start: var(--spacer-7) !important; }

.pe-0 { padding-inline-end: var(--spacer-0) !important; }
.pe-1 { padding-inline-end: var(--spacer-1) !important; }
.pe-2 { padding-inline-end: var(--spacer-2) !important; }
.pe-3 { padding-inline-end: var(--spacer-3) !important; }
.pe-4 { padding-inline-end: var(--spacer-4) !important; }
.pe-5 { padding-inline-end: var(--spacer-5) !important; }
.pe-6 { padding-inline-end: var(--spacer-6) !important; }
.pe-7 { padding-inline-end: var(--spacer-7) !important; }

.px-0 {
  padding-inline-start: var(--spacer-0) !important;
  padding-inline-end: var(--spacer-0) !important;
}

.px-1 {
  padding-inline-start: var(--spacer-1) !important;
  padding-inline-end: var(--spacer-1) !important;
}

.px-2 {
  padding-inline-start: var(--spacer-2) !important;
  padding-inline-end: var(--spacer-2) !important;
}

.px-3 {
  padding-inline-start: var(--spacer-3) !important;
  padding-inline-end: var(--spacer-3) !important;
}

.px-4 {
  padding-inline-start: var(--spacer-4) !important;
  padding-inline-end: var(--spacer-4) !important;
}

.px-5 {
  padding-inline-start: var(--spacer-5) !important;
  padding-inline-end: var(--spacer-5) !important;
}

.px-6 {
  padding-inline-start: var(--spacer-6) !important;
  padding-inline-end: var(--spacer-6) !important;
}

.px-7 {
  padding-inline-start: var(--spacer-7) !important;
  padding-inline-end: var(--spacer-7) !important;
}

.py-0 {
  padding-top: var(--spacer-0) !important;
  padding-bottom: var(--spacer-0) !important;
}

.py-1 {
  padding-top: var(--spacer-1) !important;
  padding-bottom: var(--spacer-1) !important;
}

.py-2 {
  padding-top: var(--spacer-2) !important;
  padding-bottom: var(--spacer-2) !important;
}

.py-3 {
  padding-top: var(--spacer-3) !important;
  padding-bottom: var(--spacer-3) !important;
}

.py-4 {
  padding-top: var(--spacer-4) !important;
  padding-bottom: var(--spacer-4) !important;
}

.py-5 {
  padding-top: var(--spacer-5) !important;
  padding-bottom: var(--spacer-5) !important;
}

.py-6 {
  padding-top: var(--spacer-6) !important;
  padding-bottom: var(--spacer-6) !important;
}

.py-7 {
  padding-top: var(--spacer-7) !important;
  padding-bottom: var(--spacer-7) !important;
}

/* -------------------------
   Gap Utilities
------------------------- */

.gap-0 { gap: var(--spacer-0) !important; }
.gap-1 { gap: var(--spacer-1) !important; }
.gap-2 { gap: var(--spacer-2) !important; }
.gap-3 { gap: var(--spacer-3) !important; }
.gap-4 { gap: var(--spacer-4) !important; }
.gap-5 { gap: var(--spacer-5) !important; }
.gap-6 { gap: var(--spacer-6) !important; }
.gap-7 { gap: var(--spacer-7) !important; }

.row-gap-0 { row-gap: var(--spacer-0) !important; }
.row-gap-1 { row-gap: var(--spacer-1) !important; }
.row-gap-2 { row-gap: var(--spacer-2) !important; }
.row-gap-3 { row-gap: var(--spacer-3) !important; }
.row-gap-4 { row-gap: var(--spacer-4) !important; }
.row-gap-5 { row-gap: var(--spacer-5) !important; }
.row-gap-6 { row-gap: var(--spacer-6) !important; }
.row-gap-7 { row-gap: var(--spacer-7) !important; }

.column-gap-0 { column-gap: var(--spacer-0) !important; }
.column-gap-1 { column-gap: var(--spacer-1) !important; }
.column-gap-2 { column-gap: var(--spacer-2) !important; }
.column-gap-3 { column-gap: var(--spacer-3) !important; }
.column-gap-4 { column-gap: var(--spacer-4) !important; }
.column-gap-5 { column-gap: var(--spacer-5) !important; }
.column-gap-6 { column-gap: var(--spacer-6) !important; }
.column-gap-7 { column-gap: var(--spacer-7) !important; }

/* -------------------------
   Section Spacing Helpers
------------------------- */

.section-sm {
  padding-top: var(--spacer-5) !important;
  padding-bottom: var(--spacer-5) !important;
}

.section-md {
  padding-top: var(--spacer-6) !important;
  padding-bottom: var(--spacer-6) !important;
}

.section-lg {
  padding-top: var(--spacer-7) !important;
  padding-bottom: var(--spacer-7) !important;
}

/* -------------------------
   Responsive Adjustments
------------------------- */

@media (max-width: 768px) {
  :root {
    --spacer-5: 2.25rem;
    --spacer-6: 3rem;
    --spacer-7: 4rem;
  }

  .section-sm {
    padding-top: var(--spacer-4) !important;
    padding-bottom: var(--spacer-4) !important;
  }

  .section-md,
  .section-lg {
    padding-top: var(--spacer-5) !important;
    padding-bottom: var(--spacer-5) !important;
  }
}