/* ============================================================
   全站主题换肤 Token 层 — 设计方案 e677d396（工单#02b32f1b/流水线2f745907）
   机制: html[data-theme='light'|'dark'] 切换变量块，auto 由 theme.js
         解析为 light/dark 后落到 data-theme；纯CSS零网络请求零延迟。
   规范: 本文件是全站色值唯一权威定义处，组件样式只准引用 var(--*)，
         禁止再写字面量色值（历史遗留字面量随页面接入逐步清理）。
   兼容: :root 默认浅色（对齐改造前 login.css 配色），无 data-theme
         或 theme.js 未加载时页面照常渲染（渐进增强）。
   ============================================================ */

/* ---------- 浅色（默认） ---------- */
:root,
html[data-theme='light'] {
  /* 背景 */
  --color-bg-primary: #ffffff;   /* 卡片/输入框/气泡底 */
  --color-bg-secondary: #f5f7fa; /* 页面背景 */
  --color-bg-card: #ffffff;
  --color-bg-tertiary: #f6f7f9;  /* 次级面板（证照页等） */
  /* 文本 */
  --color-text-primary: #1f2328;
  --color-text-secondary: #57606a;
  --color-text-tertiary: #8c8c8c; /* 辅助小字（沿用原 --text-2） */
  --color-text-on-primary: #ffffff; /* 主色按钮上的文字 */
  /* 边框 */
  --color-border: #d0d7de;
  --color-border-strong: #d9d9d9;
  /* 品牌主色（统一绿色主色#5AD8A6，wd_mgr-1787954705/TC-017，值=tokens.css事实源；
     换肤token层同步绿，login.css经--primary映射自动生效） */
  --color-primary: #5AD8A6;
  --color-primary-hover: #7CE2BC;
  --color-primary-active: #35C092;
  --color-primary-ring: rgba(90, 216, 166, .15);
  /* 功能色 */
  --color-success: #30A46C;
  --color-warning: #9a6700;
  --color-warning-bg: #fff7e8;    /* 证照临期提醒底 */
  --color-warning-text: #8a4b00;
  --color-danger: #cf222e;
  --color-error: #f5222d;          /* 沿用原 --error */
  --color-error-bg: #fff1f0;       /* 错误横幅底 */
  --color-error-border: #ffa39e;
  /* 阴影 */
  --color-shadow-card: 0 1px 3px rgba(0, 0, 0, .08);
  /* 遮罩（弹窗浮层，黑色半透明跨主题通用） */
  --color-mask: rgba(0, 0, 0, .45);
  --color-modal-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

/* ---------- 深色 ---------- */
html[data-theme='dark'] {
  --color-bg-primary: #0d1117;
  --color-bg-secondary: #161b22;
  --color-bg-card: #161b22;
  --color-bg-tertiary: #1c2128;
  --color-text-primary: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-tertiary: #8b949e;
  --color-text-on-primary: #ffffff;
  --color-border: #30363d;
  --color-border-strong: #444c56;
  /* 统一绿色主色（深色块，wd_mgr-1787954705补全：#5AD8A6亮色在暗底可读） */
  --color-primary: #5AD8A6;
  --color-primary-hover: #7CE2BC;
  --color-primary-active: #35C092;
  --color-primary-ring: rgba(90, 216, 166, .3);
  --color-success: #3fb950;
  --color-warning: #d29922;
  --color-warning-bg: #2d2200;
  --color-warning-text: #e3b341;
  --color-danger: #f85149;
  --color-error: #f85149;
  --color-error-bg: #3d1e20;
  --color-error-border: #6e4044;
  --color-shadow-card: 0 1px 3px rgba(0, 0, 0, .4);
  --color-mask: rgba(0, 0, 0, .65);
  --color-modal-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark; /* 原生控件(滚动条/输入框)同步深色 */
}

/* ---------- 旧变量映射层（向后兼容，历史样式仍引用旧名） ---------- */
:root,
html[data-theme='light'] {
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-active: var(--color-primary-active);
  --primary-ring: var(--color-primary-ring);
  --error: var(--color-error);
  --error-bg: var(--color-error-bg);
  --error-border: var(--color-error-border);
  --success: var(--color-success);
  --text-1: var(--color-text-primary);
  --text-2: var(--color-text-tertiary);
  --text-sub: var(--color-text-secondary);
  --border: var(--color-border-strong);
  --bg-page: var(--color-bg-secondary);
  --bg-card: var(--color-bg-card);
  --text: var(--color-text-primary);
  --bg: var(--color-bg-secondary);
}

html[data-theme='dark'] {
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-active: var(--color-primary-active);
  --primary-ring: var(--color-primary-ring);
  --error: var(--color-error);
  --error-bg: var(--color-error-bg);
  --error-border: var(--color-error-border);
  --success: var(--color-success);
  --text-1: var(--color-text-primary);
  --text-2: var(--color-text-tertiary);
  --text-sub: var(--color-text-secondary);
  --border: var(--color-border-strong);
  --bg-page: var(--color-bg-secondary);
  --bg-card: var(--color-bg-card);
  --text: var(--color-text-primary);
  --bg: var(--color-bg-secondary);
}

/* ---------- 主题切换按钮（_theme_toggle.html 注入） ---------- */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--color-shadow-card);
  cursor: pointer;
  user-select: none;
}
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
.theme-toggle .theme-toggle-icon { font-size: 14px; line-height: 1; }