/* shared/theme.css — единая дизайн-система Chess Variants.
   Подключается на лендинге, страницах режимов, auth, профиле и в игре ПЕРВЫМ
   стилем страницы; страничные CSS только читают эти переменные.
   Тема переключается атрибутом data-theme на <html> (game/ui/theme.js,
   landing/landing.js): без атрибута — «обычная» (day), data-theme="night" — ночная.
   Каталог токенов и правила выбора — docs/DESIGN-TOKENS.md. */

:root {
  /* ── Поверхности и текст ─────────────────────────────────────────────
     Фон дневной темы затемнён по сравнению с прежним (#3498db на краю
     градиента давал контраст светлого текста ~2:1 — ниже WCAG AA). */
  --body-bg:         linear-gradient(135deg, #1f2d5a 0%, #12579a 100%);
  --panel-bg:        rgba(31, 45, 90, 0.97);
  --panel-bg-solid:  #1a1a2e;
  --card-bg:         rgba(0, 0, 0, 0.2);
  --border-color:    rgba(255, 255, 255, 0.14);
  --text-primary:    #f2f6fa;
  --text-secondary:  #dbe4ee;
  --text-muted:      #c9d6e3;

  /* ── Акценты (фон/рамка/текст на тёмной поверхности) ─────────────── */
  --accent-active:         #39ff7a;  /* активный элемент, «ваш ход», выбранное */
  --accent-active-strong:  #1fd65f;  /* второй цвет градиента активной кнопки */
  --accent-gold:           #ffd23f;  /* монеты, цены, Premium, главные CTA */
  --accent-gold-strong:    #f1c40f;  /* плашка цены, глубокий золотой */
  --accent-orange:         #ffa000;  /* вторая точка золотого градиента */
  --accent-rare:           #b57cff;  /* редкое, особые награды */
  --accent-info:           #3ba7ff;  /* ссылки, информационные заголовки */
  --accent-success:        #2ecc71;  /* успех, «лучший пакет» (не неон) */
  --accent-danger:         #ff6e7c;  /* опасное действие как текст/рамка */
  --accent-blue:           var(--accent-info); /* прежнее имя — не удалять */
  --accent-active-text:    #8dff9f;  /* светлый зелёный текст на полупрозрачной зелёной заливке */
  --accent-active-line:    #5fe07c;  /* рамка такой же кнопки «Надеть» */

  /* ── Заливки под контрастный текст (пара «фон + on-*») ───────────── */
  --on-active:             #04210f;  /* текст на --accent-active */
  --on-gold:               #2b2100;  /* текст на --accent-gold(-strong) */
  --info-bg:               #1f78c8;  /* заливка кнопки; текст белый */
  --info-bg-strong:        #1a62a8;
  --success-bg:            #1e8449;  /* заливка «Принять»; текст белый */
  --danger-bg:             #c0392b;  /* заливка «Выйти»/бейдж; текст белый */
  --rare-bg:               #7d3fc9;  /* заливка редкого бейджа; текст белый */
  --on-solid:              #ffffff;

  /* ── Цвета в виде «r, g, b» для rgba(var(--…-rgb), α) ────────────── */
  --accent-active-rgb:     57, 255, 122;
  --accent-gold-rgb:       255, 210, 63;
  --accent-gold-strong-rgb:241, 196, 15;
  --accent-orange-rgb:     255, 160, 0;
  --accent-info-rgb:       52, 152, 219;
  --accent-success-rgb:    46, 204, 113;
  --accent-danger-rgb:     231, 76, 60;
  --accent-rare-rgb:       181, 124, 255;

  /* ── Свечение ────────────────────────────────────────────────────── */
  --glow-active:       0 0 22px rgba(var(--accent-active-rgb), 0.55);
  --glow-active-soft:  0 0 14px rgba(var(--accent-active-rgb), 0.6);
  --glow-gold:         0 0 22px rgba(var(--accent-gold-strong-rgb), 0.25);
  --glow-gold-hover:   0 10px 28px rgba(var(--accent-gold-strong-rgb), 0.28);
  --glow-info:         0 4px 15px rgba(var(--accent-info-rgb), 0.3);

  /* ── Радиусы и движение ──────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    14px;
  --radius-pill:  999px;
  --dur-fast:     0.15s;
  --dur-base:     0.18s;
}

html[data-theme="night"] {
  --body-bg:         linear-gradient(135deg, #05070a 0%, #0d1117 100%);
  --panel-bg:        rgba(10, 12, 16, 0.97);
  --panel-bg-solid:  #0d0d14;
  --card-bg:         rgba(0, 0, 0, 0.45);
  --border-color:    rgba(255, 255, 255, 0.1);
  --text-primary:    #e6e6e6;
  --text-secondary:  #adb3bb;
  --text-muted:      #8a9099;

  /* Ночью свечение тише, чтобы не слепило на почти чёрном фоне */
  --glow-active:       0 0 18px rgba(var(--accent-active-rgb), 0.4);
  --glow-active-soft:  0 0 12px rgba(var(--accent-active-rgb), 0.45);
  --glow-gold:         0 0 18px rgba(var(--accent-gold-strong-rgb), 0.2);
}

/* Уважаем системную настройку «уменьшить движение»: анимации и переходы
   сводятся к мгновенным (события animationend/transitionend по-прежнему
   срабатывают, поэтому логика на них не ломается). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}