/* =====================================================================
   主题变量：所有颜色集中定义，便于换肤（深色 / 浅色）
   ===================================================================== */

:root {
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --font-ui: "Inter", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;

  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --topbar-h: 46px;
  --statusbar-h: 26px;
  --toolbar-w: 52px;
  --panel-w: 268px;
  --timeline-h: 120px;
}

/* ---------- 深色主题（默认） ---------- */
:root,
html[data-theme="dark"] {
  --bg: #1e1f24;
  --bg-elevated: #26272e;
  --bg-panel: #26272e;
  --bg-sunken: #17181c;
  --bg-hover: #2f313a;
  --bg-active: #373a45;
  --bg-overlay: rgba(12, 13, 16, 0.62);

  --border: #3a3c46;
  --border-strong: #4a4d59;

  --text: #e6e8ee;
  --text-dim: #a8adbb;
  --text-faint: #767b89;
  --text-on-accent: #ffffff;

  --accent: #4c8dff;
  --accent-hover: #5f9bff;
  --accent-weak: rgba(76, 141, 255, 0.16);

  --success: #35c48f;
  --warning: #f2b34b;
  --danger: #f0605e;

  --checker-a: #d7d7d7;
  --checker-b: #ffffff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* ---------- 浅色主题 ---------- */
html[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-elevated: #ffffff;
  --bg-panel: #ffffff;
  --bg-sunken: #eceef2;
  --bg-hover: #eef0f4;
  --bg-active: #e4e7ee;
  --bg-overlay: rgba(20, 22, 28, 0.42);

  --border: #e1e4ea;
  --border-strong: #cdd2db;

  --text: #1f2430;
  --text-dim: #667085;
  --text-faint: #98a0ae;
  --text-on-accent: #ffffff;

  --accent: #2f6fe4;
  --accent-hover: #2560cf;
  --accent-weak: rgba(47, 111, 228, 0.12);

  --success: #1f9d6f;
  --warning: #d18a1a;
  --danger: #d94848;

  --checker-a: #d7d7d7;
  --checker-b: #ffffff;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.18);
}