:root {
    color-scheme: light;
    --color-primary: #174f83;
    --color-primary-contrast: #ffffff;
    --color-primary-hover: #13416b;
    --color-accent: #d7e8f4;
    --color-bg: #f4f7fa;
    --color-surface: #ffffff;
    --color-text: #202b38;
    --color-muted: #526170;
    --color-border: #d5dde4;
    --color-border-strong: #718191;
    --color-success: #17633a;
    --color-success-bg: #e8f4ec;
    --color-warning: #744d00;
    --color-warning-bg: #fff4d6;
    --color-error: #8b2720;
    --color-error-bg: #fff0ed;
    --color-on-error: #ffffff;
    --color-info: #174f83;
    --color-info-bg: #e9f2f8;
    --color-overlay: #10182080;
    --color-on-primary-border: #ffffff80;
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-small: 0.875rem;
    --font-body: 1rem;
    --font-title: clamp(1.5rem, 5vw, 2rem);
    --font-heading: 1.25rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --radius-s: 0.5rem;
    --radius-m: 0.875rem;
    --radius-l: 1.25rem;
    --radius-pill: 999px;
    --shadow-1: 0 0.25rem 1rem #1c34440d;
    --shadow-2: 0 0.75rem 1.75rem #1c34441f;
    --time-short: 180ms;
    --touch-target: 44px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-primary: #8dc8f0;
        --color-primary-contrast: #102a3c;
        --color-primary-hover: #aedaf6;
        --color-accent: #243f52;
        --color-bg: #111a22;
        --color-surface: #192630;
        --color-text: #edf3f7;
        --color-muted: #bdc9d2;
        --color-border: #344754;
        --color-border-strong: #8598a5;
        --color-success: #8bd1a3;
        --color-success-bg: #183728;
        --color-warning: #f1cf78;
        --color-warning-bg: #3a3018;
        --color-error: #ffaaa0;
        --color-error-bg: #3a211f;
        --color-on-error: #102a3c;
        --color-info: #9acff1;
        --color-info-bg: #20394a;
        --color-overlay: #000000a6;
        --color-on-primary-border: #ffffff80;
        --shadow-1: 0 0.25rem 1rem #00000030;
        --shadow-2: 0 0.75rem 1.75rem #00000055;
    }
}