/* Spacing scale: 0, 1, 2, 3, 4, 5 (based on 0px to 48px) */
:root {
--spacer: 8px;
}

/* Margin utilities */
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.m-1  { margin: calc(var(--spacer) * 0.25) !important; }
.mt-1 { margin-top: calc(var(--spacer) * 0.25) !important; }
.mr-1 { margin-right: calc(var(--spacer) * 0.25) !important; }
.mb-1 { margin-bottom: calc(var(--spacer) * 0.25) !important; }
.ml-1 { margin-left: calc(var(--spacer) * 0.25) !important; }
.mx-1 { margin-left: calc(var(--spacer) * 0.25) !important; margin-right: calc(var(--spacer) * 0.25) !important; }
.my-1 { margin-top: calc(var(--spacer) * 0.25) !important; margin-bottom: calc(var(--spacer) * 0.25) !important; }

.m-2  { margin: calc(var(--spacer) * 0.5) !important; }
.m-3  { margin: var(--spacer) !important; }
.m-4  { margin: calc(var(--spacer) * 1.5) !important; }
.m-5  { margin: calc(var(--spacer) * 3) !important; }
.mt-2, .mr-2, .mb-2, .ml-2, .mx-2, .my-2,
.mt-3, .mr-3, .mb-3, .ml-3, .mx-3, .my-3,
.mt-4, .mr-4, .mb-4, .ml-4, .mx-4, .my-4,
.mt-5, .mr-5, .mb-5, .ml-5, .mx-5, .my-5 {
margin: 0 !important;
}

.mt-2 { margin-top: calc(var(--spacer) * 0.5) !important; }
.mr-2 { margin-right: calc(var(--spacer) * 0.5) !important; }
.mb-2 { margin-bottom: calc(var(--spacer) * 0.5) !important; }
.ml-2 { margin-left: calc(var(--spacer) * 0.5) !important; }
.mx-2 { margin-left: calc(var(--spacer) * 0.5) !important; margin-right: calc(var(--spacer) * 0.5) !important; }
.my-2 { margin-top: calc(var(--spacer) * 0.5) !important; margin-bottom: calc(var(--spacer) * 0.5) !important; }

.mt-3 { margin-top: var(--spacer) !important; }
.mr-3 { margin-right: var(--spacer) !important; }
.mb-3 { margin-bottom: var(--spacer) !important; }
.ml-3 { margin-left: var(--spacer) !important; }
.mx-3 { margin-left: var(--spacer) !important; margin-right: var(--spacer) !important; }
.my-3 { margin-top: var(--spacer) !important; margin-bottom: var(--spacer) !important; }

.mt-4 { margin-top: calc(var(--spacer) * 1.5) !important; }
.mr-4 { margin-right: calc(var(--spacer) * 1.5) !important; }
.mb-4 { margin-bottom: calc(var(--spacer) * 1.5) !important; }
.ml-4 { margin-left: calc(var(--spacer) * 1.5) !important; }
.mx-4 { margin-left: calc(var(--spacer) * 1.5) !important; margin-right: calc(var(--spacer) * 1.5) !important; }
.my-4 { margin-top: calc(var(--spacer) * 1.5) !important; margin-bottom: calc(var(--spacer) * 1.5) !important; }

.mt-5 { margin-top: calc(var(--spacer) * 3) !important; }
.mr-5 { margin-right: calc(var(--spacer) * 3) !important; }
.mb-5 { margin-bottom: calc(var(--spacer) * 3) !important; }
.ml-5 { margin-left: calc(var(--spacer) * 3) !important; }
.mx-5 { margin-left: calc(var(--spacer) * 3) !important; margin-right: calc(var(--spacer) * 3) !important; }
.my-5 { margin-top: calc(var(--spacer) * 3) !important; margin-bottom: calc(var(--spacer) * 3) !important; }

/* Padding utilities (optional) */
.p-0  { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.p-1  { padding: calc(var(--spacer) * 0.25) !important; }
.p-2  { padding: calc(var(--spacer) * 0.5) !important; }
.p-3  { padding: var(--spacer) !important; }
.p-4  { padding: calc(var(--spacer) * 1.5) !important; }
.p-5  { padding: calc(var(--spacer) * 3) !important; }