/* =========================================================
   峡谷约局 · 设计令牌层
   必须在 styles.css / admin.css 之前引入。

   设计语言：战术板（Tactical Board）
   ─ 暖纸底 + 墨黑 + 鎏金，切角（chamfer）与角标（bracket）作为形状签名，
     数字用等比宽字形当"仪表读数"用。
   ─ 房间页另有一套「夜战」主题：同一套几何，只把明暗翻过来。

   规则：组件只引用语义令牌，不出现硬编码 hex。
   ========================================================= */

/* ---------- 字体：全部本地，不依赖任何外部字体服务 ----------
   DM Sans 可变字体（wght 100–900），只负责拉丁字母与数字。
   中文字形交给系统字体，避免下载几 MB 的中文 webfont。 */
@font-face{
  font-family:"DM Sans";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ---- 文字层级（对比度基于 --paper #f1eee4 / --surface #fbfaf4 实测） ---- */
  --ink-1:#131a24;        /* 14.6 : 1  标题 */
  --ink-2:#37424e;        /*  9.3 : 1  正文 */
  --ink-3:#5f6a76;        /*  5.4 : 1  辅助文字 —— 唯一可承载文字的弱色 */
  --ink-4:#98a0a8;        /*  仅图标 / 描边，禁止承载文字 */

  /* ---- 品牌：墨 + 金 + 玉 ---- */
  --ink:#101822;          /* 墨黑面板 / 主按钮 */
  --ink-soft:#1b2532;
  --gold:#b08a3e;         /* 装饰金（线条、角标、描边） */
  --gold-bright:#d8b46a;
  --gold-ink:#7a5a15;     /*  5.6 : 1  金色文字专用 */
  --gold-tint:rgba(176,138,62,.1);
  --jade:#1b5a46;
  --jade-bright:#2f8062;
  --jade-tint:rgba(27,90,70,.09);

  /* ---- 语义色：两队 ---- */
  --team-blue:#1a6b96;    /*  5.7 : 1 */
  --team-red:#a4384a;     /*  5.9 : 1 */

  /* ---- 语义色：状态 ---- */
  --state-open:#1b5a46;
  --state-gathering:#8a6318;
  --state-full:#1a6b96;
  --state-live:#8a6318;
  --state-done:#5f6a76;
  /* 「就位」的绿：只给分路上的小圆点用，比 --jade 亮一档，8px 上才看得出是绿的 */
  --state-ready:#2f8a5c;
  --danger:#a4384a;
  /* 入座进度：空 → 满 绿 → 红 语义色 */
  --seat-empty:#2f9e6b;
  --seat-mid:#d6a23c;
  --seat-full:#c4394b;

  /* ---- 面 ---- */
  --paper:#f1eee4;
  --paper-2:#e6e1d2;
  --surface:#fbfaf4;
  --surface-2:#f2eee2;
  --surface-3:#eae5d6;
  --line:#dcd5c3;
  --line-strong:#c5bba2;

  /* ---- 房间页表面：默认值即浅色「战术板」，深色在 body.theme-dark 内覆盖 ---- */
  --room-bg:#f1eee4;
  --room-texture:none;
  --room-veil:linear-gradient(180deg,rgba(241,238,228,.94) 0%,rgba(241,238,228,.965) 46%,#f1eee4 100%);
  --room-grid:rgba(16,24,34,.05);
  --header-bg:rgba(247,244,236,.86);

  /* ---- 记分牌：浅色主题下是一块墨色面板，全页唯一的"反相区" ---- */
  --score-bg:#111a24;
  --score-bg-2:#18232f;
  --score-fg:#f4ead4;
  --score-fg-dim:#a9b3bd;
  --score-line:rgba(216,180,106,.3);
  --score-tick:rgba(244,234,212,.16);
  --score-tick-on:#d8b46a;

  /* ---- 座位 ---- */
  --seat-bg:#fdfcf7;
  --seat-bg-filled:#fffef9;
  --seat-edge:rgba(19,26,36,.09);
  --seat-hover:rgba(176,138,62,.07);
  --sigil-bg:rgba(19,26,36,.045);
  --chip-bg:rgba(19,26,36,.05);
  --track-bg:rgba(19,26,36,.09);

  /* ---- 我的座位：玉色。和蓝 / 红两队阵营色正交，一眼可辨 ---- */
  --mine-bg:#e7f1e9;
  --mine-line:rgba(27,90,70,.5);
  --mine-accent:#1b5a46;
  --mine-fg:#f3faf5;

  /* ---- 浮层 ---- */
  --toast-bg:#111a24;
  --toast-fg:#f7f2e4;
  --toast-line:rgba(216,180,106,.34);
  --scrim:rgba(16,24,34,.52);

  /* ---- 字号阶梯：正文不小于 16px，弱化只靠颜色不靠字号 ---- */
  --fs-display:clamp(36px,4.6vw,58px);
  --fs-h1:36px;
  --fs-h2:30px;
  --fs-h3:22px;
  --fs-lg:18px;
  --fs-body:16.5px;
  --fs-label:16px;
  --fs-caption:15px;
  --fs-micro:13px;

  /* ---- 形状：切角量与角标长度 ---- */
  --chamfer:10px;
  --chamfer-sm:6px;

  /* ---- 圆角：几乎不用，靠切角与直角建立"装备面板"感 ---- */
  --r-xs:2px;
  --r-sm:3px;
  --r-md:5px;
  --r-lg:8px;
  --r-pill:999px;

  /* ---- 控件高度 ---- */
  --control-lg:50px;
  --control-md:42px;
  --control-sm:34px;

  /* ---- 阴影：低饱和平铺，主要靠描边而非投影 ---- */
  --sh-1:0 1px 2px rgba(19,26,36,.05);
  --sh-2:0 10px 24px -12px rgba(19,26,36,.22);
  --sh-3:0 26px 60px -28px rgba(19,26,36,.28);

  /* ---- 动效 ---- */
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur:180ms;

  /* ---- 全站唯一焦点环 ---- */
  --focus:0 0 0 2px var(--paper), 0 0 0 4px var(--gold);

  --sans:"DM Sans","PingFang SC","HarmonyOS Sans SC","MiSans","OPPO Sans","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}

/* 深色「夜战」主题：同名语义，只换值。
   只在房间页生效（body.in-room.theme-dark），大厅永远是白昼战术板。 */
body.in-room.theme-dark{
  --ink-1:#e9eef4;
  --ink-2:#c2ccd6;
  --ink-3:#8d9aa7;
  --ink-4:#66727f;
  --ink:#0d151d;
  --ink-soft:#141f29;
  --gold:#c9a45c;
  --gold-bright:#f0d69a;
  --gold-ink:#e8cc8c;
  --gold-tint:rgba(216,180,106,.12);
  --jade:#3f9d7c;
  --jade-bright:#5cc79d;
  --jade-tint:rgba(92,199,157,.1);
  --team-blue:#57aede;
  --team-red:#e87386;
  --state-open:#7fd0ae;
  --state-gathering:#e6c179;
  --state-full:#7cb9e0;
  --state-live:#e6c179;
  --state-done:#a3aeb9;
  --state-ready:#5cc79d;
  --danger:#e87386;
  /* 入座进度：空 → 满 绿 → 红 语义色 */
  --seat-empty:#5cc79d;
  --seat-mid:#e6c179;
  --seat-full:#ec6b7e;

  --paper:#060a0f;
  --paper-2:#0a1017;
  --surface:#0e1822;
  --surface-2:#141f2a;
  --surface-3:#19242f;
  --line:rgba(233,238,244,.11);
  --line-strong:rgba(233,238,244,.22);

  --room-bg:#060a0f;
  --room-texture:url("/assets/room-bg.jpg");
  --room-veil:linear-gradient(180deg,rgba(4,8,12,.72) 0%,rgba(4,9,13,.84) 38%,rgba(5,10,15,.94) 100%);
  --room-grid:rgba(233,238,244,.035);
  --header-bg:rgba(6,10,15,.8);

  --score-bg:#0a1219;
  --score-bg-2:#101b24;
  --score-fg:#f6ecd6;
  --score-fg-dim:#a6b2be;
  --score-line:rgba(216,180,106,.34);
  --score-tick:rgba(246,236,214,.14);
  --score-tick-on:#f0d69a;

  --seat-bg:#0e1720;
  --seat-bg-filled:#111c26;
  --seat-edge:rgba(233,238,244,.08);
  --seat-hover:rgba(216,180,106,.1);
  --sigil-bg:rgba(233,238,244,.06);
  --chip-bg:rgba(233,238,244,.07);
  --track-bg:rgba(233,238,244,.12);

  --mine-bg:#123126;
  --mine-line:rgba(92,199,157,.6);
  --mine-accent:#5cc79d;
  --mine-fg:#06170f;

  --toast-bg:#f3eee2;
  --toast-fg:#111a24;
  --toast-line:rgba(16,24,34,.16);
  --scrim:rgba(2,5,8,.66);

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 12px 28px -14px rgba(0,0,0,.7);
  --sh-3:0 30px 70px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* 动效偏好：一处覆盖，终止全部 transition / animation */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
}