/* Girls Power — tokens from 捡到猫了 soft-sky system */
:root {
  /* Coastal / soft sky (捡到猫了 live) */
  --sky-deep: #5b9fd4;
  --sky-500: #7eb8e8;
  --sky-300: #b7d9f5;
  --sea-400: #a8d4f0;
  --cream-50: #f3f8fc;
  --cream-100: #e4eef7;
  --sand-300: #d0e0ee;
  --olive-400: #9bc4a8;
  --olive-600: #6a9a7a;
  --sign-red: #e85d6a;
  --sign-red-deep: #c94452;
  --awning-yellow: #f5d76e;
  --ink-900: #243447;
  --ink-700: #3a4f63;
  --ink-muted: #7a90a4;
  --cloud: #ffffff;

  --bg: var(--cream-50);
  --bg-soft: var(--cream-100);
  --ink: var(--ink-900);
  --muted: var(--ink-muted);
  --line: rgba(36, 52, 71, 0.16);
  --card: var(--cloud);

  --green: #58a86a;
  --green-deep: #3d8a4f;
  --blue: var(--sky-deep);
  --blue-deep: #3d7fad;
  --yellow: #e8c44a;
  --yellow-deep: #c9a82e;
  --red: var(--sign-red);
  --red-deep: var(--sign-red-deep);
  --purple: #9b8fd4;
  --purple-deep: #7a6db8;
  --orange: #e8a05a;
  --pink: #e89ab8;

  --light-green: #d8f0de;
  --light-blue: #ddeef8;
  --light-yellow: #f7f0d4;
  --light-red: #fde6ea;
  --light-purple: #ebe6f8;
  --light-orange: #f8ead8;
  --light-pink: #fce8f0;

  --radius: 14px;
  --radius-sm: 12px;
  --radius-block: 14px;
  --shadow-card: 4px 4px 0 rgba(36, 52, 71, 0.12);
  --shadow-btn-green: 3px 3px 0 var(--green-deep);
  --shadow-btn-blue: 3px 3px 0 var(--blue-deep);
  --frame: 2px solid rgba(36, 52, 71, 0.2);
  --font: "Nunito", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-display: "Fredoka", "ZCOOL KuaiLe", "Nunito", "PingFang SC", sans-serif;
  --nav-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background:
    linear-gradient(180deg, #9ec9ea 0%, #c9e4f7 28%, #e8f3fb 55%, #f3f8fc 100%);
  color: var(--ink);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}