/* ==========================================================================
   道路设计工具箱 · 设计令牌 v2
   4 个色系（自动 / 科技 / 暖色 / 小清新）× 深浅双模式
   ========================================================================== */

:root {
    --radius-xs: 6px;
    --radius-s: 9px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-pill: 999px;
    --font-sans: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
    --dur: .2s;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --danger: #d93a3a;
    --danger-soft: rgba(217, 58, 58, .1);
    --ok: #16a34a;
    --ok-soft: rgba(22, 163, 74, .1);
    --warn: #d97706;
    --warn-soft: rgba(217, 119, 6, .1);
    --gold: #f5b301;
}

/* ---------- 自动 · 浅色（中性工程蓝） ---------- */
html[data-theme="auto"][data-mode="light"] {
    --bg: #f2f5f9;
    --dot: rgba(23, 43, 77, .05);
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --surface-3: #eef2f7;
    --border: #e2e8f1;
    --border-2: #cfd9e6;
    --text: #0e1a2b;
    --text-2: #5b6b7f;
    --text-3: #8b99ab;
    --accent: #2563eb;
    --accent-2: #1d4ed8;
    --accent-soft: #e8f0ff;
    --accent-line: #c2d6ff;
    --on-accent: #ffffff;
    --glow: rgba(37, 99, 235, .18);
    --shadow-1: 0 1px 2px rgba(16, 32, 56, .05), 0 3px 10px rgba(16, 32, 56, .04);
    --shadow-2: 0 10px 28px rgba(16, 32, 56, .12);
    --shadow-3: 0 24px 64px rgba(16, 32, 56, .18);
    --nav-bg: rgba(255, 255, 255, .84);
}

/* ---------- 自动 · 深色 ---------- */
html[data-theme="auto"][data-mode="dark"] {
    --bg: #0a1119;
    --dot: rgba(148, 180, 220, .06);
    --surface: #111a25;
    --surface-2: #16212e;
    --surface-3: #1d2a39;
    --border: #22303f;
    --border-2: #2e4053;
    --text: #e8eef6;
    --text-2: #9aabbd;
    --text-3: #74859a;
    --accent: #60a5fa;
    --accent-2: #3b82f6;
    --accent-soft: rgba(96, 165, 250, .14);
    --accent-line: rgba(96, 165, 250, .34);
    --on-accent: #08131f;
    --glow: rgba(96, 165, 250, .28);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .28);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, .5);
    --shadow-3: 0 28px 70px rgba(0, 0, 0, .6);
    --nav-bg: rgba(10, 17, 25, .8);
}

/* ---------- 科技 · 浅色 ---------- */
html[data-theme="scifi"][data-mode="light"] {
    --bg: #eef4f6;
    --dot: rgba(13, 148, 136, .07);
    --surface: #ffffff;
    --surface-2: #f5fafb;
    --surface-3: #e7f2f3;
    --border: #dbe9eb;
    --border-2: #c6dde0;
    --text: #0a2226;
    --text-2: #537074;
    --text-3: #879ba1;
    --accent: #0d9488;
    --accent-2: #0f766e;
    --accent-soft: #e2f6f3;
    --accent-line: #a9e3d9;
    --on-accent: #ffffff;
    --glow: rgba(13, 148, 136, .18);
    --shadow-1: 0 1px 2px rgba(6, 46, 46, .06), 0 3px 10px rgba(6, 46, 46, .05);
    --shadow-2: 0 10px 28px rgba(6, 46, 46, .13);
    --shadow-3: 0 24px 64px rgba(6, 46, 46, .2);
    --nav-bg: rgba(255, 255, 255, .84);
}

/* ---------- 科技 · 深色 ---------- */
html[data-theme="scifi"][data-mode="dark"] {
    --bg: #050b12;
    --dot: rgba(53, 224, 180, .09);
    --surface: #0b1620;
    --surface-2: #0f1e2a;
    --surface-3: #142a37;
    --border: #16303d;
    --border-2: #204657;
    --text: #e3f7f2;
    --text-2: #93b4b8;
    --text-3: #6b8e95;
    --accent: #2ee6b4;
    --accent-2: #14b8d4;
    --accent-soft: rgba(46, 230, 180, .12);
    --accent-line: rgba(46, 230, 180, .32);
    --on-accent: #03150f;
    --glow: rgba(46, 230, 180, .26);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-2: 0 12px 34px rgba(0, 0, 0, .55), 0 0 40px rgba(46, 230, 180, .06);
    --shadow-3: 0 28px 72px rgba(0, 0, 0, .65);
    --nav-bg: rgba(5, 11, 18, .82);
}

/* ---------- 暖色 · 浅色 ---------- */
html[data-theme="warm"][data-mode="light"] {
    --bg: #f8f5f0;
    --dot: rgba(140, 100, 50, .07);
    --surface: #fffdfa;
    --surface-2: #f8f2e9;
    --surface-3: #f1e8dc;
    --border: #e8dfd1;
    --border-2: #dbcdb8;
    --text: #29211a;
    --text-2: #7c6d5c;
    --text-3: #a4958a;
    --accent: #d97706;
    --accent-2: #b45309;
    --accent-soft: #fdf0dc;
    --accent-line: #f0cfa6;
    --on-accent: #ffffff;
    --glow: rgba(217, 119, 6, .2);
    --shadow-1: 0 1px 2px rgba(90, 60, 25, .06), 0 3px 10px rgba(90, 60, 25, .05);
    --shadow-2: 0 10px 28px rgba(90, 60, 25, .13);
    --shadow-3: 0 24px 64px rgba(90, 60, 25, .2);
    --nav-bg: rgba(255, 253, 250, .86);
}

/* ---------- 暖色 · 深色 ---------- */
html[data-theme="warm"][data-mode="dark"] {
    --bg: #14100b;
    --dot: rgba(245, 158, 11, .07);
    --surface: #1e1710;
    --surface-2: #261d14;
    --surface-3: #2f2418;
    --border: #3a2c1e;
    --border-2: #4b3925;
    --text: #f4ead9;
    --text-2: #b8a693;
    --text-3: #8d7c6b;
    --accent: #f59e0b;
    --accent-2: #d97706;
    --accent-soft: rgba(245, 158, 11, .14);
    --accent-line: rgba(245, 158, 11, .32);
    --on-accent: #1b1206;
    --glow: rgba(245, 158, 11, .26);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
    --shadow-3: 0 26px 68px rgba(0, 0, 0, .62);
    --nav-bg: rgba(20, 16, 11, .82);
}

/* ---------- 小清新 · 浅色 ---------- */
html[data-theme="fresh"][data-mode="light"] {
    --bg: #f1f8f3;
    --dot: rgba(31, 157, 99, .07);
    --surface: #ffffff;
    --surface-2: #f5fbf7;
    --surface-3: #e7f4ec;
    --border: #dcece2;
    --border-2: #c6dfd0;
    --text: #10251a;
    --text-2: #4f6f5d;
    --text-3: #82988a;
    --accent: #1f9d63;
    --accent-2: #15803d;
    --accent-soft: #e3f5ea;
    --accent-line: #b3ddc4;
    --on-accent: #ffffff;
    --glow: rgba(31, 157, 99, .18);
    --shadow-1: 0 1px 2px rgba(20, 70, 45, .06), 0 3px 10px rgba(20, 70, 45, .05);
    --shadow-2: 0 10px 28px rgba(20, 70, 45, .13);
    --shadow-3: 0 24px 64px rgba(20, 70, 45, .2);
    --nav-bg: rgba(255, 255, 255, .86);
}

/* ---------- 小清新 · 深色 ---------- */
html[data-theme="fresh"][data-mode="dark"] {
    --bg: #091410;
    --dot: rgba(74, 222, 128, .08);
    --surface: #0f1f19;
    --surface-2: #13291f;
    --surface-3: #19362a;
    --border: #1e3d2e;
    --border-2: #2a5440;
    --text: #e4f6ea;
    --text-2: #9dbfae;
    --text-3: #6f9481;
    --accent: #4ade80;
    --accent-2: #22b35e;
    --accent-soft: rgba(74, 222, 128, .13);
    --accent-line: rgba(74, 222, 128, .32);
    --on-accent: #04170c;
    --glow: rgba(74, 222, 128, .24);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
    --shadow-3: 0 26px 68px rgba(0, 0, 0, .62);
    --nav-bg: rgba(9, 20, 16, .82);
}

/* ---------- 旧变量名别名（兼容内联样式与脚本） ---------- */
html {
    --card-bg: var(--surface);
    --card-border: var(--border);
    --card-hover-border: var(--accent-line);
    --card-shadow: var(--shadow-1);
    --card-hover-shadow: var(--shadow-2);
    --primary: var(--accent);
    --primary-dark: var(--accent-2);
    --btn-text: var(--on-accent);
    --text-light: var(--text-2);
    --nav-border: var(--border);
    --switcher-bg: var(--surface);
    --tag-bg: var(--surface-3);
    --tag-text: var(--text-2);
    --tool-icon-bg: var(--accent-soft);
    --input-bg: var(--surface-2);
    --accent-glow: var(--glow);
    --backdrop: blur(18px) saturate(140%);
    --border-color: var(--border);
    --text-color: var(--text);
    --bg-main: var(--bg);
}

/* ---------- 基础重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
    background-size: 24px 24px;
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    cursor: pointer;
}

input {
    color: var(--text);
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
    background-clip: padding-box;
}

/* 通用工具类 */
.hidden {
    display: none !important;
}