@mooncellwiki/prts-design-css 0.1.0

package/src/tokens.css

@@ -0,0 +1,665 @@
+/*! ═══════════════════════════════════════════════════════════════════════════
+ *  PRTS Design — 明日方舟网页设计系统 · Design Tokens
+ *  Design system of the Arknights MediaWiki skin (prts.wiki)
+ *
+ *  生成物，勿手改：源文件是 packages/tokens/src/ 下的 *.json5（W3C DTCG 格式，@mooncellwiki/prts-design-tokens），改完 pnpm tokens 重新生成。
+ *
+ *  层级：
+ *    1. Primitive  --ak-{hue}-{step}      原始色板（来源：官网 CSS / 游戏解包 / gamedata）
+ *    2. Semantic   --ak-{role}            语义令牌（随主题变化）
+ *  Codex / MediaWiki 令牌桥接（原第 3 段，让 MW 核心 & 扩展 UI 跟随主题）只属于 Arknights 皮肤，在 bridge-codex.css；本文件任何宿主都能加载。
+ *
+ *  主题机制（与 MediaWiki 1.43 clientPrefs 一致）：
+ *    <html class="skin-theme-clientpref-os">    跟随系统（默认）
+ *    <html class="skin-theme-clientpref-night"> 终端模式（暗）
+ *    <html class="skin-theme-clientpref-day">   档案模式（亮）
+ *  非 MW 环境亦可用 data-theme="dark|light"。
+ *  局部主题：.ak-scope[data-theme="dark|light"]——作用域内走终端 / 档案配色，不写 data-theme 的 .ak-scope 跟随页面。
+ *  排版基线（字体 / 字号 / 行高 / 前景色）见 scope.css；html / body 的底色、选区、焦点环等皮肤全局样式见 base/root.css。
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ═══ 1. PRIMITIVE PALETTE · 2a. THEME-INDEPENDENT SEMANTICS ═══ */
+:root {
+  /* ─── color · 1. 原始色板 --ak-{hue}-{step}（来源：官网 CSS / 游戏解包 / gamedata）；组件不直接用，经由 functional/themes 的语义令牌引用 */
+
+  /* ─── color · neutral · Neutrals · 取自游戏内 UI 灰阶（btn #313131 / panel #F5F5F5）与官网灰阶 */
+  --ak-gray-0: #ffffff;
+  --ak-gray-50: #f5f5f5;                   /* in-game light panel */
+  --ak-gray-100: #ebebeb;
+  --ak-gray-200: #d2d2d2;                  /* site */
+  --ak-gray-300: #b1b1b1;
+  --ak-gray-400: #8d8d8d;                  /* site */
+  --ak-gray-500: #626262;                  /* in-game btn_done */
+  --ak-gray-600: #535353;
+  --ak-gray-700: #3b3b3b;
+  --ak-gray-800: #313131;                  /* in-game standard button */
+  --ak-gray-850: #272727;                  /* site */
+  --ak-gray-900: #1d1f20;                  /* site panel */
+  --ak-gray-950: #181818;                  /* in-game deep */
+  --ak-gray-1000: #000000;
+
+  /* ─── color · brand · Brand cyan / blue · 官网 #18D1FF，游戏内选中蓝 #0098DC */
+  --ak-cyan-200: #7ee5ff;
+  --ak-cyan-300: #5ddcff;
+  --ak-cyan-400: #22bbff;                  /* in-game select_round */
+  --ak-cyan-500: #18d1ff;                  /* ★ site brand accent */
+  --ak-blue-400: #00b0ff;                  /* in-game <ba.kw> */
+  --ak-blue-500: #0098dc;                  /* ★ in-game UI blue / <ba.vup> */
+  --ak-blue-600: #0075a9;                  /* in-game toggle-on */
+  --ak-blue-700: #005a82;
+
+  /* ─── color · yellow · Yellow · 稀有度星 / 商店 / 关卡名 */
+  --ak-yellow-400: #ffe75a;
+  --ak-yellow-500: #ffd800;                /* ★ in-game yellow (rarity #FFDE00) */
+  --ak-yellow-600: #ffc90e;                /* <ga.subtitle> */
+  --ak-yellow-700: #eab841;
+
+  /* ─── color · lime · Lime · SP / 官网次级强调 */
+  --ak-lime-400: #caec46;                  /* in-game SP cost */
+  --ak-lime-500: #c8eb21;                  /* site */
+  --ak-lime-600: #8fc31f;                  /* site */
+
+  /* ─── color · orange · Orange */
+  --ak-orange-400: #ff9433;                /* 6★ */
+  --ak-orange-500: #f49800;                /* <ba.rem> */
+  --ak-orange-600: #e5622b;                /* in-game mission track */
+
+  /* ─── color · red · Red */
+  --ak-red-400: #ff6237;                   /* <ba.vdown> */
+  --ak-red-500: #d83c3c;                   /* <ba.enemy> */
+  --ak-red-600: #c82a36;                   /* in-game NEW mark */
+  --ak-red-700: #a40000;                   /* in-game BREAKING NEWS */
+  --ak-red-800: #711111;                   /* in-game confirm button */
+  --ak-red-900: #860101;                   /* specialization */
+  --ak-magenta-500: #e40043;               /* in-game monthly card */
+
+  /* ─── color · green-purple · Green / Purple */
+  --ak-green-500: #2fac78;                 /* <ba.gild> */
+  --ak-green-400: #4ffaa5;
+  --ak-purple-400: #bf96ed;                /* 4★ */
+  --ak-purple-500: #9266b2;
+
+  /* ─── color · rarity · Rarity · 官方色阶 (gamedata sandbox_table.charRarityColorList) */
+  --ak-rarity-1: #bababa;
+  --ak-rarity-2: #d3dc35;
+  --ak-rarity-3: #82c5f5;
+  --ak-rarity-4: #bf96ed;
+  --ak-rarity-5: #efd691;
+  --ak-rarity-6: #ff9433;
+
+  /* ─── color · sp · Skill SP 回复类型（对应游戏内技能框配色，近似取值） */
+  --ak-sp-auto: #8fc31f;                   /* 自动回复 INCREASE_WITH_TIME */
+  --ak-sp-attack: #ff8a00;                 /* 攻击回复 INCREASE_WHEN_ATTACK */
+  --ak-sp-hit: #ffd800;                    /* 受击回复 INCREASE_WHEN_TAKEN_DAMAGE */
+  --ak-sp-passive: #8d8d8d;                /* 被动 */
+
+  /* ─── typography */
+
+  /* ─── typography · font · Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：
+   * ① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）
+   * ② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono
+   * 之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 离线单文件）时自然退到后两段。 */
+  --ak-font-body: "Source Han Sans SC", "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
+  --ak-font-display: "Novecento Sans Wide", "Novecentosanswide-Bold", "Bender", "Oswald", "Michroma", "Arial Narrow", system-ui, sans-serif;   /* 拉丁展示字（大写）：Novecento 500–800 → Bender → Oswald 接非 ASCII */
+  --ak-font-label: "Bender", "Bender-Bold", "Chakra Petch", "Rajdhani", "Saira", "Oswald", system-ui, sans-serif;   /* HUD 标签 / 数值：Bender 400/700 → Chakra Petch 接非 ASCII */
+  --ak-font-condensed: "Oswald", "Roboto Condensed", "Arial Narrow", sans-serif;   /* 自托管 Oswald 200–700 */
+  --ak-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;   /* 自托管 JetBrains Mono 100–800 正 / 斜 */
+
+  /* ─── typography · font-size · 字号（rem；注释为 px） */
+  --ak-fs-display-xl: 3.5rem;              /* 56 */
+  --ak-fs-display: 2.5rem;                 /* 40 */
+  --ak-fs-h1: 2rem;                        /* 32 */
+  --ak-fs-h2: 1.5rem;                      /* 24 */
+  --ak-fs-h3: 1.25rem;                     /* 20 */
+  --ak-fs-h4: 1.0625rem;                   /* 17 */
+  --ak-fs-body-lg: 1.125rem;               /* 18 */
+  --ak-fs-body: 1rem;                      /* 16 */
+  --ak-fs-sm: 0.875rem;                    /* 14 */
+  --ak-fs-xs: 0.75rem;                     /* 12 */
+  --ak-fs-overline: 0.6875rem;             /* 11 */
+
+  /* ─── typography · line-height · 行高 */
+  --ak-lh-body: 1.7;                       /* CJK 正文 */
+  --ak-lh-tight: 1.25;
+  --ak-lh-display: 1.05;
+
+  /* ─── typography · tracking · 字距 */
+  --ak-tracking-caps: 0.08em;
+  --ak-tracking-overline: 0.14em;
+  --ak-tracking-display: -0.02em;
+
+  /* ─── size */
+
+  /* ─── size · space · Spacing (4px grid) */
+  --ak-space-1: 4px;
+  --ak-space-2: 8px;
+  --ak-space-3: 12px;
+  --ak-space-4: 16px;
+  --ak-space-5: 20px;
+  --ak-space-6: 24px;
+  --ak-space-8: 32px;
+  --ak-space-10: 40px;
+  --ak-space-12: 48px;
+  --ak-space-16: 64px;
+  --ak-space-20: 80px;
+  --ak-space-24: 96px;
+
+  /* ─── size · shape · Shape · 方舟 = 直角；仅极小圆角用于输入框。不做切角 / 斜切 / 斜带——整套系统里没有 45° 的斜边。
+   * 色条 + 细框（pre / 消息 / 面板头 / 模组卡 …）：粗的 border-left 与 1px 的 border-top/bottom 在角上会被浏览器
+   * 斜接（miter）出一道小斜边，看着像「斜切装饰」；所以这类盒子的框用 border-image 画成直角拼接：
+   * border: 1px solid var(--ak-border); border-left-width: 4px;
+   * border-image: linear-gradient(to right, <色条色> 4px, var(--ak-border) 4px) 1 1 1 4;   ← slice 与各边 border-width 一致
+   * （顶部色条同理：linear-gradient(<色条色> 3px, var(--ak-border) 3px) 3 1 1 1）。只有一条边有色条、其它边无框的盒子不受影响。 */
+  --ak-radius: 0px;
+  --ak-radius-sm: 2px;
+  --ak-radius-pill: 999px;
+  --ak-bar-w: 4px;                         /* 标题左侧色条宽度 */
+  --ak-bar-w-lg: 8px;
+
+  /* ─── size · layout · Layout · 与 Codex 断点一致: 320 / 640 / 1120 / 1680 */
+  --ak-header-h: 56px;
+  --ak-local-nav-h: 48px;                  /* 二级吸顶栏（<1400 出现：菜单 / 本页目录） */
+  --ak-sidebar-w: 248px;
+  --ak-toc-w: 240px;
+  --ak-content-max: 1240px;                /* 阅读区最大宽度；表格密集页可加 .ak-wide */
+  --ak-content-narrow: 760px;
+  --ak-gutter: 24px;
+  --ak-gutter-sm: 16px;
+
+  /* ─── size · icon · Icon sizes */
+  --ak-icon-xs: 14px;
+  --ak-icon-sm: 18px;
+  --ak-icon-md: 24px;
+  --ak-icon-lg: 32px;
+  --ak-icon-xl: 48px;
+
+  /* ─── size · decoration · Signature decorations */
+  --ak-stripe-size: 8px;
+  --ak-halftone-size: 6px;
+  --ak-grid-size: 32px;
+
+  /* ─── motion */
+
+  /* ─── motion · duration · Motion · 时长 */
+  --ak-dur-instant: 80ms;
+  --ak-dur-fast: 150ms;
+  --ak-dur-normal: 250ms;
+  --ak-dur-slow: 400ms;
+
+  /* ─── motion · easing · Motion · 缓动 */
+  --ak-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ak-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ak-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ak-ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ─── layer */
+
+  /* ─── layer · z-index · Z-index */
+  --ak-z-dropdown: 100;
+  --ak-z-sticky: 200;
+  --ak-z-header: 1000;
+  --ak-z-overlay: 1500;
+  --ak-z-modal: 2000;
+  --ak-z-toast: 3000;
+  --ak-z-tooltip: 4000;
+
+  /* ─── asset · 资源路径约定：模板 / Gadget 拼图标路径的基准（默认相对 preview/assets；生产环境见文档站 /foundations/icons#游戏图标）。CSS 不读它——url() 里不能放 var()；CSS 引用的游戏素材走 base/skin-assets.css 的 --ak-item-bg-* 接口 */
+  --ak-asset-base: assets;
+
+  /* ─── control */
+
+  /* ─── control · select-arrow · 下拉箭头 ▾：裸 <select> 与 .ak-select 同一枚（两条 45° 渐变拼成实心三角，颜色随主题的 --ak-fg-muted） */
+  --ak-select-arrow: linear-gradient(45deg, transparent 50%, var(--ak-fg-muted) 50%), linear-gradient(135deg, var(--ak-fg-muted) 50%, transparent 50%);
+}
+
+/* ═══ 2b. SEMANTIC TOKENS · LIGHT（"档案模式" · in-game archive / white UI） ═══ */
+:root {
+  color-scheme: light;
+
+  /* ─── theme */
+
+  /* ─── theme · background · 背景 / 表面 */
+  --ak-bg-canvas: var(--ak-gray-50);
+  --ak-bg-surface: var(--ak-gray-0);
+  --ak-bg-surface-2: var(--ak-gray-50);
+  --ak-bg-surface-3: var(--ak-gray-100);
+  --ak-bg-inset: #eef0f1;
+  --ak-bg-hover: rgba(0, 0, 0, 0.05);
+  --ak-bg-active: rgba(0, 0, 0, 0.09);
+  --ak-bg-inverse: var(--ak-gray-900);
+  --ak-bg-overlay: rgba(15, 15, 16, 0.6);
+
+  /* ─── theme · foreground · 文字 */
+  --ak-fg: var(--ak-gray-900);
+  --ak-fg-secondary: #454647;
+  --ak-fg-muted: var(--ak-gray-500);
+  --ak-fg-subtle: var(--ak-gray-400);
+  --ak-fg-disabled: var(--ak-gray-300);
+  --ak-fg-inverse: var(--ak-gray-0);
+
+  /* ─── theme · accent · 强调色：亮色 = 游戏内蓝 #0098DC，暗色 = 官网青 #18D1FF；次强调 = 黄 */
+  --ak-accent: var(--ak-blue-500);         /* 亮色下用游戏内蓝 #0098DC，对比更稳 */
+  --ak-accent-hover: var(--ak-blue-600);
+  --ak-accent-fg: #ffffff;
+  --ak-accent-subtle: rgba(0, 152, 220, 0.10);
+  --ak-accent-muted: rgba(0, 152, 220, 0.28);
+  --ak-accent-2: var(--ak-yellow-500);     /* 次强调：黄 */
+  --ak-accent-2-fg: #1d1f20;
+
+  /* ─── theme · link · 链接 */
+  --ak-link: #0072a8;
+  --ak-link-hover: #005a82;
+  --ak-link-visited: #2c6b88;              /* 已访问 = 链接色「褪一层」而不是换成紫：= #0072a8 × 55% + --ak-fg-muted #626262 × 45%（变灰变钝，白底 5.9:1）。
+                                              写死算好的实色，不用 color-mix——链接色是常量，没必要让正文链接吃一个 2023 年的特性；重算：round(l*k + m*(1-k))。
+                                              :visited 里的 alpha 会被浏览器丢掉（防历史嗅探），所以必须是实色；悬停回 --ak-link-hover */
+  --ak-link-new: #c82a36;                  /* 红链 */
+  --ak-link-external: #0072a8;
+
+  /* ─── theme · border · 边框 / 焦点 / 选区 / 高亮 */
+  --ak-border: #d9dbdc;
+  --ak-border-subtle: #e8eaeb;
+  --ak-border-strong: #b1b1b1;
+  --ak-border-accent: var(--ak-blue-500);
+  --ak-focus: var(--ak-blue-500);
+  --ak-selection: rgba(0, 152, 220, 0.25);
+  --ak-mark-bg: rgba(0, 152, 220, 0.14);   /* <mark> 文字高亮：同 :target 引用 / 表格 is-hl / 面板当前项一套「淡青底」语言，比 --ak-accent-subtle 深一档、比 ::selection 浅一档（选中时仍看得出变化）；
+                                              不用黄——黄留给稀有度 / 警示条纹，且半透明黄叠在暗色面上会发闷成橄榄色；不用红——红链 / danger 已占满红的语义，红底高亮会像报错，红链落在里面也看不清 */
+
+  /* ─── theme · status · 状态色 */
+  --ak-info: #0072a8;
+  --ak-info-bg: rgba(0, 152, 220, 0.10);
+  --ak-success: #1f8f5f;
+  --ak-success-bg: rgba(47, 172, 120, 0.12);
+  --ak-warning: #b86f00;
+  --ak-warning-bg: rgba(244, 152, 0, 0.14);
+  --ak-danger: #c8102e;
+  --ak-danger-bg: rgba(200, 42, 54, 0.10);
+
+  /* ─── theme · rich-text · Rich text（游戏内 <color> 标签）· 亮色下微调以满足 AA */
+  --ak-rt-vup: #007bb5;
+  --ak-rt-vdown: #d0421c;
+  --ak-rt-rem: #b86f00;
+  --ak-rt-kw: #0077b3;
+  --ak-rt-imp: #d40000;
+  --ak-rt-drop: #1d78b8;
+  --ak-rt-enemy: #c22f2f;
+  --ak-rt-gild: #1f8f5f;
+  --ak-rt-acrem: #727272;
+  --ak-rt-level: #9a7b00;
+
+  /* ─── theme · rarity-text · Rarity text-safe（用于文字/描边） */
+  --ak-rarity-1-text: #6f6f6f;
+  --ak-rarity-2-text: #7f8a00;
+  --ak-rarity-3-text: #1d78b8;
+  --ak-rarity-4-text: #7d4fc2;
+  --ak-rarity-5-text: #a87a00;
+  --ak-rarity-6-text: #d45f00;
+
+  /* ─── theme · shadow · 阴影 */
+  --ak-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
+  --ak-shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
+  --ak-shadow-lg: 0 12px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
+  --ak-shadow-accent: 0 0 0 3px var(--ak-accent-subtle);
+
+  /* ─── theme · decoration · 装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条 */
+  --ak-glyph-filter: invert(1);            /* 游戏白色线稿图标在亮色下反相为黑 */
+  --ak-glyph-filter-inverse: none;         /* 同一套白线稿落在反色块（--ak-bg-inverse 底：.ak-phase-tabs 选中项那种）上时用——亮色下反色块是深底，白线稿不动；暗色下反色块是白底，要反相。组件走这个令牌，别按 :root[data-theme] 分支：跟随系统的暗色没有 data-theme，会漏 */
+  --ak-stripe-color: rgba(0,0,0,.08);
+  --ak-grid-color: rgba(0,0,0,.06);
+  --ak-halftone-color: rgba(0,0,0,.14);
+  --ak-scrollbar: #c4c6c8;
+}
+
+/* ═══ 2c. SEMANTIC TOKENS · DARK（"终端模式" · main menu / PRTS terminal） ═══ */
+:root[data-theme="dark"],
+html.skin-theme-clientpref-night,
+.ak-scope[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* ─── theme */
+
+  /* ─── theme · background · 背景 / 表面 */
+  --ak-bg-canvas: #0f0f10;
+  --ak-bg-surface: #1a1b1c;
+  --ak-bg-surface-2: #232425;
+  --ak-bg-surface-3: #2d2e30;
+  --ak-bg-inset: #141516;
+  --ak-bg-hover: rgba(255, 255, 255, 0.06);
+  --ak-bg-active: rgba(255, 255, 255, 0.11);
+  --ak-bg-inverse: var(--ak-gray-0);
+  --ak-bg-overlay: rgba(0, 0, 0, 0.7);
+
+  /* ─── theme · foreground · 文字 */
+  --ak-fg: #f0f0f0;
+  --ak-fg-secondary: #c9c9c9;
+  --ak-fg-muted: var(--ak-gray-400);
+  --ak-fg-subtle: #6f7071;
+  --ak-fg-disabled: #4a4b4c;
+  --ak-fg-inverse: var(--ak-gray-950);
+
+  /* ─── theme · accent · 强调色：亮色 = 游戏内蓝 #0098DC，暗色 = 官网青 #18D1FF；次强调 = 黄 */
+  --ak-accent: var(--ak-cyan-500);         /* 暗色下用官网青 #18D1FF */
+  --ak-accent-hover: var(--ak-cyan-200);
+  --ak-accent-fg: #000000;
+  --ak-accent-subtle: rgba(24, 209, 255, 0.10);
+  --ak-accent-muted: rgba(24, 209, 255, 0.30);
+  --ak-accent-2: var(--ak-yellow-500);
+  --ak-accent-2-fg: #000000;
+
+  /* ─── theme · link · 链接 */
+  --ak-link: var(--ak-cyan-300);
+  --ak-link-hover: var(--ak-cyan-200);
+  --ak-link-visited: #3f8ea4;              /* 已访问 = 青 #5ddcff × 62% + 画布 #0f0f10 × 38%（视觉上就是「62% 透明的链接色」，写成实色）；黑底 5:1、surface 4.6:1 */
+  --ak-link-new: #ff6b6b;
+  --ak-link-external: var(--ak-cyan-300);
+
+  /* ─── theme · border · 边框 / 焦点 / 选区 / 高亮 */
+  --ak-border: #2f3133;
+  --ak-border-subtle: #262729;
+  --ak-border-strong: #4a4c4f;
+  --ak-border-accent: var(--ak-cyan-500);
+  --ak-focus: var(--ak-cyan-500);
+  --ak-selection: rgba(24, 209, 255, 0.28);
+  --ak-mark-bg: rgba(24, 209, 255, 0.20);
+
+  /* ─── theme · status · 状态色 */
+  --ak-info: var(--ak-cyan-300);
+  --ak-info-bg: rgba(24, 209, 255, 0.10);
+  --ak-success: #4fd18f;
+  --ak-success-bg: rgba(47, 172, 120, 0.14);
+  --ak-warning: #ffb340;
+  --ak-warning-bg: rgba(244, 152, 0, 0.14);
+  --ak-danger: #ff5c5c;
+  --ak-danger-bg: rgba(216, 60, 60, 0.14);
+
+  /* ─── theme · rich-text · Rich text（游戏内 <color> 标签）· 暗色下即游戏原值 */
+  --ak-rt-vup: var(--ak-blue-500);
+  --ak-rt-vdown: var(--ak-red-400);
+  --ak-rt-rem: var(--ak-orange-500);
+  --ak-rt-kw: var(--ak-blue-400);
+  --ak-rt-imp: #ff3b3b;
+  --ak-rt-drop: #36acff;
+  --ak-rt-enemy: var(--ak-red-500);
+  --ak-rt-gild: var(--ak-green-500);
+  --ak-rt-acrem: #8a8a8a;
+  --ak-rt-level: #ffde00;
+
+  /* ─── theme · rarity-text · Rarity text-safe · 暗色下直接用稀有度原色 */
+  --ak-rarity-1-text: var(--ak-rarity-1);
+  --ak-rarity-2-text: var(--ak-rarity-2);
+  --ak-rarity-3-text: var(--ak-rarity-3);
+  --ak-rarity-4-text: var(--ak-rarity-4);
+  --ak-rarity-5-text: var(--ak-rarity-5);
+  --ak-rarity-6-text: var(--ak-rarity-6);
+
+  /* ─── theme · shadow · 阴影 */
+  --ak-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
+  --ak-shadow-md: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
+  --ak-shadow-lg: 0 16px 40px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
+  --ak-shadow-accent: 0 0 0 3px var(--ak-accent-subtle);
+
+  /* ─── theme · decoration · 装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条 */
+  --ak-glyph-filter: none;
+  --ak-glyph-filter-inverse: invert(1);
+  --ak-stripe-color: rgba(255,255,255,.07);
+  --ak-grid-color: rgba(255,255,255,.05);
+  --ak-halftone-color: rgba(255,255,255,.16);
+  --ak-scrollbar: #3b3d40;
+}
+
+/* ═══ 跟随系统：仅当未显式指定时生效（= 2c，同一份源） ═══ */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.skin-theme-clientpref-day):not([data-theme="dark"]):not(.skin-theme-clientpref-night) {
+    color-scheme: dark;
+
+    /* ─── theme */
+
+    /* ─── theme · background · 背景 / 表面 */
+    --ak-bg-canvas: #0f0f10;
+    --ak-bg-surface: #1a1b1c;
+    --ak-bg-surface-2: #232425;
+    --ak-bg-surface-3: #2d2e30;
+    --ak-bg-inset: #141516;
+    --ak-bg-hover: rgba(255, 255, 255, 0.06);
+    --ak-bg-active: rgba(255, 255, 255, 0.11);
+    --ak-bg-inverse: var(--ak-gray-0);
+    --ak-bg-overlay: rgba(0, 0, 0, 0.7);
+
+    /* ─── theme · foreground · 文字 */
+    --ak-fg: #f0f0f0;
+    --ak-fg-secondary: #c9c9c9;
+    --ak-fg-muted: var(--ak-gray-400);
+    --ak-fg-subtle: #6f7071;
+    --ak-fg-disabled: #4a4b4c;
+    --ak-fg-inverse: var(--ak-gray-950);
+
+    /* ─── theme · accent · 强调色：亮色 = 游戏内蓝 #0098DC，暗色 = 官网青 #18D1FF；次强调 = 黄 */
+    --ak-accent: var(--ak-cyan-500);       /* 暗色下用官网青 #18D1FF */
+    --ak-accent-hover: var(--ak-cyan-200);
+    --ak-accent-fg: #000000;
+    --ak-accent-subtle: rgba(24, 209, 255, 0.10);
+    --ak-accent-muted: rgba(24, 209, 255, 0.30);
+    --ak-accent-2: var(--ak-yellow-500);
+    --ak-accent-2-fg: #000000;
+
+    /* ─── theme · link · 链接 */
+    --ak-link: var(--ak-cyan-300);
+    --ak-link-hover: var(--ak-cyan-200);
+    --ak-link-visited: #3f8ea4;            /* 已访问 = 青 #5ddcff × 62% + 画布 #0f0f10 × 38%（视觉上就是「62% 透明的链接色」，写成实色）；黑底 5:1、surface 4.6:1 */
+    --ak-link-new: #ff6b6b;
+    --ak-link-external: var(--ak-cyan-300);
+
+    /* ─── theme · border · 边框 / 焦点 / 选区 / 高亮 */
+    --ak-border: #2f3133;
+    --ak-border-subtle: #262729;
+    --ak-border-strong: #4a4c4f;
+    --ak-border-accent: var(--ak-cyan-500);
+    --ak-focus: var(--ak-cyan-500);
+    --ak-selection: rgba(24, 209, 255, 0.28);
+    --ak-mark-bg: rgba(24, 209, 255, 0.20);
+
+    /* ─── theme · status · 状态色 */
+    --ak-info: var(--ak-cyan-300);
+    --ak-info-bg: rgba(24, 209, 255, 0.10);
+    --ak-success: #4fd18f;
+    --ak-success-bg: rgba(47, 172, 120, 0.14);
+    --ak-warning: #ffb340;
+    --ak-warning-bg: rgba(244, 152, 0, 0.14);
+    --ak-danger: #ff5c5c;
+    --ak-danger-bg: rgba(216, 60, 60, 0.14);
+
+    /* ─── theme · rich-text · Rich text（游戏内 <color> 标签）· 暗色下即游戏原值 */
+    --ak-rt-vup: var(--ak-blue-500);
+    --ak-rt-vdown: var(--ak-red-400);
+    --ak-rt-rem: var(--ak-orange-500);
+    --ak-rt-kw: var(--ak-blue-400);
+    --ak-rt-imp: #ff3b3b;
+    --ak-rt-drop: #36acff;
+    --ak-rt-enemy: var(--ak-red-500);
+    --ak-rt-gild: var(--ak-green-500);
+    --ak-rt-acrem: #8a8a8a;
+    --ak-rt-level: #ffde00;
+
+    /* ─── theme · rarity-text · Rarity text-safe · 暗色下直接用稀有度原色 */
+    --ak-rarity-1-text: var(--ak-rarity-1);
+    --ak-rarity-2-text: var(--ak-rarity-2);
+    --ak-rarity-3-text: var(--ak-rarity-3);
+    --ak-rarity-4-text: var(--ak-rarity-4);
+    --ak-rarity-5-text: var(--ak-rarity-5);
+    --ak-rarity-6-text: var(--ak-rarity-6);
+
+    /* ─── theme · shadow · 阴影 */
+    --ak-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
+    --ak-shadow-md: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
+    --ak-shadow-lg: 0 16px 40px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
+    --ak-shadow-accent: 0 0 0 3px var(--ak-accent-subtle);
+
+    /* ─── theme · decoration · 装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条 */
+    --ak-glyph-filter: none;
+    --ak-glyph-filter-inverse: invert(1);
+    --ak-stripe-color: rgba(255,255,255,.07);
+    --ak-grid-color: rgba(255,255,255,.05);
+    --ak-halftone-color: rgba(255,255,255,.16);
+    --ak-scrollbar: #3b3d40;
+  }
+}
+
+/* ═══ 2b′. SEMANTIC TOKENS · LIGHT（作用域内强制亮色：= 2b，同一份源） ═══ */
+.ak-scope[data-theme="light"] {
+  color-scheme: light;
+
+  /* ─── theme */
+
+  /* ─── theme · background · 背景 / 表面 */
+  --ak-bg-canvas: var(--ak-gray-50);
+  --ak-bg-surface: var(--ak-gray-0);
+  --ak-bg-surface-2: var(--ak-gray-50);
+  --ak-bg-surface-3: var(--ak-gray-100);
+  --ak-bg-inset: #eef0f1;
+  --ak-bg-hover: rgba(0, 0, 0, 0.05);
+  --ak-bg-active: rgba(0, 0, 0, 0.09);
+  --ak-bg-inverse: var(--ak-gray-900);
+  --ak-bg-overlay: rgba(15, 15, 16, 0.6);
+
+  /* ─── theme · foreground · 文字 */
+  --ak-fg: var(--ak-gray-900);
+  --ak-fg-secondary: #454647;
+  --ak-fg-muted: var(--ak-gray-500);
+  --ak-fg-subtle: var(--ak-gray-400);
+  --ak-fg-disabled: var(--ak-gray-300);
+  --ak-fg-inverse: var(--ak-gray-0);
+
+  /* ─── theme · accent · 强调色：亮色 = 游戏内蓝 #0098DC，暗色 = 官网青 #18D1FF；次强调 = 黄 */
+  --ak-accent: var(--ak-blue-500);         /* 亮色下用游戏内蓝 #0098DC，对比更稳 */
+  --ak-accent-hover: var(--ak-blue-600);
+  --ak-accent-fg: #ffffff;
+  --ak-accent-subtle: rgba(0, 152, 220, 0.10);
+  --ak-accent-muted: rgba(0, 152, 220, 0.28);
+  --ak-accent-2: var(--ak-yellow-500);     /* 次强调：黄 */
+  --ak-accent-2-fg: #1d1f20;
+
+  /* ─── theme · link · 链接 */
+  --ak-link: #0072a8;
+  --ak-link-hover: #005a82;
+  --ak-link-visited: #2c6b88;              /* 已访问 = 链接色「褪一层」而不是换成紫：= #0072a8 × 55% + --ak-fg-muted #626262 × 45%（变灰变钝，白底 5.9:1）。
+                                              写死算好的实色，不用 color-mix——链接色是常量，没必要让正文链接吃一个 2023 年的特性；重算：round(l*k + m*(1-k))。
+                                              :visited 里的 alpha 会被浏览器丢掉（防历史嗅探），所以必须是实色；悬停回 --ak-link-hover */
+  --ak-link-new: #c82a36;                  /* 红链 */
+  --ak-link-external: #0072a8;
+
+  /* ─── theme · border · 边框 / 焦点 / 选区 / 高亮 */
+  --ak-border: #d9dbdc;
+  --ak-border-subtle: #e8eaeb;
+  --ak-border-strong: #b1b1b1;
+  --ak-border-accent: var(--ak-blue-500);
+  --ak-focus: var(--ak-blue-500);
+  --ak-selection: rgba(0, 152, 220, 0.25);
+  --ak-mark-bg: rgba(0, 152, 220, 0.14);   /* <mark> 文字高亮：同 :target 引用 / 表格 is-hl / 面板当前项一套「淡青底」语言，比 --ak-accent-subtle 深一档、比 ::selection 浅一档（选中时仍看得出变化）；
+                                              不用黄——黄留给稀有度 / 警示条纹，且半透明黄叠在暗色面上会发闷成橄榄色；不用红——红链 / danger 已占满红的语义，红底高亮会像报错，红链落在里面也看不清 */
+
+  /* ─── theme · status · 状态色 */
+  --ak-info: #0072a8;
+  --ak-info-bg: rgba(0, 152, 220, 0.10);
+  --ak-success: #1f8f5f;
+  --ak-success-bg: rgba(47, 172, 120, 0.12);
+  --ak-warning: #b86f00;
+  --ak-warning-bg: rgba(244, 152, 0, 0.14);
+  --ak-danger: #c8102e;
+  --ak-danger-bg: rgba(200, 42, 54, 0.10);
+
+  /* ─── theme · rich-text · Rich text（游戏内 <color> 标签）· 亮色下微调以满足 AA */
+  --ak-rt-vup: #007bb5;
+  --ak-rt-vdown: #d0421c;
+  --ak-rt-rem: #b86f00;
+  --ak-rt-kw: #0077b3;
+  --ak-rt-imp: #d40000;
+  --ak-rt-drop: #1d78b8;
+  --ak-rt-enemy: #c22f2f;
+  --ak-rt-gild: #1f8f5f;
+  --ak-rt-acrem: #727272;
+  --ak-rt-level: #9a7b00;
+
+  /* ─── theme · rarity-text · Rarity text-safe（用于文字/描边） */
+  --ak-rarity-1-text: #6f6f6f;
+  --ak-rarity-2-text: #7f8a00;
+  --ak-rarity-3-text: #1d78b8;
+  --ak-rarity-4-text: #7d4fc2;
+  --ak-rarity-5-text: #a87a00;
+  --ak-rarity-6-text: #d45f00;
+
+  /* ─── theme · shadow · 阴影 */
+  --ak-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
+  --ak-shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
+  --ak-shadow-lg: 0 12px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
+  --ak-shadow-accent: 0 0 0 3px var(--ak-accent-subtle);
+
+  /* ─── theme · decoration · 装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条 */
+  --ak-glyph-filter: invert(1);            /* 游戏白色线稿图标在亮色下反相为黑 */
+  --ak-glyph-filter-inverse: none;         /* 同一套白线稿落在反色块（--ak-bg-inverse 底：.ak-phase-tabs 选中项那种）上时用——亮色下反色块是深底，白线稿不动；暗色下反色块是白底，要反相。组件走这个令牌，别按 :root[data-theme] 分支：跟随系统的暗色没有 data-theme，会漏 */
+  --ak-stripe-color: rgba(0,0,0,.08);
+  --ak-grid-color: rgba(0,0,0,.06);
+  --ak-halftone-color: rgba(0,0,0,.14);
+  --ak-scrollbar: #c4c6c8;
+}
+
+/* ═══ 2a′. 作用域主题：2a 里引用语义令牌的几个，在作用域上按作用域的主题重新解析 ═══ */
+.ak-scope[data-theme] {
+  /* ─── control */
+
+  /* ─── control · select-arrow · 下拉箭头 ▾：裸 <select> 与 .ak-select 同一枚（两条 45° 渐变拼成实心三角，颜色随主题的 --ak-fg-muted） */
+  --ak-select-arrow: linear-gradient(45deg, transparent 50%, var(--ak-fg-muted) 50%), linear-gradient(135deg, var(--ak-fg-muted) 50%, transparent 50%);
+}
+
+/* ═══ 2d. CHROME · 页眉 / 头图 / 画布 的主题接口 ═══ */
+:root {
+  /* ─── chrome · 2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）
+   * 皮肤的「框」（页眉主行 + 二级栏 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、
+   * 干员档案页的顶部黑边都是"黑框白纸 / 黑框黑纸"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。
+   * prts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：
+   * 新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，
+   * 不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。
+   * 页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg + 毛玻璃）——
+   * 玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。
+   * --ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。 */
+  --ak-theme-accent: var(--ak-cyan-500);   /* 活动主色：页眉标语 / 悬停、侧栏与目录分组条、页脚斜纹、窄屏卡片顶条 …（正文里的链接 / 选中仍是 --ak-accent；想一起换就连 --ak-accent 也覆盖） */
+  --ak-theme-accent-fg: #000;
+  --ak-chrome-bg: rgba(8, 9, 10, .9);      /* 页眉玻璃：半透明 + 毛玻璃，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1） */
+  --ak-chrome-bg-solid: #0e0f10;           /* 不透明处：窄屏工具卡片、飞出菜单 */
+  --ak-chrome-fg: #f2f2f2;
+  --ak-chrome-fg-2: rgba(255, 255, 255, .74);
+  --ak-chrome-fg-muted: rgba(255, 255, 255, .5);
+  --ak-chrome-line: rgba(255, 255, 255, .14);   /* 页眉底线 / 分隔线 */
+  --ak-chrome-line-strong: rgba(255, 255, 255, .32);
+  --ak-chrome-hover: rgba(255, 255, 255, .08);
+  --ak-chrome-field: rgba(255, 255, 255, .07);   /* 搜索触发器底 */
+  --ak-chrome-image: none;                 /* 顶栏角饰 / 底纹：url(left.png), url(right.png)（现网 PRTSheadleft 的活动徽章 / Garanheadright 的波纹那种）。画在玻璃之上、不会被压暗——只放深色低对比素材，照片请走 --ak-keyart-image */
+  --ak-chrome-image-position: right top;
+  --ak-chrome-image-size: auto 100%;
+  --ak-chrome-image-repeat: no-repeat;
+  --ak-chrome-texture: .55;                /* 右侧半调网点强度 0–1（游戏顶栏 img_back / 官网左缘网点），0 关闭 */
+  --ak-keyart-image: none;                 /* 头图（Key Visual）：从页面顶端铺起、页眉压在它上面的一条通栏画；--ak-keyart-h 为 0 时不占位（只在页眉后面透） */
+  --ak-keyart-h: 0px;                      /* 页眉之下可见的那段高度 */
+  --ak-keyart-position: center 30%;        /* -position / -size 相对整块（页眉高 + -h）计算 */
+  --ak-keyart-size: cover;
+  --ak-keyart-bg: transparent;             /* 画未铺满 / 未加载时的底色；默认透明，没有头图时页眉背后什么也不多画 */
+  --ak-keyart-fade: 96px;                  /* 底部渐隐进画布的高度，0 关闭 */
+  --ak-canvas-image: none;                 /* 页面画布底纹 / 底图（body 背景，叠在 --ak-bg-canvas 之上；现网 body 的 bkg 图位置） */
+  --ak-canvas-position: center top;
+  --ak-canvas-size: auto;
+  --ak-canvas-repeat: repeat;
+  --ak-canvas-attachment: scroll;
+}
+
+/* ═══ 高对比偏好：只有亮色吃得到（暗色块选择器特指度更高，压过这里的 :root——沿用原行为；.ak-scope[data-theme="light"] 与 2b′ 同特指度、本块在后，作用域亮色同样吃得到） ═══ */
+@media (prefers-contrast: more) {
+  :root,
+  .ak-scope[data-theme="light"] {
+    /* ─── theme */
+
+    /* ─── theme · foreground */
+    --ak-fg-muted: var(--ak-fg-secondary);
+
+    /* ─── theme · border */
+    --ak-border: var(--ak-border-strong);
+  }
+}