/* ==========================================================================
   tokens.css — 设计 token（颜色 / 字号 / 圆角 / 阴影 / 动效）
   来源：家庭互动向小游戏合集 · UI 设计方案 v0.2 第 7 章
   ========================================================================== */

:root {
  /* ---- 中性色（基底） ---- */
  --bg-base: #FAFAFC;
  --surface: #FFFFFF;
  --surface-subtle: #F4F5F9;
  --border: #E8E9F0;
  --text-primary: #1C1D24;
  --text-secondary: #636573;
  --text-disabled: #A8A9B6;

  /* ---- 游戏主色 ---- */
  --c-ludo: #5B8DEF;
  --c-checkers: #26C6A2;
  --c-darkchess: #8B5CF6;

  /* ---- 功能色 ---- */
  --hint-move: #8AB4FF;
  --hint-capture: #FF7A5C;
  --hint-selected: #1C1D24;
  --danger: #E5484D;
  --success: #26C6A2;

  /* ---- 棋盘阵营色 ---- */
  --camp-1: #E8503A; /* 红 */
  --camp-2: #F5A623; /* 黄 */
  --camp-3: #4A90D9; /* 蓝 */
  --camp-4: #31A46C; /* 绿 */

  /* ---- 形状 ---- */
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-piece: 8px;

  /* ---- 阴影 ---- */
  --shadow-card: 0 1px 2px rgba(16, 17, 26, .04), 0 8px 24px rgba(16, 17, 26, .06);
  --shadow-card-press: 0 1px 2px rgba(16, 17, 26, .06), 0 2px 8px rgba(16, 17, 26, .08);
  --shadow-overlay: 0 24px 64px rgba(16, 17, 26, .16);

  /* ---- 间距（基础单位 4px） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* ---- 动效 ---- */
  --dur-press: 100ms;
  --dur-banner: 250ms;
  --dur-move: 200ms;
  --dur-step: 110ms;
  --dur-capture: 300ms;
  --dur-shake: 200ms;
  --dur-win: 400ms;
  --ease-out: ease-out;
  --ease-banner: cubic-bezier(.2, .8, .2, 1);
  --ease-shake: ease-in-out;

  /* ---- 布局 ---- */
  --bar-h: 64px;
  --touch-min: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- 字体（不加载任何外部字体，保证离线可用与秒开） ---- */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
          "Microsoft YaHei", "Source Han Sans SC", sans-serif;

  --fs-display: 28px;
  --fs-title: 22px;
  --fs-body: 17px;
  --fs-caption: 13px;

  /* ---- 主题别名（供游戏模块使用） ---- */
  --surface-1: var(--surface);
  --surface-2: var(--surface-subtle);
}

@media (min-width: 900px) {
  :root {
    --fs-display: 32px;
    --fs-title: 22px;
  }
}