/* ============================================================
   设计令牌（Design Tokens）

   说明：
   1. 本文件是颜色 / 字号 / 间距 / 圆角 / 控件宽度的唯一来源，
      业务页面不得再裸写十六进制色值。
   2. Element Plus 变量覆盖统一放在下方，改品牌色 / 边框 / 圆角
      只需改本文件，全站组件自动跟随。

   2026-09-21 无障碍改版（WCAG 2.1 AA，正文 4.5:1）：
   - 主色与成功 / 警告 / 危险色整体加深，保证「白字 + 实心色块」≥4.5:1；
     它们同时用作白底上的彩色文字，因此两个方向都达标。
   - 实心按钮的悬停 / 按下由「变浅」改为「加深」，否则悬停瞬间会跌破 4.5:1。
   - 2026-09-21 续（方案 A · 清爽蓝白，第一批）：
     1) 品牌主色定为 #1e5fd1（白字 5.81:1），悬停 / 按下继续走「加深」；
     2) 底色与描边整体转冷：页面底 #f1f4f9、卡片描边 #e2e7f0、
        分隔线 #edf1f7，并新增表头底 --c-table-head 与行悬浮 --c-row-hover；
     3) 层次由「细描边」改为「底灰 + 白卡 + 柔和投影」，卡片不再与页面底同色；
     4) 圆角整体放大一档（2/4/6 → 4/8/10），表格行高 36 → 42px、表头 40px；
     5) 语义色（成功 / 警告 / 危险）与文字灰阶保持原值不动。
   - 文字灰阶（--c-text-3 / --c-text-4）、灰色标签与未处理状态灰
     保持原值不动：小号文字压到 4.5:1 后与正文重量接近、失去层次，
     实际观感明显变差，已按实机效果回退。
     承载正文信息的 --c-text / --c-text-2 原值即达标。
   括号内为该色值对白色的对比度，便于后续复核。
    ============================================================ */

:root {
  /* ---- 品牌主色 ---- */
  --c-brand: #1e5fd1;          /* 实心按钮 / 链接，白字 5.81:1 */
  --c-brand-hover: #1a54ba;    /* 悬停（加深），白字 6.95:1 */
  --c-brand-active: #16479f;   /* 按下（再深），白字 8.62:1 */
  --c-brand-strong: #123c86;   /* 深色文字 / 文字按钮悬停，10.42:1 */

  /* ---- 品牌浅色（底纹、描边、标签底） ---- */
  --c-brand-light: #eff4ff;    /* 标签底 / 选中底 / 一级导航当前项 */
  --c-brand-tint-2: #e2ebff;
  --c-brand-tint-3: #c9dbff;   /* 标签边框 */
  --c-brand-tint-4: #9dc0ff;   /* 浅色按钮描边 */

  /* ---- 文字（4 级灰阶，保持原值） ---- */
  --c-text: #303133;           /* 正文、标题 13.02:1 */
  --c-text-2: #606266;         /* 表单、表格 6.11:1 */
  --c-text-3: #909399;         /* 说明、时间戳（原值 3.08:1） */
  --c-text-4: #c0c4cc;         /* 提示文字（原值 1.75:1） */

  /* ---- 边框与底纹 ---- */
  --c-border: #d3dae6;         /* 输入框 / 可交互描边 */
  --c-border-light: #e2e7f0;   /* 卡片、面板描边 */
  --c-border-lighter: #edf1f7; /* 表格分隔线 */
  --c-bg-page: #f1f4f9;        /* 页面底：与白卡分离，形成层次 */
  --c-bg-hover: #f7f9fd;
  --c-white: #ffffff;

  /* ---- 界面层（方案 A 新增） ---- */
  --c-table-head: #f6f8fc;     /* 表头底 */
  --c-row-hover: #f6f9ff;      /* 表格行悬浮底 */

  /* ---- 语义色（同时用作白底文字与实心色块） ---- */
  --c-success: #387e00;        /* 白字 5.06:1 */
  --c-success-hover: #307000;
  --c-success-active: #286000;
  --c-success-strong: #225500;
  --c-success-light: #ebfae4;
  --c-success-tint-2: #ddf6d2;
  --c-success-tint-3: #c5ebb5;
  --c-success-tint-4: #9bcf84;

  --c-warning: #9b6300;        /* 白字 5.03:1 */
  --c-warning-hover: #8a5800;
  --c-warning-active: #784b00;
  --c-warning-strong: #6b4300;
  --c-warning-light: #fff2e3;
  --c-warning-tint-2: #ffe9cf;
  --c-warning-tint-3: #fbd8ad;
  --c-warning-tint-4: #e4b478;

  --c-danger: #c34249;         /* 白字 5.00:1 */
  --c-danger-hover: #b3353e;
  --c-danger-active: #a02531;
  --c-danger-strong: #921d2a;
  --c-danger-light: #fff0f0;
  --c-danger-tint-2: #ffe6e5;
  --c-danger-tint-3: #ffd1cf;
  --c-danger-tint-4: #ff9f9e;

  /* ---- 状态三色（界面颜色的唯一依据） ----
     灰=未处理 绿=处理完成 黑=无需处理
     中间态 / 失败态 = 灰色 + 角标（不再使用橙、红表示状态）
     灰与黑保持原值；绿按白字标准加深 */
  --c-zone-unprocessed: #909399;
  --c-zone-processed: #387e00;
  --c-zone-exempt: #303133;
  --c-zone-unprocessed-strong: #5c6672;  /* 未打印胶囊选中填充，白字 6.2:1 */
  --c-zone-recycle: #6b7280;             /* 回收站胶囊选中填充，白字 4.83:1 */

  /* ---- 字号（五档封顶） ---- */
  --fs-title: 20px;    /* 页面标题 */
  --fs-metric: 26px;   /* 指标卡数字（工作台 / 统计卡） */
  --fs-section: 16px;  /* 区块标题 */
  --fs-body: 14px;     /* 正文、表单、按钮 */
  --fs-sm: 13px;       /* 表格、筛选项 */
  --fs-xs: 12px;       /* 说明、单位、时间戳 */

  /* ---- 间距（只用 4 的倍数） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;

  /* ---- 圆角 ---- */
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-lg: 10px;

  /* ---- 控件高度与表格行高 ---- */
  --h-sm: 28px;
  --h-base: 32px;
  --h-lg: 36px;
  --h-thead: 40px;    /* 表头行高 */
  --h-row: 42px;      /* 数据行高（已确认由 36 提到 42） */

  /* ---- 控件宽度档位（收敛原先的 12 种宽度） ---- */
  --w-xs: 96px;
  --w-sm: 140px;
  --w-md: 200px;
  --w-lg: 240px;
  --w-xl: 320px;
  --w-sidebar: 220px;          /* 导航展开宽度（悬停或锁定） */
  --w-sidebar-collapsed: 70px; /* 导航收起宽度（图标栏） */

  /* ---- 阴影（双层冷灰，比单层纯黑更干净） ---- */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 4px 6px -2px rgba(15, 23, 42, 0.06), 0 12px 20px -6px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(30, 95, 209, 0.18);  /* 输入聚焦环 */

  /* ============================================================
     Element Plus 变量覆盖
     light-9 → light-3 由浅到深，语义与 Element 默认一致；
     实心按钮的悬停 / 按下另见文件末尾的覆盖。
     ============================================================ */
  --el-color-primary: var(--c-brand);
  --el-color-primary-rgb: 30, 95, 209;
  --el-color-primary-light-3: var(--c-brand-tint-4);
  --el-color-primary-light-5: var(--c-brand-tint-4);
  --el-color-primary-light-7: var(--c-brand-tint-3);
  --el-color-primary-light-8: var(--c-brand-tint-2);
  --el-color-primary-light-9: var(--c-brand-light);
  --el-color-primary-dark-2: var(--c-brand-active);

  --el-color-success: var(--c-success);
  --el-color-success-rgb: 56, 126, 0;
  --el-color-success-light-3: var(--c-success-tint-4);
  --el-color-success-light-5: var(--c-success-tint-4);
  --el-color-success-light-7: var(--c-success-tint-3);
  --el-color-success-light-8: var(--c-success-tint-2);
  --el-color-success-light-9: var(--c-success-light);
  --el-color-success-dark-2: var(--c-success-active);

  --el-color-warning: var(--c-warning);
  --el-color-warning-rgb: 155, 99, 0;
  --el-color-warning-light-3: var(--c-warning-tint-4);
  --el-color-warning-light-5: var(--c-warning-tint-4);
  --el-color-warning-light-7: var(--c-warning-tint-3);
  --el-color-warning-light-8: var(--c-warning-tint-2);
  --el-color-warning-light-9: var(--c-warning-light);
  --el-color-warning-dark-2: var(--c-warning-active);

  --el-color-danger: var(--c-danger);
  --el-color-danger-rgb: 195, 66, 73;
  --el-color-danger-light-3: var(--c-danger-tint-4);
  --el-color-danger-light-5: var(--c-danger-tint-4);
  --el-color-danger-light-7: var(--c-danger-tint-3);
  --el-color-danger-light-8: var(--c-danger-tint-2);
  --el-color-danger-light-9: var(--c-danger-light);
  --el-color-danger-dark-2: var(--c-danger-active);

  --el-color-error: var(--c-danger);
  --el-color-error-rgb: 195, 66, 73;
  --el-color-error-light-3: var(--c-danger-tint-4);
  --el-color-error-light-5: var(--c-danger-tint-4);
  --el-color-error-light-7: var(--c-danger-tint-3);
  --el-color-error-light-8: var(--c-danger-tint-2);
  --el-color-error-light-9: var(--c-danger-light);
  --el-color-error-dark-2: var(--c-danger-active);

  /* --el-color-info 不覆盖：灰标签沿用 Element 默认（与原版一致） */
  --el-text-color-primary: var(--c-text);
  --el-text-color-regular: var(--c-text-2);
  --el-text-color-secondary: var(--c-text-3);

  --el-border-color: var(--c-border);
  --el-border-color-light: var(--c-border-light);
  --el-border-color-lighter: var(--c-border-lighter);
  --el-fill-color-light: var(--c-bg-page);

  --el-border-radius-base: var(--radius-base);
  --el-font-size-base: var(--fs-body);
}

/* ============================================================
   交互态覆盖：悬停 / 按下改为加深

   Element Plus 默认让实心按钮在悬停时变浅（light-3），白字会掉到
   2~3:1；文字按钮与链接的悬停色同样偏浅。这里统一改为加深，
   使任何交互状态下的文字对比度都不低于 4.5:1。
   ============================================================ */
.el-button--primary {
  --el-button-hover-bg-color: var(--c-brand-hover);
  --el-button-hover-border-color: var(--c-brand-hover);
  --el-button-active-bg-color: var(--c-brand-active);
  --el-button-active-border-color: var(--c-brand-active);
}
.el-button--success {
  --el-button-hover-bg-color: var(--c-success-hover);
  --el-button-hover-border-color: var(--c-success-hover);
  --el-button-active-bg-color: var(--c-success-active);
  --el-button-active-border-color: var(--c-success-active);
}
.el-button--warning {
  --el-button-hover-bg-color: var(--c-warning-hover);
  --el-button-hover-border-color: var(--c-warning-hover);
  --el-button-active-bg-color: var(--c-warning-active);
  --el-button-active-border-color: var(--c-warning-active);
}
.el-button--danger,
.el-button--error {
  --el-button-hover-bg-color: var(--c-danger-hover);
  --el-button-hover-border-color: var(--c-danger-hover);
  --el-button-active-bg-color: var(--c-danger-active);
  --el-button-active-border-color: var(--c-danger-active);
}
.el-button--text:not(.is-disabled):hover,
.el-button--text:not(.is-disabled):focus,
.el-button--primary.is-text:not(.is-disabled):hover,
.el-button--primary.is-link:not(.is-disabled):hover {
  color: var(--c-brand-strong);
}

.el-link.el-link--primary {
  --el-link-hover-text-color: var(--c-brand-strong);
}