/* Hallmark · genre: playful · theme: Hum（Q萌糖果多accent，色板取自四款游戏）
 * brand: Q萌乐园 SSO 通行证 · tokens 由 index.html（Web版）与 mobile.html（手机版）共享
 * 色板溯源: 奶油 #f6efe3（棋萌）· 番茄 #e05d4b / 柠黄 #f2c14e / 叶绿 #63a463 / 天蓝 #7ec3e8（谁是卧底）· 樱粉 #ffb3c1（棋萌） */

:root {
  /* 纸与墨 */
  --color-paper: oklch(0.965 0.028 88);
  --color-paper-2: oklch(0.935 0.036 86);
  --color-card: oklch(0.985 0.012 95);
  --color-ink: oklch(0.32 0.035 300);
  --color-ink-2: oklch(0.44 0.03 300);
  --color-muted: oklch(0.50 0.03 300);
  --color-rule: oklch(0.87 0.03 88);
  --color-rule-2: oklch(0.79 0.045 85);

  /* 糖果 accent（每个游戏一个）*/
  --color-sun: oklch(0.83 0.135 88);
  --color-sun-deep: oklch(0.72 0.13 82);
  --color-coral: oklch(0.66 0.16 35);
  --color-coral-deep: oklch(0.56 0.15 35);
  --color-leaf: oklch(0.68 0.115 148);
  --color-leaf-deep: oklch(0.57 0.105 148);
  --color-sky: oklch(0.80 0.085 235);
  --color-sky-deep: oklch(0.62 0.10 235);
  --color-blossom: oklch(0.86 0.06 5);
  --color-blossom-deep: oklch(0.70 0.10 5);

  /* accent 上的文字色（对比度预验）*/
  --ink-on-sun: oklch(0.30 0.05 60);
  --ink-on-paper: var(--color-ink);

  --color-error: oklch(0.52 0.19 27);
  --color-ok: oklch(0.52 0.13 150);
  --color-focus: oklch(0.52 0.16 35);

  /* 字体 */
  --font-display: "ZCOOL KuaiLe", "Yuanti SC", "YouYuan", "PingFang SC", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", -apple-system, sans-serif;

  /* 4pt 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* 圆角：Q版玩具感，整体偏大 */
  --radius-input: 14px;
  --radius-btn: 14px;
  --radius-card: 22px;
  --radius-sheet: 28px;
  --radius-pill: 999px;

  /* 玩具阴影：硬投影按压 + 柔投影浮起 */
  --shadow-card: 0 12px 24px -14px oklch(0.35 0.06 60 / 0.38);
  --shadow-pop: 0 18px 32px -16px oklch(0.35 0.06 60 / 0.42);

  /* 动效 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 仅用于主 CTA 与状态切换的一次性动效 */
  --dur-fast: 150ms;
  --dur-med: 300ms;

  /* 布局 */
  --border-toy: 2px solid var(--color-ink);
}