:root {
    color-scheme: light dark;

    --page-bg: #f4f5fb;
    --page-gradient-start: #f7f8ff;
    --page-gradient-end: #e8ebf7;
    --surface-bg: #ffffff;
    --surface-soft-bg: #f7f8fc;
    --text-color: #171721;
    --muted-color: #676b7c;
    --border-color: #d9dce8;
    --primary-color: #4f46e5;
    --primary-hover-color: #4338ca;
    --primary-soft-bg: #eef0ff;
    --danger-bg: #fde8e5;
    --danger-text: #9f1f14;
    --success-bg: #e7f7ed;
    --success-text: #17663a;
    --warning-bg: #fff4d8;
    --warning-text: #7a4b00;
    --shadow-color: rgb(20 20 40 / 12%);
    --focus-color: rgb(79 70 229 / 28%);

    --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --container-width: 1120px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --page-bg: #101018;
    --page-gradient-start: #141421;
    --page-gradient-end: #080811;
    --surface-bg: #181824;
    --surface-soft-bg: #202034;
    --text-color: #f5f5fa;
    --muted-color: #a8aabd;
    --border-color: #303247;
    --primary-color: #818cf8;
    --primary-hover-color: #6366f1;
    --primary-soft-bg: #25264a;
    --danger-bg: #401b17;
    --danger-text: #ffb4a8;
    --success-bg: #173d27;
    --success-text: #b7f2cc;
    --warning-bg: #3f2e0d;
    --warning-text: #ffd98a;
    --shadow-color: rgb(0 0 0 / 32%);
    --focus-color: rgb(129 140 248 / 32%);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        color-scheme: dark;

        --page-bg: #101018;
        --page-gradient-start: #141421;
        --page-gradient-end: #080811;
        --surface-bg: #181824;
        --surface-soft-bg: #202034;
        --text-color: #f5f5fa;
        --muted-color: #a8aabd;
        --border-color: #303247;
        --primary-color: #818cf8;
        --primary-hover-color: #6366f1;
        --primary-soft-bg: #25264a;
        --danger-bg: #401b17;
        --danger-text: #ffb4a8;
        --success-bg: #173d27;
        --success-text: #b7f2cc;
        --warning-bg: #3f2e0d;
        --warning-text: #ffd98a;
        --shadow-color: rgb(0 0 0 / 32%);
        --focus-color: rgb(129 140 248 / 32%);
    }
}