:root {
    color-scheme: light;
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-navy: #172554;
    --color-surface: #ffffff;
    --color-background: #f1f5f9;
    --color-border: #cbd5e1;
    --color-text: #0f172a;
    --color-muted: #64748b;
    --color-danger: #b91c1c;
    --shadow-card: 0 16px 50px rgb(15 23 42 / 14%);
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --touch-target: 56px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 24px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-surface: #111827;
        --color-background: #020617;
        --color-border: #334155;
        --color-text: #f8fafc;
        --color-muted: #94a3b8;
        --shadow-card: 0 16px 50px rgb(0 0 0 / 35%);
    }
}