:root {
    /* Mobile values (smaller) – tweak to taste */
    --space-10: 0.375rem;  /* ~6px  */
    --space-20: 0.75rem;   /* ~12px */
    --space-30: 1.125rem;  /* ~18px */
    --space-40: 1.5rem;    /* ~24px */
    --space-50: 1.875rem;  /* ~30px */
    --space-60: 2.25rem;   /* ~36px */
    --space-70: 2.625rem;  /* ~42px */
    --space-80: 3rem;      /* ~48px */
    --space-90: 3.375rem;  /* ~54px */
    --space-100: 3.75rem;  /* ~60px */
}

/* md and up – roughly your original 10px/20px/...100px spacing */
@media (min-width: 768px) {
    :root {
        --space-10: 0.625rem;  /* 10px  */
        --space-20: 1.25rem;   /* 20px  */
        --space-30: 1.875rem;  /* 30px  */
        --space-40: 2.5rem;    /* 40px  */
        --space-50: 3.125rem;  /* 50px  */
        --space-60: 3.75rem;   /* 60px  */
        --space-70: 4.375rem;  /* 70px  */
        --space-80: 5rem;      /* 80px  */
        --space-90: 5.625rem;  /* 90px  */
        --space-100: 6.25rem;  /* 100px */
    }
}

/* Padding top */
.pt-10  { padding-top: var(--space-10) !important; }
.pt-20  { padding-top: var(--space-20) !important; }
.pt-30  { padding-top: var(--space-30) !important; }
.pt-40  { padding-top: var(--space-40) !important; }
.pt-50  { padding-top: var(--space-50) !important; }
.pt-60  { padding-top: var(--space-60) !important; }
.pt-70  { padding-top: var(--space-70) !important; }
.pt-80  { padding-top: var(--space-80) !important; }
.pt-90  { padding-top: var(--space-90) !important; }
.pt-100 { padding-top: var(--space-100) !important; }

/* Padding bottom */
.pb-10  { padding-bottom: var(--space-10) !important; }
.pb-20  { padding-bottom: var(--space-20) !important; }
.pb-30  { padding-bottom: var(--space-30) !important; }
.pb-40  { padding-bottom: var(--space-40) !important; }
.pb-50  { padding-bottom: var(--space-50) !important; }
.pb-60  { padding-bottom: var(--space-60) !important; }
.pb-70  { padding-bottom: var(--space-70) !important; }
.pb-80  { padding-bottom: var(--space-80) !important; }
.pb-90  { padding-bottom: var(--space-90) !important; }
.pb-100 { padding-bottom: var(--space-100) !important; }

/* Margin top */
.mt-10  { margin-top: var(--space-10) !important; }
.mt-20  { margin-top: var(--space-20) !important; }
.mt-30  { margin-top: var(--space-30) !important; }
.mt-40  { margin-top: var(--space-40) !important; }
.mt-50  { margin-top: var(--space-50) !important; }
.mt-60  { margin-top: var(--space-60) !important; }
.mt-70  { margin-top: var(--space-70) !important; }
.mt-80  { margin-top: var(--space-80) !important; }
.mt-90  { margin-top: var(--space-90) !important; }
.mt-100 { margin-top: var(--space-100) !important; }

/* Margin bottom */
.mb-10  { margin-bottom: var(--space-10) !important; }
.mb-20  { margin-bottom: var(--space-20) !important; }
.mb-30  { margin-bottom: var(--space-30) !important; }
.mb-40  { margin-bottom: var(--space-40) !important; }
.mb-50  { margin-bottom: var(--space-50) !important; }
.mb-60  { margin-bottom: var(--space-60) !important; }
.mb-70  { margin-bottom: var(--space-70) !important; }
.mb-80  { margin-bottom: var(--space-80) !important; }
.mb-90  { margin-bottom: var(--space-90) !important; }
.mb-100 { margin-bottom: var(--space-100) !important; }

/* Padding X (left & right) */
.px-10  { padding-left: var(--space-10) !important;  padding-right: var(--space-10) !important; }
.px-20  { padding-left: var(--space-20) !important;  padding-right: var(--space-20) !important; }
.px-30  { padding-left: var(--space-30) !important;  padding-right: var(--space-30) !important; }
.px-40  { padding-left: var(--space-40) !important;  padding-right: var(--space-40) !important; }
.px-50  { padding-left: var(--space-50) !important;  padding-right: var(--space-50) !important; }
.px-60  { padding-left: var(--space-60) !important;  padding-right: var(--space-60) !important; }
.px-70  { padding-left: var(--space-70) !important;  padding-right: var(--space-70) !important; }
.px-80  { padding-left: var(--space-80) !important;  padding-right: var(--space-80) !important; }
.px-90  { padding-left: var(--space-90) !important;  padding-right: var(--space-90) !important; }
.px-100 { padding-left: var(--space-100) !important; padding-right: var(--space-100) !important; }

/* Padding Y (top & bottom) */
.py-10  { padding-top: var(--space-10) !important;  padding-bottom: var(--space-10) !important; }
.py-20  { padding-top: var(--space-20) !important;  padding-bottom: var(--space-20) !important; }
.py-30  { padding-top: var(--space-30) !important;  padding-bottom: var(--space-30) !important; }
.py-40  { padding-top: var(--space-40) !important;  padding-bottom: var(--space-40) !important; }
.py-50  { padding-top: var(--space-50) !important;  padding-bottom: var(--space-50) !important; }
.py-60  { padding-top: var(--space-60) !important;  padding-bottom: var(--space-60) !important; }
.py-70  { padding-top: var(--space-70) !important;  padding-bottom: var(--space-70) !important; }
.py-80  { padding-top: var(--space-80) !important;  padding-bottom: var(--space-80) !important; }
.py-90  { padding-top: var(--space-90) !important;  padding-bottom: var(--space-90) !important; }
.py-100 { padding-top: var(--space-100) !important; padding-bottom: var(--space-100) !important; }

/* Margin X (left & right) */
.mx-10  { margin-left: var(--space-10) !important;  margin-right: var(--space-10) !important; }
.mx-20  { margin-left: var(--space-20) !important;  margin-right: var(--space-20) !important; }
.mx-30  { margin-left: var(--space-30) !important;  margin-right: var(--space-30) !important; }
.mx-40  { margin-left: var(--space-40) !important;  margin-right: var(--space-40) !important; }
.mx-50  { margin-left: var(--space-50) !important;  margin-right: var(--space-50) !important; }
.mx-60  { margin-left: var(--space-60) !important;  margin-right: var(--space-60) !important; }
.mx-70  { margin-left: var(--space-70) !important;  margin-right: var(--space-70) !important; }
.mx-80  { margin-left: var(--space-80) !important;  margin-right: var(--space-80) !important; }
.mx-90  { margin-left: var(--space-90) !important;  margin-right: var(--space-90) !important; }
.mx-100 { margin-left: var(--space-100) !important; margin-right: var(--space-100) !important; }

/* Margin Y (top & bottom) */
.my-10  { margin-top: var(--space-10) !important;  margin-bottom: var(--space-10) !important; }
.my-20  { margin-top: var(--space-20) !important;  margin-bottom: var(--space-20) !important; }
.my-30  { margin-top: var(--space-30) !important;  margin-bottom: var(--space-30) !important; }
.my-40  { margin-top: var(--space-40) !important;  margin-bottom: var(--space-40) !important; }
.my-50  { margin-top: var(--space-50) !important;  margin-bottom: var(--space-50) !important; }
.my-60  { margin-top: var(--space-60) !important;  margin-bottom: var(--space-60) !important; }
.my-70  { margin-top: var(--space-70) !important;  margin-bottom: var(--space-70) !important; }
.my-80  { margin-top: var(--space-80) !important;  margin-bottom: var(--space-80) !important; }
.my-90  { margin-top: var(--space-90) !important;  margin-bottom: var(--space-90) !important; }
.my-100 { margin-top: var(--space-100) !important; margin-bottom: var(--space-100) !important; }