/* ═══════════════════════════════════════════
   京东风格主题 — CSS 变量定义
   主色：红色 #E2231A
   辅色：白色 + 银灰色
   用途：替换页面中所有硬编码的颜色值
   ═══════════════════════════════════════════ */

:root {
  /* ═══ 品牌色（京东红） ═══ */
  --brand-primary: #E2231A;         /* 京东红 —— 主按钮、链接、选中态 */
  --brand-primary-hover: #C01623;   /* 深红 —— hover、激活 */
  --brand-primary-light: #FFF0F0;   /* 浅红背景 —— 选中行、标签浅色背景 */

  /* ═══ 银灰色（边框、背景、禁用） ═══ */
  --silver-border: #E0E0E0;         /* 表格边框、卡片边框 */
  --silver-border-light: #F0F0F0;   /* 更浅的边框 */
  --silver-bg: #F5F5F5;             /* 页面背景、表头背景、卡片背景 */
  --silver-bg-light: #FAFAFA;       /* 交替行背景、悬浮背景 */
  --silver-text: #9E9E9E;           /* 禁用文字、placeholder、辅助信息 */

  /* ═══ 背景色 ═══ */
  --bg-white: #FFFFFF;               /* 纯白 — 内容区、卡片、弹窗 */
  --bg-page: #F5F5F5;               /* 页面底色 */

  /* ═══ 文字色 ═══ */
  --text-primary: #333333;           /* 主文字 —— 标题、表格数据 */
  --text-secondary: #666666;         /* 次要文字 —— 说明、次要信息 */
  --text-muted: #999999;             /* 弱化文字 —— 辅助信息 */

  /* ═══ 金额色 ═══ */
  --color-amount: #E2231A;           /* 金额 —— 京东红色 */

  /* ═══ 状态色 ═══ */
  --color-success: #67C23A;          /* 成功绿 */
  --color-warning: #E6A23C;          /* 警告橙 */
  --color-danger: #F56C6C;           /* 危险红 */

  /* ═══ 圆角 ═══ */
  --radius-base: 4px;                /* 常规圆角 */
  --radius-small: 2px;               /* 小圆角 */

  /* ═══ 阴影 ═══ */
  --shadow-card: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-dialog: 0 4px 12px rgba(0,0,0,0.12);

  /* ═══ 间距 ═══ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;

  /* ═══ 表格 ═══ */
  --table-header-bg: #F5F5F5;
  --table-header-text: #333333;
  --table-row-hover: #FFF0F0;        /* 浅红悬浮 */
  --table-stripe: #FAFAFA;
  --table-border: #E0E0E0;

  /* ═══ 搜索栏 / 卡片 ═══ */
  --card-bg: #FFFFFF;
  --card-border: #E0E0E0;
}

/* ═══ 部分 Element UI 覆盖 ═══ */
.el-button--primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
}

.el-table thead th {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
}

.el-table__body .el-table__row:hover td {
  background-color: var(--table-row-hover) !important;
}