/**
 * CSS 变量 - 实验室智能台账系统
 * 主题色板系统，支持浅色/深色主题切换
 * ★ 系统默认主题：浅色（明亮）模式 ★
 */

:root {
  /* 背景色（默认：浅色） */
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --bg-tertiary: #e5e7eb;
  --bg-input: #ffffff;
  --bg-modal-overlay: rgba(0, 0, 0, 0.5);
  
  /* 文字颜色 */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;
  
  /* 边框 */
  --border-color: #e5e7eb;
  --border-light: #d1d5db;
  
  /* 强调色 */
  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-primary-light: rgba(37, 99, 235, 0.1);
  --accent-secondary: #059669;
  --accent-secondary-light: rgba(5, 150, 105, 0.1);
  /* 别名变量：站内若干模块仍在引用这些名字，但它们从未被定义过，
     导致 var() 静默回退（背景变透明、文字取初始色）。
     这里给出指向「已定义变量」的别名，随主题自动变化。 */
  --bg-hover: var(--bg-secondary);
  --bg-modal: var(--bg-card);
  --sidebar-bg: var(--bg-card);
  --accent-success: var(--accent-secondary);
  --accent-success-light: var(--accent-secondary-light);
  --accent-danger: #ef4444;
  --accent-danger-light: rgba(239, 68, 68, 0.1);
  --accent-warning: #f59e0b;
  --accent-warning-light: rgba(245, 158, 11, 0.1);
  --accent-info: #06b6d4;
  --accent-info-light: rgba(6, 182, 212, 0.1);
  --accent-purple: #8b5cf6;
  --accent-purple-light: rgba(139, 92, 246, 0.1);
  --accent-orange: #f97316;
  --accent-orange-light: rgba(249, 115, 22, 0.1);
  
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", "Liberation Mono", monospace;
  
  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* 过渡 */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* Z-index 层级 */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* 浅色主题（= 系统默认，显式声明以便与 :root 保持一致、也便于将来改默认） */
[data-theme="light"],
[data-theme="default"],
/* ⚠️ 必须一并列出 data-theme-id：主题预览项只带 id 不带 base，
   否则 light/dark 的预览卡片取不到本主题的值 */
[data-theme-id="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --bg-tertiary: #e5e7eb;
  --bg-input: #ffffff;
  --bg-modal-overlay: rgba(0, 0, 0, 0.5);
  
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;
  
  --border-color: #e5e7eb;
  --border-light: #d1d5db;

  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-primary-light: rgba(37, 99, 235, 0.1);
  --accent-secondary: #059669;
  --accent-secondary-light: rgba(5, 150, 105, 0.1);
  /* 别名变量：站内若干模块仍在引用这些名字，但它们从未被定义过，
     导致 var() 静默回退（背景变透明、文字取初始色）。
     这里给出指向「已定义变量」的别名，随主题自动变化。 */
  --bg-hover: var(--bg-secondary);
  --bg-modal: var(--bg-card);
  --sidebar-bg: var(--bg-card);
  --accent-success: var(--accent-secondary);
  --accent-success-light: var(--accent-secondary-light);
  --accent-danger: #ef4444;
  --accent-danger-light: rgba(239, 68, 68, 0.1);
  --accent-warning: #f59e0b;
  --accent-warning-light: rgba(245, 158, 11, 0.1);
  --accent-info: #06b6d4;
  --accent-info-light: rgba(6, 182, 212, 0.1);
  --accent-purple: #8b5cf6;
  --accent-purple-light: rgba(139, 92, 246, 0.1);
  --accent-orange: #f97316;
  --accent-orange-light: rgba(249, 115, 22, 0.1);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
}

/* 深色主题（备选） */
[data-theme="dark"],
[data-theme-id="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --bg-card-hover: #273548;
  --bg-tertiary: #334155;
  --bg-input: #0d1520;
  --bg-modal-overlay: rgba(0, 0, 0, 0.7);
  
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;
  
  --border-color: #334155;
  --border-light: #475569;

  --accent-primary: #3b82f6;
  --accent-primary-hover: #2563eb;
  --accent-primary-light: rgba(59, 130, 246, 0.15);
  --accent-secondary: #22c55e;
  --accent-secondary-light: rgba(34, 197, 94, 0.15);
  /* 别名变量（深色主题同上） */
  --bg-hover: var(--bg-secondary);
  --bg-modal: var(--bg-card);
  --sidebar-bg: var(--bg-secondary);
  --accent-success: var(--accent-secondary);
  --accent-success-light: var(--accent-secondary-light);
  --accent-danger: #ef4444;
  --accent-danger-light: rgba(239, 68, 68, 0.15);
  --accent-warning: #f59e0b;
  --accent-warning-light: rgba(245, 158, 11, 0.15);
  --accent-info: #06b6d4;
  --accent-info-light: rgba(6, 182, 212, 0.15);
  --accent-purple: #a855f7;
  --accent-purple-light: rgba(168, 85, 247, 0.15);
  --accent-orange: #f97316;
  --accent-orange-light: rgba(249, 115, 22, 0.15);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
}


/* ============================================================
   扩展主题（科研蓝 / 实验室绿 / 暖色护眼 / 高对比 / 科技紫）
   ⚠️ 与 config/themes.js 是同一套配色的两份声明 —— 改一处必须改另一处。
   ⚠️ 必须排在前面 [data-theme="dark"] 块之后：两者特异性相同(0,1,0)，
      靠「后出现者胜」压过深色基底，再叠加该主题自己的配色。
   作用：JS 未执行时的首屏（消除切深色系主题的白闪）+ 纯 CSS 场景可用。
   ============================================================ */

/* ── 科研蓝（research）── */
[data-theme="research"],
[data-theme-id="research"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --bg-card-hover: #273548;
  --bg-tertiary: #334155;
  --bg-input: #0f172a;
  --bg-modal-overlay: rgba(0,0,0,0.7);
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;
  --accent-primary: #0ea5e9;
  --accent-primary-hover: #0284c7;
  --accent-primary-light: rgba(14,165,233,0.15);
  --accent-secondary: #06b6d4;
  --accent-secondary-light: rgba(6,182,212,0.15);
  --accent-danger: #f43f5e;
  --accent-danger-light: rgba(244,63,94,0.15);
  --accent-warning: #f59e0b;
  --accent-warning-light: rgba(245,158,11,0.15);
  --accent-info: #22d3ee;
  --accent-info-light: rgba(34,211,238,0.15);
  --accent-purple: #a78bfa;
  --accent-purple-light: rgba(167,139,250,0.15);
  --accent-orange: #fb923c;
  --accent-orange-light: rgba(251,146,60,0.15);
  --border-color: #334155;
  --border-light: #475569;
  --shadow-sm: 0 1px 2px rgba(6,182,212,0.1);
  --shadow-md: 0 4px 6px rgba(6,182,212,0.15);
  --shadow-lg: 0 10px 15px rgba(6,182,212,0.2);
  --shadow-xl: 0 20px 25px rgba(6,182,212,0.25);
  --bg-hover: var(--bg-secondary);
  --bg-modal: var(--bg-card);
  --sidebar-bg: var(--bg-secondary);
  --accent-success: var(--accent-secondary);
  --accent-success-light: var(--accent-secondary-light);
}

/* ── 实验室绿（lab）── */
[data-theme="lab"],
[data-theme-id="lab"] {
  --bg-primary: #0a1f0f;
  --bg-secondary: #14291a;
  --bg-card: #14291a;
  --bg-card-hover: #1e3a25;
  --bg-tertiary: #1e3a25;
  --bg-input: #0a1f0f;
  --bg-modal-overlay: rgba(0,0,0,0.7);
  --text-primary: #f0fdf4;
  --text-secondary: #bbf7d0;
  --text-muted: #86efac;
  --text-inverse: #0a1f0f;
  --accent-primary: #22c55e;
  --accent-primary-hover: #16a34a;
  --accent-primary-light: rgba(34,197,94,0.15);
  --accent-secondary: #10b981;
  --accent-secondary-light: rgba(16,185,129,0.15);
  --accent-danger: #ef4444;
  --accent-danger-light: rgba(239,68,68,0.15);
  --accent-warning: #f59e0b;
  --accent-warning-light: rgba(245,158,11,0.15);
  --accent-info: #22d3ee;
  --accent-info-light: rgba(34,211,238,0.15);
  --accent-purple: #a78bfa;
  --accent-purple-light: rgba(167,139,250,0.15);
  --accent-orange: #fb923c;
  --accent-orange-light: rgba(251,146,60,0.15);
  --border-color: #1e3a25;
  --border-light: #2d5a3a;
  --shadow-sm: 0 1px 2px rgba(34,197,94,0.1);
  --shadow-md: 0 4px 6px rgba(34,197,94,0.15);
  --shadow-lg: 0 10px 15px rgba(34,197,94,0.2);
  --shadow-xl: 0 20px 25px rgba(34,197,94,0.25);
  --bg-hover: var(--bg-secondary);
  --bg-modal: var(--bg-card);
  --sidebar-bg: var(--bg-secondary);
  --accent-success: var(--accent-secondary);
  --accent-success-light: var(--accent-secondary-light);
}

/* ── 暖色护眼（warm）── */
[data-theme="warm"],
[data-theme-id="warm"] {
  --bg-primary: #1c1410;
  --bg-secondary: #2c2318;
  --bg-card: #2c2318;
  --bg-card-hover: #3d3020;
  --bg-tertiary: #3d3020;
  --bg-input: #1c1410;
  --bg-modal-overlay: rgba(0,0,0,0.7);
  --text-primary: #fef3c7;
  --text-secondary: #fde68a;
  --text-muted: #fcd34d;
  --text-inverse: #1c1410;
  --accent-primary: #f59e0b;
  --accent-primary-hover: #d97706;
  --accent-primary-light: rgba(245,158,11,0.15);
  --accent-secondary: #fb923c;
  --accent-secondary-light: rgba(251,146,60,0.15);
  --accent-danger: #ef4444;
  --accent-danger-light: rgba(239,68,68,0.15);
  --accent-warning: #eab308;
  --accent-warning-light: rgba(234,179,8,0.15);
  --accent-info: #22d3ee;
  --accent-info-light: rgba(34,211,238,0.15);
  --accent-purple: #a78bfa;
  --accent-purple-light: rgba(167,139,250,0.15);
  --accent-orange: #f97316;
  --accent-orange-light: rgba(249,115,22,0.15);
  --border-color: #3d3020;
  --border-light: #4d4030;
  --shadow-sm: 0 1px 2px rgba(245,158,11,0.1);
  --shadow-md: 0 4px 6px rgba(245,158,11,0.15);
  --shadow-lg: 0 10px 15px rgba(245,158,11,0.2);
  --shadow-xl: 0 20px 25px rgba(245,158,11,0.25);
  --bg-hover: var(--bg-secondary);
  --bg-modal: var(--bg-card);
  --sidebar-bg: var(--bg-secondary);
  --accent-success: var(--accent-secondary);
  --accent-success-light: var(--accent-secondary-light);
}

/* ── 高对比度（contrast）── */
[data-theme="contrast"],
[data-theme-id="contrast"] {
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-card: #1a1a1a;
  --bg-card-hover: #2d2d2d;
  --bg-tertiary: #2d2d2d;
  --bg-input: #000000;
  --bg-modal-overlay: rgba(0,0,0,0.8);
  --text-primary: #ffffff;
  --text-secondary: #e5e5e5;
  --text-muted: #cccccc;
  --text-inverse: #000000;
  --accent-primary: #00ffff;
  --accent-primary-hover: #00cccc;
  --accent-primary-light: rgba(0,255,255,0.2);
  --accent-secondary: #00ff00;
  --accent-secondary-light: rgba(0,255,0,0.2);
  --accent-danger: #ff0000;
  --accent-danger-light: rgba(255,0,0,0.2);
  --accent-warning: #ffff00;
  --accent-warning-light: rgba(255,255,0,0.2);
  --accent-info: #00ffff;
  --accent-info-light: rgba(0,255,255,0.2);
  --accent-purple: #ff00ff;
  --accent-purple-light: rgba(255,0,255,0.2);
  --accent-orange: #ff8800;
  --accent-orange-light: rgba(255,136,0,0.2);
  --border-color: #ffffff;
  --border-light: #cccccc;
  --shadow-sm: 0 1px 2px rgba(255,255,255,0.2);
  --shadow-md: 0 4px 6px rgba(255,255,255,0.3);
  --shadow-lg: 0 10px 15px rgba(255,255,255,0.4);
  --shadow-xl: 0 20px 25px rgba(255,255,255,0.5);
  --bg-hover: var(--bg-secondary);
  --bg-modal: var(--bg-card);
  --sidebar-bg: var(--bg-secondary);
  --accent-success: var(--accent-secondary);
  --accent-success-light: var(--accent-secondary-light);
}

/* ── 科技紫（tech）── */
[data-theme="tech"],
[data-theme-id="tech"] {
  --bg-primary: #1a0f2e;
  --bg-secondary: #2d1b4e;
  --bg-card: #2d1b4e;
  --bg-card-hover: #3d2667;
  --bg-tertiary: #3d2667;
  --bg-input: #1a0f2e;
  --bg-modal-overlay: rgba(0,0,0,0.7);
  --text-primary: #f3e8ff;
  --text-secondary: #e9d5ff;
  --text-muted: #d8b4fe;
  --text-inverse: #1a0f2e;
  --accent-primary: #a855f7;
  --accent-primary-hover: #9333ea;
  --accent-primary-light: rgba(168,85,247,0.15);
  --accent-secondary: #c084fc;
  --accent-secondary-light: rgba(192,132,252,0.15);
  --accent-danger: #f43f5e;
  --accent-danger-light: rgba(244,63,94,0.15);
  --accent-warning: #fbbf24;
  --accent-warning-light: rgba(251,191,36,0.15);
  --accent-info: #22d3ee;
  --accent-info-light: rgba(34,211,238,0.15);
  --accent-purple: #c084fc;
  --accent-purple-light: rgba(192,132,252,0.15);
  --accent-orange: #fb923c;
  --accent-orange-light: rgba(251,146,60,0.15);
  --border-color: #3d2667;
  --border-light: #4d3080;
  --shadow-sm: 0 1px 2px rgba(168,85,247,0.1);
  --shadow-md: 0 4px 6px rgba(168,85,247,0.15);
  --shadow-lg: 0 10px 15px rgba(168,85,247,0.2);
  --shadow-xl: 0 20px 25px rgba(168,85,247,0.25);
  --bg-hover: var(--bg-secondary);
  --bg-modal: var(--bg-card);
  --sidebar-bg: var(--bg-secondary);
  --accent-success: var(--accent-secondary);
  --accent-success-light: var(--accent-secondary-light);
}

/* ══════════════════════════════════════════════════════════════════════
   主题预览项（页头下拉行 / 设置页卡片）自带底色
   ──────────────────────────────────────────────────────────────────────
   ⚠️ 这两类元素都带 data-theme-id，因此内部 --text-* 解析成「该主题的文字色」。
      若它们自身不画底色，底色就是外层页面的 —— 浅色主题下变成
      「深色主题的亮色文字 + 白底」，实测 lab #86efac on #fff 仅 1.40:1、
      research #94a3b8 2.56:1、tech #d8b4fe 1.77:1（对比度审计已抓到）。
      让预览项自带 --bg-primary / --text-primary 后，文字与底色同源，
      对比度即是该主题自身的配色，天然达标。
   ⚠️ 选择器写到 (0,3,0)，高于 settings.css 的 `.theme-option.active`(0,2,0)，
      不依赖两个样式表的加载顺序。
   ══════════════════════════════════════════════════════════════════════ */
.theme-grid .theme-option[data-theme-id],
.theme-dropdown-menu .theme-option[data-theme-id] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
.theme-grid .theme-option[data-theme-id]:hover,
.theme-dropdown-menu .theme-option[data-theme-id]:hover {
  background-color: var(--bg-hover, var(--bg-secondary));
}
/* 预览色块里的图标不参与文字对比度，但别继承到奇怪的底色 */
.theme-grid .theme-option[data-theme-id] .theme-preview {
  color: var(--text-primary);
}