/* =====================================================
   Utility Classes - Spacing System
   ===================================================== */

/* =====================================================
   Margin Utilities
   ===================================================== */

/* All sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--spacing-1) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-3 { margin: var(--spacing-3) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.m-5 { margin: var(--spacing-5) !important; }
.m-6 { margin: var(--spacing-6) !important; }
.m-7 { margin: var(--spacing-7) !important; }
.m-8 { margin: var(--spacing-8) !important; }
.m-auto { margin: auto !important; }

/* Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-5 { margin-top: var(--spacing-5) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }
.mt-7 { margin-top: var(--spacing-7) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }
.mt-auto { margin-top: auto !important; }

/* Right */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--spacing-1) !important; }
.mr-2 { margin-right: var(--spacing-2) !important; }
.mr-3 { margin-right: var(--spacing-3) !important; }
.mr-4 { margin-right: var(--spacing-4) !important; }
.mr-5 { margin-right: var(--spacing-5) !important; }
.mr-6 { margin-right: var(--spacing-6) !important; }
.mr-7 { margin-right: var(--spacing-7) !important; }
.mr-8 { margin-right: var(--spacing-8) !important; }
.mr-auto { margin-right: auto !important; }

/* Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-5 { margin-bottom: var(--spacing-5) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }
.mb-7 { margin-bottom: var(--spacing-7) !important; }
.mb-8 { margin-bottom: var(--spacing-8) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Left */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--spacing-1) !important; }
.ml-2 { margin-left: var(--spacing-2) !important; }
.ml-3 { margin-left: var(--spacing-3) !important; }
.ml-4 { margin-left: var(--spacing-4) !important; }
.ml-5 { margin-left: var(--spacing-5) !important; }
.ml-6 { margin-left: var(--spacing-6) !important; }
.ml-7 { margin-left: var(--spacing-7) !important; }
.ml-8 { margin-left: var(--spacing-8) !important; }
.ml-auto { margin-left: auto !important; }

/* Horizontal (x-axis) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important; }
.mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
.mx-3 { margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important; }
.mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }
.mx-5 { margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important; }
.mx-6 { margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important; }
.mx-7 { margin-left: var(--spacing-7) !important; margin-right: var(--spacing-7) !important; }
.mx-8 { margin-left: var(--spacing-8) !important; margin-right: var(--spacing-8) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Vertical (y-axis) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important; }
.my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
.my-3 { margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important; }
.my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
.my-5 { margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important; }
.my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }
.my-7 { margin-top: var(--spacing-7) !important; margin-bottom: var(--spacing-7) !important; }
.my-8 { margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* =====================================================
   Padding Utilities
   ===================================================== */

/* All sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-3 { padding: var(--spacing-3) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-5 { padding: var(--spacing-5) !important; }
.p-6 { padding: var(--spacing-6) !important; }
.p-7 { padding: var(--spacing-7) !important; }
.p-8 { padding: var(--spacing-8) !important; }

/* Top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacing-1) !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pt-3 { padding-top: var(--spacing-3) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pt-5 { padding-top: var(--spacing-5) !important; }
.pt-6 { padding-top: var(--spacing-6) !important; }
.pt-7 { padding-top: var(--spacing-7) !important; }
.pt-8 { padding-top: var(--spacing-8) !important; }

/* Right */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--spacing-1) !important; }
.pr-2 { padding-right: var(--spacing-2) !important; }
.pr-3 { padding-right: var(--spacing-3) !important; }
.pr-4 { padding-right: var(--spacing-4) !important; }
.pr-5 { padding-right: var(--spacing-5) !important; }
.pr-6 { padding-right: var(--spacing-6) !important; }
.pr-7 { padding-right: var(--spacing-7) !important; }
.pr-8 { padding-right: var(--spacing-8) !important; }

/* Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--spacing-1) !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.pb-3 { padding-bottom: var(--spacing-3) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.pb-5 { padding-bottom: var(--spacing-5) !important; }
.pb-6 { padding-bottom: var(--spacing-6) !important; }
.pb-7 { padding-bottom: var(--spacing-7) !important; }
.pb-8 { padding-bottom: var(--spacing-8) !important; }

/* Left */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--spacing-1) !important; }
.pl-2 { padding-left: var(--spacing-2) !important; }
.pl-3 { padding-left: var(--spacing-3) !important; }
.pl-4 { padding-left: var(--spacing-4) !important; }
.pl-5 { padding-left: var(--spacing-5) !important; }
.pl-6 { padding-left: var(--spacing-6) !important; }
.pl-7 { padding-left: var(--spacing-7) !important; }
.pl-8 { padding-left: var(--spacing-8) !important; }

/* Horizontal (x-axis) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important; }
.px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
.px-3 { padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important; }
.px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
.px-5 { padding-left: var(--spacing-5) !important; padding-right: var(--spacing-5) !important; }
.px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }
.px-7 { padding-left: var(--spacing-7) !important; padding-right: var(--spacing-7) !important; }
.px-8 { padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important; }

/* Vertical (y-axis) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important; }
.py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
.py-3 { padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; }
.py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.py-5 { padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }
.py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
.py-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
.py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }

/* =====================================================
   Gap Utilities (for Grid and Flexbox)
   ===================================================== */

.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--spacing-1) !important; }
.gap-2 { gap: var(--spacing-2) !important; }
.gap-3 { gap: var(--spacing-3) !important; }
.gap-4 { gap: var(--spacing-4) !important; }
.gap-5 { gap: var(--spacing-5) !important; }
.gap-6 { gap: var(--spacing-6) !important; }
.gap-7 { gap: var(--spacing-7) !important; }
.gap-8 { gap: var(--spacing-8) !important; }

.row-gap-0 { row-gap: 0 !important; }
.row-gap-1 { row-gap: var(--spacing-1) !important; }
.row-gap-2 { row-gap: var(--spacing-2) !important; }
.row-gap-3 { row-gap: var(--spacing-3) !important; }
.row-gap-4 { row-gap: var(--spacing-4) !important; }
.row-gap-5 { row-gap: var(--spacing-5) !important; }

.column-gap-0 { column-gap: 0 !important; }
.column-gap-1 { column-gap: var(--spacing-1) !important; }
.column-gap-2 { column-gap: var(--spacing-2) !important; }
.column-gap-3 { column-gap: var(--spacing-3) !important; }
.column-gap-4 { column-gap: var(--spacing-4) !important; }
.column-gap-5 { column-gap: var(--spacing-5) !important; }

/* =====================================================
   Responsive Spacing Utilities
   ===================================================== */

/* Small Breakpoint (≥768px) */
@media (min-width: 768px) {
    /* Margin */
    .sm\:m-0 { margin: 0 !important; }
    .sm\:m-1 { margin: var(--spacing-1) !important; }
    .sm\:m-2 { margin: var(--spacing-2) !important; }
    .sm\:m-3 { margin: var(--spacing-3) !important; }
    .sm\:m-4 { margin: var(--spacing-4) !important; }
    .sm\:m-5 { margin: var(--spacing-5) !important; }
    .sm\:m-auto { margin: auto !important; }

    .sm\:mt-0 { margin-top: 0 !important; }
    .sm\:mt-1 { margin-top: var(--spacing-1) !important; }
    .sm\:mt-2 { margin-top: var(--spacing-2) !important; }
    .sm\:mt-3 { margin-top: var(--spacing-3) !important; }
    .sm\:mt-4 { margin-top: var(--spacing-4) !important; }
    .sm\:mt-5 { margin-top: var(--spacing-5) !important; }

    .sm\:mb-0 { margin-bottom: 0 !important; }
    .sm\:mb-1 { margin-bottom: var(--spacing-1) !important; }
    .sm\:mb-2 { margin-bottom: var(--spacing-2) !important; }
    .sm\:mb-3 { margin-bottom: var(--spacing-3) !important; }
    .sm\:mb-4 { margin-bottom: var(--spacing-4) !important; }
    .sm\:mb-5 { margin-bottom: var(--spacing-5) !important; }

    .sm\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .sm\:mx-1 { margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important; }
    .sm\:mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
    .sm\:mx-3 { margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important; }
    .sm\:mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }
    .sm\:mx-5 { margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important; }
    .sm\:mx-auto { margin-left: auto !important; margin-right: auto !important; }

    .sm\:mr-0 {  margin-right: 0 !important; }
    .sm\:mr-1 {  margin-right: var(--spacing-1) !important; }
    .sm\:mr-2 {  margin-right: var(--spacing-2) !important; }
    .sm\:mr-3 {  margin-right: var(--spacing-3) !important; }
    .sm\:mr-4 {  margin-right: var(--spacing-4) !important; }
    .sm\:mr-5 {  margin-right: var(--spacing-5) !important; }
    .sm\:mr-6 {  margin-right: var(--spacing-6) !important; }
    .sm\:mr-7 {  margin-right: var(--spacing-7) !important; }
    .sm\:mr-8 {  margin-right: var(--spacing-8) !important; }
    .sm\:mr-auto {  margin-right: auto !important; }

    .sm\:my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .sm\:my-1 { margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important; }
    .sm\:my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
    .sm\:my-3 { margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important; }
    .sm\:my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
    .sm\:my-5 { margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important; }

    /* Padding */
    .sm\:p-0 { padding: 0 !important; }
    .sm\:p-1 { padding: var(--spacing-1) !important; }
    .sm\:p-2 { padding: var(--spacing-2) !important; }
    .sm\:p-3 { padding: var(--spacing-3) !important; }
    .sm\:p-4 { padding: var(--spacing-4) !important; }
    .sm\:p-5 { padding: var(--spacing-5) !important; }

    .sm\:px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .sm\:px-1 { padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important; }
    .sm\:px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
    .sm\:px-3 { padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important; }
    .sm\:px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
    .sm\:px-5 { padding-left: var(--spacing-5) !important; padding-right: var(--spacing-5) !important; }

    .sm\:py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .sm\:py-1 { padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important; }
    .sm\:py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
    .sm\:py-3 { padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; }
    .sm\:py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
    .sm\:py-5 { padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }
    .sm\:py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
    .sm\:py-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
    .sm\:py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }

    .sm\:pl-0 { padding-left: 0 !important; }
    .sm\:pl-1 { padding-left: var(--spacing-1) !important; }
    .sm\:pl-2 { padding-left: var(--spacing-2) !important; }
    .sm\:pl-3 { padding-left: var(--spacing-3) !important; }
    .sm\:pl-4 { padding-left: var(--spacing-4) !important; }
    .sm\:pl-5 { padding-left: var(--spacing-5) !important; }
    .sm\:pl-6 { padding-left: var(--spacing-6) !important; }
    .sm\:pl-7 { padding-left: var(--spacing-7) !important; }
    .sm\:pl-8 { padding-left: var(--spacing-8) !important; }
}

/* Medium Breakpoint (≥992px) */
@media (min-width: 992px) {
    /* Margin */
    .md\:m-0 { margin: 0 !important; }
    .md\:m-1 { margin: var(--spacing-1) !important; }
    .md\:m-2 { margin: var(--spacing-2) !important; }
    .md\:m-3 { margin: var(--spacing-3) !important; }
    .md\:m-4 { margin: var(--spacing-4) !important; }
    .md\:m-5 { margin: var(--spacing-5) !important; }
    .md\:m-6 { margin: var(--spacing-6) !important; }
    .md\:m-auto { margin: auto !important; }

    .md\:mr-0 { margin-right: 0 !important; }
    .md\:mr-1 { margin-right: var(--spacing-1) !important; }
    .md\:mr-2 { margin-right: var(--spacing-2) !important; }
    .md\:mr-3 { margin-right: var(--spacing-3) !important; }
    .md\:mr-4 { margin-right: var(--spacing-4) !important; }
    .md\:mr-5 { margin-right: var(--spacing-5) !important; }
    .md\:mr-6 { margin-right: var(--spacing-6) !important; }
    .md\:mr-7 { margin-right: var(--spacing-7) !important; }
    .md\:mr-8 { margin-right: var(--spacing-8) !important; }
    .md\:mr-auto { margin-right: auto !important; }

    .md\:mt-0 { margin-top: 0 !important; }
    .md\:mt-1 { margin-top: var(--spacing-1) !important; }
    .md\:mt-2 { margin-top: var(--spacing-2) !important; }
    .md\:mt-3 { margin-top: var(--spacing-3) !important; }
    .md\:mt-4 { margin-top: var(--spacing-4) !important; }
    .md\:mt-5 { margin-top: var(--spacing-5) !important; }
    .md\:mt-6 { margin-top: var(--spacing-6) !important; }
    .md\:mt-7 { margin-top: var(--spacing-7) !important; }
    .md\:mt-8 { margin-top: var(--spacing-8) !important; }
    .md\:mt-auto { margin-top: auto !important; }


    .md\:mb-0 { margin-bottom: 0 !important; }
    .md\:mb-1 { margin-bottom: var(--spacing-1) !important; }
    .md\:mb-2 { margin-bottom: var(--spacing-2) !important; }
    .md\:mb-3 { margin-bottom: var(--spacing-3) !important; }
    .md\:mb-4 { margin-bottom: var(--spacing-4) !important; }
    .md\:mb-5 { margin-bottom: var(--spacing-5) !important; }
    .md\:mb-6 { margin-bottom: var(--spacing-6) !important; }
    .md\:mb-7 { margin-bottom: var(--spacing-7) !important; }
    .md\:mb-8 { margin-bottom: var(--spacing-8) !important; }
    .md\:mb-auto { margin-bottom: auto !important; }

    .md\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .md\:mx-1 { margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important; }
    .md\:mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
    .md\:mx-3 { margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important; }
    .md\:mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }
    .md\:mx-5 { margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important; }
    .md\:mx-6 { margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important; }
    .md\:mx-auto { margin-left: auto !important; margin-right: auto !important; }

    .md\:my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .md\:my-1 { margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important; }
    .md\:my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
    .md\:my-3 { margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important; }
    .md\:my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
    .md\:my-5 { margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important; }
    .md\:my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }

    /* Padding */
    .md\:p-0 { padding: 0 !important; }
    .md\:p-1 { padding: var(--spacing-1) !important; }
    .md\:p-2 { padding: var(--spacing-2) !important; }
    .md\:p-3 { padding: var(--spacing-3) !important; }
    .md\:p-4 { padding: var(--spacing-4) !important; }
    .md\:p-5 { padding: var(--spacing-5) !important; }
    .md\:p-6 { padding: var(--spacing-6) !important; }

    .md\:pt-0 { padding-top: 0 !important; }
    .md\:pt-1 { padding-top: var(--spacing-1) !important; }
    .md\:pt-2 { padding-top: var(--spacing-2) !important; }
    .md\:pt-3 { padding-top: var(--spacing-3) !important; }
    .md\:pt-4 { padding-top: var(--spacing-4) !important; }
    .md\:pt-5 { padding-top: var(--spacing-5) !important; }
    .md\:pt-6 { padding-top: var(--spacing-6) !important; }
    .md\:pt-7 { padding-top: var(--spacing-7) !important; }
    .md\:pt-8 { padding-top: var(--spacing-8) !important; }

    .md\:pb-0 { padding-bottom: 0 !important; }
    .md\:pb-1 { padding-bottom: var(--spacing-1) !important; }
    .md\:pb-2 { padding-bottom: var(--spacing-2) !important; }
    .md\:pb-3 { padding-bottom: var(--spacing-3) !important; }
    .md\:pb-4 { padding-bottom: var(--spacing-4) !important; }
    .md\:pb-5 { padding-bottom: var(--spacing-5) !important; }
    .md\:pb-6 { padding-bottom: var(--spacing-6) !important; }
    .md\:pb-7 { padding-bottom: var(--spacing-7) !important; }
    .md\:pb-8 { padding-bottom: var(--spacing-8) !important; }

    .md\:pr-0 { padding-right: 0 !important; }
    .md\:pr-1 { padding-right: var(--spacing-1) !important; }
    .md\:pr-2 { padding-right: var(--spacing-2) !important; }
    .md\:pr-3 { padding-right: var(--spacing-3) !important; }
    .md\:pr-4 { padding-right: var(--spacing-4) !important; }
    .md\:pr-5 { padding-right: var(--spacing-5) !important; }
    .md\:pr-6 { padding-right: var(--spacing-6) !important; }
    .md\:pr-7 { padding-right: var(--spacing-7) !important; }
    .md\:pr-8 { padding-right: var(--spacing-8) !important; }

    .md\:px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .md\:px-1 { padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important; }
    .md\:px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
    .md\:px-3 { padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important; }
    .md\:px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
    .md\:px-5 { padding-left: var(--spacing-5) !important; padding-right: var(--spacing-5) !important; }
    .md\:px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }

    .md\:py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .md\:py-1 { padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important; }
    .md\:py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
    .md\:py-3 { padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; }
    .md\:py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
    .md\:py-5 { padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }
    .md\:py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
}

/* Large Breakpoint (≥1140px) */
@media (min-width: 1140px) {
    /* Margin */
    .lg\:m-0 { margin: 0 !important; }
    .lg\:m-1 { margin: var(--spacing-1) !important; }
    .lg\:m-2 { margin: var(--spacing-2) !important; }
    .lg\:m-3 { margin: var(--spacing-3) !important; }
    .lg\:m-4 { margin: var(--spacing-4) !important; }
    .lg\:m-5 { margin: var(--spacing-5) !important; }
    .lg\:m-6 { margin: var(--spacing-6) !important; }
    .lg\:m-7 { margin: var(--spacing-7) !important; }
    .lg\:m-auto { margin: auto !important; }

    .lg\:mt-0 {margin-top: 0 !important;}

    .lg\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .lg\:mx-1 { margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important; }
    .lg\:mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
    .lg\:mx-3 { margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important; }
    .lg\:mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }
    .lg\:mx-5 { margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important; }
    .lg\:mx-6 { margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important; }
    .lg\:mx-7 { margin-left: var(--spacing-7) !important; margin-right: var(--spacing-7) !important; }
    .lg\:mx-auto { margin-left: auto !important; margin-right: auto !important; }

    .lg\:my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .lg\:my-1 { margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important; }
    .lg\:my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
    .lg\:my-3 { margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important; }
    .lg\:my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
    .lg\:my-5 { margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important; }
    .lg\:my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }
    .lg\:my-7 { margin-top: var(--spacing-7) !important; margin-bottom: var(--spacing-7) !important; }

    /* Padding */
    .lg\:p-0 { padding: 0 !important; }
    .lg\:p-1 { padding: var(--spacing-1) !important; }
    .lg\:p-2 { padding: var(--spacing-2) !important; }
    .lg\:p-3 { padding: var(--spacing-3) !important; }
    .lg\:p-4 { padding: var(--spacing-4) !important; }
    .lg\:p-5 { padding: var(--spacing-5) !important; }
    .lg\:p-6 { padding: var(--spacing-6) !important; }
    .lg\:p-7 { padding: var(--spacing-7) !important; }

    .lg\:px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .lg\:px-1 { padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important; }
    .lg\:px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
    .lg\:px-3 { padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important; }
    .lg\:px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
    .lg\:px-5 { padding-left: var(--spacing-5) !important; padding-right: var(--spacing-5) !important; }
    .lg\:px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }
    .lg\:px-7 { padding-left: var(--spacing-7) !important; padding-right: var(--spacing-7) !important; }

    .lg\:py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .lg\:py-1 { padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important; }
    .lg\:py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
    .lg\:py-3 { padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; }
    .lg\:py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
    .lg\:py-5 { padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }
    .lg\:py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
    .lg\:py-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }

    .lg\:pb-0 { padding-bottom: 0 !important; }
    .lg\:pb-1 { padding-bottom: var(--spacing-1) !important; }
    .lg\:pb-2 { padding-bottom: var(--spacing-2) !important; }
    .lg\:pb-3 { padding-bottom: var(--spacing-3) !important; }
    .lg\:pb-4 { padding-bottom: var(--spacing-4) !important; }
    .lg\:pb-5 { padding-bottom: var(--spacing-5) !important; }
    .lg\:pb-6 { padding-bottom: var(--spacing-6) !important; }
    .lg\:pb-7 { padding-bottom: var(--spacing-7) !important; }
}

/* Extra Large Breakpoint (≥1582px) */
@media (min-width: 1582px) {
    /* Margin */
    .xl\:m-0 { margin: 0 !important; }
    .xl\:m-1 { margin: var(--spacing-1) !important; }
    .xl\:m-2 { margin: var(--spacing-2) !important; }
    .xl\:m-3 { margin: var(--spacing-3) !important; }
    .xl\:m-4 { margin: var(--spacing-4) !important; }
    .xl\:m-5 { margin: var(--spacing-5) !important; }
    .xl\:m-6 { margin: var(--spacing-6) !important; }
    .xl\:m-7 { margin: var(--spacing-7) !important; }
    .xl\:m-8 { margin: var(--spacing-8) !important; }
    .xl\:m-auto { margin: auto !important; }

    .xl\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .xl\:mx-1 { margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important; }
    .xl\:mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
    .xl\:mx-3 { margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important; }
    .xl\:mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }
    .xl\:mx-5 { margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important; }
    .xl\:mx-6 { margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important; }
    .xl\:mx-7 { margin-left: var(--spacing-7) !important; margin-right: var(--spacing-7) !important; }
    .xl\:mx-8 { margin-left: var(--spacing-8) !important; margin-right: var(--spacing-8) !important; }
    .xl\:mx-auto { margin-left: auto !important; margin-right: auto !important; }

    .xl\:my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .xl\:my-1 { margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important; }
    .xl\:my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
    .xl\:my-3 { margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important; }
    .xl\:my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
    .xl\:my-5 { margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important; }
    .xl\:my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }
    .xl\:my-7 { margin-top: var(--spacing-7) !important; margin-bottom: var(--spacing-7) !important; }
    .xl\:my-8 { margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important; }

    /* Padding */
    .xl\:p-0 { padding: 0 !important; }
    .xl\:p-1 { padding: var(--spacing-1) !important; }
    .xl\:p-2 { padding: var(--spacing-2) !important; }
    .xl\:p-3 { padding: var(--spacing-3) !important; }
    .xl\:p-4 { padding: var(--spacing-4) !important; }
    .xl\:p-5 { padding: var(--spacing-5) !important; }
    .xl\:p-6 { padding: var(--spacing-6) !important; }
    .xl\:p-7 { padding: var(--spacing-7) !important; }
    .xl\:p-8 { padding: var(--spacing-8) !important; }

    .xl\:px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .xl\:px-1 { padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important; }
    .xl\:px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
    .xl\:px-3 { padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important; }
    .xl\:px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
    .xl\:px-5 { padding-left: var(--spacing-5) !important; padding-right: var(--spacing-5) !important; }
    .xl\:px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }
    .xl\:px-7 { padding-left: var(--spacing-7) !important; padding-right: var(--spacing-7) !important; }
    .xl\:px-8 { padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important; }

    .xl\:py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .xl\:py-1 { padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important; }
    .xl\:py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
    .xl\:py-3 { padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; }
    .xl\:py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
    .xl\:py-5 { padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }
    .xl\:py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
    .xl\:py-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
    .xl\:py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
}

/* =====================================================
   Width & Height Utilities
   ===================================================== */

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }

.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }

@media (min-width: 768px) {
    .sm\:w-50 {
        width: 50% !important;
    }
}

/* =====================================================
   Position Utilities
   ===================================================== */

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }

.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }

.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }

.end-0 { right: 0 !important; }
.end-50 { right: 50% !important; }
.end-100 { right: 100% !important; }

.translate-middle {
    transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
    transform: translateX(-50%) !important;
}

.translate-middle-y {
    transform: translateY(-50%) !important;
}

/* =====================================================
   Border Utilities
   ===================================================== */

.border { border: var(--border-width) solid var(--border-color) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: var(--border-width) solid var(--border-color) !important; }
.border-end { border-right: var(--border-width) solid var(--border-color) !important; }
.border-bottom { border-bottom: var(--border-width) solid var(--border-color) !important; }
.border-start { border-left: var(--border-width) solid var(--border-color) !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-info { border-color: var(--color-info) !important; }
.border-light { border-color: var(--color-light) !important; }
.border-dark { border-color: var(--color-dark) !important; }
.border-white { border-color: var(--color-white) !important; }

/* Border Radius */
.rounded { border-radius: var(--radius-md) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }

.rounded-top {
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
}

.rounded-end {
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

.rounded-bottom {
    border-bottom-right-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
}

.rounded-start {
    border-bottom-left-radius: var(--radius-md) !important;
    border-top-left-radius: var(--radius-md) !important;
}

/* =====================================================
   Shadow Utilities
   ===================================================== */

.shadow-none { box-shadow: none !important; }
.shadow { box-shadow: var(--shadow-default); }

/* =====================================================
   Overflow Utilities
   ===================================================== */

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* =====================================================
   Typography Utilities
   ===================================================== */

.fw-light { font-weight: 300 !important; }
.fw-lighter { font-weight: lighter !important; }
.fw-normal { font-weight: 400 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: bolder !important; }

.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: var(--line-height-sm) !important; }
.lh-base { line-height: var(--line-height-base) !important; }
.lh-lg { line-height: var(--line-height-lg) !important; }

.fs-1 { font-size: var(--h1-size) !important; }
.fs-2 { font-size: var(--h2-size) !important; }
.fs-3 { font-size: var(--h3-size) !important; }
.fs-4 { font-size: var(--h4-size) !important; }
.fs-5 { font-size: var(--h5-size) !important; }
.fs-6 { font-size: var(--h6-size) !important; }

.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }

.text-nowrap { white-space: nowrap !important; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================
   User Select Utilities
   ===================================================== */

.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
.user-select-none { user-select: none !important; }

/* =====================================================
   Pointer Events Utilities
   ===================================================== */

.pe-none { pointer-events: none !important; }
.pe-auto { pointer-events: auto !important; }

/* =====================================================
   Opacity Utilities
   ===================================================== */

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ==========================================================
   BREAKPOINTS
   768px  → Tablet
   992px  → Desktop
   1140px → Large Desktop
   1582px → XL / Wide Screens
   ========================================================== */

/* Base */
.hidden {
  display: none !important;
}

/* =========================
   XS < 768px (Mobile)
   ========================= */
.show-xs { display: block; }
.hide-xs { display: none; }

@media (min-width: 768px) {
  .show-xs { display: none; }
  .hide-xs { display: block; }
}

/* =========================
   SM ≥ 768px
   ========================= */
.show-sm { display: none; }

@media (min-width: 768px) {
  .show-sm { display: block; }
  .hide-sm { display: none; }
}

/* =========================
   MD ≥ 992px
   ========================= */
.show-md { display: none; }

@media (min-width: 992px) {
  .show-md { display: block; }
  .hide-md { display: none; }
}

/* =========================
   LG ≥ 1140px
   ========================= */
.show-lg { display: none; }

@media (min-width: 1140px) {
  .show-lg { display: block; }
  .hide-lg { display: none; }
}

/* =========================
   XL ≥ 1582px
   ========================= */
.show-xl { display: none; }

@media (min-width: 1582px) {
  .show-xl { display: block; }
  .hide-xl { display: none; }
}