:root {
    --sp-0: 0;
    --sp-px: 1px;
    --sp-0-5: 0.125rem;
    --sp-1: 0.25rem;
    --sp-1-5: 0.375rem;
    --sp-2: 0.5rem;
    --sp-2-5: 0.625rem;
    --sp-3: 0.75rem;
    --sp-3-5: 0.875rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 1.75rem;
    --sp-8: 2rem;
    --sp-9: 2.25rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-14: 3.5rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;
    --r-none: 0;
    --r-sm: 2px;
    --r-base: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 12px;
    --r-2xl: 16px;
    --r-3xl: 24px;
    --r-full: 9999px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.12), 0 8px 10px rgba(0,0,0,0.05);
    --shadow-2xl: 0 25px 50px rgba(0,0,0,0.2);
    --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.05);
    --shadow-colored-blue: 0 4px 14px rgba(37,99,235,0.35);
    --shadow-colored-purple: 0 4px 14px rgba(124,58,237,0.35);
    --shadow-colored-green: 0 4px 14px rgba(22,163,74,0.35);
    --shadow-colored-red: 0 4px 14px rgba(220,38,38,0.35);
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 4px;
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}

.space-demo-sm {
    padding: var(--sp-2) var(--sp-3);
    background-color: #e0f2fe;
    border-radius: var(--r-base);
    color: #0369a1;
}

.space-demo-md {
    padding: var(--sp-4) var(--sp-6);
    background-color: #dbeafe;
    border-radius: var(--r-lg);
    color: #1d4ed8;
}

.space-demo-lg {
    padding: var(--sp-8) var(--sp-12);
    background-color: #e0e7ff;
    border-radius: var(--r-2xl);
    color: #4338ca;
}

.space-demo-pill {
    padding: var(--sp-2) var(--sp-5);
    background-color: #f3e8ff;
    border-radius: var(--r-full);
    color: #7e22ce;
}

.radius-none {
    padding: 1rem;
    background-color: #fef3c7;
    border-radius: var(--r-none);
    border: 2px solid #d97706;
    color: #92400e;
}

.radius-sm {
    padding: 1rem;
    background-color: #fef3c7;
    border-radius: var(--r-sm);
    color: #92400e;
}

.radius-md {
    padding: 1rem;
    background-color: #fef9c3;
    border-radius: var(--r-md);
    color: #854d0e;
}

.radius-xl {
    padding: 1rem;
    background-color: #fefce8;
    border-radius: var(--r-xl);
    color: #713f12;
}

.radius-3xl {
    padding: 1rem;
    background-color: #ecfdf5;
    border-radius: var(--r-3xl);
    color: #065f46;
}

.radius-full {
    padding: 0.75rem 1.5rem;
    background-color: #dcfce7;
    border-radius: var(--r-full);
    color: #15803d;
}
