/**
 * Spacing Utilities
 *
 * Schema-driven padding, margin, and gap utilities.
 * Values: none, xs, sm, md, lg, xl, 2xl
 */

/* Padding - all sides */
.p-none { padding: 0; }
.p-xs { padding: 0.25rem; }
.p-sm { padding: 0.5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 2rem; }
.p-xl { padding: 4rem; }
.p-2xl { padding: 6rem; }

/* Padding - horizontal */
.px-none { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-sm { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-md { padding-left: 1rem; padding-right: 1rem; }
.px-lg { padding-left: 2rem; padding-right: 2rem; }
.px-xl { padding-left: 4rem; padding-right: 4rem; }
.px-2xl { padding-left: 6rem; padding-right: 6rem; }

/* Padding - vertical */
.py-none { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-sm { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-md { padding-top: 1rem; padding-bottom: 1rem; }
.py-lg { padding-top: 2rem; padding-bottom: 2rem; }
.py-xl { padding-top: 4rem; padding-bottom: 4rem; }
.py-2xl { padding-top: 6rem; padding-bottom: 6rem; }

/* Margin bottom */
.mb-none { margin-bottom: 0; }
.mb-xs { margin-bottom: 0.25rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 2rem; }
.mb-xl { margin-bottom: 4rem; }
.mb-2xl { margin-bottom: 6rem; }

/* Gap (flex/grid containers) */
.gap-none { gap: 0; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }
.gap-xl { gap: 4rem; }
.gap-2xl { gap: 6rem; }

/* Mobile overrides - compress larger values */
@media (max-width: 767px) {
    .p-lg { padding: 1rem; }
    .p-xl { padding: 2rem; }
    .p-2xl { padding: 3rem; }

    .px-lg { padding-left: 1rem; padding-right: 1rem; }
    .px-xl { padding-left: 2rem; padding-right: 2rem; }
    .px-2xl { padding-left: 3rem; padding-right: 3rem; }

    .py-lg { padding-top: 1rem; padding-bottom: 1rem; }
    .py-xl { padding-top: 2rem; padding-bottom: 2rem; }
    .py-2xl { padding-top: 3rem; padding-bottom: 3rem; }

    .mb-lg { margin-bottom: 1rem; }
    .mb-xl { margin-bottom: 2rem; }
    .mb-2xl { margin-bottom: 3rem; }

    .gap-lg { gap: 1rem; }
    .gap-xl { gap: 2rem; }
    .gap-2xl { gap: 3rem; }
}