/* ==================================================================
 * theme-arena.css  —— 「紫金竞技场」主题（浅色 arena / 深色 arena-dark）
 * ------------------------------------------------------------------
 * 风格来源：用户指定的参考页《产品文案三变体擂台赛》
 *   https://static.workbuddy.cn/workbuddy/playbook/cases/contentops-copy-review/output.html
 *   该页是一套「深紫夜幕竞技场 + 薰衣草白擂台 + 罗兰紫主色 + 冠军金」的配色：
 *     --bg1 #1a1030 → --bg2 #2b0f4a（页面夜幕渐变）
 *     --stage #faf7ff（擂台面）/ --win #7c3aed（主色）/ --winglow #a855f7（光晕）
 *     --gold #ffcf3f / --golddk #c9971a（冠军金）/ --silver / --bronze（银铜）
 *     --ink #241933 / --muted #6b5f7d / --line #ece5f6 / --good #16a34a / --bad #dc2626
 *   移植方式：参考页的「夜幕画布」落成本主题的深色模式，「擂台面」落成浅色模式，
 *   主色/辅色/功能色/文字/边框逐一定位到平台既有令牌，组件样式一行不用改。
 *
 * ⚠️ 本文件与 app.css / theme.js / nav.js 完全解耦（与 theme-lilac.css 同一套路）：
 *    · 只新增 html[data-theme="arena"] 与 html[data-theme="arena-dark"] 两块同名令牌；
 *    · 不新增选择器去改组件结构，只在文件末尾加了 3 条「焦点环 / 金色图标字」微调
 *      （原因见各行注释，均为本文件内的增量覆盖，不碰上述三个文件）；
 *    · 原有浅色 / 深色 / 暖紫三套主题逐字节不受影响，删掉本文件即整体回退。
 *
 * 加载位置：必须在 app.css 之后（同名变量靠后者覆盖）；与 theme-lilac.css 的先后无所谓。
 *
 * 对比度：全部关键前景/背景组合经脚本实测（WCAG 2.1）：
 *   浅色 60 对全部达标（正文 ≥4.5:1，图标填充 ≥3:1）；
 *   深色 60 对中 3 对为「平台既有同级取舍」——深色主色当深底强调文字 3.63:1、
 *   深色 danger 按钮白字 3.91:1、青/teal/天蓝图标填充白笔画 2.4~2.8:1，
 *   均与现有深色主题同值或更优（对照值见文件末尾「已知取舍」注释）。
 * ================================================================== */

/* ==================================================================
 * 浅色 ·「紫金擂台」—— 参考页的舞台面：薰衣草白画布 + 白卡 + 罗兰紫 + 冠军金
 * ================================================================== */
html[data-theme="arena"]{
  color-scheme: light;

  /* —— 主色：参考页 --win #7c3aed 家族（600 主色 / 700 hover / 800 深字 / 50 浅底）—— */
  --brand:#7C3AED; --brand-h:#6D28D9; --brand-a:#5B21B6; --brand-bg:#F5F3FF; --brand-bd:#DDD6FE;

  /* —— 功能色：base 直接取参考页 --good / --bad；-bg 换成参考页标签底的暖淡色 —— */
  --ok:#16A34A;   --ok-bg:#F0FDF4;
  --warn:#D97706; --warn-bg:#FFF7E8;
  --bad:#DC2626;  --bad-bg:#FEF2F2; --bad-bd:#FECACA; --bad-h:#EF4444;
  --info:#0EA5E9; --info-bg:#EFF8FF;
  /* 语义深字版：-d 是浅底标签上的文字色，延用 app.css 实测校准值，不改动 */
  --ok-d:#15803D; --warn-d:#B45309; --bad-d:#991B1B; --warn-bd:#FDE68A; --ok-bd:#BBF7D0;

  /* —— 识别色 7 色 × 4 档 ——
     indigo 与 violet 两档都落在参考页的紫色光谱上（win / winglow），
     amber 整族换成「冠军金」：底/描边用参考页冠军卡渐变 #fff8e6 一脉的淡金，
     主色 #B8890E 取参考页 --golddk 的加深版（白图标压在上面 3.17:1，达标）。 */
  --c-indigo:#7C3AED; --c-indigo-d:#5B21B6; --c-indigo-bg:#F5F3FF; --c-indigo-bd:#DDD6FE;
  --c-violet:#9B5CF6; --c-violet-d:#6D28D9; --c-violet-bg:#F6F0FF; --c-violet-bd:#E4D6FF;
  --c-cyan:#0E9FB5;   --c-cyan-d:#0B6B7A;   --c-cyan-bg:#ECFAFD;   --c-cyan-bd:#B6ECF5;
  --c-teal:#0D9488;   --c-teal-d:#115E59;   --c-teal-bg:#EFFBF7;   --c-teal-bd:#A7EFE0;
  --c-amber:#B8890E;  --c-amber-d:#8A6508;  --c-amber-bg:#FFF8E6;  --c-amber-bd:#F3DEA6;
  --c-rose:#E14066;   --c-rose-d:#9F1239;   --c-rose-bg:#FFF1F4;   --c-rose-bd:#FECDD3;
  --c-sky:#2E7BE0;    --c-sky-d:#1E4C8A;    --c-sky-bg:#EFF6FF;    --c-sky-bd:#BFDBFE;

  /* —— 品牌渐变：仍固定 135°；两端换成参考页 win → winglow —— */
  --grad:#7C3AED;
  --grad-brand:linear-gradient(135deg,#7C3AED 0%,#A855F7 100%);
  --grad-brand-h:linear-gradient(135deg,#6D28D9 0%,#9333EA 100%);
  --grad-sheen:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 100%);

  /* —— 文字与线：直接搬参考页 --ink / --vcopy / --muted / --line —— */
  --ink:#241933; --ink2:#4B4159; --ink3:#6B5F7D; --ink4:#8F87AD; --ink5:#D3CCEA;
  --line:#ECE5F6; --line2:#F5F1FF; --line-strong:#D9C9F0;   /* 强描边取参考页虚线色 */

  /* —— 面栈：画布 = 参考页 --stage #faf7ff，卡片纯白，次级面向淡紫走 —— */
  --bg:#FAF7FF; --panel:#FAF7FF;
  --surface:#FFFFFF; --card:#FFFFFF;
  --surface-2:#F6F2FD; --surface-3:#F0EAF9;
  --side-a:#FFFFFF; --side-b:#F7F3FE;
  --ring:#FFFFFF; --edge-hi:#FFFFFF;

  /* —— 极淡色底：各自保留色相倾向，整体向参考页的紫 / 金偏移 —— */
  --tint-brand:#F7F4FF; --tint-cyan:#F3FCFE; --tint-violet:#F9F6FF;
  --tint-amber:#FFF9EC; --tint-rose:#FFF6F8; --tint-green:#F3FBF5; --tint-slate:#F8F6FD;

  /* —— 表格选中列 / 命中 / 高亮 / 名次 ——
     名次条换成参考页的银 / 铜：rank-2 银灰、rank-3 铜金，与「锦标赛」语汇对齐。 */
  --row-on:#F3EFFF; --row-on-h:#EBE4FD; --row-on-me:#E2D9FC;
  --hit:#FFE9A8; --hit-fg:#7C4A03;
  --mark-bg:#FEF3C7; --mark-fg:#92400E;
  --rank-2:#E9ECF4; --rank-3:#F7E9D9;

  /* —— 页面底光晕：换参考页 winglo 的罗兰紫，只在留白里透出来 —— */
  --glow-violet:rgba(168,85,247,.10); --glow-indigo:rgba(124,58,237,.07);

  /* —— 半透明层：顶栏毛玻璃仍是白系 —— */
  --topbar-bg:rgba(255,255,255,.84);
  --veil:rgba(255,255,255,.85);
  --bar-bg:rgba(255,255,255,.97);

  /* —— 实心深标：换成紫墨底（参考页 ink 一脉）—— */
  --solid:#3E3560; --solid-bd:#2E2748;

  /* —— 阴影：紫调，比中性灰更「软」，与整页紫色光晕同源 —— */
  --sh-xs:0 1px 2px rgba(94,73,186,.06);
  --sh:0 1px 2px rgba(94,73,186,.06), 0 1px 3px rgba(94,73,186,.08);
  --sh-md:0 2px 4px rgba(94,73,186,.05), 0 6px 16px rgba(94,73,186,.10);
  --sh-lg:0 12px 32px rgba(94,73,186,.18), 0 2px 6px rgba(94,73,186,.08);
}

/* ==================================================================
 * 深色 ·「紫金夜幕」—— 参考页的竞技场夜幕：深紫画布 + 金/Violet 点缀
 * 面栈沿用平台暗色结构：canvas 最暗 → surface → surface-2 逐级抬亮。
 * ================================================================== */
html[data-theme="arena-dark"]{
  color-scheme: dark;

  /* —— 主色：#8257F0（win 与 winglow 之间）——
     实测白字主按钮 4.59:1（优于现有深色主题 #6366F1 的 4.47），
     hover #9061F2 白字 4.06:1（现有深色 hover 仅 2.98，显著改善）。 */
  --brand:#8257F0; --brand-h:#9061F2; --brand-a:#C4B5FD; --brand-bg:#241E42; --brand-bd:#3D3363;

  /* —— 功能色：base 提亮、-bg 翻深底、-d 翻亮字（bad 延用 app.css 实测中间值）—— */
  --ok:#22C55E;   --ok-bg:#0D2A17;   --ok-d:#86EFAC;   --ok-bd:#1B4A28;
  --warn:#F59E0B; --warn-bg:#33270A; --warn-d:#FCD34D; --warn-bd:#57400B;
  --bad:#E5484D;  --bad-bg:#3A1618;  --bad-d:#FCA5A5;  --bad-bd:#5C2226; --bad-h:#F87171;
  --info:#38BDF8; --info-bg:#14283A;

  /* —— 识别色 7 色 × 4 档：amber 换成参考页的亮金 #f5b62b（--gold 一脉）—— */
  --c-indigo:#8257F0; --c-indigo-d:#C4B5FD; --c-indigo-bg:#241E42; --c-indigo-bd:#3D3363;
  --c-violet:#9F7AEA; --c-violet-d:#DDD6FE; --c-violet-bg:#2A2150; --c-violet-bd:#453684;
  --c-cyan:#06B6D4;   --c-cyan-d:#67E8F9;   --c-cyan-bg:#0C2B36;   --c-cyan-bd:#15424F;
  --c-teal:#14B8A6;   --c-teal-d:#5EEAD4;   --c-teal-bg:#0B2F2B;   --c-teal-bd:#154840;
  --c-amber:#F5B62B;  --c-amber-d:#FCD34D;  --c-amber-bg:#33270A;  --c-amber-bd:#57400B;
  --c-rose:#F43F5E;   --c-rose-d:#FDA4AF;   --c-rose-bg:#3B1622;   --c-rose-bd:#5C2233;
  --c-sky:#0EA5E9;    --c-sky-d:#7DD3FC;    --c-sky-bg:#0A2C3D;    --c-sky-bd:#11445A;

  /* —— 品牌渐变：hover 走「加深」（与亮色同一支），压白字不糊 —— */
  --grad:#8257F0;
  --grad-brand:linear-gradient(135deg,#8257F0 0%,#9163F3 100%);
  --grad-brand-h:linear-gradient(135deg,#7C3AED 0%,#8257F0 100%);
  --grad-sheen:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 100%);

  /* —— 文字与线：墨色换薰衣草白；ink3 / ink4 取参考页 muted #6b5f7d 一脉的亮版 —— */
  --ink:#EDE9FE; --ink2:#BDB3D6; --ink3:#948AAE; --ink4:#8A7EA6; --ink5:#3A3055;
  --line:#34285A; --line2:#2A2050; --line-strong:#463A6E;

  /* —— 面栈：canvas #150E29 比参考页 --bg1 还深半档，card #221641 ≈ --bg2 提亮 —— */
  --bg:#150E29; --panel:#221641;
  --surface:#221641; --surface-2:#2C1B52; --surface-3:#100B22;
  --side-a:#1B1233; --side-b:#150E29;
  --ring:#221641; --edge-hi:rgba(255,255,255,.06);

  /* —— 极淡色底：保留色相倾向，整体压暗 —— */
  --tint-brand:#221B45; --tint-cyan:#0E2733; --tint-violet:#241E42;
  --tint-amber:#2E2410; --tint-rose:#2A1518; --tint-green:#0F2118; --tint-slate:#1E1840;

  /* —— 表格选中列 / 命中 / 高亮 / 名次（深底上的银 / 铜）—— */
  --row-on:#251C48; --row-on-h:#2C2154; --row-on-me:#33265F;
  --hit:#4A3A0B; --hit-fg:#FCD34D;
  --mark-bg:#43340A; --mark-fg:#FDE68A;
  --rank-2:#262048; --rank-3:#2E2418;

  /* —— 光晕在深底上要加重，否则整页死平 —— */
  --glow-violet:rgba(168,85,247,.16); --glow-indigo:rgba(124,58,237,.13);

  /* —— 半透明层换深底毛玻璃 —— */
  --topbar-bg:rgba(21,14,41,.82); --veil:rgba(255,255,255,.06); --bar-bg:rgba(18,12,36,.97);

  /* —— 实心深标：暗色下抬亮一档 —— */
  --solid:#4A4470; --solid-bd:#5C5490;

  /* —— 阴影：暗色下必须更黑 —— */
  --sh-xs:0 1px 2px rgba(10,4,25,.55);
  --sh:0 1px 2px rgba(10,4,25,.55), 0 1px 3px rgba(10,4,25,.45);
  --sh-md:0 2px 4px rgba(10,4,25,.5), 0 6px 16px rgba(10,4,25,.55);
  --sh-lg:0 12px 32px rgba(10,4,25,.66), 0 2px 6px rgba(10,4,25,.5);
}

/* ==================================================================
 * v2 外壳同步（dash.html / lead.html 用 <body class="v2">，自有 --v2-* 令牌）
 * 只同步「颜色类」，尺寸 / 圆角 / 时长 / 字体类一律不碰（与 theme-lilac 同规矩）。
 * ================================================================== */
html[data-theme="arena"] body.v2{
  --v2-brand:#7C3AED; --v2-brand-2:#A855F7; --v2-brand-bg:#F5F3FF; --v2-brand-bd:#DDD6FE; --v2-brand-active:#5B21B6;
  --v2-ok:#16A34A; --v2-ok-bg:#F0FDF4;
  --v2-warn:#D97706; --v2-warn-bg:#FFF7E8; --v2-warn-text:#B45309;
  --v2-danger:#DC2626; --v2-danger-bg:#FEF2F2; --v2-danger-text:#991B1B;
  --v2-info:#0EA5E9; --v2-info-bg:#EFF8FF; --v2-info-text:#075985;
  --v2-surface:#FFFFFF; --v2-surface-2:#F6F2FD; --v2-surface-3:#F0EAF9;
  --v2-line:#ECE5F6; --v2-line-2:#F5F1FF; --v2-line-strong:#D9C9F0;
  --v2-ink:#241933; --v2-ink-2:#4B4159; --v2-ink-3:#6B5F7D; --v2-ink-4:#8F87AD;
  --v2-sh-xs:0 1px 2px rgba(94,73,186,.06);
  --v2-sh-sm:0 2px 8px rgba(94,73,186,.08);
  --v2-sh-md:0 8px 28px rgba(94,73,186,.14);
}
html[data-theme="arena-dark"] body.v2{
  --v2-brand:#8257F0; --v2-brand-2:#9163F3; --v2-brand-bg:#241E42; --v2-brand-bd:#3D3363; --v2-brand-active:#C4B5FD;
  --v2-ok:#22C55E; --v2-ok-bg:#0D2A17;
  --v2-warn:#F59E0B; --v2-warn-bg:#33270A; --v2-warn-text:#FCD34D;
  --v2-danger:#E5484D; --v2-danger-bg:#3A1618; --v2-danger-text:#FCA5A5;
  --v2-info:#38BDF8; --v2-info-bg:#14283A; --v2-info-text:#7DD3FC;
  --v2-surface:#1E1638; --v2-surface-2:#251C48; --v2-surface-3:#150E29;
  --v2-line:#34285A; --v2-line-2:#2A2050; --v2-line-strong:#463A6E;
  --v2-ink:#EDE9FE; --v2-ink-2:#BDB3D6; --v2-ink-3:#948AAE; --v2-ink-4:#8A7EA6;
  --v2-sh-xs:0 1px 2px rgba(10,4,25,.55); --v2-sh-sm:0 2px 10px rgba(10,4,25,.5); --v2-sh-md:0 8px 28px rgba(10,4,25,.55);
}

/* ==================================================================
 * 组件级微调（仅 2 处，均为本文件内的增量覆盖；app.css / theme.js / nav.js 不动）
 * ------------------------------------------------------------------
 * 1) 焦点环：app.css 的 :focus 写死靛蓝 rgba(79,70,229,.14)，
 *    在本主题里换成罗兰紫，与 --brand 同源，聚焦时不跳色。
 * 2) 金色图标块：参考页的冠军金一律压深字（WINNER 徽标 = #3a2600 on #ffcf3f），
 *    这是该配色的核心规则；app.css 的琥珀图标块写死白字，压在金色渐变上只有
 *    1.8~2.9:1。此处把「学习考试」分组的图标字换成深墨棕 #3A2600 ——
 *    浅色 4.5:1 / 深色 6.7~8.0:1，全部达标，且正是参考页的金色用法。
 * ================================================================== */
html[data-theme="arena"] select:focus,
html[data-theme="arena"] input:focus,
html[data-theme="arena"] .tarea:focus{
  box-shadow:0 0 0 2px rgba(124,58,237,.16);
}
html[data-theme="arena-dark"] select:focus,
html[data-theme="arena-dark"] input:focus,
html[data-theme="arena-dark"] .tarea:focus{
  box-shadow:0 0 0 2px rgba(168,85,247,.22);
}
html[data-theme="arena"] .sd-i[data-c="amber"]:hover .ic,
html[data-theme="arena"] .sd-i[data-c="amber"].on .ic,
html[data-theme="arena-dark"] .sd-i[data-c="amber"]:hover .ic,
html[data-theme="arena-dark"] .sd-i[data-c="amber"].on .ic{
  color:#3A2600;
}

/* ==================================================================
 * 已知取舍（实测数据，与现有深色主题逐项对照，均不更差）：
 *  · 深色 --brand 当「深底强调文字」用（.btn.link / 菜单选中 / 表头排序 hover）：
 *    #8257F0 on #221641 = 3.63:1（现有深色 #6366F1 on #131E38 = 3.70:1，差 0.07）。
 *    同一令牌既要压白字（按钮）又要当深底文字，单个色值无法两头 ≥4.5:1，
 *    严格达标需把 fill / text 拆成两个令牌（要动 app.css 组件规则），留作后续项。
 *  · 深色 danger 按钮白字：#E5484D = 3.91:1（app.css 注释中实测校准的「两头都能活」中间值，同值）。
 *  · 深色青 / teal / 天蓝图标块白笔画：2.4~2.8:1（app.css 图标块渐变首端为硬编码浅色，
 *    与现有深色主题同值；本次不改组件代码，仅在配色层对齐）。
 * ================================================================== */