/* ==========================================================
   设计令牌（Design Tokens）—— 方案 A · 宣纸 · 朱砂印
   ----------------------------------------------------------
   为什么单独一个文件：
   - Canvas 绘制与 CSS 都要用颜色。若两边各写一份，必然长期不同步。
     因此颜色令牌的"运行时唯一真源"是 js/tokens.js，它启动时把当前主题的值
     写进这些 CSS 变量；本文件保留一份静态兜底，用于：
       ① 防止 JS 执行前的一帧闪烁（FOUC）
       ② JS 异常时页面仍可读
   - Canvas 侧直接从 Gomoku.tokens.get() 读，不读 CSS 变量。

   主题结构（2026-10-01 起）：
   - 全站仅保留「宣纸 · 朱砂印」一套主题（原 纸/木/夜 三主题已移除，
     js/tokens.js 不再读写 localStorage 的主题键，设置抽屉不再提供切换）。
   - 外观商店的棋子/棋盘皮肤通过 :root 内联变量覆盖本文件的对应令牌
     （见 js/tokens.js 的 applySkin，皮肤目录在 lib/ai_economy.js 的 SHOP）。
   ========================================================== */

/* ----------------------------------------------------------
   1. 与主题无关的令牌
   ---------------------------------------------------------- */
:root {
  /* --- 字体 --- */
  --font-display: "STKaiti", "KaiTi", "Kaiti SC", "Kaiti TC", "楷体", "Songti SC", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, "Cascadia Mono", "SF Mono", monospace;

  /* --- 字号（基线 16px） --- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  /* --- 行高 / 字距 --- */
  --lh-tight: 1.25;
  --lh-base: 1.6;
  --lh-loose: 1.8;
  --ls-brand: .08em;
  --ls-code: .22em;
  --ls-title: .14em;    /* 主标题大字距（方案 A） */
  --ls-cta: .5em;       /* 主按钮楷体大字距（方案 A） */

  /* --- 间距（8pt 网格 + 4 台阶） --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --- 圆角 --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* --- 动效 --- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 380ms;
  --dur-stone: 280ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);

  /* --- 层级 --- */
  --z-board: 1;
  --z-bubble: 5;
  --z-emoji: 20;
  --z-tabbar: 30;
  --z-drawer: 60;
  --z-toast: 100;
  --z-modal: 200;

  /* --- 安全区（四边） --- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ----------------------------------------------------------
   2. 唯一主题：宣纸 · 朱砂印
   配色母题：
   - 宣纸  #f5efe1 底 + 纤维噪点 + 四角水墨晕染（--c-wash）
   - 墨    #332c22 文字 / 选中态 / 次级实心按钮
   - 朱砂  #b5443a 主行动按钮 / 印章 / 最后一手 / 胜利连线
   ---------------------------------------------------------- */
:root {
  /* 阴影基色：暖调。用纯黑落在暖纸面上会发灰发脏，是"AI 生成感"的典型来源 */
  --sh-rgb: 74, 58, 34;

  --c-bg: #f5efe1;
  --c-surface: #fbf6ea;
  --c-surface-2: #efe7d2;
  --c-field: #fffdf8;
  --c-surface-warn: #f4ecd8;

  --c-border: #ddd2b6;
  --c-border-strong: #c9bb9b;
  --c-border-warn: #e0d0ae;

  --c-text: #332c22;
  --c-text-sub: #7c6f55;
  --c-text-hint: #a09478;

  /* 墨：分段选中 / 次级实心按钮 / 发送键（与朱砂形成"墨选朱行"的层级） */
  --c-ink: #332c22;
  --c-on-ink: #f3ead4;

  /* 朱砂：品牌主色 */
  --c-brand: #b5443a;
  --c-brand-strong: #96382f;
  --c-on-brand: #fdf6e8;
  --c-accent: #b5443a;
  --c-accent-rgb: 181, 68, 58;
  --c-on-accent: #ffffff;
  --c-danger: #9e3a30;
  --c-danger-soft: #f2ded9;
  --c-success: #5c7d63;
  --c-dot-off: #c7c7cc;

  /* 水墨晕角基色（rgb 三元组，供 rgba(var(--c-wash), a) 使用） */
  --c-wash: 146, 138, 120;

  --c-highlight: rgba(255, 255, 255, .70);
  --c-scrim: rgba(44, 32, 16, .38);

  /* 棋盘（Canvas 用；这里同时供 #board 元素底色兜底） */
  --c-board-bg: #f0e3c6;
  --c-board-1: #f0e3c6;
  --c-board-2: #e7d6ae;
  --c-board-grain: rgba(176, 140, 86, .18);
  --c-board-line: rgba(150, 118, 74, .78);
  --c-board-frame: #8a6538;
  --c-board-frame-2: rgba(150, 118, 74, .40);
  /* 裱边：棋盘 canvas 外一圈"托裱纸 + 细沿线"（纯 CSS，不影响棋盘尺寸） */
  --c-board-mount: #f7efdc;
  --c-board-frame-line: #c2a36b;
  --c-vignette: rgba(96, 68, 32, .12);

  --c-stone-black-1: #585046;
  --c-stone-black-2: #1e1a15;
  --c-stone-white-1: #fffdf7;
  --c-stone-white-2: #e2d7c0;
  --c-stone-black-rim: rgba(0, 0, 0, .45);
  --c-stone-white-rim: rgba(120, 95, 55, .30);

  --c-dot-black-1: #6b6055;
  --c-dot-black-2: #1e1a15;
  --c-dot-white-1: #ffffff;
  --c-dot-white-2: #dcd3c2;

  --sh-e1: 0 1px 2px rgba(var(--sh-rgb), .06), 0 2px 6px rgba(var(--sh-rgb), .05);
  --sh-e2: 0 2px 6px rgba(var(--sh-rgb), .07), 0 8px 20px rgba(var(--sh-rgb), .07);
  --sh-e3: 0 4px 12px rgba(var(--sh-rgb), .09), 0 18px 40px rgba(var(--sh-rgb), .10);
  --sh-e4: 0 8px 24px rgba(var(--sh-rgb), .12), 0 32px 64px rgba(var(--sh-rgb), .14);
}