/* ───────────────────────────────────────────────────────────────────────────
   Дизайн-токены. ЕДИНСТВЕННОЕ место, где заданы цвета, радиусы и тени.
   В остальных css-файлах — только var(--…), никаких хардкодов вроде #fff.
   Стиль: пастельная милота. Светлая тема одна и намеренно — приложение
   должно выглядеть одинаково у обоих. Подробнее: docs/DESIGN.md
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* фон и бумага */
  --bg: #fff7fb;
  --bg-blob-1: #ffe1ef;
  --bg-blob-2: #e8e2ff;
  --bg-blob-3: #ddf6ec;
  --card: #ffffff;
  --card-2: #fdf6ff;
  --line: #f2e6f4;

  /* текст */
  --ink: #4b3a57;
  --ink-2: #7a6689;
  --muted: #ab9db7;

  /* места игроков: 0 — розовый, 1 — голубой. Не менять местами! */
  --p0: #ff8fbe;
  --p0-soft: #ffe4f0;
  --p0-ink: #c2447c;
  --p1: #61c9e6;
  --p1-soft: #dcf4fb;
  --p1-ink: #2b7f9b;

  /* акценты */
  --accent: #a98bff;
  --accent-soft: #ece5ff;
  --accent-ink: #6b4fd0;
  --mint: #7fdcb4;
  --peach: #ffb088;
  --sun: #ffd66b;
  --ok: #4ecfa0;
  --warn: #ff9aa6;

  /* геометрия */
  --r-xs: 10px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* тени — мягкие и сиреневатые, никакого серого */
  --sh-1: 0 2px 8px rgba(122, 86, 140, 0.08);
  --sh-2: 0 10px 28px rgba(122, 86, 140, 0.14);
  --sh-press: 0 1px 3px rgba(122, 86, 140, 0.14);

  /* отступы */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap: 16px;
  --gap-lg: 24px;

  /* шрифт: скруглённый системный. Никаких внешних загрузок — сервер свой,
     а лишний запрос на мобильном интернете это лишняя секунда. */
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, sans-serif;

  /* размеры */
  --tap: 44px; /* минимальная зона нажатия — правило, а не пожелание */
  --max-w: 520px; /* приложение всегда колонка: на планшете не растягиваем */

  --ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* лёгкий «пружинный» отскок */
  --dur: 0.22s;
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.001s;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}