/* Spacing utilities */
.mt-1 { margin-top: var(--size-1); }
.mt-2 { margin-top: var(--size-2); }
.mt-3 { margin-top: var(--size-3); }
.mt-4 { margin-top: var(--size-4); }
.mt-5 { margin-top: var(--size-5); }
.mt-6 { margin-top: var(--size-6); }
.mt-7 { margin-top: var(--size-7); }
.mt-8 { margin-top: var(--size-8); }

.mb-1 { margin-bottom: var(--size-1); }
.mb-2 { margin-bottom: var(--size-2); }
.mb-3 { margin-bottom: var(--size-3); }
.mb-4 { margin-bottom: var(--size-4); }
.mb-5 { margin-bottom: var(--size-5); }
.mb-6 { margin-bottom: var(--size-6); }
.mb-7 { margin-bottom: var(--size-7); }
.mb-8 { margin-bottom: var(--size-8); }

.my-1 { margin-block: var(--size-1); }
.my-2 { margin-block: var(--size-2); }
.my-3 { margin-block: var(--size-3); }
.my-4 { margin-block: var(--size-4); }
.my-5 { margin-block: var(--size-5); }
.my-6 { margin-block: var(--size-6); }
.my-7 { margin-block: var(--size-7); }
.my-8 { margin-block: var(--size-8); }

.pt-1 { padding-top: var(--size-1); }
.pt-2 { padding-top: var(--size-2); }
.pt-3 { padding-top: var(--size-3); }
.pt-4 { padding-top: var(--size-4); }
.pt-5 { padding-top: var(--size-5); }
.pt-6 { padding-top: var(--size-6); }
.pt-7 { padding-top: var(--size-7); }
.pt-8 { padding-top: var(--size-8); }

.pb-1 { padding-bottom: var(--size-1); }
.pb-2 { padding-bottom: var(--size-2); }
.pb-3 { padding-bottom: var(--size-3); }
.pb-4 { padding-bottom: var(--size-4); }
.pb-5 { padding-bottom: var(--size-5); }
.pb-6 { padding-bottom: var(--size-6); }
.pb-7 { padding-bottom: var(--size-7); }
.pb-8 { padding-bottom: var(--size-8); }

.py-1 { padding-block: var(--size-1); }
.py-2 { padding-block: var(--size-2); }
.py-3 { padding-block: var(--size-3); }
.py-4 { padding-block: var(--size-4); }
.py-5 { padding-block: var(--size-5); }
.py-6 { padding-block: var(--size-6); }
.py-7 { padding-block: var(--size-7); }
.py-8 { padding-block: var(--size-8); }

.px-1 { padding-inline: var(--size-1); }
.px-2 { padding-inline: var(--size-2); }
.px-3 { padding-inline: var(--size-3); }
.px-4 { padding-inline: var(--size-4); }
.px-5 { padding-inline: var(--size-5); }
.px-6 { padding-inline: var(--size-6); }