/* ============================================================
   Score Lab — слой 2: темы
   Светлая и тёмная. Обе выводят рабочие цвета из акцента,
   который задаёт файл федерации (слой 3) тремя числами:
   --brand-h, --brand-s, --brand-l.
   Ни один цвет здесь не прописан готовым — иначе тёмная тема
   и цвета федерации начнут спорить.
   ============================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:          var(--n-50);
  --surface:     var(--n-0);
  --surface-alt: var(--n-50);
  --surface-sunk:var(--n-100);

  --text:        var(--n-900);
  --text-soft:   var(--n-600);
  --text-mute:   var(--n-500);

  --line:        var(--n-200);
  --line-strong: var(--n-300);

  /* акцент собирается из тона федерации */
  --accent:      hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --accent-hi:   hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 8%));
  --accent-soft: hsl(var(--brand-h) calc(var(--brand-s) * 0.55) 95%);
  --accent-line: hsl(var(--brand-h) calc(var(--brand-s) * 0.5) 82%);
  --on-accent:   #fff;

  /* Смысловые цвета данных. От федерации не зависят. */
  --data-mark: hsl(var(--data-h) 52% 38%);
  --data-soft: hsl(var(--data-h) 60% 95%);
  --data-on-mark: #fff;
  --loss-soft: hsl(var(--loss-h) 70% 96%);

  --win:      hsl(var(--win-h) 78% 34%);
  --win-soft: hsl(var(--win-h) 60% 93%);

  /* Шапка залита цветом федерации — это её единственное место
     на экране, зато заметное. Дальше по странице цвет работает
     точечно, чтобы не спорить с данными. */
  --hdr-bg:    hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --hdr-bg-2:  hsl(calc(var(--brand-h) + 14) calc(var(--brand-s) + 6%) calc(var(--brand-l) + 12%));
  --hdr-text:  #fff;
  --hdr-dim:   hsl(var(--brand-h) 60% 88%);
  --hdr-line:  hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 10%));
  --loss:     hsl(var(--loss-h) 64% 44%);
  --live:     hsl(var(--live-h) 78% 48%);

  --shadow-card: 0 1px 2px hsl(var(--brand-h) 20% 12% / 0.06);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Глубокий сине-чёрный вместо нейтрально-серого.

     Тон тот же, что на промо-главной: серый в тёмной теме выглядит
     как выключенный экран, а синева читается как вода — вид спорта
     всё-таки водный.

     Это фон и поверхности, они у всех федераций общие. Акцент
     остаётся федерации: он ниже и считается от --brand-h. */
  --bg:          #061423;
  --surface:     #132030;
  --surface-alt: #182838;
  --surface-sunk:#0c1826;

  --text:        #d6e4f9;
  --text-soft:   #a9bad2;
  --text-mute:   #8a919a;

  --line:        #1e2b3b;
  --line-strong: #2b3b4e;

  /* В тёмной теме тот же тон берётся светлее и заметно менее насыщенным:
     насыщенный синий федерации на чёрном фоне режет глаза и «звенит». */
  --accent:      hsl(var(--brand-h) calc(var(--brand-s) - 22%) calc(var(--brand-l) + 20%));
  --accent-hi:   hsl(var(--brand-h) calc(var(--brand-s) - 22%) calc(var(--brand-l) + 30%));
  --accent-soft: hsl(var(--brand-h) 28% 18%);
  --accent-line: hsl(var(--brand-h) 24% 30%);
  /* Тот же тон, что у фона страницы: почти-чёрный из серой шкалы
     на цветной кнопке отдавал другим оттенком. */
  --on-accent:   #061423;

  --win:      hsl(var(--win-h) 70% 60%);
  --win-soft: hsl(var(--win-h) 40% 16%);
  --loss:     hsl(var(--loss-h) 58% 62%);
  --live:     hsl(var(--live-h) 82% 58%);

  --data-mark: hsl(var(--data-h) 55% 55%);
  --data-soft: hsl(var(--data-h) 40% 18%);
  --data-on-mark: #061423;
  --loss-soft: hsl(var(--loss-h) 35% 17%);

  --white-caps-bg: var(--n-200);
  --white-caps-border: var(--n-400);
  --blue-caps-bg:  #3d7ad6;
  --blue-caps-border:  #3d7ad6;

  --hdr-bg:    hsl(var(--brand-h) 48% 16%);
  --hdr-bg-2:  hsl(calc(var(--brand-h) + 14) 42% 22%);
  --hdr-text:  var(--n-100);
  --hdr-dim:   hsl(var(--brand-h) 24% 68%);
  --hdr-line:  hsl(var(--brand-h) 40% 26%);

  --shadow-card: none;
}

/* Пока пользователь не выбрал тему руками, идём за системой. */
/* Системная настройка обрабатывается в theme.js, а не вторым
   блоком здесь.

   Раньше тёмная тема была описана дважды — по кнопке и по
   @media prefers-color-scheme, — и два списка переменных обязаны
   были совпадать. Один раз они уже разъехались: новые цвета
   дописались только в один.

   Теперь theme.js разрешает тему до отрисовки и всегда ставит
   data-theme конкретным значением. Цена: без JS системная тёмная
   не подхватится, страница откроется светлой. Скрипт лежит
   в <head> и выполняется синхронно, так что для всех остальных
   ничего не меняется. */