:root {
    --primary: #727aca;
    --primary-hover: #858dda;
    --primary-soft: rgba(114, 122, 202, .14);
    --success: #49b98d;
    --success-soft: rgba(73, 185, 141, .14);
    --warning: #d3a42d;
    --warning-soft: rgba(211, 164, 45, .14);
    --danger: #d77070;
    --danger-soft: rgba(215, 112, 112, .13);
    --info: #75a6c8;
    --cyan: #49bfd0;
    --orange: #d99a4e;
    --pink: #ce6ca4;
    --note: #ad73c7;
    --white: #ffffff;
    --black: #000000;
    --overlay: rgba(0, 0, 0, .58);
    --shadow: 0 18px 50px rgba(0, 0, 0, .24);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"],
html[data-theme="system"] {
    color-scheme: dark;
    --bg-body: #08090b;
    --bg-sidebar: #0b0c0f;
    --bg-panel: #101115;
    --bg-panel-hover: #15161b;
    --bg-input: #0d0f13;
    --bg-subtle: #181a20;
    --bg-feature: #12141a;
    --border-color: #24262d;
    --border-strong: #353842;
    --text-primary: #f5f5f7;
    --text-secondary: #9698a2;
    --text-muted: #666873;
    --icon-bg: #17191e;
    --intro-bg: #090a0d;
    --topbar-bg: rgba(8, 9, 11, .93);
    --code-comment: #777a86;
    --code-keyword: #bd7bd6;
    --code-string: #63c9a2;
    --code-number: #e0a052;
    --code-function: #82b6db;
    --code-property: #55c9d9;
    --code-selector: #e0b43f;
    --code-variable: #df79b2;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-body: #f5f6f8;
    --bg-sidebar: #ffffff;
    --bg-panel: #ffffff;
    --bg-panel-hover: #f1f2f6;
    --bg-input: #fafbfc;
    --bg-subtle: #eceef3;
    --bg-feature: #f0f1f5;
    --border-color: #dedfe5;
    --border-strong: #c8cad3;
    --text-primary: #1b1c22;
    --text-secondary: #686b76;
    --text-muted: #9699a3;
    --icon-bg: #eef0f5;
    --intro-bg: #eceef4;
    --topbar-bg: rgba(245, 246, 248, .93);
    --overlay: rgba(27, 28, 34, .35);
    --shadow: 0 18px 45px rgba(27, 28, 34, .12);
    --code-comment: #686b76;
    --code-keyword: #804898;
    --code-string: #28795e;
    --code-number: #9a5a18;
    --code-function: #356f98;
    --code-property: #197b89;
    --code-selector: #7d6514;
    --code-variable: #9b3f71;
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        color-scheme: light;
        --bg-body: #f5f6f8;
        --bg-sidebar: #ffffff;
        --bg-panel: #ffffff;
        --bg-panel-hover: #f1f2f6;
        --bg-input: #fafbfc;
        --bg-subtle: #eceef3;
        --bg-feature: #f0f1f5;
        --border-color: #dedfe5;
        --border-strong: #c8cad3;
        --text-primary: #1b1c22;
        --text-secondary: #686b76;
        --text-muted: #9699a3;
        --icon-bg: #eef0f5;
        --intro-bg: #eceef4;
        --topbar-bg: rgba(245, 246, 248, .93);
        --overlay: rgba(27, 28, 34, .35);
        --shadow: 0 18px 45px rgba(27, 28, 34, .12);
        --code-comment: #686b76;
        --code-keyword: #804898;
        --code-string: #28795e;
        --code-number: #9a5a18;
        --code-function: #356f98;
        --code-property: #197b89;
        --code-selector: #7d6514;
        --code-variable: #9b3f71;
    }
}