/* ═══════════════════════════════════════════════════════════════════
   SPACING — Margin, Padding, and Gap Utilities
   ═══════════════════════════════════════════════════════════════════
   Purpose: Provide a consistent spacing system based on the
   spacing scale defined in variables.css.
   No pure white (#FFFFFF), no pure black (#000000).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   SPACING SCALE REFERENCE
   ═══════════════════════════════════════════════════════════════════
   --xs: 4px     (spacing-1)
   --sm: 8px     (spacing-2)
   --md: 16px    (spacing-4)
   --lg: 24px    (spacing-6)
   --xl: 32px    (spacing-8)
   --xxl: 48px   (spacing-12)
   --xxxl: 64px  (spacing-16)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   MARGIN — All Sides
   ═══════════════════════════════════════════════════════════════════ */

.m-0 {
    margin: 0;
}

.m-xs {
    margin: var(--xs, 4px);
}

.m-sm {
    margin: var(--sm, 8px);
}

.m-md {
    margin: var(--md, 16px);
}

.m-lg {
    margin: var(--lg, 24px);
}

.m-xl {
    margin: var(--xl, 32px);
}

.m-2xl {
    margin: var(--xxl, 48px);
}

.m-3xl {
    margin: var(--xxxl, 64px);
}

.m-auto {
    margin: auto;
}

/* ─── Margin Top ──────────────────────────────────────────────────── */

.mt-0 {
    margin-top: 0;
}

.mt-xs {
    margin-top: var(--xs, 4px);
}

.mt-sm {
    margin-top: var(--sm, 8px);
}

.mt-md {
    margin-top: var(--md, 16px);
}

.mt-lg {
    margin-top: var(--lg, 24px);
}

.mt-xl {
    margin-top: var(--xl, 32px);
}

.mt-2xl {
    margin-top: var(--xxl, 48px);
}

.mt-3xl {
    margin-top: var(--xxxl, 64px);
}

.mt-auto {
    margin-top: auto;
}

/* ─── Margin Bottom ───────────────────────────────────────────────── */

.mb-0 {
    margin-bottom: 0;
}

.mb-xs {
    margin-bottom: var(--xs, 4px);
}

.mb-sm {
    margin-bottom: var(--sm, 8px);
}

.mb-md {
    margin-bottom: var(--md, 16px);
}

.mb-lg {
    margin-bottom: var(--lg, 24px);
}

.mb-xl {
    margin-bottom: var(--xl, 32px);
}

.mb-2xl {
    margin-bottom: var(--xxl, 48px);
}

.mb-3xl {
    margin-bottom: var(--xxxl, 64px);
}

.mb-auto {
    margin-bottom: auto;
}

/* ─── Margin Left ─────────────────────────────────────────────────── */

.ml-0 {
    margin-left: 0;
}

.ml-xs {
    margin-left: var(--xs, 4px);
}

.ml-sm {
    margin-left: var(--sm, 8px);
}

.ml-md {
    margin-left: var(--md, 16px);
}

.ml-lg {
    margin-left: var(--lg, 24px);
}

.ml-xl {
    margin-left: var(--xl, 32px);
}

.ml-2xl {
    margin-left: var(--xxl, 48px);
}

.ml-auto {
    margin-left: auto;
}

/* ─── Margin Right ────────────────────────────────────────────────── */

.mr-0 {
    margin-right: 0;
}

.mr-xs {
    margin-right: var(--xs, 4px);
}

.mr-sm {
    margin-right: var(--sm, 8px);
}

.mr-md {
    margin-right: var(--md, 16px);
}

.mr-lg {
    margin-right: var(--lg, 24px);
}

.mr-xl {
    margin-right: var(--xl, 32px);
}

.mr-2xl {
    margin-right: var(--xxl, 48px);
}

.mr-auto {
    margin-right: auto;
}

/* ─── Horizontal Margin (X) ───────────────────────────────────────── */

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-xs {
    margin-left: var(--xs, 4px);
    margin-right: var(--xs, 4px);
}

.mx-sm {
    margin-left: var(--sm, 8px);
    margin-right: var(--sm, 8px);
}

.mx-md {
    margin-left: var(--md, 16px);
    margin-right: var(--md, 16px);
}

.mx-lg {
    margin-left: var(--lg, 24px);
    margin-right: var(--lg, 24px);
}

.mx-xl {
    margin-left: var(--xl, 32px);
    margin-right: var(--xl, 32px);
}

.mx-2xl {
    margin-left: var(--xxl, 48px);
    margin-right: var(--xxl, 48px);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* ─── Vertical Margin (Y) ─────────────────────────────────────────── */

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-xs {
    margin-top: var(--xs, 4px);
    margin-bottom: var(--xs, 4px);
}

.my-sm {
    margin-top: var(--sm, 8px);
    margin-bottom: var(--sm, 8px);
}

.my-md {
    margin-top: var(--md, 16px);
    margin-bottom: var(--md, 16px);
}

.my-lg {
    margin-top: var(--lg, 24px);
    margin-bottom: var(--lg, 24px);
}

.my-xl {
    margin-top: var(--xl, 32px);
    margin-bottom: var(--xl, 32px);
}

.my-2xl {
    margin-top: var(--xxl, 48px);
    margin-bottom: var(--xxl, 48px);
}

/* ═══════════════════════════════════════════════════════════════════
   PADDING — All Sides
   ═══════════════════════════════════════════════════════════════════ */

.p-0 {
    padding: 0;
}

.p-xs {
    padding: var(--xs, 4px);
}

.p-sm {
    padding: var(--sm, 8px);
}

.p-md {
    padding: var(--md, 16px);
}

.p-lg {
    padding: var(--lg, 24px);
}

.p-xl {
    padding: var(--xl, 32px);
}

.p-2xl {
    padding: var(--xxl, 48px);
}

.p-3xl {
    padding: var(--xxxl, 64px);
}

/* ─── Padding Top ─────────────────────────────────────────────────── */

.pt-0 {
    padding-top: 0;
}

.pt-xs {
    padding-top: var(--xs, 4px);
}

.pt-sm {
    padding-top: var(--sm, 8px);
}

.pt-md {
    padding-top: var(--md, 16px);
}

.pt-lg {
    padding-top: var(--lg, 24px);
}

.pt-xl {
    padding-top: var(--xl, 32px);
}

.pt-2xl {
    padding-top: var(--xxl, 48px);
}

.pt-3xl {
    padding-top: var(--xxxl, 64px);
}

/* ─── Padding Bottom ──────────────────────────────────────────────── */

.pb-0 {
    padding-bottom: 0;
}

.pb-xs {
    padding-bottom: var(--xs, 4px);
}

.pb-sm {
    padding-bottom: var(--sm, 8px);
}

.pb-md {
    padding-bottom: var(--md, 16px);
}

.pb-lg {
    padding-bottom: var(--lg, 24px);
}

.pb-xl {
    padding-bottom: var(--xl, 32px);
}

.pb-2xl {
    padding-bottom: var(--xxl, 48px);
}

.pb-3xl {
    padding-bottom: var(--xxxl, 64px);
}

/* ─── Padding Left ────────────────────────────────────────────────── */

.pl-0 {
    padding-left: 0;
}

.pl-xs {
    padding-left: var(--xs, 4px);
}

.pl-sm {
    padding-left: var(--sm, 8px);
}

.pl-md {
    padding-left: var(--md, 16px);
}

.pl-lg {
    padding-left: var(--lg, 24px);
}

.pl-xl {
    padding-left: var(--xl, 32px);
}

.pl-2xl {
    padding-left: var(--xxl, 48px);
}

/* ─── Padding Right ───────────────────────────────────────────────── */

.pr-0 {
    padding-right: 0;
}

.pr-xs {
    padding-right: var(--xs, 4px);
}

.pr-sm {
    padding-right: var(--sm, 8px);
}

.pr-md {
    padding-right: var(--md, 16px);
}

.pr-lg {
    padding-right: var(--lg, 24px);
}

.pr-xl {
    padding-right: var(--xl, 32px);
}

.pr-2xl {
    padding-right: var(--xxl, 48px);
}

/* ─── Horizontal Padding (X) ──────────────────────────────────────── */

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-xs {
    padding-left: var(--xs, 4px);
    padding-right: var(--xs, 4px);
}

.px-sm {
    padding-left: var(--sm, 8px);
    padding-right: var(--sm, 8px);
}

.px-md {
    padding-left: var(--md, 16px);
    padding-right: var(--md, 16px);
}

.px-lg {
    padding-left: var(--lg, 24px);
    padding-right: var(--lg, 24px);
}

.px-xl {
    padding-left: var(--xl, 32px);
    padding-right: var(--xl, 32px);
}

.px-2xl {
    padding-left: var(--xxl, 48px);
    padding-right: var(--xxl, 48px);
}

.px-3xl {
    padding-left: var(--xxxl, 64px);
    padding-right: var(--xxxl, 64px);
}

/* ─── Vertical Padding (Y) ────────────────────────────────────────── */

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-xs {
    padding-top: var(--xs, 4px);
    padding-bottom: var(--xs, 4px);
}

.py-sm {
    padding-top: var(--sm, 8px);
    padding-bottom: var(--sm, 8px);
}

.py-md {
    padding-top: var(--md, 16px);
    padding-bottom: var(--md, 16px);
}

.py-lg {
    padding-top: var(--lg, 24px);
    padding-bottom: var(--lg, 24px);
}

.py-xl {
    padding-top: var(--xl, 32px);
    padding-bottom: var(--xl, 32px);
}

.py-2xl {
    padding-top: var(--xxl, 48px);
    padding-bottom: var(--xxl, 48px);
}

.py-3xl {
    padding-top: var(--xxxl, 64px);
    padding-bottom: var(--xxxl, 64px);
}

/* ═══════════════════════════════════════════════════════════════════
   GAP — For Flex and Grid
   ═══════════════════════════════════════════════════════════════════ */

.gap-0 {
    gap: 0;
}

.gap-xs {
    gap: var(--xs, 4px);
}

.gap-sm {
    gap: var(--sm, 8px);
}

.gap-md {
    gap: var(--md, 16px);
}

.gap-lg {
    gap: var(--lg, 24px);
}

.gap-xl {
    gap: var(--xl, 32px);
}

.gap-2xl {
    gap: var(--xxl, 48px);
}

.gap-3xl {
    gap: var(--xxxl, 64px);
}

/* ─── Column Gap ──────────────────────────────────────────────────── */

.gap-x-0 {
    column-gap: 0;
}

.gap-x-xs {
    column-gap: var(--xs, 4px);
}

.gap-x-sm {
    column-gap: var(--sm, 8px);
}

.gap-x-md {
    column-gap: var(--md, 16px);
}

.gap-x-lg {
    column-gap: var(--lg, 24px);
}

.gap-x-xl {
    column-gap: var(--xl, 32px);
}

.gap-x-2xl {
    column-gap: var(--xxl, 48px);
}

/* ─── Row Gap ─────────────────────────────────────────────────────── */

.gap-y-0 {
    row-gap: 0;
}

.gap-y-xs {
    row-gap: var(--xs, 4px);
}

.gap-y-sm {
    row-gap: var(--sm, 8px);
}

.gap-y-md {
    row-gap: var(--md, 16px);
}

.gap-y-lg {
    row-gap: var(--lg, 24px);
}

.gap-y-xl {
    row-gap: var(--xl, 32px);
}

.gap-y-2xl {
    row-gap: var(--xxl, 48px);
}

/* ═══════════════════════════════════════════════════════════════════
   NEGATIVE MARGIN — For offsetting container padding
   ═══════════════════════════════════════════════════════════════════ */

.-m-xs {
    margin: calc(-1 * var(--xs, 4px));
}

.-m-sm {
    margin: calc(-1 * var(--sm, 8px));
}

.-m-md {
    margin: calc(-1 * var(--md, 16px));
}

.-m-lg {
    margin: calc(-1 * var(--lg, 24px));
}

.-mx-xs {
    margin-left: calc(-1 * var(--xs, 4px));
    margin-right: calc(-1 * var(--xs, 4px));
}

.-mx-sm {
    margin-left: calc(-1 * var(--sm, 8px));
    margin-right: calc(-1 * var(--sm, 8px));
}

.-mx-md {
    margin-left: calc(-1 * var(--md, 16px));
    margin-right: calc(-1 * var(--md, 16px));
}

.-mx-lg {
    margin-left: calc(-1 * var(--lg, 24px));
    margin-right: calc(-1 * var(--lg, 24px));
}

.-my-xs {
    margin-top: calc(-1 * var(--xs, 4px));
    margin-bottom: calc(-1 * var(--xs, 4px));
}

.-my-sm {
    margin-top: calc(-1 * var(--sm, 8px));
    margin-bottom: calc(-1 * var(--sm, 8px));
}

.-my-md {
    margin-top: calc(-1 * var(--md, 16px));
    margin-bottom: calc(-1 * var(--md, 16px));
}

.-my-lg {
    margin-top: calc(-1 * var(--lg, 24px));
    margin-bottom: calc(-1 * var(--lg, 24px));
}

.-mt-xs {
    margin-top: calc(-1 * var(--xs, 4px));
}

.-mt-sm {
    margin-top: calc(-1 * var(--sm, 8px));
}

.-mt-md {
    margin-top: calc(-1 * var(--md, 16px));
}

.-mt-lg {
    margin-top: calc(-1 * var(--lg, 24px));
}

.-mb-xs {
    margin-bottom: calc(-1 * var(--xs, 4px));
}

.-mb-sm {
    margin-bottom: calc(-1 * var(--sm, 8px));
}

.-mb-md {
    margin-bottom: calc(-1 * var(--md, 16px));
}

.-mb-lg {
    margin-bottom: calc(-1 * var(--lg, 24px));
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE SPACING — Prefix with breakpoint
   Usage: .mt-sm\@md (margin-top: 8px on md and up)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tablet (768px and up) ──────────────────────────────────────── */

@media (min-width: 768px) {
    .mt-sm\@md {
        margin-top: var(--sm, 8px);
    }

    .mt-md\@md {
        margin-top: var(--md, 16px);
    }

    .mt-lg\@md {
        margin-top: var(--lg, 24px);
    }

    .mt-xl\@md {
        margin-top: var(--xl, 32px);
    }

    .mb-sm\@md {
        margin-bottom: var(--sm, 8px);
    }

    .mb-md\@md {
        margin-bottom: var(--md, 16px);
    }

    .mb-lg\@md {
        margin-bottom: var(--lg, 24px);
    }

    .mb-xl\@md {
        margin-bottom: var(--xl, 32px);
    }

    .pt-sm\@md {
        padding-top: var(--sm, 8px);
    }

    .pt-md\@md {
        padding-top: var(--md, 16px);
    }

    .pt-lg\@md {
        padding-top: var(--lg, 24px);
    }

    .pt-xl\@md {
        padding-top: var(--xl, 32px);
    }

    .pb-sm\@md {
        padding-bottom: var(--sm, 8px);
    }

    .pb-md\@md {
        padding-bottom: var(--md, 16px);
    }

    .pb-lg\@md {
        padding-bottom: var(--lg, 24px);
    }

    .pb-xl\@md {
        padding-bottom: var(--xl, 32px);
    }

    .px-sm\@md {
        padding-left: var(--sm, 8px);
        padding-right: var(--sm, 8px);
    }

    .px-md\@md {
        padding-left: var(--md, 16px);
        padding-right: var(--md, 16px);
    }

    .px-lg\@md {
        padding-left: var(--lg, 24px);
        padding-right: var(--lg, 24px);
    }

    .px-xl\@md {
        padding-left: var(--xl, 32px);
        padding-right: var(--xl, 32px);
    }

    .py-sm\@md {
        padding-top: var(--sm, 8px);
        padding-bottom: var(--sm, 8px);
    }

    .py-md\@md {
        padding-top: var(--md, 16px);
        padding-bottom: var(--md, 16px);
    }

    .py-lg\@md {
        padding-top: var(--lg, 24px);
        padding-bottom: var(--lg, 24px);
    }

    .py-xl\@md {
        padding-top: var(--xl, 32px);
        padding-bottom: var(--xl, 32px);
    }

    .gap-sm\@md {
        gap: var(--sm, 8px);
    }

    .gap-md\@md {
        gap: var(--md, 16px);
    }

    .gap-lg\@md {
        gap: var(--lg, 24px);
    }

    .gap-xl\@md {
        gap: var(--xl, 32px);
    }
}

/* ─── Desktop (1024px and up) ────────────────────────────────────── */

@media (min-width: 1024px) {
    .mt-sm\@lg {
        margin-top: var(--sm, 8px);
    }

    .mt-md\@lg {
        margin-top: var(--md, 16px);
    }

    .mt-lg\@lg {
        margin-top: var(--lg, 24px);
    }

    .mt-xl\@lg {
        margin-top: var(--xl, 32px);
    }

    .mb-sm\@lg {
        margin-bottom: var(--sm, 8px);
    }

    .mb-md\@lg {
        margin-bottom: var(--md, 16px);
    }

    .mb-lg\@lg {
        margin-bottom: var(--lg, 24px);
    }

    .mb-xl\@lg {
        margin-bottom: var(--xl, 32px);
    }

    .pt-sm\@lg {
        padding-top: var(--sm, 8px);
    }

    .pt-md\@lg {
        padding-top: var(--md, 16px);
    }

    .pt-lg\@lg {
        padding-top: var(--lg, 24px);
    }

    .pt-xl\@lg {
        padding-top: var(--xl, 32px);
    }

    .pb-sm\@lg {
        padding-bottom: var(--sm, 8px);
    }

    .pb-md\@lg {
        padding-bottom: var(--md, 16px);
    }

    .pb-lg\@lg {
        padding-bottom: var(--lg, 24px);
    }

    .pb-xl\@lg {
        padding-bottom: var(--xl, 32px);
    }

    .px-sm\@lg {
        padding-left: var(--sm, 8px);
        padding-right: var(--sm, 8px);
    }

    .px-md\@lg {
        padding-left: var(--md, 16px);
        padding-right: var(--md, 16px);
    }

    .px-lg\@lg {
        padding-left: var(--lg, 24px);
        padding-right: var(--lg, 24px);
    }

    .px-xl\@lg {
        padding-left: var(--xl, 32px);
        padding-right: var(--xl, 32px);
    }

    .py-sm\@lg {
        padding-top: var(--sm, 8px);
        padding-bottom: var(--sm, 8px);
    }

    .py-md\@lg {
        padding-top: var(--md, 16px);
        padding-bottom: var(--md, 16px);
    }

    .py-lg\@lg {
        padding-top: var(--lg, 24px);
        padding-bottom: var(--lg, 24px);
    }

    .py-xl\@lg {
        padding-top: var(--xl, 32px);
        padding-bottom: var(--xl, 32px);
    }

    .gap-sm\@lg {
        gap: var(--sm, 8px);
    }

    .gap-md\@lg {
        gap: var(--md, 16px);
    }

    .gap-lg\@lg {
        gap: var(--lg, 24px);
    }

    .gap-xl\@lg {
        gap: var(--xl, 32px);
    }
}

/* ─── Mobile (max-width: 767px) — Override responsive spacing ───── */

@media (max-width: 767px) {
    .mt-sm\@md {
        margin-top: 0;
    }

    .mt-md\@md {
        margin-top: 0;
    }

    .mt-lg\@md {
        margin-top: 0;
    }

    .mt-xl\@md {
        margin-top: 0;
    }

    .mb-sm\@md {
        margin-bottom: 0;
    }

    .mb-md\@md {
        margin-bottom: 0;
    }

    .mb-lg\@md {
        margin-bottom: 0;
    }

    .mb-xl\@md {
        margin-bottom: 0;
    }

    .pt-sm\@md {
        padding-top: 0;
    }

    .pt-md\@md {
        padding-top: 0;
    }

    .pt-lg\@md {
        padding-top: 0;
    }

    .pt-xl\@md {
        padding-top: 0;
    }

    .pb-sm\@md {
        padding-bottom: 0;
    }

    .pb-md\@md {
        padding-bottom: 0;
    }

    .pb-lg\@md {
        padding-bottom: 0;
    }

    .pb-xl\@md {
        padding-bottom: 0;
    }

    .px-sm\@md {
        padding-left: 0;
        padding-right: 0;
    }

    .px-md\@md {
        padding-left: 0;
        padding-right: 0;
    }

    .px-lg\@md {
        padding-left: 0;
        padding-right: 0;
    }

    .px-xl\@md {
        padding-left: 0;
        padding-right: 0;
    }

    .py-sm\@md {
        padding-top: 0;
        padding-bottom: 0;
    }

    .py-md\@md {
        padding-top: 0;
        padding-bottom: 0;
    }

    .py-lg\@md {
        padding-top: 0;
        padding-bottom: 0;
    }

    .py-xl\@md {
        padding-top: 0;
        padding-bottom: 0;
    }

    .gap-sm\@md {
        gap: 0;
    }

    .gap-md\@md {
        gap: 0;
    }

    .gap-lg\@md {
        gap: 0;
    }

    .gap-xl\@md {
        gap: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SPACING SHORTHAND — Common patterns
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Container padding (responsive) ──────────────────────────────── */

.container-padding {
    padding-left: var(--md, 16px);
    padding-right: var(--md, 16px);
}

@media (min-width: 768px) {
    .container-padding {
        padding-left: var(--lg, 24px);
        padding-right: var(--lg, 24px);
    }
}

@media (min-width: 1024px) {
    .container-padding {
        padding-left: var(--xl, 32px);
        padding-right: var(--xl, 32px);
    }
}

/* ─── Section spacing ─────────────────────────────────────────────── */

.section-spacing {
    padding-top: var(--xl, 32px);
    padding-bottom: var(--xl, 32px);
}

@media (min-width: 768px) {
    .section-spacing {
        padding-top: var(--xxl, 48px);
        padding-bottom: var(--xxl, 48px);
    }
}

@media (min-width: 1024px) {
    .section-spacing {
        padding-top: var(--xxxl, 64px);
        padding-bottom: var(--xxxl, 64px);
    }
}

/* ─── Card spacing ────────────────────────────────────────────────── */

.card-spacing {
    padding: var(--md, 16px);
}

@media (min-width: 768px) {
    .card-spacing {
        padding: var(--lg, 24px);
    }
}

@media (min-width: 1024px) {
    .card-spacing {
        padding: var(--xl, 32px);
    }
}

/* ─── Stack spacing (vertical rhythm) ────────────────────────────── */

.stack-sm>*+* {
    margin-top: var(--sm, 8px);
}

.stack-md>*+* {
    margin-top: var(--md, 16px);
}

.stack-lg>*+* {
    margin-top: var(--lg, 24px);
}

.stack-xl>*+* {
    margin-top: var(--xl, 32px);
}

/* ─── Inline spacing ──────────────────────────────────────────────── */

.inline-sm>*+* {
    margin-left: var(--sm, 8px);
}

.inline-md>*+* {
    margin-left: var(--md, 16px);
}

.inline-lg>*+* {
    margin-left: var(--lg, 24px);
}