/**
 * Spacing Utilities System - Token-Based Version
 * 
 * A comprehensive spacing system using design tokens for consistent gap, margin, 
 * and padding utilities. This version uses CSS custom properties from tokens/spacing.css
 * for better maintainability and consistency.
 * 
 * @layer layout.spacing
 * @version 3.0
 * @author Design System Team
 */

@layer layout.spacing {
    /* ================= GAP UTILITIES ================= */

    /* Gap für Grid- und Flex-Layouts */
    .gap-0 { gap: var(--space-0, 0); }

    .gap-px { gap: var(--space-px, 1px); }

    .gap-1 { gap: var(--space-1, 0.25rem); }

    .gap-2 { gap: var(--space-2, 0.5rem); }

    .gap-3 { gap: var(--space-3, 0.75rem); }

    .gap-4 { gap: var(--space-4, 1rem); }

    .gap-5 { gap: var(--space-5, 1.25rem); }

    .gap-6 { gap: var(--space-6, 1.5rem); }

    .gap-7 { gap: var(--space-7, 1.75rem); }

    .gap-8 { gap: var(--space-8, 2rem); }

    .gap-9 { gap: var(--space-9, 2.25rem); }

    .gap-10 { gap: var(--space-10, 2.5rem); }

    .gap-11 { gap: var(--space-11, 2.75rem); }

    .gap-12 { gap: var(--space-12, 3rem); }

    .gap-14 { gap: var(--space-14, 3.5rem); }

    .gap-16 { gap: var(--space-16, 4rem); }

    .gap-20 { gap: var(--space-20, 5rem); }

    .gap-24 { gap: var(--space-24, 6rem); }

    .gap-28 { gap: var(--space-28, 7rem); }

    .gap-32 { gap: var(--space-32, 8rem); }

    .gap-36 { gap: var(--space-36, 9rem); }

    .gap-40 { gap: var(--space-40, 10rem); }

    .gap-44 { gap: var(--space-44, 11rem); }

    .gap-48 { gap: var(--space-48, 12rem); }

    .gap-52 { gap: var(--space-52, 13rem); }

    .gap-56 { gap: var(--space-56, 14rem); }

    .gap-60 { gap: var(--space-60, 15rem); }

    .gap-64 { gap: var(--space-64, 16rem); }

    .gap-72 { gap: var(--space-72, 18rem); }

    .gap-80 { gap: var(--space-80, 20rem); }

    .gap-96 { gap: var(--space-96, 24rem); }

    /* Semantic Gap Utilities */
    .gap-xs { gap: var(--space-xs, 0.75rem); }

    .gap-sm { gap: var(--space-sm, 1.25rem); }

    .gap-md { gap: var(--space-md, 1.75rem); }

    .gap-lg { gap: var(--space-lg, 2.25rem); }

    .gap-xl { gap: var(--space-xl, 3rem); }

    .gap-2xl { gap: var(--space-2xl, 4rem); }

    .gap-3xl { gap: var(--space-3xl, 5rem); }

    /* Horizontale Gaps (column-gap) */
    .gap-x-0 { column-gap: var(--space-0, 0); }

    .gap-x-px { column-gap: var(--space-px, 1px); }

    .gap-x-1 { column-gap: var(--space-1, 0.25rem); }

    .gap-x-2 { column-gap: var(--space-2, 0.5rem); }

    .gap-x-3 { column-gap: var(--space-3, 0.75rem); }

    .gap-x-4 { column-gap: var(--space-4, 1rem); }

    .gap-x-5 { column-gap: var(--space-5, 1.25rem); }

    .gap-x-6 { column-gap: var(--space-6, 1.5rem); }

    .gap-x-8 { column-gap: var(--space-8, 2rem); }

    .gap-x-10 { column-gap: var(--space-10, 2.5rem); }

    .gap-x-12 { column-gap: var(--space-12, 3rem); }

    .gap-x-16 { column-gap: var(--space-16, 4rem); }

    .gap-x-20 { column-gap: var(--space-20, 5rem); }

    .gap-x-24 { column-gap: var(--space-24, 6rem); }

    .gap-x-32 { column-gap: var(--space-32, 8rem); }

    /* Vertikale Gaps (row-gap) */
    .gap-y-0 { row-gap: var(--space-0, 0); }

    .gap-y-px { row-gap: var(--space-px, 1px); }

    .gap-y-1 { row-gap: var(--space-1, 0.25rem); }

    .gap-y-2 { row-gap: var(--space-2, 0.5rem); }

    .gap-y-3 { row-gap: var(--space-3, 0.75rem); }

    .gap-y-4 { row-gap: var(--space-4, 1rem); }

    .gap-y-5 { row-gap: var(--space-5, 1.25rem); }

    .gap-y-6 { row-gap: var(--space-6, 1.5rem); }

    .gap-y-8 { row-gap: var(--space-8, 2rem); }

    .gap-y-10 { row-gap: var(--space-10, 2.5rem); }

    .gap-y-12 { row-gap: var(--space-12, 3rem); }

    .gap-y-16 { row-gap: var(--space-16, 4rem); }

    .gap-y-20 { row-gap: var(--space-20, 5rem); }

    .gap-y-24 { row-gap: var(--space-24, 6rem); }

    .gap-y-32 { row-gap: var(--space-32, 8rem); }

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

    /* Margin in alle Richtungen */
    .m-0 { margin: var(--space-0, 0); }

    .m-px { margin: var(--space-px, 1px); }

    .m-1 { margin: var(--space-1, 0.25rem); }

    .m-2 { margin: var(--space-2, 0.5rem); }

    .m-3 { margin: var(--space-3, 0.75rem); }

    .m-4 { margin: var(--space-4, 1rem); }

    .m-5 { margin: var(--space-5, 1.25rem); }

    .m-6 { margin: var(--space-6, 1.5rem); }

    .m-8 { margin: var(--space-8, 2rem); }

    .m-10 { margin: var(--space-10, 2.5rem); }

    .m-12 { margin: var(--space-12, 3rem); }

    .m-16 { margin: var(--space-16, 4rem); }

    .m-20 { margin: var(--space-20, 5rem); }

    .m-24 { margin: var(--space-24, 6rem); }

    .m-32 { margin: var(--space-32, 8rem); }

    .m-auto { margin: auto; }

    /* Horizontale Margins */
    .mx-0 { margin-left: var(--space-0, 0); margin-right: var(--space-0, 0); }

    .mx-px { margin-left: var(--space-px, 1px); margin-right: var(--space-px, 1px); }

    .mx-1 { margin-left: var(--space-1, 0.25rem); margin-right: var(--space-1, 0.25rem); }

    .mx-2 { margin-left: var(--space-2, 0.5rem); margin-right: var(--space-2, 0.5rem); }

    .mx-3 { margin-left: var(--space-3, 0.75rem); margin-right: var(--space-3, 0.75rem); }

    .mx-4 { margin-left: var(--space-4, 1rem); margin-right: var(--space-4, 1rem); }

    .mx-5 { margin-left: var(--space-5, 1.25rem); margin-right: var(--space-5, 1.25rem); }

    .mx-6 { margin-left: var(--space-6, 1.5rem); margin-right: var(--space-6, 1.5rem); }

    .mx-8 { margin-left: var(--space-8, 2rem); margin-right: var(--space-8, 2rem); }

    .mx-10 { margin-left: var(--space-10, 2.5rem); margin-right: var(--space-10, 2.5rem); }

    .mx-12 { margin-left: var(--space-12, 3rem); margin-right: var(--space-12, 3rem); }

    .mx-16 { margin-left: var(--space-16, 4rem); margin-right: var(--space-16, 4rem); }

    .mx-20 { margin-left: var(--space-20, 5rem); margin-right: var(--space-20, 5rem); }

    .mx-24 { margin-left: var(--space-24, 6rem); margin-right: var(--space-24, 6rem); }

    .mx-32 { margin-left: var(--space-32, 8rem); margin-right: var(--space-32, 8rem); }

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

    /* Vertikale Margins */
    .my-0 { margin-bottom: var(--space-0, 0); margin-top: var(--space-0, 0); }

    .my-px { margin-bottom: var(--space-px, 1px); margin-top: var(--space-px, 1px); }

    .my-1 { margin-bottom: var(--space-1, 0.25rem); margin-top: var(--space-1, 0.25rem); }

    .my-2 { margin-bottom: var(--space-2, 0.5rem); margin-top: var(--space-2, 0.5rem); }

    .my-3 { margin-bottom: var(--space-3, 0.75rem); margin-top: var(--space-3, 0.75rem); }

    .my-4 { margin-bottom: var(--space-4, 1rem); margin-top: var(--space-4, 1rem); }

    .my-5 { margin-bottom: var(--space-5, 1.25rem); margin-top: var(--space-5, 1.25rem); }

    .my-6 { margin-bottom: var(--space-6, 1.5rem); margin-top: var(--space-6, 1.5rem); }

    .my-8 { margin-bottom: var(--space-8, 2rem); margin-top: var(--space-8, 2rem); }

    .my-10 { margin-bottom: var(--space-10, 2.5rem); margin-top: var(--space-10, 2.5rem); }

    .my-12 { margin-bottom: var(--space-12, 3rem); margin-top: var(--space-12, 3rem); }

    .my-16 { margin-bottom: var(--space-16, 4rem); margin-top: var(--space-16, 4rem); }

    .my-20 { margin-bottom: var(--space-20, 5rem); margin-top: var(--space-20, 5rem); }

    .my-24 { margin-bottom: var(--space-24, 6rem); margin-top: var(--space-24, 6rem); }

    .my-32 { margin-bottom: var(--space-32, 8rem); margin-top: var(--space-32, 8rem); }

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

    /* Einzelne Margin-Richtungen */
    .mt-0 { margin-top: var(--space-0, 0); }

    .mt-px { margin-top: var(--space-px, 1px); }

    .mt-1 { margin-top: var(--space-1, 0.25rem); }

    .mt-2 { margin-top: var(--space-2, 0.5rem); }

    .mt-3 { margin-top: var(--space-3, 0.75rem); }

    .mt-4 { margin-top: var(--space-4, 1rem); }

    .mt-5 { margin-top: var(--space-5, 1.25rem); }

    .mt-6 { margin-top: var(--space-6, 1.5rem); }

    .mt-8 { margin-top: var(--space-8, 2rem); }

    .mt-10 { margin-top: var(--space-10, 2.5rem); }

    .mt-12 { margin-top: var(--space-12, 3rem); }

    .mt-16 { margin-top: var(--space-16, 4rem); }

    .mt-20 { margin-top: var(--space-20, 5rem); }

    .mt-24 { margin-top: var(--space-24, 6rem); }

    .mt-32 { margin-top: var(--space-32, 8rem); }

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

    .mr-0 { margin-right: var(--space-0, 0); }

    .mr-px { margin-right: var(--space-px, 1px); }

    .mr-1 { margin-right: var(--space-1, 0.25rem); }

    .mr-2 { margin-right: var(--space-2, 0.5rem); }

    .mr-3 { margin-right: var(--space-3, 0.75rem); }

    .mr-4 { margin-right: var(--space-4, 1rem); }

    .mr-5 { margin-right: var(--space-5, 1.25rem); }

    .mr-6 { margin-right: var(--space-6, 1.5rem); }

    .mr-8 { margin-right: var(--space-8, 2rem); }

    .mr-10 { margin-right: var(--space-10, 2.5rem); }

    .mr-12 { margin-right: var(--space-12, 3rem); }

    .mr-16 { margin-right: var(--space-16, 4rem); }

    .mr-20 { margin-right: var(--space-20, 5rem); }

    .mr-24 { margin-right: var(--space-24, 6rem); }

    .mr-32 { margin-right: var(--space-32, 8rem); }

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

    .mb-0 { margin-bottom: var(--space-0, 0); }

    .mb-px { margin-bottom: var(--space-px, 1px); }

    .mb-1 { margin-bottom: var(--space-1, 0.25rem); }

    .mb-2 { margin-bottom: var(--space-2, 0.5rem); }

    .mb-3 { margin-bottom: var(--space-3, 0.75rem); }

    .mb-4 { margin-bottom: var(--space-4, 1rem); }

    .mb-5 { margin-bottom: var(--space-5, 1.25rem); }

    .mb-6 { margin-bottom: var(--space-6, 1.5rem); }

    .mb-8 { margin-bottom: var(--space-8, 2rem); }

    .mb-10 { margin-bottom: var(--space-10, 2.5rem); }

    .mb-12 { margin-bottom: var(--space-12, 3rem); }

    .mb-16 { margin-bottom: var(--space-16, 4rem); }

    .mb-20 { margin-bottom: var(--space-20, 5rem); }

    .mb-24 { margin-bottom: var(--space-24, 6rem); }

    .mb-32 { margin-bottom: var(--space-32, 8rem); }

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

    .ml-0 { margin-left: var(--space-0, 0); }

    .ml-px { margin-left: var(--space-px, 1px); }

    .ml-1 { margin-left: var(--space-1, 0.25rem); }

    .ml-2 { margin-left: var(--space-2, 0.5rem); }

    .ml-3 { margin-left: var(--space-3, 0.75rem); }

    .ml-4 { margin-left: var(--space-4, 1rem); }

    .ml-5 { margin-left: var(--space-5, 1.25rem); }

    .ml-6 { margin-left: var(--space-6, 1.5rem); }

    .ml-8 { margin-left: var(--space-8, 2rem); }

    .ml-10 { margin-left: var(--space-10, 2.5rem); }

    .ml-12 { margin-left: var(--space-12, 3rem); }

    .ml-16 { margin-left: var(--space-16, 4rem); }

    .ml-20 { margin-left: var(--space-20, 5rem); }

    .ml-24 { margin-left: var(--space-24, 6rem); }

    .ml-32 { margin-left: var(--space-32, 8rem); }

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

    /* ================= NEGATIVE MARGINS ================= */

    /* Negative Margins für Overlapping-Layouts */
    .-m-1 { margin: calc(-1 * var(--space-1, 0.25rem)); }

    .-m-2 { margin: calc(-1 * var(--space-2, 0.5rem)); }

    .-m-3 { margin: calc(-1 * var(--space-3, 0.75rem)); }

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

    .-m-5 { margin: calc(-1 * var(--space-5, 1.25rem)); }

    .-m-6 { margin: calc(-1 * var(--space-6, 1.5rem)); }

    .-m-8 { margin: calc(-1 * var(--space-8, 2rem)); }

    .-m-10 { margin: calc(-1 * var(--space-10, 2.5rem)); }

    .-m-12 { margin: calc(-1 * var(--space-12, 3rem)); }

    .-m-16 { margin: calc(-1 * var(--space-16, 4rem)); }

    .-m-20 { margin: calc(-1 * var(--space-20, 5rem)); }

    .-m-24 { margin: calc(-1 * var(--space-24, 6rem)); }

    .-m-32 { margin: calc(-1 * var(--space-32, 8rem)); }

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

    /* Padding in alle Richtungen */
    .p-0 { padding: var(--space-0, 0); }

    .p-px { padding: var(--space-px, 1px); }

    .p-1 { padding: var(--space-1, 0.25rem); }

    .p-2 { padding: var(--space-2, 0.5rem); }

    .p-3 { padding: var(--space-3, 0.75rem); }

    .p-4 { padding: var(--space-4, 1rem); }

    .p-5 { padding: var(--space-5, 1.25rem); }

    .p-6 { padding: var(--space-6, 1.5rem); }

    .p-8 { padding: var(--space-8, 2rem); }

    .p-10 { padding: var(--space-10, 2.5rem); }

    .p-12 { padding: var(--space-12, 3rem); }

    .p-16 { padding: var(--space-16, 4rem); }

    .p-20 { padding: var(--space-20, 5rem); }

    .p-24 { padding: var(--space-24, 6rem); }

    .p-32 { padding: var(--space-32, 8rem); }

    /* Horizontales Padding */
    .px-0 { padding-left: var(--space-0, 0); padding-right: var(--space-0, 0); }

    .px-px { padding-left: var(--space-px, 1px); padding-right: var(--space-px, 1px); }

    .px-1 { padding-left: var(--space-1, 0.25rem); padding-right: var(--space-1, 0.25rem); }

    .px-2 { padding-left: var(--space-2, 0.5rem); padding-right: var(--space-2, 0.5rem); }

    .px-3 { padding-left: var(--space-3, 0.75rem); padding-right: var(--space-3, 0.75rem); }

    .px-4 { padding-left: var(--space-4, 1rem); padding-right: var(--space-4, 1rem); }

    .px-5 { padding-left: var(--space-5, 1.25rem); padding-right: var(--space-5, 1.25rem); }

    .px-6 { padding-left: var(--space-6, 1.5rem); padding-right: var(--space-6, 1.5rem); }

    .px-8 { padding-left: var(--space-8, 2rem); padding-right: var(--space-8, 2rem); }

    .px-10 { padding-left: var(--space-10, 2.5rem); padding-right: var(--space-10, 2.5rem); }

    .px-12 { padding-left: var(--space-12, 3rem); padding-right: var(--space-12, 3rem); }

    .px-16 { padding-left: var(--space-16, 4rem); padding-right: var(--space-16, 4rem); }

    .px-20 { padding-left: var(--space-20, 5rem); padding-right: var(--space-20, 5rem); }

    .px-24 { padding-left: var(--space-24, 6rem); padding-right: var(--space-24, 6rem); }

    .px-32 { padding-left: var(--space-32, 8rem); padding-right: var(--space-32, 8rem); }

    /* Vertikales Padding */
    .py-0 { padding-bottom: var(--space-0, 0); padding-top: var(--space-0, 0); }

    .py-px { padding-bottom: var(--space-px, 1px); padding-top: var(--space-px, 1px); }

    .py-1 { padding-bottom: var(--space-1, 0.25rem); padding-top: var(--space-1, 0.25rem); }

    .py-2 { padding-bottom: var(--space-2, 0.5rem); padding-top: var(--space-2, 0.5rem); }

    .py-3 { padding-bottom: var(--space-3, 0.75rem); padding-top: var(--space-3, 0.75rem); }

    .py-4 { padding-bottom: var(--space-4, 1rem); padding-top: var(--space-4, 1rem); }

    .py-5 { padding-bottom: var(--space-5, 1.25rem); padding-top: var(--space-5, 1.25rem); }

    .py-6 { padding-bottom: var(--space-6, 1.5rem); padding-top: var(--space-6, 1.5rem); }

    .py-8 { padding-bottom: var(--space-8, 2rem); padding-top: var(--space-8, 2rem); }

    .py-10 { padding-bottom: var(--space-10, 2.5rem); padding-top: var(--space-10, 2.5rem); }

    .py-12 { padding-bottom: var(--space-12, 3rem); padding-top: var(--space-12, 3rem); }

    .py-16 { padding-bottom: var(--space-16, 4rem); padding-top: var(--space-16, 4rem); }

    .py-20 { padding-bottom: var(--space-20, 5rem); padding-top: var(--space-20, 5rem); }

    .py-24 { padding-bottom: var(--space-24, 6rem); padding-top: var(--space-24, 6rem); }

    .py-32 { padding-bottom: var(--space-32, 8rem); padding-top: var(--space-32, 8rem); }

    /* Einzelne Padding-Richtungen */
    .pt-0 { padding-top: var(--space-0, 0); }

    .pt-px { padding-top: var(--space-px, 1px); }

    .pt-1 { padding-top: var(--space-1, 0.25rem); }

    .pt-2 { padding-top: var(--space-2, 0.5rem); }

    .pt-3 { padding-top: var(--space-3, 0.75rem); }

    .pt-4 { padding-top: var(--space-4, 1rem); }

    .pt-5 { padding-top: var(--space-5, 1.25rem); }

    .pt-6 { padding-top: var(--space-6, 1.5rem); }

    .pt-8 { padding-top: var(--space-8, 2rem); }

    .pt-10 { padding-top: var(--space-10, 2.5rem); }

    .pt-12 { padding-top: var(--space-12, 3rem); }

    .pt-16 { padding-top: var(--space-16, 4rem); }

    .pt-20 { padding-top: var(--space-20, 5rem); }

    .pt-24 { padding-top: var(--space-24, 6rem); }

    .pt-32 { padding-top: var(--space-32, 8rem); }

    .pr-0 { padding-right: var(--space-0, 0); }

    .pr-px { padding-right: var(--space-px, 1px); }

    .pr-1 { padding-right: var(--space-1, 0.25rem); }

    .pr-2 { padding-right: var(--space-2, 0.5rem); }

    .pr-3 { padding-right: var(--space-3, 0.75rem); }

    .pr-4 { padding-right: var(--space-4, 1rem); }

    .pr-5 { padding-right: var(--space-5, 1.25rem); }

    .pr-6 { padding-right: var(--space-6, 1.5rem); }

    .pr-8 { padding-right: var(--space-8, 2rem); }

    .pr-10 { padding-right: var(--space-10, 2.5rem); }

    .pr-12 { padding-right: var(--space-12, 3rem); }

    .pr-16 { padding-right: var(--space-16, 4rem); }

    .pr-20 { padding-right: var(--space-20, 5rem); }

    .pr-24 { padding-right: var(--space-24, 6rem); }

    .pr-32 { padding-right: var(--space-32, 8rem); }

    .pb-0 { padding-bottom: var(--space-0, 0); }

    .pb-px { padding-bottom: var(--space-px, 1px); }

    .pb-1 { padding-bottom: var(--space-1, 0.25rem); }

    .pb-2 { padding-bottom: var(--space-2, 0.5rem); }

    .pb-3 { padding-bottom: var(--space-3, 0.75rem); }

    .pb-4 { padding-bottom: var(--space-4, 1rem); }

    .pb-5 { padding-bottom: var(--space-5, 1.25rem); }

    .pb-6 { padding-bottom: var(--space-6, 1.5rem); }

    .pb-8 { padding-bottom: var(--space-8, 2rem); }

    .pb-10 { padding-bottom: var(--space-10, 2.5rem); }

    .pb-12 { padding-bottom: var(--space-12, 3rem); }

    .pb-16 { padding-bottom: var(--space-16, 4rem); }

    .pb-20 { padding-bottom: var(--space-20, 5rem); }

    .pb-24 { padding-bottom: var(--space-24, 6rem); }

    .pb-32 { padding-bottom: var(--space-32, 8rem); }

    .pl-0 { padding-left: var(--space-0, 0); }

    .pl-px { padding-left: var(--space-px, 1px); }

    .pl-1 { padding-left: var(--space-1, 0.25rem); }

    .pl-2 { padding-left: var(--space-2, 0.5rem); }

    .pl-3 { padding-left: var(--space-3, 0.75rem); }

    .pl-4 { padding-left: var(--space-4, 1rem); }

    .pl-5 { padding-left: var(--space-5, 1.25rem); }

    .pl-6 { padding-left: var(--space-6, 1.5rem); }

    .pl-8 { padding-left: var(--space-8, 2rem); }

    .pl-10 { padding-left: var(--space-10, 2.5rem); }

    .pl-12 { padding-left: var(--space-12, 3rem); }

    .pl-16 { padding-left: var(--space-16, 4rem); }

    .pl-20 { padding-left: var(--space-20, 5rem); }

    .pl-24 { padding-left: var(--space-24, 6rem); }

    .pl-32 { padding-left: var(--space-32, 8rem); }
}