/* ==========================================================================
   tokens.css · 战报阁设计令牌（全站唯一色值/字号/间距来源）
   命名规则：--color-* 语义色 | --fs-* 字号 | --lh-* 行高 | --fw-* 字重
             --ls-* 字距 | --space-* 间距 | --radius-* 圆角 | --shadow-* 阴影
             --dur-* 时长 | --ease-* 曲线 | --z-* 层级
   禁则：其他任何 CSS 文件不得出现 hex / rgb() / hsl() 字面量
   来源：docs/design-spec.md 第 2.2 节（原样落地，一个值未改）
   ========================================================================== */

:root {
  /* ---------- 2.2.1 墨阶（冷调灰蓝：底与结构） ---------- */
  --ink-950: #0F1015;   /* 遮罩基准 / 最深 */
  --ink-900: #15171E;   /* 页面底 */
  --ink-800: #1E212B;   /* 卡片面 / 控件面 */
  --ink-700: #262A36;   /* 次级面：卡内区块、缩略图槽、表格行底 */
  --ink-600: #343A4A;   /* 装饰描边、分隔线 */
  --ink-500: #525B70;   /* 需要存在感的次级描边、骨架屏底 */
  --ink-400: #616B80;   /* 表单控件描边（对 ink-800 = 3.00:1，达标） */

  /* ---------- 2.2.2 纸阶（暖调灰褐：文字） ---------- */
  --paper-50:  #F0EBDD; /* 主文字 · 宣纸白 */
  --paper-200: #A8A192; /* 次文字 · 说明、卡片元信息 */
  --paper-300: #9C968A; /* 辅助文字 · 图注、占位、时间戳 */
  --paper-400: #6D685E; /* 禁用文字（WCAG 1.4.3 豁免档） */

  /* ================= 角色令牌（视图层只用这一层） ================= */

  /* ---- 背景层级：4 级，靠明度递进而非色相 ---- */
  --color-bg:            var(--ink-900); /* 页面底 */
  --color-surface-1:     var(--ink-800); /* 卡片 / 输入框 / 弹层 */
  --color-surface-2:     var(--ink-700); /* 卡内区块 / 缩略图槽 / 表格行底 */
  --color-surface-sunken:var(--ink-950); /* 图片查看器背景 */
  --color-overlay:       rgba(6, 7, 10, 0.80); /* 弹层遮罩 */

  /* ---- 描边 ---- */
  --color-border:         var(--ink-600); /* 装饰性描边、分隔线（不承担识别功能） */
  --color-border-strong:  var(--ink-500); /* 次级描边 */
  --color-border-control: var(--ink-400); /* 表单控件描边（承担识别 → 必须 3:1） */
  --color-border-gold:    rgba(216, 180, 106, 0.16); /* 卡片金线（品牌） */
  --color-border-gold-hi: rgba(216, 180, 106, 0.42); /* 卡片悬浮 / 聚焦的金线 */

  /* ---- 文字层级 ---- */
  --color-text-1:        var(--paper-50);  /* 主文字、标题、数值 */
  --color-text-2:        var(--paper-200); /* 次文字、说明 */
  --color-text-3:        var(--paper-300); /* 辅助文字、占位、时间戳、图注 */
  --color-text-disabled: var(--paper-400); /* 禁用态文字（豁免档） */
  --color-text-on-gold:  #2A2416;          /* 金底上的深字（对金 = 7.82:1） */

  /* ---- 主色：鎏金 ---- */
  --color-primary:       #D8B46A; /* 主色 · 强调、图标、链接、数字标签 */
  --color-primary-hi:    #E8CF94; /* 悬浮 / 聚焦 / 描边高亮 */
  --color-primary-lo:    #B8945A; /* 按下 / 渐变收尾 */
  --color-primary-soft:  rgba(216, 180, 106, 0.10); /* 弱金底（标签、区块强调） */
  --color-primary-grad:  linear-gradient(180deg, #E8CF94 0%, #D8B46A 52%, #B8945A 100%);

  /* ---- 语义色：成功 / 失败（战果） / 危险 / 警告 / 信息 ---- */
  --color-win:        #F07264; /* 战果 · 胜（赤红） */
  --color-win-solid:  #F07264; /* 胜 · 实心块底 */
  --color-win-ink:    #2A1412; /* 胜 · 实心块上的字（对实心 = 6.04:1） */
  --color-lose:       #55BC90; /* 战果 · 败（青绿） */
  --color-lose-solid: #55BC90; /* 败 · 实心块底 */
  --color-lose-ink:   #10201B; /* 败 · 实心块上的字（对实心 = 7.22:1） */
  --color-danger:     #E8786F; /* UI · 危险（仅删除/失败，形态受限） */
  --color-danger-ink: #2A1412; /* 危险实心按钮上的字（对实心 = 6.09:1） */
  --color-warn:       #E3A94E; /* UI · 警告（额度紧张、未识别分组） */
  /* UI · 信息：不新增色相，复用 --color-primary。 */

  /* ---- 提示条底色（不透明合成值：12% 语义色叠 --color-bg，前端直接抄，零误差） ---- */
  --color-toast-win-bg:    #2F2226; /* 叠底后 · 胜 */
  --color-toast-lose-bg:   #1D2B2C; /* 叠底后 · 败 */
  --color-toast-danger-bg: #2E2328; /* 叠底后 · 危险 */
  --color-toast-warn-bg:   #2E2924; /* 叠底后 · 警告 */
  --color-toast-info-bg:   #2C2A27; /* 叠底后 · 信息（金） */

  /* ---- 阵营色标：吴 / 魏 / 晋 / 蜀 / 群 / 未知 ----
     服务端负责归一化 吳→吴、晉→晋、羣→群；前端只渲染不映射。 */
  --color-faction-wu:      #E87A66; /* 吴 · 朱红 */
  --color-faction-wei:     #6A9FD4; /* 魏 · 青蓝 */
  --color-faction-jin:     #A98CCF; /* 晋 · 紫 */
  --color-faction-shu:     #63A96F; /* 蜀 · 竹绿 */
  --color-faction-qun:     #C9A259; /* 群 · 土黄 */
  --color-faction-unknown: #8A847A; /* 未知 · 灰褐（防御性保留：v1.3 起 faction=「未知」不画色点，改卡片顶部提示条） */
  --faction-dot-size:      8px;     /* 阵营色点直径，固定值，不随断点变 */

  /* ---- 交互状态叠加层（用叠加而非换底色） ---- */
  --state-hover:  rgba(216, 180, 106, 0.06); /* 仅用于 surface-1 上的行/项 */
  --state-active: rgba(216, 180, 106, 0.12);
  --state-press:  rgba(240, 235, 221, 0.08);

  /* ---- 骨架屏 ---- */
  --color-skeleton-base:  #262932;
  --color-skeleton-shine: rgba(216, 180, 106, 0.10);

  /* ================= 字体 ================= */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
               system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;
  /* 衬线族仅两处使用：站名词标、胜/败徽标内那个单字。不得用于正文。 */
  --font-display: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC",
                  "SimSun", var(--font-sans);

  /* ================= 字体阶梯 ================= */
  --fs-h1:       clamp(26px, 7.4vw, 40px);
  --lh-h1:       1.25;
  --fs-h2:       clamp(20px, 5.0vw, 28px);
  --lh-h2:       1.30;
  --fs-h3:       clamp(17px, 4.2vw, 21px);
  --lh-h3:       1.40;
  --fs-h4:       17px;                    /* 卡片标题，不随断点缩放 */
  --lh-h4:       1.45;
  --fs-body-lg:  clamp(16px, 2.6vw, 17px);/* 首屏副标题 / 导语 */
  --lh-body-lg:  1.75;
  --fs-body:     16px;                    /* 正文：全站固定 16px，不缩放 */
  --lh-body:     1.75;
  --fs-body-sm:  14px;                    /* 卡片元信息、列表副行 */
  --lh-body-sm:  1.60;
  --fs-caption:  13px;                    /* 图注、说明、时间戳 */
  --lh-caption:  1.55;
  --fs-micro:    12px;                    /* 角标、页脚、底部 Tab 文字 */
  --lh-micro:    1.40;
  --fs-stat:     clamp(26px, 6.6vw, 36px);/* 库总览数字 */
  --lh-stat:     1.10;
  --fs-mono:     15px;                    /* game_id */
  --lh-mono:     1.50;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --ls-title:    -0.005em; /* 仅用于 h1/h2 */
  --ls-body:     0.01em;
  --ls-micro:    0.06em;   /* 12px 小字放开字距更清楚 */
  --ls-mono:     0.04em;

  /* ================= 间距刻度（4 基数） ================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  /* 语义间距（响应式，优先用这四个） */
  --space-section: clamp(48px, 9vw, 96px);  /* 区块纵向间距 */
  --space-block:   clamp(24px, 5vw, 40px);  /* 区块内子块间距 */
  --space-gutter:  clamp(16px, 4vw, 24px);  /* 页面左右安全边距 / 栅格 gutter */
  --space-card:    clamp(16px, 4vw, 24px);  /* 卡片内边距 */

  /* ================= 栅格与容器 ================= */
  --container:    1120px; /* 主内容最大宽度，居中 */
  --container-lg: 1280px; /* 宽屏上限，超过不再拉伸 */
  --measure:      680px;  /* 文本段落最大宽度（约 40 字/行） */
  --grid-cols:    12;
  --grid-gutter:  var(--space-gutter);

  /* ================= 圆角 ================= */
  --radius-xs:  6px;   /* 战果徽标 */
  --radius-sm:  8px;   /* 小标签、导航项 */
  --radius-md:  12px;  /* 按钮、输入框、缩略图、Toast */
  --radius-lg:  16px;  /* 卡片、投放区、弹层 */
  --radius-xl:  20px;  /* 首屏入口大卡 */
  --radius-pill:999px; /* 武将 chip、搜索框 */

  /* ================= 阴影 ================= */
  /* 深墨底上，阴影只负责「抬起」，边界一律靠描边。 */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);                              /* 卡片静置 */
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.48);                           /* 卡片悬浮 */
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.72);                           /* 弹层 */
  --shadow-gold: 0 6px 18px rgba(216, 180, 106, 0.18);                   /* 金按钮 */
  --shadow-gold-lg: 0 10px 26px rgba(216, 180, 106, 0.26);               /* 金按钮悬浮 */
  --shadow-focus: 0 0 0 3px rgba(232, 207, 148, 0.30);                   /* 金聚焦外发光 */

  /* ================= 动效 ================= */
  --dur-1: 120ms; /* 按下、状态切换 */
  --dur-2: 180ms; /* hover、Toast 进出 */
  --dur-3: 240ms; /* 卡片抬起、面板展开 */
  --dur-4: 320ms; /* 移动端底部抽屉升起 */
  --ease-out:    cubic-bezier(0.20, 0.80, 0.30, 1);  /* 默认：进了就停 */
  --ease-in-out: cubic-bezier(0.40, 0.00, 0.20, 1);
  --ease-emphasized: cubic-bezier(0.16, 1.00, 0.30, 1); /* 弹层 / 抽屉 */

  /* ================= 层级 ================= */
  --z-header: 100;
  --z-tabbar: 200;
  --z-sticky: 300;
  --z-toast:  800;
  --z-modal:  900;
  --z-viewer: 1000; /* 图片放大查看器 */

  /* ================= 控件尺寸 ================= */
  --control-h-lg: 48px; /* 主按钮（大） */
  --control-h-md: 44px; /* 默认按钮 / 输入框 */
  --control-h-sm: 36px; /* 仅桌面表格内使用，移动端禁用 */
  --touch-min:    44px; /* 触控目标硬下限 */
  --tabbar-h:     56px;
  --header-h-mobile:  56px;
  --header-h-desktop: 64px;

  /* ==========================================================================
     补充合成令牌 · 供 main.css 引用
     存在的唯一理由：design-spec 第 2.2 节声明「其他任何 CSS 文件不得出现
     hex / rgb() / hsl() 字面量」，而第 5 节组件样式里给出了若干带透明度的
     合成值。这里把它们全部收进令牌层，main.css 只写 var()。
     本段不新增任何色相，全部由上文的 --color-primary / --color-danger /
     --color-warn / --ink-* 派生。
     ========================================================================== */

  /* 金 · 透明度梯度（弱底 / 描边 / 发光） */
  --gold-a03:  rgba(216, 180, 106, 0.03);
  --gold-a06:  rgba(216, 180, 106, 0.06);
  --gold-a08:  rgba(216, 180, 106, 0.08);
  --gold-a12:  rgba(216, 180, 106, 0.12);
  --gold-a14:  rgba(216, 180, 106, 0.14);
  --gold-a22:  rgba(216, 180, 106, 0.22);
  --gold-a30:  rgba(216, 180, 106, 0.30); /* 弹层金线 */
  --gold-a34:  rgba(216, 180, 106, 0.34); /* 主入口大卡描边 */
  --gold-a42:  rgba(216, 180, 106, 0.42); /* 同 --color-border-gold-hi */
  --gold-a50:  rgba(216, 180, 106, 0.50); /* Outlined hover 描边 */
  --gold-a60:  rgba(232, 207, 148, 0.60); /* Filled 按钮描边 */
  --gold-glow: 0 0 0 4px rgba(216, 180, 106, 0.14); /* 拖拽态外发光 */

  /* 金按钮按下态渐变 */
  --color-primary-grad-active: linear-gradient(180deg, #B8945A 0%, #D8B46A 60%);
  /* 卡片顶面渐变起始色（design-spec 5.3） */
  --color-card-grad-top: #22262F;
  /* Filled 按钮 loading 环的底环色（对 --color-text-on-gold） */
  --color-on-gold-ring: rgba(42, 36, 22, 0.28);

  /* 危险色 · 透明度梯度（描边 / hover / active） */
  --danger-a55: rgba(232, 120, 111, 0.55);
  --danger-a10: rgba(232, 120, 111, 0.10);
  --danger-a18: rgba(232, 120, 111, 0.18);

  /* 警告色 · 未识别标签（design-spec 5.4，照抄不改写） */
  --warn-a12: rgba(227, 169, 78, 0.12);
  --warn-a42: rgba(227, 169, 78, 0.42);

  /* 半透明浮层底（预览角标 / 删除圆钮 / 进度条轨道） */
  --color-chip-overlay: rgba(10, 11, 15, 0.72);
  --color-bar-track:    rgba(10, 11, 15, 0.55);

  /* Header / TabBar 毛玻璃底 */
  --color-header-bg: rgba(21, 23, 30, 0.86);
  --color-tabbar-bg: rgba(21, 23, 30, 0.94);
  /* 桌面拖拽进入窗口时的全屏提示层 */
  --color-drag-overlay: rgba(21, 23, 30, 0.72);
  /* 图片查看器（--color-surface-sunken + 0.94） */
  --color-viewer-bg: rgba(15, 16, 21, 0.94);

  /* ==========================================================================
     极繁融合 · A(烫金镂空窗框) + B(青绿山水) + C(战纹重装面板) · design-spec 2.6
     融合规则（三者不打架的边界）：
       1. 卡片骨架 = A：描金外框 + 四角角花，装饰只锁在边框与角，中央留白给数据。
       2. 底纹氛围 = B：青绿山水只做 hero / 页面背景的极低对比晕染（每层 ≤10%），
          金线勾山形做模块分隔线；战报列表等数据区禁用山水底。
       3. 信息密度语义 = C：战报卡 / 结算面板用「镶金边小窗」，铆钉 / 角花点缀，
          ≤8% 透明战纹底；阵营色点、胜败徽章保持霓虹级跳脱。
     硬约束（极繁下更要加固，见 design-spec 2.5 / 10 坑 5-7）：
       · 战果色 vs 阵营色撞车 → 形态分离 + 位置固定 + 文字兜底，不松。
       · 金线 / 描金边框不得挤占 8px 阵营色点的视觉权重。
       · 移动端 <640px：满框描金降级为「单边描金 + 角花」，避免 375 宽挤爆。
     ========================================================================== */

  /* ---- B · 青绿山水（千里江山式，石青 / 石绿 + 金线勾形） ---- */
  --landscape-azure:     #4E6E8C; /* 石青 · 降饱和矿蓝（B 色板锚点） */
  --landscape-malachite: #50795B; /* 石绿 · 降饱和矿绿（B 色板锚点） */
  --landscape-wash:
    radial-gradient(120% 88% at 10% 6%,   rgba(78,110,140,0.10) 0%, rgba(78,110,140,0) 46%),
    radial-gradient(110% 82% at 90% 14%,  rgba(80,121,91,0.08)  0%, rgba(80,121,91,0)  48%),
    radial-gradient(130% 100% at 50% 110%, rgba(78,110,140,0.07) 0%, rgba(78,110,140,0) 52%);
  --landscape-line:      rgba(216,180,106,0.30); /* 金线勾山形（模块分隔线） */
  --landscape-line-soft: rgba(216,180,106,0.16); /* 金线淡档（hero 内弱分隔） */

  /* ---- A · 描金雕花窗框 ---- */
  --frame-border:        rgba(216,180,106,0.38); /* 描金外框（比 --color-border-gold 0.16 更强存在感） */
  --frame-corner:        #D8B46A;                /* 角花 / 铆钉 solid（装饰图形，非文字） */
  --frame-corner-size:   18px;                   /* 角花渲染尺寸 */
  --frame-corner-offset: 6px;                    /* 角花距面板内角 */
  --frame-fret-h:        12px;                   /* 回纹横带高度 */

  /* ---- A/C · 纹样（回纹 / 云纹 / 战纹）颜色 ---- */
  --pattern-key:    rgba(216,180,106,0.14); /* 回纹线条（A：外框边缘纹样） */
  --pattern-cloud:  rgba(216,180,106,0.10); /* 云纹线条（A：可替换回纹的次级纹样） */
  --pattern-battle: rgba(216,180,106,0.06); /* 战纹底纹（C：≤8%，只做面板极淡底） */

  /* ==========================================================================
     v2 · 材质层令牌（毛玻璃 / 柔阴影 / 渐变网格 / 颗粒 / 弹性曲线）
     来源：webapp/preview-ui.html（用户已确认的效果图）
     用法：只被 css/fx.css 引用；main.css 不感知本段。
     ========================================================================== */

  /* ---- 毛玻璃配方（三层：顶部高光 + 半透墨底 + 内描边） ---- */
  --glass-sheen:  linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 46%);
  --glass-base:   linear-gradient(180deg, rgba(34,38,47,0.80) 0%, rgba(25,28,36,0.72) 100%);
  --glass-blur:   blur(20px) saturate(160%);
  /* ⚠️ 这条是「有厚度的玉」和「糊玻璃」的分界线，缺了必翻车 */
  --glass-inset:  inset 0 1px 0 rgba(255,255,255,0.06);
  --glass-border: rgba(216,180,106,0.16);
  --glass-border-hi: rgba(216,180,106,0.42);

  /* ---- 柔阴影（多层叠加，替代原单层硬阴影） ---- */
  --shadow-soft-1: 0 2px 8px rgba(0,0,0,0.32);
  --shadow-soft-2: 0 2px 8px rgba(0,0,0,0.32), 0 12px 32px rgba(0,0,0,0.40);
  --shadow-soft-3: 0 2px 8px rgba(0,0,0,0.32), 0 12px 32px rgba(0,0,0,0.40), 0 32px 64px rgba(0,0,0,0.28);
  --shadow-lift:   0 8px 24px rgba(0,0,0,0.44), 0 20px 48px rgba(0,0,0,0.34);
  --shadow-gold-lift: 0 8px 24px rgba(216,180,106,0.18);

  /* ---- 渐变网格（只做结构感，绝不能被「看见」） ---- */
  --grid-major:      120px;
  --grid-minor:      24px;
  --grid-line-major: rgba(216,180,106,0.035);
  --grid-line-minor: rgba(240,235,221,0.020);
  --grid-mask: radial-gradient(120% 90% at 50% 28%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 78%);

  /* ---- 颗粒 ---- */
  --grain-opacity: 0.035;
  --grain-tile:    180px;

  /* ---- 弹性曲线 / 渐入 ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-5: 420ms;
  --rv-shift: 22px;
  --rv-stagger: 70ms;
  --rv-stagger-max: 240ms;
}