:root {
  /* WeChat-ish cute light palette (soft + readable). */
  --ui-bg-start: #f6fffd;
  --ui-bg-soft: #ffffff;
  --ui-bg-end: #fff7fb;

  --ui-surface: rgba(255, 255, 255, 0.94);
  --ui-surface-strong: #ffffff;

  --ui-text: #111827;
  --ui-text-muted: rgba(17, 24, 39, 0.62);
  --ui-line: rgba(17, 24, 39, 0.1);

  /* Brand: WeChat green + pink candy + soft blue (Q版、讨喜、干净). */
  --ui-brand: #07c160;
  --ui-brand-rgb: 7, 193, 96;
  --ui-accent: #ff6fb1;
  --ui-accent-rgb: 255, 111, 177;
  --ui-accent2: #a78bfa;
  --ui-accent2-rgb: 167, 139, 250;
  --ui-success: #22c55e;
  --ui-warning: #f59e0b;
  --ui-danger: #fb7185;

  --ui-shadow-sm: 0 10px 22px rgba(29, 26, 22, 0.08);
  --ui-shadow-md: 0 22px 60px rgba(29, 26, 22, 0.12);
  --ui-focus-ring: 0 0 0 3px rgba(var(--ui-brand-rgb), 0.22);

  --ui-radius-sm: 12px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 20px;
  --ui-radius-pill: 999px;

  --ui-font: ui-rounded, "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Game skin (single-page chat defaults to this via data-theme="game"). */
body[data-theme="game"] {
  /* White-base “game” skin: clean background + vivid accents. */
  --ui-bg-start: #ffffff;
  --ui-bg-soft: #ffffff;
  --ui-bg-end: #ffffff;

  --ui-surface: rgba(255, 255, 255, 0.94);
  --ui-surface-strong: #ffffff;

  --ui-text: #111827;
  --ui-text-muted: rgba(17, 24, 39, 0.62);
  --ui-line: rgba(17, 24, 39, 0.12);

  /* “白底但有游戏感”：蓝紫 + 珊瑚 + 薄荷（更讨喜） */
  --ui-brand: #4c6fff;
  --ui-brand-rgb: 76, 111, 255;
  --ui-accent: #ff6b6b;
  --ui-accent-rgb: 255, 107, 107;
  --ui-accent2: #2dd4bf;
  --ui-accent2-rgb: 45, 212, 191;

  --ui-shadow-sm: 0 12px 26px rgba(29, 26, 22, 0.1);
  --ui-shadow-md: 0 22px 62px rgba(29, 26, 22, 0.14);
  --ui-focus-ring: 0 0 0 3px rgba(var(--ui-brand-rgb), 0.2);
}

:where(button, [role="button"], a, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
  border-color: rgba(var(--ui-brand-rgb), 0.52) !important;
}

:where(button, .app-btn, .btn, .chip, .entry-hint, .input-hint) {
  transition:
    transform 0.14s var(--ui-ease),
    box-shadow 0.18s var(--ui-ease),
    border-color 0.18s var(--ui-ease),
    background-color 0.18s var(--ui-ease);
}

:where(button:not(:disabled), .app-btn:not(:disabled), .btn:not(:disabled), .chip, .entry-hint, .input-hint):active {
  transform: translateY(1px) scale(0.995);
}

@media (prefers-reduced-motion: reduce) {
  :where(button, .app-btn, .btn, .chip, .entry-hint, .input-hint) {
    transition: none;
  }

  :where(button:not(:disabled), .app-btn:not(:disabled), .btn:not(:disabled), .chip, .entry-hint, .input-hint):active {
    transform: none;
  }
}