/* ============================================
   base.css — 全局样式 / 设计令牌 / 三态主题
   ============================================ */

/* ---- 设计令牌（浅色） ---- */
:root,
[data-theme="light"] {
  --bg-0: #f4f6fa;
  --bg-1: #ffffff;
  --bg-2: #eef1f7;
  --bg-3: #e4e9f2;

  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #edf1f7;

  --border: #dfe5ee;
  --border-strong: #cbd5e1;

  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #7b8a9d;

  --primary: #0d9488;
  --primary-strong: #0f766e;
  --primary-soft: #ccfbf1;
  --primary-glow: rgba(13, 148, 136, 0.18);

  --ok: #16a34a;        /* √ 通过  绿 */
  --warn: #d97706;      /* △ 注意  橙黄 */
  --err: #dc2626;       /* × 不通过 红 */
  --ok-soft: #dcfce7;
  --warn-soft: #fef3c7;
  --err-soft: #fee2e2;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 34px rgba(15, 23, 42, 0.14);

  --sidebar-bg: #f8fafc;
  --topbar-bg: #ffffff;
  --content-bg: var(--bg-0);

  --grad-accent: linear-gradient(135deg, #0d9488, #0891b2);

  color-scheme: light;
}

/* ---- 设计令牌（深色，默认主视觉） ---- */
[data-theme="dark"] {
  --bg-0: #0b1220;
  --bg-1: #111a2e;
  --bg-2: #172238;
  --bg-3: #1e2b45;

  --surface: #131e33;
  --surface-2: #182540;
  --surface-3: #1f2e4d;

  --border: #24344f;
  --border-strong: #32466b;

  --text-1: #f1f6fb;
  --text-2: #b4c2d4;
  --text-3: #7d8aa1;

  --primary: #4fd1c5;
  --primary-strong: #2bb3a6;
  --primary-soft: rgba(79, 209, 197, 0.14);
  --primary-glow: rgba(79, 209, 197, 0.22);

  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn-soft: rgba(251, 191, 36, 0.16);
  --err-soft: rgba(248, 113, 113, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);

  --sidebar-bg: #0e1729;
  --topbar-bg: #111a2e;
  --content-bg: var(--bg-0);

  --grad-accent: linear-gradient(135deg, #2bb3a6, #38bdf8);

  color-scheme: dark;
}

/* ---- 跟随系统 ---- */
[data-theme="auto"] {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-0: #0b1220; --bg-1: #111a2e; --bg-2: #172238; --bg-3: #1e2b45;
    --surface: #131e33; --surface-2: #182540; --surface-3: #1f2e4d;
    --border: #24344f; --border-strong: #32466b;
    --text-1: #f1f6fb; --text-2: #b4c2d4; --text-3: #7d8aa1;
    --primary: #4fd1c5; --primary-strong: #2bb3a6;
    --primary-soft: rgba(79, 209, 197, 0.14); --primary-glow: rgba(79, 209, 197, 0.22);
    --ok: #34d399; --warn: #fbbf24; --err: #f87171;
    --ok-soft: rgba(52, 211, 153, 0.14); --warn-soft: rgba(251, 191, 36, 0.16); --err-soft: rgba(248, 113, 113, 0.15);
    --sidebar-bg: #0e1729; --topbar-bg: #111a2e;
    --grad-accent: linear-gradient(135deg, #2bb3a6, #38bdf8);
    color-scheme: dark;
  }
}

/* ============ 全局重置 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-1);
  background: var(--content-bg);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 背景氛围层 */
#app {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(1000px 500px at 85% -10%, var(--primary-glow), transparent 60%),
    var(--content-bg);
}

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

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.hidden { display: none !important; }