:root {
    --grid-columns: 12;
    --grid-gutter: 1.5rem;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    background-color: #ffffff;
}

.container--sm {
    max-width: var(--container-sm);
    background-color: #f0f9ff;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.container--md {
    max-width: var(--container-md);
    background-color: #f0fdf4;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.container--lg {
    max-width: var(--container-lg);
    background-color: #faf5ff;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.container--fluid {
    max-width: none;
    background-color: #fff7ed;
    padding: var(--space-6);
}

.container--narrow {
    max-width: 560px;
    margin: 0 auto;
    background-color: #ecfdf5;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.container--wide {
    max-width: var(--container-2xl);
    background-color: #eff6ff;
    padding: var(--space-6);
}

.grid {
    display: grid;
    gap: var(--grid-gutter);
    background-color: #f8fafc;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
    background-color: #eff6ff;
    border-radius: var(--radius-md);
    gap: 1rem;
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
    background-color: #f5f3ff;
    border-radius: var(--radius-md);
    gap: 1rem;
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
    background-color: #fdf4ff;
    border-radius: var(--radius-md);
    gap: 0.75rem;
}

.grid--6 {
    grid-template-columns: repeat(6, 1fr);
    background-color: #fff1f2;
    border-radius: var(--radius-md);
    gap: 0.5rem;
}

.grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    background-color: #f0fdf4;
    border-radius: var(--radius-md);
    gap: 1rem;
}

.grid--auto-sm {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    background-color: #ecfeff;
    border-radius: var(--radius-md);
    gap: 0.75rem;
}

.grid--sidebar {
    grid-template-columns: 240px 1fr;
    background-color: #fafaf9;
    border-radius: var(--radius-lg);
    gap: 1.5rem;
}

.grid--sidebar-right {
    grid-template-columns: 1fr 300px;
    background-color: #f8fafc;
    border-radius: var(--radius-lg);
    gap: 1.5rem;
}

.grid--holy-grail {
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    background-color: #fefce8;
    border-radius: var(--radius-lg);
    gap: 1rem;
}

.grid-cell {
    background-color: #dbeafe;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    color: #1e40af;
}

.grid-cell--green {
    background-color: #dcfce7;
    border-radius: var(--radius-md);
    color: #15803d;
    padding: var(--space-4);
}

.grid-cell--purple {
    background-color: #ede9fe;
    border-radius: var(--radius-md);
    color: #6d28d9;
    padding: var(--space-4);
}

.grid-cell--rose {
    background-color: #ffe4e6;
    border-radius: var(--radius-md);
    color: #be123c;
    padding: var(--space-4);
}

.grid-cell--amber {
    background-color: #fef3c7;
    border-radius: var(--radius-md);
    color: #b45309;
    padding: var(--space-4);
}

.grid-cell--span-2 {
    grid-column: span 2;
    background-color: #cffafe;
    border-radius: var(--radius-md);
    color: #155e75;
    padding: var(--space-4);
}

.grid-cell--span-3 {
    grid-column: span 3;
    background-color: #fce7f3;
    border-radius: var(--radius-md);
    color: #9d174d;
    padding: var(--space-4);
}

.flex {
    display: flex;
    gap: var(--space-4);
    background-color: #f9fafb;
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.flex--center {
    align-items: center;
    justify-content: center;
    background-color: #eff6ff;
    border-radius: var(--radius-md);
    padding: var(--space-6);
    min-height: 80px;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
    background-color: #f0fdf4;
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.flex--col {
    flex-direction: column;
    background-color: #faf5ff;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    gap: var(--space-3);
}

.flex--wrap {
    flex-wrap: wrap;
    background-color: #fff7ed;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    gap: var(--space-3);
}

.flex--end {
    align-items: center;
    justify-content: flex-end;
    background-color: #ecfeff;
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background-color: #f8fafc;
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.stack--sm {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background-color: #f0f9ff;
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

.stack--lg {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    background-color: #f5f3ff;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.stack--xl {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    background-color: #fefce8;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.section {
    padding: var(--space-12) 0;
    background-color: #ffffff;
}

.section--blue {
    padding: var(--space-12) var(--space-6);
    background-color: #eff6ff;
    color: #1e40af;
    border-radius: var(--radius-xl);
}

.section--dark {
    padding: var(--space-12) var(--space-6);
    background-color: #0f172a;
    color: #f1f5f9;
    border-radius: var(--radius-xl);
}

.section--gradient {
    padding: var(--space-12) var(--space-6);
    background-color: #4f46e5;
    color: #ffffff;
    border-radius: var(--radius-xl);
}

.section--emerald {
    padding: var(--space-12) var(--space-6);
    background-color: #d1fae5;
    color: #065f46;
    border-radius: var(--radius-xl);
}

.divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: var(--space-6) 0;
}

.divider--bold {
    height: 2px;
    background-color: #6b7280;
    margin: var(--space-8) 0;
}

.divider--blue {
    height: 2px;
    background-color: #3b82f6;
    margin: var(--space-6) 0;
    border-radius: 9999px;
}

.divider--vertical {
    width: 1px;
    background-color: #e5e7eb;
    align-self: stretch;
}

.aspect-square {
    aspect-ratio: 1 / 1;
    background-color: #dbeafe;
    border-radius: var(--radius-md);
}

.aspect-video {
    aspect-ratio: 16 / 9;
    background-color: #1e293b;
    border-radius: var(--radius-lg);
    color: #f1f5f9;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
    background-color: #fce7f3;
    border-radius: var(--radius-lg);
    color: #9d174d;
}
