/**
 * v2.0.2-hotfix26+hotfix27：全局主题变量（深色 / 明亮）
 *
 * 设计原则：
 *   - 所有页面通过 <link rel="stylesheet" href="/css/theme.css"> 引入
 *   - 页面 <style> 块内的颜色硬编码改为 var(--xxx) 引用本文件的变量
 *   - JS 切主题：document.documentElement.setAttribute('data-theme', 'light')
 *   - localStorage 持久化：localStorage.getItem('theme')
 *
 * hotfix27 扩展：增加公共 CSS（app.css）所需的卡片半透明 / alert / 按钮 /
 *   表格 / 渐变 / 装饰背景等 ~22 个新变量，确保 app.css 切主题后视觉一致。
 */

:root,
:root[data-theme="dark"] {
  --bg-page:        #0a0e1e;
  --bg-card:        #141c38;
  --bg-input:       #1a2350;
  --bg-elevated:    rgba(20, 28, 70, 0.55);
  --bg-hover:       rgba(255, 255, 255, 0.06);
  --bg-overlay:     rgba(8, 12, 32, 0.6);

  --bg-card-translucent: rgba(20, 28, 70, 0.55);
  --bg-nav:               rgba(20, 28, 70, 0.65);
  --bg-input-translucent: rgba(8, 12, 32, 0.5);
  --bg-input-translucent-2: rgba(8, 12, 32, 0.55);
  --bg-deep:              rgba(15, 22, 58, 0.65);
  --bg-row-translucent:   rgba(255, 255, 255, 0.02);
  --bg-row-hover:         rgba(93, 214, 255, 0.04);
  --bg-table-head:        rgba(8, 12, 32, 0.3);
  --bg-table-row:         rgba(8, 12, 32, 0.55);

  --chip-task-bg:         rgba(93, 214, 255, 0.22);
  --chip-counter-bg:      rgba(255, 215, 107, 0.22);
  --chip-counter-text:    #ffd76b;
  --chip-manual-bg:       rgba(179, 136, 255, 0.22);
  --chip-manual-text:     #b388ff;

  --text-primary:   #ffffff;
  --text-secondary: #e8ecf8;
  --text-tertiary:  #d0d8ec;
  --text-muted:     #8892b8;
  --text-inverse:   #0a0e1e;

  --accent:         #5dd6ff;
  --accent-strong:  #88e0ff;
  --accent-text:    #0a0e1e;
  --accent-bg-hover:rgba(93, 214, 255, 0.15);
  --accent-bg-strong-hover: rgba(93, 214, 255, 0.22);
  --accent-glow:    rgba(93, 214, 255, 0.5);

  --success:        #5dd6ff;
  --success-bg:     rgba(34, 197, 94, 0.12);
  --success-border: rgba(34, 197, 94, 0.3);
  --success-text:   #4ade80;

  --error:          #ff7b7b;
  --error-bg:       rgba(239, 68, 68, 0.12);
  --error-border:   rgba(239, 68, 68, 0.3);
  --error-text:     #fca5a5;
  --error-strong:   #ef4444;

  --warning:        #ffa500;
  --warning-bg:     rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.3);
  --warning-text:   #fbbf24;

  --info:           #5dd6ff;
  --info-bg:        rgba(59, 130, 246, 0.12);
  --info-border:    rgba(59, 130, 246, 0.3);
  --info-text:      #93c5fd;

  --border:         rgba(122, 162, 255, 0.25);
  --border-strong:  rgba(93, 214, 255, 0.5);
  --border-table:   rgba(122, 162, 255, 0.1);
  --border-dashed:  rgba(122, 162, 255, 0.15);
  --border-faint:   rgba(122, 162, 255, 0.08);
  --border-accent-weak:    rgba(93, 214, 255, 0.2);
  --border-accent-medium:  rgba(93, 214, 255, 0.35);
  --border-accent-strong:  rgba(93, 214, 255, 0.4);

  --shadow:         0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-hover:   0 8px 28px rgba(93, 214, 255, 0.18);
  --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-focus:   0 0 0 2px rgba(93, 214, 255, 0.2);
  --shadow-btn-hover: 0 4px 16px rgba(93, 214, 255, 0.4);

  --gradient-primary: linear-gradient(135deg, #4a90e2, #5dd6ff);
  --gradient-brand:   linear-gradient(90deg, #5dd6ff, #b388ff);
  --gradient-logo:    linear-gradient(135deg, #5dd6ff, #b388ff);
  --gradient-icon:    linear-gradient(135deg, #4a90e2, #b388ff);
  --gradient-divider: linear-gradient(90deg, #5dd6ff, #b388ff);

  --bg-decor-primary:  radial-gradient(ellipse at 20% 20%, rgba(74, 144, 226, 0.18), transparent 50%),
                      radial-gradient(ellipse at 80% 30%, rgba(179, 136, 255, 0.15), transparent 50%),
                      linear-gradient(135deg, #06081a 0%, #0e1438 50%, #06081a 100%);
  --bg-grid-primary:   linear-gradient(rgba(122, 162, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(122, 162, 255, 0.05) 1px, transparent 1px);

  --mask-fade: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, transparent 80%);
}

:root[data-theme="light"] {
  --bg-page:        #f5f7fb;
  --bg-card:        #ffffff;
  --bg-input:       #ffffff;
  --bg-elevated:    rgba(0, 0, 0, 0.03);
  --bg-hover:       rgba(0, 0, 0, 0.05);
  --bg-overlay:     rgba(255, 255, 255, 0.85);

  --bg-card-translucent: #ffffff;
  --bg-nav:               rgba(255, 255, 255, 0.85);
  --bg-input-translucent: #f5f7fb;
  --bg-input-translucent-2: #e8ecf5;
  --bg-deep:              #f0f2f7;
  --bg-row-translucent:   rgba(0, 0, 0, 0.025);
  --bg-row-hover:         rgba(0, 102, 204, 0.06);
  --bg-table-head:        #f5f7fb;
  --bg-table-row:         #f5f7fb;

  --chip-task-bg:         rgba(0, 102, 204, 0.10);
  --chip-counter-bg:      rgba(255, 193, 7, 0.18);
  --chip-counter-text:    #b8860b;
  --chip-manual-bg:       rgba(179, 136, 255, 0.15);
  --chip-manual-text:     #5a3da6;

  --text-primary:   #1a1a2e;
  --text-secondary: #2a2e44;
  --text-tertiary:  #3a4060;
  --text-muted:     #5a6070;
  --text-inverse:   #ffffff;

  --accent:         #0066cc;
  --accent-strong:  #0052a3;
  --accent-text:    #ffffff;
  --accent-bg-hover:rgba(0, 102, 204, 0.10);
  --accent-bg-strong-hover: rgba(0, 102, 204, 0.18);
  --accent-glow:    rgba(0, 102, 204, 0.4);

  --success:        #28a745;
  --success-bg:     rgba(40, 167, 69, 0.10);
  --success-border: rgba(40, 167, 69, 0.35);
  --success-text:   #1e7e34;

  --error:          #dc3545;
  --error-bg:       rgba(220, 53, 69, 0.08);
  --error-border:   rgba(220, 53, 69, 0.30);
  --error-text:     #b02a37;
  --error-strong:   #b02a37;

  --warning:        #ffc107;
  --warning-bg:     rgba(255, 193, 7, 0.12);
  --warning-border: rgba(255, 193, 7, 0.40);
  --warning-text:   #b8860b;

  --info:           #0066cc;
  --info-bg:        rgba(0, 102, 204, 0.08);
  --info-border:    rgba(0, 102, 204, 0.30);
  --info-text:      #0052a3;

  --border:         rgba(0, 0, 0, 0.12);
  --border-strong:  rgba(0, 102, 204, 0.5);
  --border-table:   rgba(0, 0, 0, 0.08);
  --border-dashed:  rgba(0, 0, 0, 0.12);
  --border-faint:   rgba(0, 0, 0, 0.06);
  --border-accent-weak:    rgba(0, 102, 204, 0.25);
  --border-accent-medium:  rgba(0, 102, 204, 0.45);
  --border-accent-strong:  rgba(0, 102, 204, 0.6);

  --shadow:         0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover:   0 6px 18px rgba(0, 102, 204, 0.18);
  --shadow-card:    0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-focus:   0 0 0 2px rgba(0, 102, 204, 0.18);
  --shadow-btn-hover: 0 4px 16px rgba(0, 102, 204, 0.30);

  --gradient-primary: linear-gradient(135deg, #4a90e2, #0066cc);
  --gradient-brand:   linear-gradient(90deg, #0066cc, #5a3da6);
  --gradient-logo:    linear-gradient(135deg, #0066cc, #5a3da6);
  --gradient-icon:    linear-gradient(135deg, #4a90e2, #5a3da6);
  --gradient-divider: linear-gradient(90deg, #0066cc, #5a3da6);

  --bg-decor-primary:  radial-gradient(ellipse at 20% 20%, rgba(74, 144, 226, 0.08), transparent 50%),
                      radial-gradient(ellipse at 80% 30%, rgba(179, 136, 255, 0.08), transparent 50%),
                      linear-gradient(135deg, #f5f7fb 0%, #e8ecf5 50%, #f5f7fb 100%);
  --bg-grid-primary:   linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);

  --mask-fade: radial-gradient(ellipse at center, rgba(0,0,0,1) 70%, transparent 100%);
}

/* 全局基础样式 */
body {
  background: var(--bg-page);
  color: var(--text-primary);
}