/* 全站语义颜色。页面样式只负责布局与组件，不固定浅/深色背景。 */
:root, html[data-theme="light"] {
    color-scheme: light;
    /* 微暖中性底色降低大面积亮白感；文字直接使用深色，保持阅读清晰。 */
    --page-bg: #e9e9e4;
    --surface: #f3f2ed;
    --surface-solid: #f3f2ed;
    --surface-strong: #e4e6e1;
    --surface-muted: #eeeee8;
    --line: #cdd2ca;
    --line-soft: #dedfd7;
    --text: #293635;
    --muted: #53625f;
    --muted-soft: #5a6663;
    --cyan: #526779;
    --green: #42705e;
    --coral: #994d47;
    --violet: #6d5b82;
    --accent-soft: #e0e7e5;
    --accent-hover: #425766;
    --shadow: 0 4px 16px rgba(36, 47, 44, .035);
    --code-bg: #e7e9e2;
    --scrollbar-thumb: #b3beba;
    --scrollbar-hover: #889994;
    --focus-ring: #677f88;
    --success-soft: #e4ebe2;
    --warning: #80602b;
    --warning-soft: #eee7d8;
    --danger-soft: #eee2dd;
    --overlay: rgba(243, 242, 237, .88);
    --modal-overlay: rgba(26, 39, 61, .36);
    --on-accent: #ffffff;
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-muted: var(--muted-soft);
    --border-color: var(--line);
    --el-color-primary: var(--cyan);
    --el-color-primary-light-3: #83949f;
    --el-color-primary-light-5: #a4b2b8;
    --el-color-primary-light-7: #c6ced0;
    --el-color-primary-light-8: #d6dedd;
    --el-color-primary-light-9: var(--accent-soft);
    --el-color-primary-dark-2: var(--accent-hover);
    --el-color-success: var(--green);
    --el-color-success-light-3: #799885;
    --el-color-success-light-5: #a4b8a8;
    --el-color-success-light-7: #c7d2c6;
    --el-color-success-light-8: #d7dfd2;
    --el-color-success-light-9: var(--success-soft);
    --el-color-warning: var(--warning);
    --el-color-warning-light-3: #9f8758;
    --el-color-warning-light-5: #bfb08b;
    --el-color-warning-light-7: #d7cdb0;
    --el-color-warning-light-8: #e3dcc6;
    --el-color-warning-light-9: var(--warning-soft);
    --el-color-danger: var(--coral);
    --el-color-danger-light-3: #b77f75;
    --el-color-danger-light-5: #cba79b;
    --el-color-danger-light-7: #decac0;
    --el-color-danger-light-8: #e8d8d0;
    --el-color-danger-light-9: var(--danger-soft);
    --el-color-info: var(--muted);
    --el-color-info-light-3: #869590;
    --el-color-info-light-5: #acb6af;
    --el-color-info-light-7: #cdd3ca;
    --el-color-info-light-8: #dce0d7;
    --el-color-info-light-9: var(--surface-strong);
    --el-bg-color: var(--surface);
    --el-bg-color-page: var(--page-bg);
    --el-bg-color-overlay: var(--surface);
    --el-fill-color: var(--surface-strong);
    --el-fill-color-light: var(--page-bg);
    --el-fill-color-lighter: var(--page-bg);
    --el-fill-color-extra-light: var(--surface);
    --el-fill-color-dark: var(--line-soft);
    --el-fill-color-darker: var(--line);
    --el-fill-color-blank: var(--surface);
    --el-text-color-primary: var(--text);
    --el-text-color-regular: var(--text);
    --el-text-color-secondary: var(--muted);
    --el-text-color-placeholder: var(--muted-soft);
    --el-text-color-disabled: var(--muted-soft);
    --el-border-color: var(--line);
    --el-border-color-light: var(--line-soft);
    --el-border-color-lighter: var(--line-soft);
    --el-border-color-extra-light: var(--line-soft);
    --el-border-color-dark: var(--line);
    --el-border-color-darker: var(--muted-soft);
    --el-disabled-bg-color: var(--surface-strong);
    --el-disabled-text-color: var(--muted-soft);
    --el-disabled-border-color: var(--line-soft);
    --el-mask-color: var(--overlay);
    --el-overlay-color: var(--modal-overlay);
    --el-overlay-color-light: var(--modal-overlay);
    --el-overlay-color-lighter: var(--modal-overlay);
    --el-box-shadow: var(--shadow);
    --el-box-shadow-light: var(--shadow);
}
html[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #10151e;
    --surface: #19212d;
    --surface-solid: #19212d;
    --surface-strong: #242f40;
    --surface-muted: #151d29;
    --line: #354255;
    --line-soft: #293547;
    --text: #e7edf6;
    --muted: #a9b7cb;
    --muted-soft: #889ab4;
    --cyan: #93a7ff;
    --green: #65c7a5;
    --coral: #ef968d;
    --violet: #b6a0ee;
    --accent-soft: #283653;
    --accent-hover: #b5c3ff;
    --shadow: 0 8px 28px rgba(0, 0, 0, .18);
    --code-bg: #141c28;
    --scrollbar-thumb: #40516a;
    --scrollbar-hover: #607796;
    --focus-ring: #b4c2ff;
    --success-soft: #1e3a33;
    --warning: #dfb36c;
    --warning-soft: #3c3325;
    --danger-soft: #402c32;
    --overlay: rgba(16, 21, 30, .88);
    --modal-overlay: rgba(0, 0, 0, .54);
    --on-accent: #15203b;
    --el-color-primary-light-3: #687dca;
    --el-color-primary-light-5: #4b609f;
    --el-color-primary-light-7: #364775;
    --el-color-primary-light-8: #2d3c62;
    --el-color-success-light-3: #4b9c83;
    --el-color-success-light-5: #35715f;
    --el-color-success-light-7: #274c42;
    --el-color-success-light-8: #224138;
    --el-color-warning-light-3: #a58b56;
    --el-color-warning-light-5: #78663e;
    --el-color-warning-light-7: #51472e;
    --el-color-warning-light-8: #463d29;
    --el-color-danger-light-3: #b27471;
    --el-color-danger-light-5: #805352;
    --el-color-danger-light-7: #573b40;
    --el-color-danger-light-8: #493137;
    --el-color-info-light-3: #78899f;
    --el-color-info-light-5: #55657a;
    --el-color-info-light-7: #39495d;
    --el-color-info-light-8: #303e51;
}

html { background: var(--page-bg); }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid var(--page-bg); border-radius: 12px; background: var(--scrollbar-thumb); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
::-webkit-scrollbar-corner { background: transparent; }
/* 仅过渡颜色与边框；不对所有控件施加 transform，保留弹层定位和组件动画。 */
:where(html, body, button, a[href], input, select, textarea, [role="button"], [role="tab"]) {
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
:where(button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* 开关整块为至少 44px 高的按钮热区；图标和轨道仅做视觉呈现，不要求拖动。 */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 112px;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted-soft);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.theme-switch-icon { display: inline-flex; flex: none; align-items: center; width: 16px; height: 16px; transition: color .2s ease; }
.theme-switch-icon svg { display: block; width: 16px; height: 16px; }
.theme-switch-track { position: relative; display: block; flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s ease, box-shadow .2s ease; }
.theme-switch-thumb { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transform: translateX(0); transition: transform .22s cubic-bezier(.2, .7, .2, 1), background-color .2s ease; }
.theme-toggle[aria-checked="false"] [data-theme-sun] { color: var(--cyan); }
.theme-toggle[aria-checked="true"] [data-theme-moon] { color: var(--cyan); }
.theme-toggle[aria-checked="true"] .theme-switch-track { background: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.theme-toggle[aria-checked="true"] .theme-switch-thumb { background: var(--on-accent); transform: translateX(20px); }
.theme-toggle:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--scrollbar-thumb); background: var(--surface-muted); box-shadow: var(--shadow); }
.theme-toggle:not(:disabled):not([aria-disabled="true"]):active { box-shadow: inset 0 0 0 1px var(--line); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.theme-toggle:disabled, .theme-toggle[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    :where(html, body, button, a[href], input, select, textarea, [role="button"], [role="tab"]),
    .theme-switch-icon, .theme-switch-track, .theme-switch-thumb {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}
@media (forced-colors: active) {
    * { scrollbar-color: auto; }
    .theme-toggle { border-color: ButtonText; }
    .theme-switch-track { border: 1px solid ButtonText; }
    .theme-switch-thumb { background: ButtonText; }
    .theme-toggle[aria-checked="true"] .theme-switch-track { background: Highlight; }
    .theme-toggle[aria-checked="true"] .theme-switch-thumb { background: HighlightText; }
}