/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css —— Web UI 的设计变量
   ───────────────────────────────────────────────────────────────────────────
   【设计参考】bs.quensonwai.com（用户给的参考站，已用 CDP 截图 + 扒下它的
   `:root` 变量，见 `_shots/ref-tokens.json`）。学到最要紧的三条：

     ① **它的"黑"是暖的，不是冷灰** —— `--background:#101011`、
        `--color-paper:#080808`、文字 `--foreground:#efe9df`（暖白）、
        描边 `--border:#524739`（暖棕灰，不是 `#333`）。
        "高级感"主要来自这里：整页没有一处冷灰。
     ② **衬线标题** —— `--font-display:"Noto Serif TC",serif`。
        "Gate Open, 界放"那个观感就是衬线给的，换成无衬线立刻掉档。
     ③ **留白与边距** —— `--gutter: clamp(1rem,4vw,4rem)`、`--space-3xl: 6rem`、
        圆角只有 2~8px。信息密度**故意压得很低**。

   【本项目的配色口径（用户）】黑底 + 红 + 紫为主，黄/蓝/白/绿少许点缀。
     ⇒ 把参考站的"香槟金"接过来当那个"黄"（点缀主色），
        红做**行动色**、紫做**次强调**，六色（含黄）做**卡牌属性色**。

   【尺寸口径】不用 Electron 那套 `cqw`（容器宽的 1%，手机上会缩到 3px，
   实测见 _work/部署适配排查/排查总表.md）。这里用 px/rem 保证**可读性下限**，
   布局形态由媒体查询重排。
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── 底色：暖黑三阶（参考站口径，没有冷灰）───────────────────────── */
    --c-bg:          #0c0b0a;   /* 页面最底 */
    --c-bg-2:        #121110;
    --c-surface:     #1a1816;   /* 面板 */
    --c-surface-2:   #232120;
    --c-surface-3:   #2d2a27;

    /* ── 文字：暖白（不是 #fff）──────────────────────────────────────── */
    --c-text:        #efe9df;
    --c-dim:         rgba(239, 233, 223, .58);
    --c-faint:       rgba(239, 233, 223, .32);

    /* ── 描边：暖棕灰 ────────────────────────────────────────────────── */
    --c-line:        rgba(217, 187, 135, .24);
    --c-line-soft:   rgba(239, 233, 223, .10);
    --c-line-strong: rgba(217, 187, 135, .48);
    --c-line-red:    rgba(207, 58, 48, .42);
    --c-line-purple: rgba(155, 92, 240, .42);

    /* ── 主色：红（行动）+ 紫（次强调）────────────────────────────────── */
    --c-red:         #cf3a30;   /* 砖红，比纯红更沉、更像参考站的 action 色 */
    --c-red-soft:    #e8705f;
    --c-red-deep:    #8e2b23;
    --c-purple:      #9b5cf0;
    --c-purple-soft: #c4a1ff;
    --c-purple-deep: #4a1d8c;

    /* ── 点缀：金（= 用户说的"黄"，取参考站 --primary #d9bb87）──────────
       ⚠️ 分工：**红紫管结构**（导航、行动按钮、选中、对手态），
          金/蓝/白/绿 **只做信息色** —— 属性条、BP、晶核、状态点、焦点圈。
          不要拿它们染按钮底色，满屏六色会立刻花掉。 */
    --c-gold:        #d9bb87;
    --c-yellow:      #ffc63d;
    --c-blue:        #3d9bff;
    --c-white:       #e8eef5;
    --c-green:       #2fd07a;

    /* ── 渐变 ────────────────────────────────────────────────────────── */
    --grad-page:   linear-gradient(180deg, var(--c-bg) 0%, #0a0908 100%);
    --grad-red:    linear-gradient(135deg, #d8453a, #8e2b23);
    --grad-purple: linear-gradient(135deg, #a76bf5, #4a1d8c);
    --grad-gold:   linear-gradient(135deg, #e5cda0, #b9954f);
    --grad-card:   linear-gradient(180deg, rgba(45, 42, 39, .92), rgba(12, 11, 10, .96));

    --glow-red:    0 0 22px rgba(207, 58, 48, .38);
    --glow-purple: 0 0 22px rgba(155, 92, 240, .36);

    /* ── 字体：**标题衬线**（学参考站的 --font-display）─────────────── */
    --font-display: "Noto Serif SC", "Noto Serif TC", Georgia, "Songti SC", "SimSun", serif;
    --font:         "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-num:     "Bahnschrift", "Segoe UI", system-ui, sans-serif;

    /* ── 字号阶梯（**手机有下限**，不随屏宽无限缩）────────────────────── */
    --fs-2xs: 10px;
    --fs-xs:  11.5px;
    --fs-sm:  13px;
    --fs-md:  15px;
    --fs-lg:  18px;
    --fs-xl:  22px;
    --fs-2xl: 28px;
    --fs-3xl: 38px;

    /* 字距（参考站 tracking-widest: .1em，小标签靠字距出气质）*/
    --tracking:      .06em;
    --tracking-wide: .12em;
    --tracking-widest: .22em;

    /* ── 间距：4px 基准，留白给足（参考站 space-3xl = 6rem）──────────── */
    --sp-1: 4px;
    --sp-2: 6px;
    --sp-3: 8px;
    --sp-4: 12px;
    --sp-5: 16px;
    --sp-6: 24px;
    --sp-7: 36px;
    --sp-8: 56px;

    /* 内容左右边距：参考站 `--gutter: clamp(1rem,4vw,4rem)` —— 直接学 */
    --gutter: clamp(16px, 4vw, 56px);

    /* ── 形状：直角为主（用户口径），斜切为辅 ────────────────────────── */
    --radius-sm: 0;
    --radius:    0;
    --radius-lg: 0;
    --cut:    12px;
    --cut-sm: 7px;

    /* ── 动效（参考站的 dur 三档）────────────────────────────────────── */
    --dur-micro: .12s;
    --dur-short: .22s;
    --dur-long:  .42s;
    --ease-out:  cubic-bezier(.16, 1, .3, 1);

    /* ── 触控 ────────────────────────────────────────────────────────── */
    --tap-min: 44px;

    /* ── 卡牌（实卡比例 1 : 1.46）────────────────────────────────────── */
    --card-w: 62px;
    --card-h: 91px;
    --card-w-sm: 44px;
    --card-h-sm: 64px;

    /* ── 骨架 ────────────────────────────────────────────────────────── */
    /* 页头改成**上下两栏**：h1 = 品牌行（上行），h2 = 导航行（下行）。
       加按钮只影响下行，上行高度锁死。 */
    --topbar-h1: 34px;
    --topbar-h2: 38px;
    --bottombar-h: 56px;
}

/* ══ 桌面 / 平板横屏：整体放大一档 ═════════════════════════════════════ */
@media (min-width: 900px) {
    :root {
        --fs-xs:  12px;
        --fs-sm:  13.5px;
        --fs-md:  15.5px;
        --fs-lg:  20px;
        --fs-xl:  26px;
        --fs-2xl: 34px;
        --fs-3xl: 52px;

        --sp-6: 28px;
        --sp-7: 44px;
        --sp-8: 72px;

        --card-w: 78px;
        --card-h: 114px;
        --card-w-sm: 54px;
        --card-h-sm: 79px;

        --topbar-h1: 36px;
        --topbar-h2: 42px;
        --bottombar-h: 64px;
    }
}

@media (min-width: 1400px) {
    :root {
        --fs-3xl: 64px;
        --card-w: 92px;
        --card-h: 134px;
        --card-w-sm: 62px;
        --card-h-sm: 91px;
    }
}