/* Токены каталога клубов — светлая тема из дизайна ALL-IN Mobile / ALL-IN Web.

   Почему НЕ /shared/styles/tokens.css. Общий файл держит палитру арены — она
   тёмная (--bg:#050410, --text:#F4F2FF) и построена вокруг стекла на сукне.
   Каталог светлый: бумага, тонкие линии, один акцент. Имена переменных при
   этом совпадают (--bg, --muted, --dim, --gold) при РАЗНЫХ значениях, поэтому
   подключить оба файла нельзя — второй молча переопределил бы первый. Тот же
   выбор сделал лендинг (apps/landing) и по той же причине.

   Значения — ровно из :root дизайна, без «улучшений»: сверять рендер с
   макетом можно только когда числа те же. */

:root {
  /* ── бумага и чернила ─────────────────────────────────────────────────── */
  --bg: #F5F5F2;
  --surface: #FFFFFF;
  --surface2: #EFEFEC;
  --ink: #15141A;
  --muted: #6C6A78;
  --dim: #9C9AA8;
  --line: #E5E4DF;
  --line2: #D9D8D2;

  /* ── акценты ──────────────────────────────────────────────────────────── */
  --acc: #0E9E86;          /* «занять место», всё живое */
  --acc-ink: #FFFFFF;
  --acc-soft: #E3F4F0;
  --acc-deep: #0B6E5D;     /* акцент на светлой подложке — контраст текста */
  --violet: #5B49E8;       /* друзья и только они */
  --violet-soft: #ECE9FE;
  --violet-ink: #4A38C9;
  --gold: #B4801A;         /* рейтинг и оценки */
  --gold-soft: #FBF0DA;
  --danger: #D7263D;

  /* ── тёмные подложки (вход, шапка турнира, панель рейтинга) ───────────── */
  --night: #100F17;
  --night2: #1D1B33;
  --night3: #312A55;
  --mint: #2DE2C5;         /* акцент НА тёмном: на светлом он не читается */

  /* ── тени и стекло ────────────────────────────────────────────────────── */
  --shadow-s: 0 1px 2px rgba(20, 19, 26, .06);
  --shadow: 0 2px 4px rgba(20, 19, 26, .04), 0 10px 30px rgba(20, 19, 26, .07);
  --shadow-up: 0 -14px 40px rgba(20, 19, 26, .16);
  --glass: rgba(255, 255, 255, .74);
  --glass-wide: rgba(255, 255, 255, .82); /* десктопная шапка чуть плотнее */
  --glass-brd: rgba(20, 19, 26, .10);

  /* Навигация — белое стекло, как в макете: таблетка телефона и шапка веба
     светлее бумаги, а не темнее её.

     Отделяет их от страницы не цвет, а объём: мягкая тень под панелью и
     блик-фаска по верхней кромке (--nav-gloss). Серая подложка на полтона
     темнее бумаги, которая стояла здесь до сверки с ТЗ, отделяла не хуже, но
     съедала активный раздел: мятная плашка на сером почти не отличалась от
     соседних кнопок, и указатель приходилось сжимать до капсулы под иконкой.
     На белом плашка читается целиком — ровно так, как нарисовано.

     Прозрачность .92, а не .8: таблетка часто стоит над тёмной обложкой клуба,
     и на .8 она перестаёт быть белой — сереет вместе с тем, что под ней. */
  --nav: rgba(255, 255, 255, .92);
  --nav-brd: rgba(20, 19, 26, .07);
  --nav-gloss: inset 0 1px 0 rgba(255, 255, 255, .95);
  --nav-shadow: 0 2px 6px rgba(12, 12, 20, .06), 0 16px 40px rgba(12, 12, 20, .18);

  /* ── шрифты ───────────────────────────────────────────────────────────── */
  --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-head: 'Unbounded', 'Manrope', sans-serif;
  --f-num: 'Rajdhani', 'Manrope', sans-serif;

  /* ── скругления ───────────────────────────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 20px;
  --r-2xl: 26px;

  /* ── раскладка ────────────────────────────────────────────────────────── */
  --tabbar-h: 60px;        /* рост «таблетки» навигации — посчитан в shell.css */
  --header-h: 68px;        /* липкая шапка десктопа */
  --content-max: 1400px;   /* ширина контента в вебе — из ALL-IN Web.dc.html */

  --ease: cubic-bezier(.32, .72, 0, 1);
}