/* ============================================================
   Score Lab — слой 1: токены
   Размеры, типографика, нейтральная шкала.
   Не зависят ни от темы, ни от федерации.
   ============================================================ */

:root {
  /* --- нейтральная шкала ---
     Не серая, а с холодным подтоном: вид спорта водный, и даже фон
     должен это помнить. Именно нейтральный серый давал ощущение
     выцветшей страницы. */
  --n-0:   #ffffff;
  --n-50:  #f4f7fa;
  --n-100: #e8eef4;
  --n-200: #d6e0ea;
  --n-300: #b6c5d5;
  --n-400: #8598ad;
  --n-500: #5d7086;
  --n-600: #415467;
  --n-700: #2c3d4e;
  --n-800: #1b2938;
  --n-850: #14202c;
  --n-900: #0e1822;
  --n-950: #08101a;

  /* --- семантические цвета ---
     Победа отмечается не зелёным: зелёный тут ниоткуда не следует и
     тянет в сторону медицинских интерфейсов. Победитель выделяется
     насыщенным цветом воды, поражение — приглушением. */
  --win-h:  196;
  --loss-h: 4;
  --live-h: 14;

  /* Нейтральная отметка в данных: разделитель периода, значок
     сейва, звезда достижения.

     Отдельный тон, а не --brand-h, потому что федерация задаёт
     оформление интерфейса, а не смысл данных. У московской
     федерации тон 348 — красный, у петербургской 172 — зелёный;
     покрась ими данные, и «результативный пас» станет красным
     у одних и зелёным у других, хотя означает одно и то же.

     Красный в данных значит «плохо» независимо от того, какого
     цвета логотип. */
  --data-h: 205;

  /* --- шапочки ватерполистов: белая и синяя команда ---
     В водном поло хозяева играют в белых шапочках, гости в синих.
     Это единственная пара цветов, которая приходит из самого вида спорта,
     поэтому она зафиксирована и не переопределяется федерацией. */
  --white-caps-bg: var(--n-0);
  --white-caps-border: var(--n-300);
  --blue-caps-bg:  #1f5fbf;
  --blue-caps-border:  #1f5fbf;

  /* --- типографика --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num:  var(--font-sans);

  --fs-xs:   0.6875rem;  /* 11px — подписи в таблицах */
  --fs-sm:   0.8125rem;  /* 13px — вторичный текст */
  --fs-base: 0.9375rem;  /* 15px — основной */
  --fs-md:   1.0625rem;  /* 17px — заголовок карточки */
  --fs-lg:   1.25rem;    /* 20px — заголовок экрана */
  --fs-xl:   1.5rem;     /* 24px — счёт */

  /* --- отступы. Намеренно скупые: на мобильном каждый лишний rem съедает строку данных --- */
  --sp-1: 0.25rem;
  --sp-2: 0.375rem;
  --sp-3: 0.5rem;
  --sp-4: 0.75rem;
  --sp-5: 1rem;
  --sp-6: 1.5rem;

  /* горизонтальный отступ страницы: на телефоне минимальный */
  --page-pad: var(--sp-3);

  --radius-sm: 4px;
  --radius:    7px;
  --radius-lg: 12px;

  --header-h: 52px;
  --tabbar-h: 56px;

  --dur: 140ms;
}

@media (min-width: 768px) {
  :root {
    --page-pad: var(--sp-5);
    --header-h: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}