/* ==========================================================================
   编程派 · 全站统一设计 token（v3 · 本地草案，未部署）
   品牌色取自 logo：「编程派」蓝 #1030F0 + 橙 #F09830
   挂载：frontend 插件 public/ → 由覆盖模板 layout/html5.html 注入到每页 <head>
   作用域：html[data-brand="paipai"]
   ⚠ 站点默认 dark 主题；设计系统主色阶分 light/dark 两套，暗色档整体提亮，
     保证品牌蓝在深底上仍清晰（这是 v3 相对 v2 的关键修正）。
   ========================================================================== */

:root,
html[data-brand="paipai"] {
  /* === 品牌：logo 蓝（主交互色）=== */
  --pp-brand:         #1030f0;
  --pp-brand-hover:   #2743f5;
  --pp-brand-strong:  #0a1fb4;
  --pp-brand-ink:     #0d28c9;
  --pp-brand-soft:    rgba(16, 48, 240, .18);
  --pp-brand-line:    rgba(16, 48, 240, .30);

  /* 暗底强调蓝（暗色主题下用，对比度更高）*/
  --pp-brand-lit:     #5d6ce0;
  --pp-brand-lit-h:   #7b88ff;

  /* === 品牌：logo 橙（强调 / 奖励 / 金）=== */
  --pp-accent:        #f09830;
  --pp-accent-hover:  #f5a94e;
  --pp-accent-strong: #cf7d12;
  --pp-accent-soft:   rgba(240, 152, 48, .14);
  --pp-accent-line:   rgba(240, 152, 48, .38);
  /* 橙作「文字」的唯一出口（值 = 原 hero 渐变深端）：on 白 9.41 / on accent-soft ≈8.4 */
  --pp-accent-ink:      #6b3a05;
  /* 压「实心橙填充」之上的文字色：on #cf7d12 5.27 / on #f09830 7.39 / on #e6a34a 7.76 */
  --pp-accent-on-solid: #2b1a00;

  /* === 中性灰阶（仅作图/工具类使用，不强制用于原生页底色）=== */
  --pp-bg:        #f5f6f8;
  --pp-bg-soft:   #eef0f4;
  --pp-bg-sunk:   #e8ebf1;
  --pp-card:      #ffffff;
  --pp-line:      #e3e6ec;
  --pp-line-soft: #eef0f4;
  --pp-ink-1: #10131a;
  --pp-ink-2: #3a4152;
  --pp-ink-3: #5b6478;
  --pp-ink-4: #868fa3;

  /* === 状态语义 === */
  --pp-ok:     #187743;   /* 2026-10-04：原 #1e874b 压 --pp-ok-bg #e7f5ec 仅 4.04:1，调深至 4.97:1（AA 达标）*/
  --pp-ok-bg:  #e7f5ec;
  --pp-warn:   #9a5c00;   /* 2026-10-04：原 #b26a00 压白底仅 4.24:1，调深至 5.38:1（AA 达标）*/
  --pp-warn-bg:#fdf3e2;
  --pp-warn-line: rgba(154, 92, 0, .30);   /* 与调深后的 --pp-warn #9a5c00 同源 */
  --pp-danger: #c62828;
  --pp-danger-bg:#fdeaea;
  /* 危险「填充底」专用（配 #fff 白字）——与 --pp-danger（文字档）分家：
     文字档是「深底上的亮字」，填充档要的是「底色够深」，方向相反。
     ⚠ 暗档必须**更深**（#b3261e）而非更亮——这是 --pp-accent-strong 过载教训的镜像。
     实测（node WCAG，白字压其上）：亮 #c62828 = 5.62 / 暗 #b3261e = 6.54，双 PASS。
     修订前用橙底白字：亮 #cf7d12 = 3.18 / 暗 #e6a34a = 2.16，双 FAIL。 */
  --pp-danger-fill: #c62828;
  --pp-info:   var(--pp-brand);

  /* === 业务语义色 ===
     ⚠ 消费现状（2026-10-04 全仓 grep `var(--…)` 实测）：
        --pp-sem-exam / --pp-sem-train / --pp-sem-park = **0 消费**（仅词汇表占位，留待业务接入）；
        --pp-sem-live = 2 处（.pp-tag--live）。
     故 exam/train/park 的暗档一并补齐只为「词汇表完整 + 不留 FAIL 值」，非当前渲染所需。 */
  --pp-sem-exam:  #1e874b;
  --pp-sem-train: var(--pp-brand);
  --pp-sem-park:  var(--pp-accent);
  --pp-sem-live:  #7c3aed;
  --pp-live-bg:   rgba(124, 58, 237, .10);   /* 原硬编码于 .pp-tag--live，收进 token */

  /* === 形：圆角 === */
  --pp-r-sm: 6px;
  --pp-r-md: 10px;
  --pp-r-lg: 14px;
  --pp-r-xl: 18px;
  --pp-r-pill: 999px;

  /* === 形：间距 === */
  --pp-sp-1: 4px;  --pp-sp-2: 8px;  --pp-sp-3: 12px; --pp-sp-4: 16px;
  --pp-sp-5: 24px; --pp-sp-6: 32px; --pp-sp-7: 48px;

  /* === 形：阴影 === */
  --pp-shadow-sm: 0 1px 2px rgba(16, 20, 32, .06);
  --pp-shadow-md: 0 4px 14px rgba(16, 20, 32, .08);
  --pp-shadow-lg: 0 14px 40px rgba(16, 20, 32, .10);

  /* === 字体 === */
  --pp-font: "Inter", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
  --pp-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

/* ==========================================================================
   设计系统主色覆写 —— 全站换肤的最高杠杆
   Hydro 线上 UI 由 Mantine + Element Plus 驱动：覆写两套「主色变量」，
   全部按钮 / 徽章 / 进度条 / Tab / 链接 / 开关 即一次性变为品牌蓝。
   ========================================================================== */

/* ---- 亮色主题（浅底，用标准品牌蓝）---- */
html[data-brand="paipai"] {
  --mantine-color-blue-0: #eff1fe;
  --mantine-color-blue-1: #dadefc;
  --mantine-color-blue-2: #b4bef8;
  --mantine-color-blue-3: #8293f7;
  --mantine-color-blue-4: #4d65f4;
  --mantine-color-blue-5: #2946f2;
  --mantine-color-blue-6: #0f2ff0;
  --mantine-color-blue-7: #0b26cb;
  --mantine-color-blue-8: #0920aa;
  --mantine-color-blue-9: #071a8c;

  --el-color-primary:         #1030f0;
  --el-color-primary-rgb:     16,48,240;
  --el-color-primary-light-3: #4d65f4;
  --el-color-primary-light-5: #8293f7;
  --el-color-primary-light-7: #b4bef8;
  --el-color-primary-light-8: #dadefc;
  --el-color-primary-light-9: #eff1fe;
  --el-color-primary-dark-2:  #0b26cb;
}

/* ---- 暗色主题（站点默认）：品牌蓝整体提亮，保证深底可读 ---- */
html[data-brand="paipai"][data-mantine-color-scheme="dark"],
html[data-brand="paipai"].theme--dark {
  --mantine-color-blue-0: #1b2049;
  --mantine-color-blue-1: #232a63;
  --mantine-color-blue-2: #2d3680;
  --mantine-color-blue-3: #3945a8;
  --mantine-color-blue-4: #5d6ce0;
  --mantine-color-blue-5: #4d5cf5;
  --mantine-color-blue-6: #4d65f4;
  --mantine-color-blue-7: #6b7cff;
  --mantine-color-blue-8: #92a0ff;
  --mantine-color-blue-9: #c3caff;

  --el-color-primary:         #4d65f4;
  --el-color-primary-rgb:     77,101,244;
  --el-color-primary-light-3: #6b7cff;
  --el-color-primary-light-5: #92a0ff;
  --el-color-primary-light-7: #2d3680;
  --el-color-primary-light-8: #232a63;
  --el-color-primary-light-9: #1b2049;
  --el-color-primary-dark-2:  #1030f0;

  /* ---- 中性色：暗色档（A 档补齐 · 2026-10-04）----
     ⚠ 缺口修复：此前本块【只覆写主色】，--pp-bg / --pp-card / --pp-ink-* 在暗色下
        仍是亮色值（--pp-card 恒为 #ffffff）→ 「浅色系统 + 站内默认暗色」时白卡片压黑底。
     取值对齐 Hydro 原生 theme/dark.styl：主背景 #121212 · 区块 #1f1f1f · 描边 #323232
     · 正文 #eee · 次要 #bdbdbd。只新增变量、不改任何既有规则，删掉本段即回滚。 */
  --pp-bg:        #121212;
  --pp-bg-soft:   #1b1b1b;
  --pp-bg-sunk:   #161616;
  --pp-card:      #1f1f1f;
  --pp-line:      #323232;
  --pp-line-soft: #2b2b2b;
  --pp-ink-1: #eeeeee;
  --pp-ink-2: #d4d4d4;
  --pp-ink-3: #bdbdbd;
  --pp-ink-4: #8a8a8a;

  /* ---- 状态语义色：暗色档（2026-10-04 补齐）----
     ⚠ 缺口：此前暗色块未覆写状态色 → --pp-ok #1e874b 压 #1f1f1f 仅约 2.6:1 不达标；
        -bg 是近白浅色，深底上刺眼。取值整体提亮 + 改用半透明底。
     实测（压 #1f1f1f / 各自半透明底，node WCAG）：ok 7.14 / warn 7.53 / danger 6.07 ，
        底上 ok 5.58 / warn 5.76 / danger 4.87 ，全部 ≥ 4.5:1。 */
  --pp-ok:        #4fbf7f;
  --pp-ok-bg:     rgba(79, 191, 127, .14);
  --pp-warn:      #e0a44e;
  --pp-warn-bg:   rgba(224, 164, 78, .14);
  --pp-danger:    #ef7a7a;
  --pp-danger-bg: rgba(239, 122, 122, .14);
  --pp-danger-fill: #b3261e;   /* 危险填充底（更深档）：白字压其上 6.54（亮档 #c62828 = 5.62）*/
  --pp-warn-line: rgba(224, 164, 78, .38);

  /* ---- 强调色 / 业务语义色：暗色档（2026-10-04 T14）----
     ⚠ 过渡期共存：--pp-accent-strong 语义上应专供「填充 / 渐变中停」，但存量仍有
        ~40 处把它当"accent-soft 底上的文字"（清点见 插件整合/25-accent-strong作文字存量清单.md）。
        撤掉本覆写会让这些点从 5.93 掉到 4.03（FAIL）→ **待 25 号清单全量迁 --pp-accent-ink 后，
        本覆写即可删除**（届时 hero 中停已字面化为 #cf7d12，不再受影响）。
     ⚠ --pp-sem-live #7c3aed 压 live-bg 仅 2.69:1，取值提亮。
     实测（node WCAG）：accent-strong 软底 5.93（覆写在）；accent-ink 软底 5.93 / 暗卡 7.62；
        sem-live live-bg 5.90 / 暗卡 7.65。 */
  --pp-accent-strong: #e6a34a;
  --pp-accent-ink: #e6a34a;
  --pp-live-bg:    rgba(167, 139, 250, .16);
  --pp-sem-live:   #b9a3ff;
  /* 业务语义色暗档补齐（exam/train/park 当前 0 消费，见 :root 注）：exam 复用 --pp-ok 暗值，
     不造第三个绿；压 #1f1f1f = 7.14 PASS。train 走 --pp-brand、park 走 --pp-accent（均已含暗档）。*/
  --pp-sem-exam:   #4fbf7f;

  /* ---- 品牌色：暗底强调档（深底上提亮，保证可读）---- */
  --pp-brand:       #4d65f4;
  --pp-brand-hover: #6b7cff;
  --pp-brand-ink:   #92a0ff;
  --pp-brand-soft:  rgba(77, 101, 244, .18);
  --pp-brand-line:  rgba(77, 101, 244, .42);

  /* ---- 阴影：暗底加深（浅阴影在暗底上不可见）---- */
  --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .42);
  --pp-shadow-md: 0 4px 14px rgba(0, 0, 0, .46);
  --pp-shadow-lg: 0 14px 40px rgba(0, 0, 0, .52);
}

/* ===== 基础组件类（各插件页直接加 class 即可获得统一皮肤）===== */

.pp-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg);
  box-shadow: var(--pp-shadow-sm);
}

.pp-head { display: flex; align-items: center; gap: var(--pp-sp-3); }
.pp-head h1, .pp-head h2, .pp-head h3 { margin: 0; color: var(--pp-ink-1); font-weight: 800; letter-spacing: -.01em; }
.pp-sub { color: var(--pp-ink-3); font-size: .82rem; }

.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-md); background: var(--pp-card); color: var(--pp-ink-2);
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pp-btn:hover { border-color: var(--pp-brand-line); color: var(--pp-brand-ink); background: var(--pp-brand-soft); }
.pp-btn--primary { background: var(--pp-brand); border-color: var(--pp-brand); color: #fff; }
.pp-btn--primary:hover { background: var(--pp-brand-hover); border-color: var(--pp-brand-hover); color: #fff; }
.pp-btn--accent { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-accent-on-solid); }
.pp-btn--accent:hover { background: var(--pp-accent-hover); color: var(--pp-accent-on-solid); }

.pp-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--pp-r-pill);
  background: var(--pp-brand-soft); color: var(--pp-brand-ink);
  font-size: .72rem; font-weight: 800;
}
.pp-tag--park { background: var(--pp-accent-soft); color: var(--pp-accent-ink); }
.pp-tag--exam { background: var(--pp-ok-bg); color: var(--pp-ok); }
.pp-tag--live { background: var(--pp-live-bg); color: var(--pp-sem-live); }

.pp-input {
  width: 100%; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--pp-line); border-radius: var(--pp-r-md);
  background: var(--pp-card); color: var(--pp-ink-1); font: inherit; font-size: .84rem;
}
.pp-input:focus { outline: none; border-color: var(--pp-brand); box-shadow: 0 0 0 3px var(--pp-brand-soft); }

.pp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pp-table th { text-align: left; padding: 10px 12px; color: var(--pp-ink-3); font-weight: 800; border-bottom: 1px solid var(--pp-line); background: var(--pp-bg-soft); }
.pp-table td { padding: 10px 12px; border-bottom: 1px solid var(--pp-line-soft); color: var(--pp-ink-2); }
.pp-table tr:hover td { background: var(--pp-bg); }