/**
 * Spacing Utilities
 * Comprehensive spacing classes using design system variables
 */

/* ===== PADDING UTILITIES ===== */

/* All sides */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-xxl { padding: var(--spacing-xxl) !important; }

/* Top */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }
.pt-xxl { padding-top: var(--spacing-xxl) !important; }

/* Right */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--spacing-xs) !important; }
.pr-sm { padding-right: var(--spacing-sm) !important; }
.pr-md { padding-right: var(--spacing-md) !important; }
.pr-lg { padding-right: var(--spacing-lg) !important; }
.pr-xl { padding-right: var(--spacing-xl) !important; }
.pr-xxl { padding-right: var(--spacing-xxl) !important; }

/* Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-xxl { padding-bottom: var(--spacing-xxl) !important; }

/* Left */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--spacing-xs) !important; }
.pl-sm { padding-left: var(--spacing-sm) !important; }
.pl-md { padding-left: var(--spacing-md) !important; }
.pl-lg { padding-left: var(--spacing-lg) !important; }
.pl-xl { padding-left: var(--spacing-xl) !important; }
.pl-xxl { padding-left: var(--spacing-xxl) !important; }

/* Horizontal (left + right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-xxl { padding-left: var(--spacing-xxl) !important; padding-right: var(--spacing-xxl) !important; }

/* Vertical (top + bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-xxl { padding-top: var(--spacing-xxl) !important; padding-bottom: var(--spacing-xxl) !important; }

/* ===== MARGIN UTILITIES ===== */

/* All sides */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-xxl { margin: var(--spacing-xxl) !important; }
.m-auto { margin: auto !important; }

/* Top */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-xxl { margin-top: var(--spacing-xxl) !important; }
.mt-auto { margin-top: auto !important; }

/* Right */
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--spacing-xs) !important; }
.mr-sm { margin-right: var(--spacing-sm) !important; }
.mr-md { margin-right: var(--spacing-md) !important; }
.mr-lg { margin-right: var(--spacing-lg) !important; }
.mr-xl { margin-right: var(--spacing-xl) !important; }
.mr-xxl { margin-right: var(--spacing-xxl) !important; }
.mr-auto { margin-right: auto !important; }

/* Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-xxl { margin-bottom: var(--spacing-xxl) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Left */
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-sm { margin-left: var(--spacing-sm) !important; }
.ml-md { margin-left: var(--spacing-md) !important; }
.ml-lg { margin-left: var(--spacing-lg) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }
.ml-xxl { margin-left: var(--spacing-xxl) !important; }
.ml-auto { margin-left: auto !important; }

/* Horizontal (left + right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-xxl { margin-left: var(--spacing-xxl) !important; margin-right: var(--spacing-xxl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Vertical (top + bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-xxl { margin-top: var(--spacing-xxl) !important; margin-bottom: var(--spacing-xxl) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* ===== GAP UTILITIES (for flexbox/grid) ===== */
.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-sm { gap: var(--spacing-sm) !important; }
.gap-md { gap: var(--spacing-md) !important; }
.gap-lg { gap: var(--spacing-lg) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }
.gap-xxl { gap: var(--spacing-xxl) !important; }

/* Row gap */
.row-gap-0 { row-gap: 0 !important; }
.row-gap-xs { row-gap: var(--spacing-xs) !important; }
.row-gap-sm { row-gap: var(--spacing-sm) !important; }
.row-gap-md { row-gap: var(--spacing-md) !important; }
.row-gap-lg { row-gap: var(--spacing-lg) !important; }
.row-gap-xl { row-gap: var(--spacing-xl) !important; }
.row-gap-xxl { row-gap: var(--spacing-xxl) !important; }

/* Column gap */
.col-gap-0 { column-gap: 0 !important; }
.col-gap-xs { column-gap: var(--spacing-xs) !important; }
.col-gap-sm { column-gap: var(--spacing-sm) !important; }
.col-gap-md { column-gap: var(--spacing-md) !important; }
.col-gap-lg { column-gap: var(--spacing-lg) !important; }
.col-gap-xl { column-gap: var(--spacing-xl) !important; }
.col-gap-xxl { column-gap: var(--spacing-xxl) !important; }

/* ===== RESPONSIVE SPACING ===== */

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
    .p-md-lg { padding: var(--spacing-lg) !important; }
    .p-md-xl { padding: var(--spacing-xl) !important; }
    .m-md-lg { margin: var(--spacing-lg) !important; }
    .m-md-xl { margin: var(--spacing-xl) !important; }
    .gap-md-lg { gap: var(--spacing-lg) !important; }
}

/* Desktop (≥ 992px) */
@media (min-width: 992px) {
    .p-lg-xl { padding: var(--spacing-xl) !important; }
    .p-lg-xxl { padding: var(--spacing-xxl) !important; }
    .m-lg-xl { margin: var(--spacing-xl) !important; }
    .m-lg-xxl { margin: var(--spacing-xxl) !important; }
    .gap-lg-xl { gap: var(--spacing-xl) !important; }
}