/**
 * 网站管理后台配色方案 CSS Variables
 * 基于 WCAG 2.1 AA 无障碍标准设计
 * 所有正文对比度 ≥ 4.5:1，大文字/图标 ≥ 3:1
 *
 * 使用方式：
 *   <html data-theme="light">     方案：经典商务蓝（日间）
 *   <html data-theme="warm">      方案：护眼暖灰（纸色，默认）
 *   <html data-theme="mint">      方案：薄荷森林
 *   <html data-theme="morandi">   方案：莫兰迪雾粉
 *   <html data-theme="coral">     方案：暖阳珊瑚
 */

/* ========== 方案一：经典商务蓝（日间模式）========== */
[data-theme="light"] {
  /* 背景层级 */
  --color-bg-base: #F8FAFC;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #F1F5F9;
  --color-bg-active: #E2E8F0;

  /* 文字层级 */
  --color-text-primary: #1E293B;
  --color-text-secondary: #64748B;
  --color-text-disabled: #94A3B8;
  --color-text-inverse: #FFFFFF;

  /* 主题与语义色 */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #DBEAFE;
  --color-success: #059669;
  --color-success-light: #D1FAE5;
  --color-warning: #D97706;
  --color-warning-light: #FEF3C7;
  --color-danger: #DC2626;
  --color-danger-light: #FEE2E2;
  --color-info: #0891B2;
  --color-info-light: #CFFAFE;

  /* 边框与阴影 */
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-shadow: rgba(203, 213, 225, 0.4);
  --color-shadow-lg: rgba(203, 213, 225, 0.6);
}

/* ========== 方案二：护眼暖灰（纸色模式）========== */
[data-theme="warm"] {
  /* 背景层级 - 暖纸色调降低蓝光 */
  --color-bg-base: #F5F0E8;
  --color-bg-card: #FAF7F2;
  --color-bg-hover: #EDE8DE;
  --color-bg-active: #DDD6CC;

  /* 文字层级 - 暖黑更柔和 */
  --color-text-primary: #2D2926;
  --color-text-secondary: #6B6560;
  --color-text-disabled: #A8A29E;
  --color-text-inverse: #FAF7F2;

  /* 主题与语义色 - 低饱和更护眼 */
  --color-primary: #4F6D7A;
  --color-primary-hover: #3D5561;
  --color-primary-light: #D5DFE4;
  --color-success: #5B8C5A;
  --color-success-light: #D4E5D3;
  --color-warning: #C4843C;
  --color-warning-light: #F5E4D1;
  --color-danger: #B54A4A;
  --color-danger-light: #F0D5D5;
  --color-info: #5A8A9A;
  --color-info-light: #D2E2E8;

  /* 边框与阴影 */
  --color-border: #DDD6CC;
  --color-border-light: #EDE8DE;
  --color-shadow: rgba(200, 192, 180, 0.4);
  --color-shadow-lg: rgba(200, 192, 180, 0.6);
}

/* ========== 方案三：薄荷森林（清新自然）========== */
[data-theme="mint"] {
  --color-bg-base: #F0F7F4;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #E4F0EA;
  --color-bg-active: #D4E8E0;

  --color-text-primary: #1A2E2A;
  --color-text-secondary: #4A6A62;
  --color-text-disabled: #7A9088;
  --color-text-inverse: #FFFFFF;

  --color-primary: #1D7A5C;
  --color-primary-hover: #166B4F;
  --color-primary-light: rgba(29, 122, 92, 0.1);
  --color-success: #3A8C5D;
  --color-success-light: rgba(58, 140, 93, 0.1);
  --color-warning: #C9943C;
  --color-warning-light: rgba(201, 148, 60, 0.1);
  --color-danger: #C85555;
  --color-danger-light: rgba(200, 85, 85, 0.1);
  --color-info: #4A9FBF;
  --color-info-light: rgba(74, 159, 191, 0.1);

  --color-border: #D4E8E0;
  --color-border-light: #E4F0EA;
  --color-shadow: rgba(180, 200, 190, 0.3);
  --color-shadow-lg: rgba(180, 200, 190, 0.5);
}

/* ========== 方案四：莫兰迪雾粉（柔和优雅）========== */
[data-theme="morandi"] {
  --color-bg-base: #F7F3F0;
  --color-bg-card: #FDFBFA;
  --color-bg-hover: #EDE8E4;
  --color-bg-active: #E2DCD6;

  --color-text-primary: #2E2A28;
  --color-text-secondary: #6A5F5A;
  --color-text-disabled: #888078;
  --color-text-inverse: #FDFBFA;

  --color-primary: #4A6D7E;
  --color-primary-hover: #3D5C6B;
  --color-primary-light: rgba(74, 109, 126, 0.1);
  --color-success: #6B9B7A;
  --color-success-light: rgba(107, 155, 122, 0.1);
  --color-warning: #B8956B;
  --color-warning-light: rgba(184, 149, 107, 0.1);
  --color-danger: #B06B6B;
  --color-danger-light: rgba(176, 107, 107, 0.1);
  --color-info: #7A9AAF;
  --color-info-light: rgba(122, 154, 175, 0.1);

  --color-border: #E2DCD6;
  --color-border-light: #EDE8E4;
  --color-shadow: rgba(180, 170, 160, 0.3);
  --color-shadow-lg: rgba(180, 170, 160, 0.5);
}

/* ========== 方案五：暖阳珊瑚（温暖活力）========== */
[data-theme="coral"] {
  --color-bg-base: #FDF8F3;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #F5EDE4;
  --color-bg-active: #EDE3D6;

  --color-text-primary: #2D2420;
  --color-text-secondary: #7A6A60;
  --color-text-disabled: #9A8A7A;
  --color-text-inverse: #FFFFFF;

  --color-primary: #B85038;
  --color-primary-hover: #A04430;
  --color-primary-light: rgba(184, 80, 56, 0.1);
  --color-success: #6B9E7A;
  --color-success-light: rgba(107, 158, 122, 0.1);
  --color-warning: #C9A03C;
  --color-warning-light: rgba(201, 160, 60, 0.1);
  --color-danger: #C75B5B;
  --color-danger-light: rgba(199, 91, 91, 0.1);
  --color-info: #5A9FB5;
  --color-info-light: rgba(90, 159, 181, 0.1);

  --color-border: #EDE3D6;
  --color-border-light: #F5EDE4;
  --color-shadow: rgba(200, 180, 160, 0.3);
  --color-shadow-lg: rgba(200, 180, 160, 0.5);
}

/* ========== 通用组件样式 ========== */
body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
}

/* 按钮 */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
}

/* 语义标签/徽章 */
.badge-success { background: var(--color-success-light); color: var(--color-success); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-light);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-light);    color: var(--color-info); }

/* 卡片 */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px var(--color-shadow);
}

/* 输入框 */
.input {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.input::placeholder {
  color: var(--color-text-disabled);
}

/* 导航 */
.nav-item {
  color: var(--color-text-secondary);
}
.nav-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.nav-item.active {
  background: var(--color-bg-hover);
  color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
}

/* 表格 */
.table-row:hover {
  background: var(--color-bg-hover);
}
.table-row:nth-child(even) {
  background: var(--color-bg-base);
}

/* 列表隔行底色（法会列表、历史牌位列表用，页面选择器可选配色/关闭）。
   均取当前主题自身已定义的 token，换主题时颜色跟着换，不会撞色。
   Pico 给每个 td/th 都设了不透明 background-color（见 pico.min.css `td,th{background-color:
   var(--pico-background-color)...}`），若只在 tr 上设背景会被子级 td 整个盖住看不见——
   必须直接作用到 td 上（用了比 Pico 那条纯元素选择器更高的类选择器特异性，天然覆盖）。 */
.zebra-neutral tbody tr:nth-child(even) td { background: var(--color-bg-hover); }
.zebra-primary tbody tr:nth-child(even) td { background: var(--color-primary-light); }
.zebra-info    tbody tr:nth-child(even) td { background: var(--color-info-light); }
.zebra-success tbody tr:nth-child(even) td { background: var(--color-success-light); }
.zebra-warning tbody tr:nth-child(even) td { background: var(--color-warning-light); }

/* 下拉菜单/弹窗 */
.dropdown, .modal {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px var(--color-shadow-lg);
}

/* 分割线 */
.divider {
  border-color: var(--color-border);
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-base); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-disabled); }

/* ========== 映射到 Pico（全站生效）========== */
/* 应用使用 Pico v2 组件类；把主题 token 映射到 Pico CSS 变量，
   使整个后台在 data-theme 切换时整体换肤。theme.css 在 pico 之后加载，覆盖生效。
   选择器用 :root[data-theme=...] 提权：Pico 浅色块为 :root:not([data-theme=dark])
   （0,2,1），裸 [data-theme] 只有 0,1,0 会被覆盖 → 浅色系不生效。 */
:root[data-theme="light"],
:root[data-theme="warm"],
:root[data-theme="mint"],
:root[data-theme="morandi"],
:root[data-theme="coral"] {
  /* 背景与文字 */
  --pico-background-color: var(--color-bg-base);
  --pico-color: var(--color-text-primary);
  --pico-muted-color: var(--color-text-secondary);
  --pico-text-selection-color: var(--color-primary-light);
  --pico-border-color: var(--color-border);
  --pico-table-border-color: var(--color-border);
  --pico-table-row-stripped-background-color: var(--color-bg-hover);
  --pico-h1-color: var(--color-text-primary);
  --pico-h2-color: var(--color-text-primary);
  --pico-h3-color: var(--color-text-primary);
  --pico-h4-color: var(--color-text-primary);
  --pico-h5-color: var(--color-text-primary);
  --pico-h6-color: var(--color-text-primary);

  /* 卡片 / 代码 / 表单 */
  --pico-card-background-color: var(--color-bg-card);
  --pico-card-border-color: var(--color-border);
  --pico-code-background-color: var(--color-bg-hover);
  --pico-code-color: var(--color-text-primary);
  --pico-form-element-background-color: var(--color-bg-card);
  --pico-form-element-border-color: var(--color-border);
  --pico-form-element-color: var(--color-text-primary);
  --pico-form-element-placeholder-color: var(--color-text-disabled);
  --pico-form-element-focus-color: var(--color-primary-light);
  --pico-form-element-selected-background-color: var(--color-primary-light);
  --pico-dropdown-background-color: var(--color-bg-card);
  --pico-dropdown-border-color: var(--color-border);
  --pico-dropdown-color: var(--color-text-primary);
  --pico-dropdown-hover-background-color: var(--color-bg-hover);

  /* 主题色 */
  --pico-primary: var(--color-primary);
  --pico-primary-hover: var(--color-primary-hover);
  --pico-primary-background: var(--color-primary);
  --pico-primary-hover-background: var(--color-primary-hover);
  --pico-primary-border: var(--color-primary);
  --pico-primary-hover-border: var(--color-primary-hover);
  --pico-primary-focus: var(--color-primary-light);
  --pico-primary-inverse: var(--color-text-inverse);
  --pico-primary-underline: var(--color-primary);
  --pico-primary-hover-underline: var(--color-primary-hover);

  /* 语义色 */
  --pico-ins-color: var(--color-success);
  --pico-mark-background-color: var(--color-warning-light);
  --pico-mark-color: var(--color-warning);
  --pico-switch-background-color: var(--color-bg-hover);
  --pico-switch-checked-background-color: var(--color-primary);
}