/* ui-tokens.css — Unified casual-game design tokens + reset.
 * Drop into any game's stylesheet and OVERRIDE the color roles; the
 * spacing / radius / elevation / tap / motion / font scales stay shared so
 * every title in the studio reads as one family (all games converge on
 * this file).
 *
 * Safe-area: every screen-edge pad is wrapped in max() so non-notched
 * devices are unaffected but notches / home bars never clip the UI.
 */

:root {
  /* ---- Color roles (override per game; keep the NAMES) ---------- */
  --bg: #f4efe6;
  --panel: #ffffff;
  --ink: #3b3630;
  --muted: #8a8078;
  --line: #e3dbcd;
  --accent: #8a9a7b;
  --accent-ink: #ffffff;        /* text drawn ON the accent */
  --accent-dark: #6f7f61;
  --danger: #c0492f;
  --success: #4f7a46;

  /* ---- Spacing scale (4px base unit) ---------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- Radius scale ---------------------------------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Elevation (layered: tight contact + wide ambient) --------- */
  --sh-card: 0 1px 2px rgba(60, 50, 35, 0.07), 0 5px 16px rgba(60, 50, 35, 0.09);
  --sh-hover: 0 2px 4px rgba(60, 50, 35, 0.09), 0 8px 22px rgba(60, 50, 35, 0.13);
  --sh-float: 0 4px 12px rgba(60, 50, 35, 0.10), 0 2px 4px rgba(60, 50, 35, 0.06);
  --sh-deep: 0 8px 32px rgba(60, 50, 35, 0.18), 0 2px 6px rgba(60, 50, 35, 0.10);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* ---- Touch target (min 44px; 48–56 most comfortable) ---------- */
  --tap: 44px;
  --tap-lg: 48px;

  /* ---- Motion ---------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---- Typography ------------------------------------------------ */
  --font-ui: ui-rounded, "Avenir Next", "Nunito", system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-cjk: "PingFang SC", "Microsoft YaHei", "Source Han Sans CJK SC",
              "Noto Sans CJK SC", sans-serif;
  --font-ja: "Hiragino Kaku Gothic ProN", "Source Han Sans J", "Noto Sans CJK JP",
             "MS Gothic", "Yu Gothic", sans-serif;
  --font-stack: var(--font-ui);
  --fs-0: 11px; --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px;
  --fs-5: 20px; --fs-6: 24px; --fs-7: clamp(28px, 5vw, 42px);

  /* ---- Layout ---------------------------------------------------- */
  --pagew: 1100px;
  --z-nav: 20; --z-modal: 30; --z-toast: 40;
}

/* i18n font dispatch — i18n.applyDom sets html.lang; swap the stack so CJK
 * / JA glyphs render on a real system face instead of a fallback box. */
[lang="zh-CN"], [lang="zh"] { --font-stack: var(--font-cjk); }
[lang="ja"]                { --font-stack: var(--font-ja); }

/* ---- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-3) / 1.55 var(--font-stack);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- Safe-area helpers ------------------------------------------- */
/* Wrap any screen-edge padding in max() so non-notched devices are
 * unaffected but notches / home bars never clip UI. */
.safe-top    { padding-top: max(var(--sp-4), env(safe-area-inset-top)); }
.safe-bottom { padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }
.safe-x {
  padding-left:  max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}