@import url("fonts/fonts.css");
/* =====================================================================
   SK Hockey · тема «Свитер» (вариант Б) · токены для переноса в app.css
   ---------------------------------------------------------------------
   Как подключить:
   1) Положить шрифты рядом (см. @font-face ниже) — внешние сайты не нужны.
   2) Подключить этот файл ПОСЛЕ app.css — блок «Совместимость» сразу
      перекрасит текущие экраны через старые имена переменных.
   3) Дальше переносить компоненты по таблице внизу файла.

   Под другой клуб меняются только две переменные: --club-bg и --club-stripe.
   Всё остальное (карточки, линии, вторичный текст) выводится из них.
   ===================================================================== */

/* ---------- Шрифты: Unbounded + Onest, лицензия OFL, кириллица ----------
   Файлы и fonts/fonts.css скачивает tools/fetch_fonts.py при сборке образа
   (Google Fonts, запасной путь — GitHub google/fonts). Нет файлов — системные шрифты. */
:root {
  /* ---------- Клуб: две ручки ---------- */
  --club-bg: #170C0F;        /* очень тёмный оттенок цвета клуба. Примеры: вишня #170C0F (до v0.14.1 — #1C0F13), ель #0E1A14, слива #16121F, графит #141414 */
  --club-stripe: #40A512;    /* второй цвет клуба: полосы, роли, значки штаба. Зелёный как на форме (до v0.14.1 — золото #E9B949) */

  /* ---------- Основа ---------- */
  --cream: #F6ECDD;
  --bg: var(--club-bg);
  --stripe: var(--club-stripe);
  --text: var(--cream);

  /* Поверхности выводятся из фона. Значения после запятой не нужны:
     color-mix есть в iOS 16.2+ и Chrome/WebView 111+. Для старых
     webview ниже есть @supports-запасной вариант для вишнёвого фона. */
  --s1:   color-mix(in oklab, var(--bg), var(--cream) 7%);   /* карточки, поля */
  --s2:   color-mix(in oklab, var(--bg), var(--cream) 13%);  /* вложенное, выбранное, корешок билета */
  --line: color-mix(in oklab, var(--bg), var(--cream) 18%);  /* линии и рамки */
  --muted: color-mix(in oklab, var(--bg), var(--cream) 66%); /* вторичный текст: 6.6:1 на --bg, 5.9:1 на --s1 */
  --tabbar: color-mix(in oklab, var(--bg), #000 25%);
  --scrim: rgba(8, 3, 5, .62);                               /* затемнение под шторкой */

  /* ---------- Статусы отметки (цвет + значок, не только цвет) ---------- */
  --yes: #5BD08F;    --yes-ink: #0B1F13;     /* Играю    · галочка */
  --maybe: #9CC3FF;  --maybe-ink: #0B1626;   /* Думаю    · вопрос */
  --no: #FF8A7A;     --no-ink: #2A0D08;      /* Не смогу · крестик; он же «опасное действие» */
  --res: #C8A8FF;                            /* Резерв   · часы */
  /* Не отмечен: прозрачная плашка + рамка var(--line) + пунктирный кружок, текст var(--muted) */
  --tint: 16%;                               /* фон плашки статуса = цвет статуса на 16% */

  /* ---------- Площадка, форма, логотипы ---------- */
  --ice: #F1ECE4;          /* лёд в звеньях */
  --ice-ink: #2A171C;      /* тёмный текст и ободки на льду */
  --rink-red: #D2464F;
  --rink-blue: #7C93B4;
  --crease: #CFE0EE;
  --kit: #D9CFC1;          /* подложка картинок формы: видны и белая, и чёрная */
  --crest: #F3ECE2;        /* подложка логотипов */

  /* Свитера звеньев — без изменений, данные */
  --jersey-white: #F4F6FA;  --jersey-blue: #3D6FE0;  --jersey-green: #2FAE63;   --jersey-red: #E0434F;
  --jersey-yellow: #F2D300; --jersey-orange: #F28A1C; --jersey-black: #11151F;  --jersey-gray: #8D96A8;

  /* Фоны аватаров с инициалами — тёплые, без синего */
  --ava-1: #3F5A47; --ava-2: #58405F; --ava-3: #6B3A42; --ava-4: #6B4A3A; --ava-5: #4A4F5E;

  /* ---------- Шрифты и размеры ---------- */
  --font-display: "Unbounded", "Arial Black", sans-serif;   /* время, числа, заголовки */
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Шкала: время в карточке 56/800 · заголовок экрана 22/700 · звено 17/700 ·
     время в ленте 19/700 · заголовок секции 14–15/600 · текст 16/400–600 ·
     вторичный 13–14 · подпись 12/700 капсом с разрядкой .08em */

  /* ---------- Отступы, радиусы, высоты ---------- */
  --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-6: 24px;
  --pad-screen: 16px;
  --r-tag: 9px;       /* метки на льду */
  --r-tile: 14px;     /* картинка формы, иконка в строке */
  --r-field: 16px;    /* поля ввода, опции шторки */
  --r-btn: 18px;      /* большие кнопки, билеты */
  --r-card: 20px;     /* карточки и сгруппированные списки */
  --r-hero: 24px;     /* афиша, звено */
  --r-sheet: 28px;    /* верх шторки */
  --r-pill: 999px;    /* переключатели, чипсы, вторичные кнопки */
  --h-touch: 44px;    /* минимум касания */
  --h-field: 52px;
  --h-cta: 56px;      /* «Играю / Думаю / Не смогу», главная кнопка */
  --stripes: 5px;     /* две полосы по 5 px с зазором 3 px — шапка, афиша, звено */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Запасной вариант для webview без color-mix (вишнёвый фон) */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    --s1: #24181A; --s2: #2F2325; --line: #392D2E; --muted: #A2978F; --tabbar: #0C0507;
  }
}

/* ---------- Производные (добавлено при переносе) ---------- */
:root {
  --yes-bg: color-mix(in srgb, var(--yes) 16%, transparent);
  --maybe-bg: color-mix(in srgb, var(--maybe) 16%, transparent);
  --no-bg: color-mix(in srgb, var(--no) 16%, transparent);
  --res-bg: color-mix(in srgb, var(--res) 16%, transparent);
  --stripe-bg: color-mix(in srgb, var(--stripe) 16%, transparent);
  --stripe-line: color-mix(in srgb, var(--stripe) 45%, transparent);
  --stripes-img: linear-gradient(var(--stripe) 0 var(--stripes), transparent var(--stripes) calc(var(--stripes) + 3px),
                 var(--stripe) calc(var(--stripes) + 3px) calc(var(--stripes) * 2 + 3px));
}
@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    --yes-bg: rgba(91, 208, 143, .16); --maybe-bg: rgba(156, 195, 255, .16); --no-bg: rgba(255, 138, 122, .16);
    --res-bg: rgba(200, 168, 255, .16); --stripe-bg: rgba(64, 165, 18, .16); --stripe-line: rgba(64, 165, 18, .45);
  }
}

/* ---------- Совместимость со старыми именами из app.css ----------
   Перекрашивает текущие экраны сразу после подключения. */
:root {
  --ink: var(--bg);           /* старое имя фона */
  --board: var(--s1);
  --board-2: var(--s2);
  --puck: var(--text);        /* главная кнопка теперь кремовая */
  --puck-ink: var(--bg);
  --wait: var(--res);         /* Резерв. Переключатели во «Свитере» кремовые — см. таблицу */
  --body: var(--font-body);
  --num: var(--font-display);
}

/* =====================================================================
   Таблица компонентов: старый класс → как выглядит в «Свитере»
   ---------------------------------------------------------------------
   .btn-main         фон --text, текст --bg, 700/16, высота --h-cta, радиус --r-btn
   .btn-ghost        прозрачный, рамка inset 1px --line, 600/14, высота 44, --r-pill
   .btn-ghost.danger текст --no, рамка rgba(255,138,122,.45)
   .seg              подложка --s1, --r-pill, внутр. отступ 4; выбранный — фон --text, текст --bg
   .seg .cnt         кружок 22 px: на выбранном фон --bg/текст --text, иначе --s2
   .ev (лента)       «билет»: сетка 68px | 1fr, фон --s1, --r-btn; корешок --s2 с правой
                     пунктирной границей 2px --bg и двумя вырезами-кружками 18 px цвета --bg;
                     сегодня — корешок --text с текстом --bg; день 26/700 display
   .ev-time          display 19/700, tabular-nums
   .pill-*           высота 28, --r-pill, 600/13, значок 14 px; фон = цвет статуса × --tint
   .ev-head .clock   display 56/800, цвет --text (не акцент); афиша — карточка --s1, --r-hero,
                     сверху две полосы --stripe
   .facts            карточка --s1, --r-card; строки с иконкой 22 px слева, разделитель --line
   .signup           одна карточка --s1 на 4 колонки с вертикальными разделителями; число display 26/700;
                     «мест свободно» — --yes
   .choose button    высота --h-cta, --r-btn, фон --s1; выбранная — фон цвета статуса, текст *-ink
   .tabs             чипсы высотой 40, --r-pill; выбранная — фон --s2 + рамка 1.5px --text
   .pl               внутри карточки --s1 (отступ 4px 16px), строка 64, аватар 44, номер display 18 --muted
   .ava i            метка позиции: кружок 20, фон --bg, кольцо 2px --s1, 700/11
   .ava span         фоны инициалов --ava-1…5 вместо синих
   .fld input/select высота --h-field, --r-field, фон --s1 (в карточке --s2), рамка inset 1px --line;
                     фокус — inset 2px --text; ошибка — inset 1.5px --no и подпись 12 px --no
   .check            чип-переключатель высотой 48, --r-field; отмечен — фон --s2 + рамка 1.5px --text
   .switch           50×30; включён — дорожка --text, бегунок --bg; выключен — --s2 и --muted
   #tabbar           фон --tabbar, рамка сверху --line; активный пункт — подложка-пилюля 60×30 --s2
   .sheet            фон --s1, верх --r-sheet, «ручка» 40×5 --line, тень 0 -12px 40px rgba(0,0,0,.45);
                     .opt — фон --s2, --r-field, высота 52; выбранная — рамка 2px --text + радио-точка
   .rink             лёд --ice, линии --rink-red / --rink-blue, --r-btn сверху и 56px снизу;
                     звено — карточка --s1 с полосами цвета свитера и значком свитера 30 px
   .slot             аватар 48, кольцо 3px цвета свитера + ободок 1.5px --ice-ink; подпись — пилюля
                     фон --bg, текст --text, 600/12; пустое место — пунктир rgba(42,23,28,.4) и код позиции
   .lu-me            плашка: фон --stripe на 16%, рамка --stripe на 45%, значок свитера
   .logo             подложка --crest; без картинки — фон --s2, рамка --line, инициалы
   .uni-img          подложка --kit, --r-tile (без градиента)
   .tool             строка в сгруппированной карточке: иконка 40 в плитке --s2 цвета --stripe,
                     заголовок 600/16, подпись 13 --muted, шеврон --muted
   .banner           фон rgba(255,138,122,.14), текст --no, --r-field
   .pause-note       фон --s2, текст --text, --r-field
   #toast            пилюля 44, фон --text, текст --bg, значок-галочка, тень 0 8px 24px rgba(0,0,0,.35)
   :focus-visible    outline 2px --stripe, offset 2px
   ===================================================================== */