:root {
    /* Spacing Scale */
    --s-0: 0;
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-20: 5rem;
    --s-24: 6rem;
    --s-32: 8rem;

    /* Radius Scale */
    --r-xs: 0.125rem;
    --r-sm: 0.25rem;
    --r-md: 0.375rem;
    --r-lg: 0.5rem;
    --r-xl: 0.75rem;
    --r-2xl: 1rem;
    --r-3xl: 1.5rem;
    --r-full: 9999px;

    /* Layout */
    --container-width: 1200px;
    --container-padding: var(--s-4);
}

/* Margin Utilities */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: var(--s-1);
}

.m-2 {
    margin: var(--s-2);
}

.m-4 {
    margin: var(--s-4);
}

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

.mt-1 {
    margin-top: var(--s-1);
}

.mt-2 {
    margin-top: var(--s-2);
}

.mt-4 {
    margin-top: var(--s-4);
}

.mt-6 {
    margin-top: var(--s-6);
}

.mt-8 {
    margin-top: var(--s-8);
}

.mt-16 {
    margin-top: var(--s-16);
}

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

.mb-1 {
    margin-bottom: var(--s-1);
}

.mb-2 {
    margin-bottom: var(--s-2);
}

.mb-3 {
    margin-bottom: var(--s-3);
}

.mb-4 {
    margin-bottom: var(--s-4);
}

.mb-6 {
    margin-bottom: var(--s-6);
}

.mb-8 {
    margin-bottom: var(--s-8);
}

.mb-10 {
    margin-bottom: var(--s-10);
}

.mb-12 {
    margin-bottom: var(--s-12);
}

.mb-16 {
    margin-bottom: var(--s-16);
}

.ml-1 {
    margin-left: var(--s-1);
}

.ml-2 {
    margin-left: var(--s-2);
}

.ml-3 {
    margin-left: var(--s-3);
}

.ml-4 {
    margin-left: var(--s-4);
}

.ml-8 {
    margin-left: var(--s-8);
}

.mr-1 {
    margin-right: var(--s-1);
}

.mr-2 {
    margin-right: var(--s-2);
}

/* Padding Utilities */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: var(--s-1);
}

.p-2 {
    padding: var(--s-2);
}

.p-4 {
    padding: var(--s-4);
}

.pt-4 {
    padding-top: var(--s-4);
}

.pt-10 {
    padding-top: var(--s-10);
}

.pb-4 {
    padding-bottom: var(--s-4);
}

.pr-1 {
    padding-right: var(--s-1);
}

.px-4 {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
}

.px-6 {
    padding-left: var(--s-6);
    padding-right: var(--s-6);
}

.py-3 {
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
}

.py-4 {
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
}

.py-5 {
    padding-top: var(--s-5);
    padding-bottom: var(--s-5);
}

.py-8 {
    padding-top: var(--s-8);
    padding-bottom: var(--s-8);
}

/* Radius Utilities */
.rounded-sm {
    border-radius: var(--r-sm);
}

.rounded-md {
    border-radius: var(--r-md);
}

.rounded-lg {
    border-radius: var(--r-lg);
}

.rounded-xl {
    border-radius: var(--r-xl);
}

.rounded-2xl {
    border-radius: var(--r-2xl);
}

.rounded-3xl {
    border-radius: var(--r-3xl);
}

.rounded-full {
    border-radius: var(--r-full);
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
}