// ==========================================================================
// SPACING UTILITIES
// ==========================================================================
// Utility classes for margin and padding
// Uses CSS custom properties for consistent spacing scale
// ==========================================================================

// SPACING SCALE - Using base design tokens
:root {
  --space-0: #{$base-spacing-0};
  --space-1: #{$base-spacing-1};
  --space-2: #{$base-spacing-2};
  --space-3: #{$base-spacing-3};
  --space-4: #{$base-spacing-4};
  --space-5: #{$base-spacing-5};
  --space-6: #{$base-spacing-6};
  --space-7: #{$base-spacing-7};
  --space-8: #{$base-spacing-8};
  --space-9: #{$base-spacing-9};
  --space-10: #{$base-spacing-10};
  --space-11: #{$base-spacing-11};
  --space-12: #{$base-spacing-12};
  --space-14: #{$base-spacing-14};
  --space-16: #{$base-spacing-16};
  --space-20: #{$base-spacing-20};
  --space-24: #{$base-spacing-24};
  --space-28: #{$base-spacing-28};
  --space-32: #{$base-spacing-32};
  --space-36: #{$base-spacing-36};
  --space-40: #{$base-spacing-40};
  --space-44: #{$base-spacing-44};
  --space-48: #{$base-spacing-48};
  --space-52: #{$base-spacing-52};
  --space-56: #{$base-spacing-56};
  --space-60: #{$base-spacing-60};
  --space-64: #{$base-spacing-64};
  --space-72: #{$base-spacing-72};
  --space-80: #{$base-spacing-80};
  --space-96: #{$base-spacing-96};
  
  // Negative spacing
  --space--1: -#{$base-spacing-1};
  --space--2: -#{$base-spacing-2};
  --space--3: -#{$base-spacing-3};
  --space--4: -#{$base-spacing-4};
  --space--5: -#{$base-spacing-5};
  --space--6: -#{$base-spacing-6};
  --space--7: -#{$base-spacing-7};
  --space--8: -#{$base-spacing-8};
  --space--9: -#{$base-spacing-9};
  --space--10: -#{$base-spacing-10};
  --space--11: -#{$base-spacing-11};
  --space--12: -#{$base-spacing-12};
  --space--14: -#{$base-spacing-14};
  --space--16: -#{$base-spacing-16};
  --space--20: -#{$base-spacing-20};
  --space--24: -#{$base-spacing-24};
  --space--28: -#{$base-spacing-28};
  --space--32: -#{$base-spacing-32};
}

// MARGIN UTILITIES
// All margins
.m-0 { margin: var(--space-0) !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-7 { margin: var(--space-7) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-9 { margin: var(--space-9) !important; }
.m-10 { margin: var(--space-10) !important; }
.m-11 { margin: var(--space-11) !important; }
.m-12 { margin: var(--space-12) !important; }
.m-14 { margin: var(--space-14) !important; }
.m-16 { margin: var(--space-16) !important; }
.m-20 { margin: var(--space-20) !important; }
.m-24 { margin: var(--space-24) !important; }
.m-28 { margin: var(--space-28) !important; }
.m-32 { margin: var(--space-32) !important; }
.m-36 { margin: var(--space-36) !important; }
.m-40 { margin: var(--space-40) !important; }
.m-44 { margin: var(--space-44) !important; }
.m-48 { margin: var(--space-48) !important; }
.m-52 { margin: var(--space-52) !important; }
.m-56 { margin: var(--space-56) !important; }
.m-60 { margin: var(--space-60) !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; }

// Auto margin
.m-auto { margin: auto !important; }

// Negative margins
.m-n1 { margin: var(--space--1) !important; }
.m-n2 { margin: var(--space--2) !important; }
.m-n3 { margin: var(--space--3) !important; }
.m-n4 { margin: var(--space--4) !important; }
.m-n5 { margin: var(--space--5) !important; }
.m-n6 { margin: var(--space--6) !important; }
.m-n8 { margin: var(--space--8) !important; }
.m-n10 { margin: var(--space--10) !important; }
.m-n12 { margin: var(--space--12) !important; }
.m-n16 { margin: var(--space--16) !important; }
.m-n20 { margin: var(--space--20) !important; }
.m-n24 { margin: var(--space--24) !important; }

// Margin X (horizontal)
.mx-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.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-auto { margin-left: auto !important; margin-right: auto !important; }

// Margin Y (vertical)
.my-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !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-auto { margin-top: auto !important; margin-bottom: auto !important; }

// Individual margins
.mt-0 { margin-top: var(--space-0) !important; }
.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-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: var(--space-0) !important; }
.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-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: var(--space-0) !important; }
.ms-1 { margin-left: var(--space-1) !important; }
.ms-2 { margin-left: var(--space-2) !important; }
.ms-3 { margin-left: var(--space-3) !important; }
.ms-4 { margin-left: var(--space-4) !important; }
.ms-5 { margin-left: var(--space-5) !important; }
.ms-6 { margin-left: var(--space-6) !important; }
.ms-8 { margin-left: var(--space-8) !important; }
.ms-10 { margin-left: var(--space-10) !important; }
.ms-12 { margin-left: var(--space-12) !important; }
.ms-16 { margin-left: var(--space-16) !important; }
.ms-20 { margin-left: var(--space-20) !important; }
.ms-24 { margin-left: var(--space-24) !important; }
.ms-32 { margin-left: var(--space-32) !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: var(--space-0) !important; }
.me-1 { margin-right: var(--space-1) !important; }
.me-2 { margin-right: var(--space-2) !important; }
.me-3 { margin-right: var(--space-3) !important; }
.me-4 { margin-right: var(--space-4) !important; }
.me-5 { margin-right: var(--space-5) !important; }
.me-6 { margin-right: var(--space-6) !important; }
.me-8 { margin-right: var(--space-8) !important; }
.me-10 { margin-right: var(--space-10) !important; }
.me-12 { margin-right: var(--space-12) !important; }
.me-16 { margin-right: var(--space-16) !important; }
.me-20 { margin-right: var(--space-20) !important; }
.me-24 { margin-right: var(--space-24) !important; }
.me-32 { margin-right: var(--space-32) !important; }
.me-auto { margin-right: auto !important; }

// PADDING UTILITIES
// All padding
.p-0 { padding: var(--space-0) !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-7 { padding: var(--space-7) !important; }
.p-8 { padding: var(--space-8) !important; }
.p-9 { padding: var(--space-9) !important; }
.p-10 { padding: var(--space-10) !important; }
.p-11 { padding: var(--space-11) !important; }
.p-12 { padding: var(--space-12) !important; }
.p-14 { padding: var(--space-14) !important; }
.p-16 { padding: var(--space-16) !important; }
.p-20 { padding: var(--space-20) !important; }
.p-24 { padding: var(--space-24) !important; }
.p-28 { padding: var(--space-28) !important; }
.p-32 { padding: var(--space-32) !important; }
.p-36 { padding: var(--space-36) !important; }
.p-40 { padding: var(--space-40) !important; }
.p-44 { padding: var(--space-44) !important; }
.p-48 { padding: var(--space-48) !important; }

// Padding X (horizontal)
.px-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.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; }

// Padding Y (vertical)
.py-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.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; }

// Individual padding
.pt-0 { padding-top: var(--space-0) !important; }
.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; }

.pb-0 { padding-bottom: var(--space-0) !important; }
.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; }

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

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

// GAP UTILITIES (for flexbox and grid)
.gap-0 { gap: var(--space-0) !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.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-x-0 { column-gap: var(--space-0) !important; }
.gap-x-1 { column-gap: var(--space-1) !important; }
.gap-x-2 { column-gap: var(--space-2) !important; }
.gap-x-3 { column-gap: var(--space-3) !important; }
.gap-x-4 { column-gap: var(--space-4) !important; }
.gap-x-5 { column-gap: var(--space-5) !important; }
.gap-x-6 { column-gap: var(--space-6) !important; }
.gap-x-8 { column-gap: var(--space-8) !important; }
.gap-x-10 { column-gap: var(--space-10) !important; }
.gap-x-12 { column-gap: var(--space-12) !important; }
.gap-x-16 { column-gap: var(--space-16) !important; }
.gap-x-20 { column-gap: var(--space-20) !important; }
.gap-x-24 { column-gap: var(--space-24) !important; }
.gap-x-32 { column-gap: var(--space-32) !important; }

.gap-y-0 { row-gap: var(--space-0) !important; }
.gap-y-1 { row-gap: var(--space-1) !important; }
.gap-y-2 { row-gap: var(--space-2) !important; }
.gap-y-3 { row-gap: var(--space-3) !important; }
.gap-y-4 { row-gap: var(--space-4) !important; }
.gap-y-5 { row-gap: var(--space-5) !important; }
.gap-y-6 { row-gap: var(--space-6) !important; }
.gap-y-8 { row-gap: var(--space-8) !important; }
.gap-y-10 { row-gap: var(--space-10) !important; }
.gap-y-12 { row-gap: var(--space-12) !important; }
.gap-y-16 { row-gap: var(--space-16) !important; }
.gap-y-20 { row-gap: var(--space-20) !important; }
.gap-y-24 { row-gap: var(--space-24) !important; }
.gap-y-32 { row-gap: var(--space-32) !important; }

// RESPONSIVE SPACING UTILITIES
@media (min-width: 576px) {
  .m-sm-0 { margin: var(--space-0) !important; }
  .m-sm-1 { margin: var(--space-1) !important; }
  .m-sm-2 { margin: var(--space-2) !important; }
  .m-sm-3 { margin: var(--space-3) !important; }
  .m-sm-4 { margin: var(--space-4) !important; }
  .m-sm-6 { margin: var(--space-6) !important; }
  .m-sm-8 { margin: var(--space-8) !important; }
  .m-sm-12 { margin: var(--space-12) !important; }
  .m-sm-16 { margin: var(--space-16) !important; }
  .m-sm-20 { margin: var(--space-20) !important; }
  .m-sm-24 { margin: var(--space-24) !important; }
  
  .p-sm-0 { padding: var(--space-0) !important; }
  .p-sm-1 { padding: var(--space-1) !important; }
  .p-sm-2 { padding: var(--space-2) !important; }
  .p-sm-3 { padding: var(--space-3) !important; }
  .p-sm-4 { padding: var(--space-4) !important; }
  .p-sm-6 { padding: var(--space-6) !important; }
  .p-sm-8 { padding: var(--space-8) !important; }
  .p-sm-12 { padding: var(--space-12) !important; }
  .p-sm-16 { padding: var(--space-16) !important; }
  .p-sm-20 { padding: var(--space-20) !important; }
  .p-sm-24 { padding: var(--space-24) !important; }
}

@media (min-width: 768px) {
  .m-md-0 { margin: var(--space-0) !important; }
  .m-md-1 { margin: var(--space-1) !important; }
  .m-md-2 { margin: var(--space-2) !important; }
  .m-md-3 { margin: var(--space-3) !important; }
  .m-md-4 { margin: var(--space-4) !important; }
  .m-md-6 { margin: var(--space-6) !important; }
  .m-md-8 { margin: var(--space-8) !important; }
  .m-md-12 { margin: var(--space-12) !important; }
  .m-md-16 { margin: var(--space-16) !important; }
  .m-md-20 { margin: var(--space-20) !important; }
  .m-md-24 { margin: var(--space-24) !important; }
  
  .p-md-0 { padding: var(--space-0) !important; }
  .p-md-1 { padding: var(--space-1) !important; }
  .p-md-2 { padding: var(--space-2) !important; }
  .p-md-3 { padding: var(--space-3) !important; }
  .p-md-4 { padding: var(--space-4) !important; }
  .p-md-6 { padding: var(--space-6) !important; }
  .p-md-8 { padding: var(--space-8) !important; }
  .p-md-12 { padding: var(--space-12) !important; }
  .p-md-16 { padding: var(--space-16) !important; }
  .p-md-20 { padding: var(--space-20) !important; }
  .p-md-24 { padding: var(--space-24) !important; }
}

@media (min-width: 992px) {
  .m-lg-0 { margin: var(--space-0) !important; }
  .m-lg-1 { margin: var(--space-1) !important; }
  .m-lg-2 { margin: var(--space-2) !important; }
  .m-lg-3 { margin: var(--space-3) !important; }
  .m-lg-4 { margin: var(--space-4) !important; }
  .m-lg-6 { margin: var(--space-6) !important; }
  .m-lg-8 { margin: var(--space-8) !important; }
  .m-lg-12 { margin: var(--space-12) !important; }
  .m-lg-16 { margin: var(--space-16) !important; }
  .m-lg-20 { margin: var(--space-20) !important; }
  .m-lg-24 { margin: var(--space-24) !important; }
  
  .p-lg-0 { padding: var(--space-0) !important; }
  .p-lg-1 { padding: var(--space-1) !important; }
  .p-lg-2 { padding: var(--space-2) !important; }
  .p-lg-3 { padding: var(--space-3) !important; }
  .p-lg-4 { padding: var(--space-4) !important; }
  .p-lg-6 { padding: var(--space-6) !important; }
  .p-lg-8 { padding: var(--space-8) !important; }
  .p-lg-12 { padding: var(--space-12) !important; }
  .p-lg-16 { padding: var(--space-16) !important; }
  .p-lg-20 { padding: var(--space-20) !important; }
  .p-lg-24 { padding: var(--space-24) !important; }
}