:root {
    --color-bg: #F8F6FF;
    --color-surface: #ffffff;
    --color-surface-alt: #F4F1FF;
    --color-text: #0f172a;
    --color-muted: #4b5563;
    --color-border: #e4e7ec;
    --shadow-card: 0 16px 40px rgba(16, 24, 40, 0.12);
}

.theme-dark {
    --color-bg: #10101A;
    --color-surface: #1A1A2E;
    --color-surface-alt: #24243a;
    --color-text: #e5e7eb;
    --color-muted: #cbd5e1;
    --color-border: #2f334d;
    --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.35);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
}

.bg-surface {
    background: var(--color-surface);
}

.bg-surface-alt {
    background: var(--color-surface-alt);
}

.text-heading {
    color: var(--color-text);
}

.text-body {
    color: var(--color-text);
}

.text-muted {
    color: var(--color-muted);
}

.text-border {
    color: var(--color-border);
}

.border-border {
    border-color: var(--color-border);
}

.bg-surface-80 {
    background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);
}

.bg-surface-alt-70 {
    background-color: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
}