[data-theme="dark"] {
  color-scheme: dark;
  --font-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-display: Georgia, "Songti SC", serif;
  --display-weight: 500;
  --display-tracking: -0.025em;
  --canvas: #101815;
  --canvas-soft: #141f1b;
  --surface-glass: rgba(24, 35, 31, 0.78);
  --surface-solid: #18231f;
  --surface-raised: #20302b;
  --surface-muted: rgba(237, 243, 240, 0.06);
  --card-surface: rgba(20, 31, 27, 0.86);
  --hero-surface: rgba(35, 66, 58, 0.8);
  --text-primary: #eef3f0;
  --text-secondary: #b5c2bd;
  --text-muted: #899a94;
  --accent: #8bbeb2;
  --accent-ink: #0f201c;
  --line: rgba(226, 237, 233, 0.14);
  --line-strong: rgba(226, 237, 233, 0.24);
  --danger: #f3a7a7;
  --shadow: rgba(2, 8, 6, 0.32);
  --shadow-deep: rgba(0, 0, 0, 0.38);
  --shadow-1: 0 12px 30px var(--shadow);
  --shadow-2: 0 20px 48px var(--shadow);
  --shadow-3: 0 32px 100px var(--shadow-deep);
  --scrim: rgba(11, 20, 17, 0.34);
  --header: rgba(15, 25, 21, 0.68);
  --chrome-filter: blur(24px) saturate(1.08);
  --content-filter: blur(20px);
  --focus: #c4e4dc;
  --focus-ring: rgba(113, 174, 159, 0.14);
  --accent-shadow: rgba(24, 68, 58, 0.2);
  --highlight-soft: rgba(255, 255, 255, 0.08);
  --highlight-chrome: rgba(255, 255, 255, 0.09);
  --highlight: rgba(255, 255, 255, 0.1);
  --highlight-hero: rgba(255, 255, 255, 0.12);
  --highlight-card: rgba(255, 255, 255, 0.13);
  --highlight-medium: rgba(255, 255, 255, 0.16);
  --highlight-strong: rgba(255, 255, 255, 0.28);
  --active-mark: rgba(255, 255, 255, 0.17);
  --button-highlight: rgba(255, 255, 255, 0.22);
  --overlay-modal: rgba(5, 12, 9, 0.58);
  --overlay-loading: rgba(8, 16, 13, 0.62);
  --overlay-sidebar: rgba(4, 10, 8, 0.54);
  --tool-web-surface: rgba(30, 61, 54, 0.72);
  --tool-web-line: rgba(139, 199, 184, 0.3);
  --tool-web-accent: #9bd1c4;
  --tool-web-badge: rgba(139, 199, 184, 0.12);
  --tool-local-surface: rgba(61, 51, 38, 0.7);
  --tool-local-line: rgba(222, 183, 125, 0.32);
  --tool-local-accent: #deb77d;
  --tool-local-badge: rgba(222, 183, 125, 0.12);
  --ambient-image: url("assets/wallpapers/portal-dark.webp");
}

[data-theme="light"] {
  color-scheme: light;
  --font-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-display: Georgia, "Songti SC", serif;
  --display-weight: 500;
  --display-tracking: -0.025em;
  --canvas: #eef2f1;
  --canvas-soft: #f3f6f5;
  --surface-glass: rgba(248, 250, 249, 0.84);
  --surface-solid: #f8faf9;
  --surface-raised: #fbfcfb;
  --surface-muted: rgba(29, 65, 58, 0.055);
  --card-surface: rgba(248, 250, 249, 0.84);
  --hero-surface: rgba(218, 231, 227, 0.84);
  --text-primary: #152822;
  --text-secondary: #51645e;
  --text-muted: #5f716a;
  --accent: #2d6a5f;
  --accent-ink: #f3f7f5;
  --line: rgba(29, 65, 58, 0.15);
  --line-strong: rgba(29, 65, 58, 0.25);
  --danger: #9a4242;
  --shadow: rgba(27, 49, 42, 0.14);
  --shadow-deep: rgba(0, 0, 0, 0.24);
  --shadow-1: 0 12px 30px var(--shadow);
  --shadow-2: 0 20px 48px var(--shadow);
  --shadow-3: 0 32px 100px var(--shadow-deep);
  --scrim: rgba(239, 243, 241, 0.28);
  --header: rgba(246, 249, 247, 0.74);
  --chrome-filter: blur(24px) saturate(1.08);
  --content-filter: blur(20px);
  --focus: #1f5d52;
  --focus-ring: rgba(45, 106, 95, 0.14);
  --accent-shadow: rgba(24, 68, 58, 0.2);
  --highlight-soft: rgba(255, 255, 255, 0.18);
  --highlight-chrome: rgba(255, 255, 255, 0.34);
  --highlight: rgba(255, 255, 255, 0.42);
  --highlight-hero: rgba(255, 255, 255, 0.5);
  --highlight-card: rgba(255, 255, 255, 0.58);
  --highlight-medium: rgba(255, 255, 255, 0.66);
  --highlight-strong: rgba(255, 255, 255, 0.78);
  --active-mark: rgba(255, 255, 255, 0.42);
  --button-highlight: rgba(255, 255, 255, 0.72);
  --overlay-modal: rgba(22, 38, 32, 0.34);
  --overlay-loading: rgba(238, 244, 241, 0.7);
  --overlay-sidebar: rgba(19, 36, 30, 0.28);
  --tool-web-surface: rgba(239, 248, 245, 0.9);
  --tool-web-line: rgba(45, 106, 95, 0.24);
  --tool-web-accent: #2d6a5f;
  --tool-web-badge: rgba(45, 106, 95, 0.09);
  --tool-local-surface: rgba(252, 246, 234, 0.92);
  --tool-local-line: rgba(154, 106, 43, 0.26);
  --tool-local-accent: #8a5b22;
  --tool-local-badge: rgba(154, 106, 43, 0.09);
  --ambient-image: url("assets/wallpapers/portal-light.webp");
}

[data-theme="tech"] {
  color-scheme: light;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --display-weight: 740;
  --display-tracking: -0.05em;
  --canvas: #f2f5fa;
  --canvas-soft: #f8faff;
  --surface-glass: rgba(247, 250, 255, 0.54);
  --surface-solid: #ffffff;
  --surface-raised: #fbfbfd;
  --surface-muted: rgba(118, 118, 128, 0.1);
  --card-surface: rgba(255, 255, 255, 0.92);
  --hero-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(234, 243, 255, 0.86));
  --text-primary: #1d1d1f;
  --text-secondary: #5f6065;
  --text-muted: #6e6e73;
  --accent: #0071e3;
  --accent-ink: #ffffff;
  --line: rgba(60, 60, 67, 0.15);
  --line-strong: rgba(60, 60, 67, 0.22);
  --danger: #d70015;
  --shadow: rgba(25, 28, 38, 0.09);
  --shadow-deep: rgba(31, 38, 51, 0.14);
  --shadow-1: 0 2px 3px rgba(25, 28, 38, 0.05), 0 10px 30px rgba(25, 28, 38, 0.07);
  --shadow-2: 0 4px 12px rgba(25, 28, 38, 0.07), 0 26px 70px rgba(25, 28, 38, 0.12);
  --shadow-3: 0 38px 110px rgba(31, 38, 51, 0.15);
  --scrim: linear-gradient(90deg, rgba(247, 250, 255, 0.38), rgba(247, 250, 255, 0.22) 52%, rgba(247, 250, 255, 0.12));
  --header: rgba(247, 250, 255, 0.52);
  --chrome-filter: blur(34px) saturate(1.8) contrast(1.04);
  --content-filter: none;
  --focus: #007aff;
  --focus-ring: rgba(0, 122, 255, 0.16);
  --accent-shadow: rgba(0, 113, 227, 0.26);
  --highlight-soft: rgba(255, 255, 255, 0.38);
  --highlight-chrome: rgba(255, 255, 255, 0.7);
  --highlight: rgba(255, 255, 255, 0.78);
  --highlight-hero: rgba(255, 255, 255, 0.86);
  --highlight-card: rgba(255, 255, 255, 0.88);
  --highlight-medium: rgba(255, 255, 255, 0.92);
  --highlight-strong: rgba(255, 255, 255, 0.96);
  --active-mark: rgba(255, 255, 255, 0.32);
  --button-highlight: rgba(255, 255, 255, 0.42);
  --overlay-modal: rgba(31, 38, 51, 0.32);
  --overlay-loading: rgba(245, 248, 253, 0.74);
  --overlay-sidebar: rgba(31, 38, 51, 0.24);
  --tool-web-surface: rgba(243, 248, 255, 0.9);
  --tool-web-line: rgba(0, 113, 227, 0.22);
  --tool-web-accent: #0071e3;
  --tool-web-badge: rgba(0, 113, 227, 0.09);
  --tool-local-surface: rgba(248, 246, 255, 0.91);
  --tool-local-line: rgba(110, 94, 214, 0.24);
  --tool-local-accent: #5d4fc2;
  --tool-local-badge: rgba(110, 94, 214, 0.08);
  --ambient-image: url("assets/wallpapers/portal-tech.webp");
}

[data-theme="comfort"] {
  color-scheme: light;
  --font-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-display: "Iowan Old Style", Baskerville, "Songti SC", "STSong", Georgia, serif;
  --display-weight: 500;
  --display-tracking: -0.025em;
  --canvas: #f8f3ed;
  --canvas-soft: #fbf7f2;
  --surface-glass: rgba(255, 253, 249, 0.86);
  --surface-solid: #fffdf9;
  --surface-raised: #fffaf4;
  --surface-muted: rgba(71, 100, 82, 0.075);
  --card-surface: rgba(255, 253, 249, 0.96);
  --hero-surface: linear-gradient(145deg, rgba(244, 238, 230, 0.95), rgba(227, 236, 229, 0.92));
  --text-primary: #302f2b;
  --text-secondary: #5d5a54;
  --text-muted: #6d6a63;
  --accent: #476452;
  --accent-ink: #fffdf9;
  --line: rgba(91, 75, 62, 0.16);
  --line-strong: rgba(91, 75, 62, 0.25);
  --danger: #a84f47;
  --shadow: rgba(69, 56, 45, 0.1);
  --shadow-deep: rgba(69, 56, 45, 0.16);
  --shadow-1: 0 4px 18px rgba(69, 56, 45, 0.07);
  --shadow-2: 0 24px 68px rgba(69, 56, 45, 0.13);
  --shadow-3: 0 34px 96px rgba(69, 56, 45, 0.16);
  --scrim: linear-gradient(90deg, rgba(248, 243, 235, 0.62), rgba(248, 243, 235, 0.48) 56%, rgba(248, 243, 235, 0.28));
  --header: rgba(255, 253, 249, 0.76);
  --chrome-filter: blur(16px) saturate(1.08);
  --content-filter: none;
  --focus: #677f88;
  --focus-ring: rgba(103, 127, 136, 0.16);
  --accent-shadow: rgba(71, 100, 82, 0.18);
  --highlight-soft: rgba(255, 255, 255, 0.2);
  --highlight-chrome: rgba(255, 255, 255, 0.38);
  --highlight: rgba(255, 255, 255, 0.48);
  --highlight-hero: rgba(255, 255, 255, 0.58);
  --highlight-card: rgba(255, 255, 255, 0.68);
  --highlight-medium: rgba(255, 255, 255, 0.76);
  --highlight-strong: rgba(255, 255, 255, 0.86);
  --active-mark: rgba(255, 255, 255, 0.4);
  --button-highlight: rgba(255, 255, 255, 0.72);
  --overlay-modal: rgba(48, 47, 43, 0.3);
  --overlay-loading: rgba(248, 243, 237, 0.74);
  --overlay-sidebar: rgba(48, 47, 43, 0.24);
  --tool-web-surface: rgba(241, 247, 239, 0.9);
  --tool-web-line: rgba(71, 100, 82, 0.24);
  --tool-web-accent: #476452;
  --tool-web-badge: rgba(71, 100, 82, 0.09);
  --tool-local-surface: rgba(255, 244, 237, 0.92);
  --tool-local-line: rgba(168, 95, 70, 0.24);
  --tool-local-accent: #9c573f;
  --tool-local-badge: rgba(168, 95, 70, 0.09);
  --ambient-image: url("assets/wallpapers/portal-comfort.webp");
}