/**
 * MOLLE Design System — Spacing Foundation
 * Grid Basis: 4px mathematical scale for modular layout alignments
 */

:root {
  /* Layout Spacing Scale (in px) */
  --molle-space-xs: 4px;      /* Micro padding / badges */
  --molle-space-sm: 8px;      /* Gap between badges and headings */
  --molle-space-md: 12px;     /* Small component stack margin */
  --molle-space-lg: 16px;     /* Text blocks & tight columns spacing */
  --molle-space-xl: 24px;     /* Spacing between headers, subheadings, and CTAs */
  --molle-space-2xl: 32px;    /* Internal card & column container padding */
  --molle-space-3xl: 48px;    /* Margins between major content groups */
  --molle-space-4xl: 64px;    /* Mobile section vertical paddings */
  --molle-space-5xl: 96px;    /* Desktop section vertical paddings */
}

/* Margin Utilities */
.m-xs { margin: var(--molle-space-xs) !important; }
.m-sm { margin: var(--molle-space-sm) !important; }
.m-md { margin: var(--molle-space-md) !important; }
.m-lg { margin: var(--molle-space-lg) !important; }
.m-xl { margin: var(--molle-space-xl) !important; }
.m-2xl { margin: var(--molle-space-2xl) !important; }
.m-3xl { margin: var(--molle-space-3xl) !important; }

/* Namespaced Margin Utilities */
.molle-u-m-xs { margin: var(--molle-space-xs) !important; }
.molle-u-m-sm { margin: var(--molle-space-sm) !important; }
.molle-u-m-md { margin: var(--molle-space-md) !important; }
.molle-u-m-lg { margin: var(--molle-space-lg) !important; }
.molle-u-m-xl { margin: var(--molle-space-xl) !important; }
.molle-u-m-2xl { margin: var(--molle-space-2xl) !important; }
.molle-u-m-3xl { margin: var(--molle-space-3xl) !important; }

/* Vertical Margin Stack Utilities (Flow Margin) */
.mt-xs { margin-top: var(--molle-space-xs) !important; }
.mt-sm { margin-top: var(--molle-space-sm) !important; }
.mt-md { margin-top: var(--molle-space-md) !important; }
.mt-lg { margin-top: var(--molle-space-lg) !important; }
.mt-xl { margin-top: var(--molle-space-xl) !important; }
.mt-2xl { margin-top: var(--molle-space-2xl) !important; }
.mt-3xl { margin-top: var(--molle-space-3xl) !important; }

/* Namespaced Vertical Margin Stack Utilities */
.molle-u-mt-xs { margin-top: var(--molle-space-xs) !important; }
.molle-u-mt-sm { margin-top: var(--molle-space-sm) !important; }
.molle-u-mt-md { margin-top: var(--molle-space-md) !important; }
.molle-u-mt-lg { margin-top: var(--molle-space-lg) !important; }
.molle-u-mt-xl { margin-top: var(--molle-space-xl) !important; }
.molle-u-mt-2xl { margin-top: var(--molle-space-2xl) !important; }
.molle-u-mt-3xl { margin-top: var(--molle-space-3xl) !important; }

.mb-xs { margin-bottom: var(--molle-space-xs) !important; }
.mb-sm { margin-bottom: var(--molle-space-sm) !important; }
.mb-md { margin-bottom: var(--molle-space-md) !important; }
.mb-lg { margin-bottom: var(--molle-space-lg) !important; }
.mb-xl { margin-bottom: var(--molle-space-xl) !important; }
.mb-2xl { margin-bottom: var(--molle-space-2xl) !important; }
.mb-3xl { margin-bottom: var(--molle-space-3xl) !important; }

/* Namespaced Vertical Margin Stack Utilities */
.molle-u-mb-xs { margin-bottom: var(--molle-space-xs) !important; }
.molle-u-mb-sm { margin-bottom: var(--molle-space-sm) !important; }
.molle-u-mb-md { margin-bottom: var(--molle-space-md) !important; }
.molle-u-mb-lg { margin-bottom: var(--molle-space-lg) !important; }
.molle-u-mb-xl { margin-bottom: var(--molle-space-xl) !important; }
.molle-u-mb-2xl { margin-bottom: var(--molle-space-2xl) !important; }
.molle-u-mb-3xl { margin-bottom: var(--molle-space-3xl) !important; }

/* Padding Utilities */
.p-xs { padding: var(--molle-space-xs) !important; }
.p-sm { padding: var(--molle-space-sm) !important; }
.p-md { padding: var(--molle-space-md) !important; }
.p-lg { padding: var(--molle-space-lg) !important; }
.p-xl { padding: var(--molle-space-xl) !important; }
.p-2xl { padding: var(--molle-space-2xl) !important; }
.p-3xl { padding: var(--molle-space-3xl) !important; }

/* Namespaced Padding Utilities */
.molle-u-p-xs { padding: var(--molle-space-xs) !important; }
.molle-u-p-sm { padding: var(--molle-space-sm) !important; }
.molle-u-p-md { padding: var(--molle-space-md) !important; }
.molle-u-p-lg { padding: var(--molle-space-lg) !important; }
.molle-u-p-xl { padding: var(--molle-space-xl) !important; }
.molle-u-p-2xl { padding: var(--molle-space-2xl) !important; }
.molle-u-p-3xl { padding: var(--molle-space-3xl) !important; }

/* Vertical and Horizontal Padding Utilities */
.py-xs { padding-top: var(--molle-space-xs) !important; padding-bottom: var(--molle-space-xs) !important; }
.py-sm { padding-top: var(--molle-space-sm) !important; padding-bottom: var(--molle-space-sm) !important; }
.py-md { padding-top: var(--molle-space-md) !important; padding-bottom: var(--molle-space-md) !important; }
.py-lg { padding-top: var(--molle-space-lg) !important; padding-bottom: var(--molle-space-lg) !important; }
.py-xl { padding-top: var(--molle-space-xl) !important; padding-bottom: var(--molle-space-xl) !important; }
.py-2xl { padding-top: var(--molle-space-2xl) !important; padding-bottom: var(--molle-space-2xl) !important; }
.py-3xl { padding-top: var(--molle-space-3xl) !important; padding-bottom: var(--molle-space-3xl) !important; }
.py-4xl { padding-top: var(--molle-space-4xl) !important; padding-bottom: var(--molle-space-4xl) !important; }
.py-5xl { padding-top: var(--molle-space-5xl) !important; padding-bottom: var(--molle-space-5xl) !important; }

/* Namespaced Vertical Padding Utilities */
.molle-u-py-xs { padding-top: var(--molle-space-xs) !important; padding-bottom: var(--molle-space-xs) !important; }
.molle-u-py-sm { padding-top: var(--molle-space-sm) !important; padding-bottom: var(--molle-space-sm) !important; }
.molle-u-py-md { padding-top: var(--molle-space-md) !important; padding-bottom: var(--molle-space-md) !important; }
.molle-u-py-lg { padding-top: var(--molle-space-lg) !important; padding-bottom: var(--molle-space-lg) !important; }
.molle-u-py-xl { padding-top: var(--molle-space-xl) !important; padding-bottom: var(--molle-space-xl) !important; }
.molle-u-py-2xl { padding-top: var(--molle-space-2xl) !important; padding-bottom: var(--molle-space-2xl) !important; }
.molle-u-py-3xl { padding-top: var(--molle-space-3xl) !important; padding-bottom: var(--molle-space-3xl) !important; }
.molle-u-py-4xl { padding-top: var(--molle-space-4xl) !important; padding-bottom: var(--molle-space-4xl) !important; }
.molle-u-py-5xl { padding-top: var(--molle-space-5xl) !important; padding-bottom: var(--molle-space-5xl) !important; }

.px-xs { padding-left: var(--molle-space-xs) !important; padding-right: var(--molle-space-xs) !important; }
.px-sm { padding-left: var(--molle-space-sm) !important; padding-right: var(--molle-space-sm) !important; }
.px-md { padding-left: var(--molle-space-md) !important; padding-right: var(--molle-space-md) !important; }
.px-lg { padding-left: var(--molle-space-lg) !important; padding-right: var(--molle-space-lg) !important; }
.px-xl { padding-left: var(--molle-space-xl) !important; padding-right: var(--molle-space-xl) !important; }
.px-2xl { padding-left: var(--molle-space-2xl) !important; padding-right: var(--molle-space-2xl) !important; }
.px-3xl { padding-left: var(--molle-space-3xl) !important; padding-right: var(--molle-space-3xl) !important; }

/* Namespaced Horizontal Padding Utilities */
.molle-u-px-xs { padding-left: var(--molle-space-xs) !important; padding-right: var(--molle-space-xs) !important; }
.molle-u-px-sm { padding-left: var(--molle-space-sm) !important; padding-right: var(--molle-space-sm) !important; }
.molle-u-px-md { padding-left: var(--molle-space-md) !important; padding-right: var(--molle-space-md) !important; }
.molle-u-px-lg { padding-left: var(--molle-space-lg) !important; padding-right: var(--molle-space-lg) !important; }
.molle-u-px-xl { padding-left: var(--molle-space-xl) !important; padding-right: var(--molle-space-xl) !important; }
.molle-u-px-2xl { padding-left: var(--molle-space-2xl) !important; padding-right: var(--molle-space-2xl) !important; }
.molle-u-px-3xl { padding-left: var(--molle-space-3xl) !important; padding-right: var(--molle-space-3xl) !important; }