/* CSS 变量 - 主题系统 & 设计令牌 */
:root {
  /* 背景 / 表面 */
  --bg-primary: #0d0d0d;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #252525;
  --card-bg: #1a1a1a;
  --input-bg: #252525;

  /* 边框 */
  --border-color: #2a2a2a;
  --border-strong: #3a3a3a;
  --input-border: #333;

  /* 文字 */
  --text-primary: #e6e6e6;
  --text-secondary: #aaaaaa;
  --text-muted: #707070;

  /* 交互态 */
  --hover-bg: #2a2a2a;
  --active-bg: #3a3a3a;

  /* 品牌 / 语义色（含浅色底） */
  --accent: #4c6ef5;
  --accent-hover: #6b87ff;
  --accent-soft: rgba(76, 110, 245, 0.16);
  --danger: #f2555a;
  --danger-soft: rgba(242, 85, 90, 0.16);
  --success: #35c07d;
  --success-soft: rgba(53, 192, 125, 0.16);
  --warning: #f0b429;
  --warning-soft: rgba(240, 180, 41, 0.16);

  /* 阴影 */
  --shadow-color: rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.5);

  /* 滚动条 */
  --scrollbar-thumb: #333333;
  --scrollbar-thumb-hover: #4a4a4a;

  /* 圆角 */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* 字号 */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;

  /* 动效 */
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.3s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --theme-transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);

  --gap: 8px;
}

body.light-theme {
  --bg-primary: #f5f5f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f0f2;
  --card-bg: #ffffff;
  --input-bg: #ffffff;

  --border-color: #e0e0e4;
  --border-strong: #cccccc;
  --input-border: #d5d5da;

  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #8a8a8a;

  --hover-bg: #ececf0;
  --active-bg: #e0e0e6;

  --accent-soft: rgba(76, 110, 245, 0.12);
  --danger-soft: rgba(242, 85, 90, 0.12);
  --success-soft: rgba(53, 192, 125, 0.12);
  --warning-soft: rgba(240, 180, 41, 0.14);

  --shadow-color: rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.14);

  --scrollbar-thumb: #c8c8ce;
  --scrollbar-thumb-hover: #b0b0b8;
}