/* ========================================
   主题变量系统 - 支持明亮/暗黑模式
   ======================================== */

:root {
  /* --- 品牌色 --- */
  --brand-primary: #2563eb;
  --brand-primary-hover: #1d4ed8;
  --brand-primary-light: #dbeafe;
  --brand-accent: #06b6d4;
  --brand-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);

  /* --- 语义色 --- */
  --color-success: #16a34a;
  --color-success-bg: #dcfce7;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-bg: #fee2e2;
  --color-info: #0891b2;
  --color-info-bg: #cffafe;

  /* --- 评分等级色 --- */
  --score-low: #16a34a;
  --score-low-bg: #dcfce7;
  --score-medium: #d97706;
  --score-medium-bg: #fef3c7;
  --score-high: #dc2626;
  --score-high-bg: #fee2e2;

  /* --- 过渡动画 --- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* --- 圆角 --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- 间距 --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* --- 字体 --- */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;

  /* --- 阴影 --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* --- 布局 --- */
  --sidebar-width: 280px;
  --header-height: 64px;
  --content-max-width: 1200px;
}

/* --- 明亮模式（默认） --- */
:root,
[data-theme="light"] {
  --bg-app: #f0f4f8;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f8fafc;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.85);
  --bg-code: #f1f5f9;
  --bg-overlay: rgba(0, 0, 0, 0.4);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;

  --border-color: #e2e8f0;
  --border-strong: #cbd5e1;

  --input-border: #cbd5e1;
  --input-focus-border: var(--brand-primary);
  --input-placeholder: #94a3b8;

  --card-bg: #ffffff;
  --card-border: #e2e8f0;

  --nav-active-bg: var(--brand-primary-light);
  --nav-active-text: var(--brand-primary);

  --toggle-bg: #e2e8f0;
  --toggle-thumb: #ffffff;

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: #f1f5f9;
}

/* --- 暗黑模式 --- */
[data-theme="dark"] {
  --bg-app: #0f172a;
  --bg-surface: #1e293b;
  --bg-surface-hover: #334155;
  --bg-elevated: #334155;
  --bg-input: #1e293b;
  --bg-sidebar: #1e293b;
  --bg-header: rgba(15, 23, 42, 0.85);
  --bg-code: #334155;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #64748b;
  --text-inverse: #0f172a;

  --border-color: #334155;
  --border-strong: #475569;

  --input-border: #475569;
  --input-focus-border: var(--brand-primary);
  --input-placeholder: #64748b;

  --card-bg: #1e293b;
  --card-border: #334155;

  --nav-active-bg: rgba(37, 99, 235, 0.2);
  --nav-active-text: #60a5fa;

  --toggle-bg: #475569;
  --toggle-thumb: #f1f5f9;

  --scrollbar-thumb: #475569;
  --scrollbar-track: #1e293b;

  --brand-primary-light: rgba(37, 99, 235, 0.15);

  --color-success-bg: rgba(22, 163, 74, 0.15);
  --color-warning-bg: rgba(217, 119, 6, 0.15);
  --color-danger-bg: rgba(220, 38, 38, 0.15);
  --color-info-bg: rgba(8, 145, 178, 0.15);

  --score-low-bg: rgba(22, 163, 74, 0.15);
  --score-medium-bg: rgba(217, 119, 6, 0.15);
  --score-high-bg: rgba(220, 38, 38, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}