:root,
:root[data-theme="cool"] {
    --font-family-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --font-family-base: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --font-heading: var(--font-family-display);
    --font-ui: var(--font-family-base);
    --primary-color: #536f88;
    --primary-dark: #344b61;
    --secondary-color: #bd9562;
    --secondary-dark: #765638;
    --ink-color: #293641;
    --background-color: #f2f5f7;
    --paper-color: #ffffff;
    --surface-color: #fbfcfd;
    --text-color: #293641;
    --muted-color: #566571;
    --light-gray: #e9eef2;
    --border-color: #d3dde5;
    --line-color: #e0e7ec;
    --shadow-rgb: 41, 54, 65;
    --shadow-sm: 0 2px 8px rgba(41, 54, 65, 0.06);
    --shadow-md: 0 8px 22px rgba(41, 54, 65, 0.09);
    --shadow-lg: 0 14px 34px rgba(41, 54, 65, 0.12);
    --shadow: var(--shadow-sm);
    --shadow-float: var(--shadow-md);
    --inner-shadow: none;
    --accent-red: #a64b3c;
    --success-color: #3f8a63;
    --warning-color: #b07a32;
    --danger-color: #b0564d;
    --warm-line: rgba(189, 149, 98, 0.3);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --body-background-image: radial-gradient(ellipse at 12% 15%, rgba(96, 125, 152, .09), transparent 48%);
    --body-background-size: min(1280px, 100vw) auto, 180px 180px, 100% 420px, auto;
    --body-background-position: center 96px, 0 0, center top, 0 0;
    --body-background-repeat: no-repeat, repeat, no-repeat, no-repeat;
    --header-bg: rgba(255, 255, 255, 0.94);
    --header-shadow: 0 1px 0 rgba(41, 54, 65, 0.07);
    --logo-border: rgba(189, 149, 98, 0.5);
    --logo-text: #ffffff;
    --logo-inner-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    --nav-link-color: #566571;
    --nav-hover-line: rgba(96, 125, 152, 0.42);
    --dev-toolbar-bg: rgba(233, 238, 242, 0.76);
    --dev-toolbar-border: rgba(96, 125, 152, 0.16);
    --entry-border: rgba(17, 24, 39, 0.08);
    --entry-bg: rgba(255, 255, 255, 0.78);
    --entry-hover-border: rgba(189, 149, 98, 0.52);
    --entry-hover-bg: #ffffff;
    --control-bg: rgba(255, 255, 255, 0.82);
    --control-hover-border: rgba(96, 125, 152, 0.5);
    --outline-action-border: rgba(96, 125, 152, 0.38);
    --outline-action-hover: rgba(96, 125, 152, 0.62);
    --modal-overlay: rgba(17, 24, 39, 0.58);
    --modal-surface: linear-gradient(180deg, #ffffff, #e9eef2);
    --modal-border: rgba(189, 149, 98, 0.34);
    --modal-close-color: #6b7280;
    --footer-bg: #293641;
    --footer-text: #e1e9ee;
    --footer-heading: #ffffff;
    --footer-border: rgba(189, 149, 98, 0.62);
    --button-radius: 12px;
    --button-shadow: var(--shadow-md);
    --button-hover-shadow: var(--shadow-lg);
    --button-bg: #344b61;
    --button-hover: #293e52;
    --button-active: #202f3d;
    --button-text: #ffffff;
    --button-secondary-bg: #e9eef2;
    --button-secondary-hover: #dce5eb;
    --button-secondary-text: #344b61;
    --disabled-bg: #e5eaee;
    --disabled-text: #566571;
    --input-bg: #ffffff;
    --input-border: #d3dde5;
    --input-focus-border: #344b61;
    --focus-border: #344b61;
    --focus-ring: 0 0 0 3px rgba(96, 125, 152, 0.24);
    --field-divider: rgba(189, 149, 98, 0.36);
    --select-arrow: #344b61;
    --hero-card-bg: linear-gradient(135deg, #ffffff, #e9eef2), linear-gradient(90deg, rgba(189, 149, 98, 0.08), transparent 42%), var(--surface-color);
    --hero-ornament-image: url("/static/img/theme-landscape-cool.svg?v=20260712-2");
    --hero-ornament-opacity: 0.42;
    --hero-border: #d3dde5;
    --recent-card-bg: #ffffff;
    --recent-card-border: #d3dde5;
    --list-divider: #e0e7ec;

    /* 冷色主题使用雾蓝、墨蓝和少量哑金。 */
    --font-size-display: 32px;
    --font-size-h1: 28px;
    --font-size-h2: 22px;
    --font-size-title: 18px;
    --font-size-body: 16px;
    --font-size-body-sm: 14px;
    --font-size-caption: 12px;
    --line-height-display: 40px;
    --line-height-h1: 36px;
    --line-height-h2: 30px;
    --line-height-title: 26px;
    --line-height-body: 24px;
    --line-height-body-sm: 22px;
    --line-height-caption: 18px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --button-radius: 12px;
    --control-height: 44px;
    --control-height-lg: 48px;
    --control-radius: var(--radius-md);
    --control-border: var(--line-color);
    --container-max: 1200px;
    --page-padding: 32px;
    --section-gap: 48px;
    --card-padding: 24px;
    --transition-fast: 150ms ease;
    --transition-normal: 220ms ease;
}

:root[data-theme="warm"] {
    --primary-color: #a64b3c;
    --primary-dark: #71382f;
    --secondary-color: #bd9562;
    --secondary-dark: #765638;
    --background-color: #f6f1e8;
    --paper-color: #fffdf8;
    --surface-color: #fffdf8;
    --input-bg: #fffdf8;
    --text-color: #302722;
    --ink-color: #302722;
    --muted-color: #64584e;
    --light-gray: #eee6d9;
    --border-color: #ded2bf;
    --line-color: #e7ddce;
    --shadow-rgb: 55, 45, 32;
    --button-bg: #a64b3c;
    --button-hover: #8c3e33;
    --button-active: #71382f;
    --button-text: #ffffff;
    --button-secondary-bg: #eee6d9;
    --button-secondary-hover: #e4d8c7;
    --button-secondary-text: #71382f;
    --disabled-bg: #e7e0d5;
    --disabled-text: #64584e;
    --input-border: #ded2bf;
    --input-focus-border: #a64b3c;
    --focus-border: #a64b3c;
    --focus-ring: 0 0 0 3px rgba(166, 75, 60, 0.2);
    --select-arrow: #a64b3c;
    --footer-bg: #302722;
    --footer-text: #e8dfd2;
    --shadow-sm: 0 2px 8px rgba(55, 45, 32, 0.06);
    --shadow-md: 0 6px 18px rgba(55, 45, 32, 0.08);
    --shadow-lg: 0 12px 30px rgba(55, 45, 32, 0.10);
    --shadow: var(--shadow-sm);
    --shadow-float: var(--shadow-md);
    --accent-red: #a64b3c;
    --warm-line: rgba(189, 149, 98, 0.3);
    --radius-pill: 999px;
    --body-background-image: radial-gradient(ellipse at 12% 15%, rgba(185, 141, 86, .08), transparent 48%);
    --body-background-size: min(1280px, 100vw) auto, 180px 180px, 100% 420px, auto;
    --body-background-position: center 96px, 0 0, center top, 0 0;
    --body-background-repeat: no-repeat, repeat, no-repeat, no-repeat;
    --header-bg: rgba(255, 249, 239, 0.93);
    --header-shadow: 0 1px 0 rgba(55, 45, 32, 0.04);
    --logo-border: rgba(183, 140, 90, 0.58);
    --logo-text: #fff9ef;
    --logo-inner-shadow: inset 0 0 0 2px rgba(255, 250, 244, 0.22);
    --nav-link-color: #64584e;
    --nav-hover-line: rgba(166, 75, 60, 0.36);
    --dev-toolbar-bg: rgba(238, 230, 217, 0.76);
    --dev-toolbar-border: rgba(166, 75, 60, 0.16);
    --entry-border: rgba(37, 25, 23, 0.1);
    --entry-bg: rgba(255, 249, 239, 0.7);
    --entry-hover-border: rgba(183, 140, 90, 0.46);
    --entry-hover-bg: rgba(255, 249, 239, 0.96);
    --control-bg: rgba(255, 249, 239, 0.72);
    --control-hover-border: rgba(166, 75, 60, 0.42);
    --outline-action-border: rgba(166, 75, 60, 0.32);
    --outline-action-hover: rgba(166, 75, 60, 0.52);
    --modal-overlay: rgba(47, 42, 36, 0.68);
    --modal-surface: linear-gradient(180deg, #fffdf8, #eee6d9);
    --modal-border: rgba(189, 149, 98, 0.34);
    --modal-close-color: #8a6b47;
    --footer-bg: #302722;
    --footer-text: #e8dfd2;
    --footer-heading: #fffdf9;
    --footer-border: rgba(189, 149, 98, 0.62);
    --button-radius: 12px;
    --button-shadow: var(--shadow-md);
    --button-hover-shadow: var(--shadow-lg);
    --button-bg: #a64b3c;
    --button-hover: #8c3e33;
    --button-active: #71382f;
    --button-text: #ffffff;
    --button-secondary-bg: #eee6d9;
    --button-secondary-hover: #e4d8c7;
    --button-secondary-text: #71382f;
    --disabled-bg: #e7e0d5;
    --disabled-text: #64584e;
    --input-border: #ded2bf;
    --input-focus-border: #a64b3c;
    --focus-border: #a64b3c;
    --focus-ring: 0 0 0 3px rgba(166, 75, 60, 0.2);
    --field-divider: rgba(189, 149, 98, 0.3);
    --select-arrow: #a64b3c;
    --hero-card-bg: linear-gradient(135deg, #fffdf8, #eee6d9), linear-gradient(90deg, rgba(189, 149, 98, 0.1), transparent 42%), var(--surface-color);
    --hero-ornament-image: url("/static/img/theme-landscape-warm.svg?v=20260712-2");
    --hero-ornament-opacity: 0.4;
    --hero-border: #ded2bf;
    --recent-card-bg: #fffdf9;
    --recent-card-border: #ded2bf;
    --list-divider: #e7ddce;
}

@media (max-width: 767px) {
    :root,
    :root[data-theme="cool"],
    :root[data-theme="warm"] {
        --font-size-display: 28px;
        --line-height-display: 36px;
        --font-size-h1: 24px;
        --line-height-h1: 32px;
        --font-size-h2: 20px;
        --line-height-h2: 28px;
        --page-padding: 16px;
        --section-gap: 32px;
        --card-padding: 16px;
        --control-height: 48px;
        --control-height-lg: 48px;
    }
}