/*
 * 游戏 UI 设计令牌 —— 手机端优先。
 *
 * 基准画布是手机竖屏（设计稿 1080×1920，实际 CSS 视口约 390×844）。
 * 所有尺寸先在这块画布上成立，宽屏靠 ui.css 里的 @media 放大，不是另一套设计。
 *
 * 每个游戏在自己的 theme.css 里只覆盖变量，不覆盖选择器——
 * 这样换皮不会把组件的结构和可用性一起改坏。
 */

:root {
  /* ---- 触控 ---- */
  /* 44px 是可点区域下限，不是建议值。低于这个数手机上就点不准。 */
  --gs-tap-min: 44px;
  --gs-tap-gap: 8px;

  /* ---- 安全区 ---- */
  --gs-safe-top: env(safe-area-inset-top, 0px);
  --gs-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gs-safe-left: env(safe-area-inset-left, 0px);
  --gs-safe-right: env(safe-area-inset-right, 0px);

  /* ---- 间距（手机基准）---- */
  --gs-space-1: 4px;
  --gs-space-2: 8px;
  --gs-space-3: 12px;
  --gs-space-4: 16px;
  --gs-space-5: 24px;
  --gs-space-6: 32px;

  /* ---- 圆角 ---- */
  --gs-radius-sm: 10px;
  --gs-radius-md: 18px;
  --gs-radius-lg: 28px;
  --gs-radius-pill: 999px;

  /* ---- 字号（手机基准，宽屏按比例放大）---- */
  --gs-text-xs: 12px;
  --gs-text-sm: 14px;
  --gs-text-md: 16px;
  --gs-text-lg: 20px;
  --gs-text-xl: 26px;
  --gs-text-hero: 56px;

  /* ---- 颜色：默认是中性占位值，游戏必须在 theme.css 里换成自己的 ---- */
  --gs-ink: #ffffff;
  --gs-ink-soft: rgba(255, 255, 255, 0.72);
  --gs-ink-dim: rgba(255, 255, 255, 0.48);
  --gs-ink-on-light: #1c1338;

  --gs-surface: rgba(28, 19, 56, 0.82);
  --gs-surface-raised: rgba(46, 33, 84, 0.92);
  --gs-surface-sunken: rgba(16, 10, 34, 0.6);
  --gs-hairline: rgba(255, 255, 255, 0.14);

  --gs-accent: #4be3c1;
  --gs-accent-2: #ffb347;
  --gs-gold: #ffd257;
  --gs-danger: #ff6b6b;

  /* ---- 发光与阴影：游戏感主要来自这两组 ---- */
  --gs-glow-accent: 0 0 0 1px rgba(75, 227, 193, 0.5), 0 0 28px rgba(75, 227, 193, 0.35);
  --gs-glow-gold: 0 0 24px rgba(255, 210, 87, 0.55);
  --gs-shadow-card: 0 18px 40px rgba(6, 3, 18, 0.45);
  --gs-shadow-button: 0 6px 0 rgba(0, 0, 0, 0.28), 0 12px 24px rgba(6, 3, 18, 0.4);
  --gs-shadow-press: 0 2px 0 rgba(0, 0, 0, 0.28), 0 6px 12px rgba(6, 3, 18, 0.4);

  /* ---- 图标着色 ----
   * 图标 SVG 一律用 stroke="currentColor" / fill="currentColor" 画，而它们是以
   * `<img>` 载入的：`<img>` 里的 currentColor **解析不到外面的文字色，只会是黑**。
   * 于是深色界面上所有图标都渲染成黑块——jelly-match 走查里设置行、底部导航、
   * 账单行、结算三颗星全中，看起来像图标没加载出来。
   * `<img>` 用不了 mask 上色，所以走滤镜：先 `brightness(0)` 把任何来源归成黑，
   * 再 `invert(1)` 成白；要别的颜色就在后面接一段定过值的链。
   * 四条链的落点都实测过（误差 ≤4/255），换主色时**重新测一遍再改数**，
   * 别照着色值猜——sepia/saturate/hue-rotate 不是线性的。 */
  --gs-icon-tint-ink: brightness(0) invert(1);
  --gs-icon-tint-gold: brightness(0) saturate(100%) invert(85%) sepia(38%) saturate(720%)
    hue-rotate(330deg) brightness(103%) contrast(101%);
  --gs-icon-tint-accent: brightness(0) saturate(100%) invert(78%) sepia(66%) saturate(2500%)
    hue-rotate(150deg) brightness(103%) contrast(101%);
  --gs-icon-tint-danger: brightness(0) saturate(100%) invert(62%) sepia(52%) saturate(3000%)
    hue-rotate(325deg) brightness(101%) contrast(101%);

  /* 满屏插画的取景点。默认取正中；插画中缝有接缝、或主体不在正中时，
     游戏在自己的 theme.css 里改这一个值，不必另出一张图。 */
  --gs-bg-focus: 50% 50%;

  /* ---- 渐变 CTA ---- */
  --gs-cta: linear-gradient(135deg, var(--gs-accent), var(--gs-accent-2));

  /* ---- 动效 ---- */
  --gs-fast: 120ms;
  --gs-normal: 220ms;
  --gs-slow: 420ms;
  --gs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 减少动态：把时长归零，但不去掉状态变化本身——玩家仍然要看得出发生了什么。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gs-fast: 1ms;
    --gs-normal: 1ms;
    --gs-slow: 1ms;
  }
}

:root[data-reduced-motion='on'] {
  --gs-fast: 1ms;
  --gs-normal: 1ms;
  --gs-slow: 1ms;
}