/* ==========================================================================
   ТОКЕНЫ — design/mockups/00-ui-kit-final.png, docs/redesign.md §2

   Один источник значений для всего интерфейса.

   ИМЕНА. Основные имена — смысловые и без префикса: --bg-main, --bg-surface,
   --color-success… Старые --k-* остались АЛИАСАМИ на них (ниже), потому что
   на них стоят шесть файлов и четыре проверки, и переименовать всё одним
   коммитом значит не проверить ни одного экрана. Новое пишется новыми
   именами, старое переезжает по ходу правок.

   Правило шкалы: за её пределы не выходим. В макете 13 пикселей, а в шкале
   12 — ставим 12. Разница в пару пикселей это след генерации, а не новый
   размер. Новый размер заводится только правкой этого файла и docs/redesign.md.
   ========================================================================== */

:root {
  /* ====================================================== ЦВЕТ: основа */
  /*
   * Десять значений. Больше нет, и подбирать оттенок «чуть темнее» нельзя:
   * приподнятая поверхность уже есть, а одиннадцатого цвета в ките нет.
   */
  --bg-main: #0a1216;       /* главный фон */
  --bg-surface: #13212a;    /* карточки, панели, плашки */
  --bg-elevated: #1d2d35;   /* приподнятое, активное */
  --table-felt: #103d32;    /* сукно стола */
  --text-primary: #f2f7f5;
  --text-secondary: #a9bcc0;
  --border-color: #23343b;
  --color-success: #137a43; /* единственный акцент */
  --color-danger: #c93632;  /* сброс, ошибки, красная масть */
  --color-muted: #41545c;   /* выключено */

  /*
   * ЗЕЛЁНЫЙ ТЕПЕРЬ ТЁМНЫЙ. Был #2EE08C — яркий, почти неоновый; на нём
   * держался весь «акцент», и он же делал экран похожим на витрину. #137A43
   * спокойнее, но за спокойствие платят контрастом, и платят в двух местах
   * сразу — поэтому ниже два правила, а не одно пожелание.
   *
   * 1. Текст НА зелёной заливке — только светлый: 4.98 против 3.50 у тёмного.
   * 2. Зелёный КАК ЦВЕТ ТЕКСТА мелкого размера — нельзя: 3.50 на фоне и 3.04
   *    на поверхности, а мелкому тексту нужно 4.5.
   *
   * Отсюда: зелёный живёт заливкой, кольцом, полосой и точкой — тем, чему
   * хватает 3:1, — а смысл «успех, ход, верно» несёт светлый текст на зелёном.
   * Цифры считает npm run contrast, и он падает, если правило нарушено.
   */
  --text-on-success: var(--text-primary);

  /*
   * СУКНО. Контур --border-color на сукне не виден совсем: 1.07. Поверхность
   * на сукне видна едва: 1.36. Поэтому всё, что лежит ПОВЕРХ сукна, обводится
   * не разделителем, а одним из этих двух токенов — других подходящих в
   * палитре нет (npm run contrast перечисляет кандидатов).
   */
  --on-felt-line: var(--text-secondary);        /* 6.13 к сукну — обычная плашка */
  --on-felt-accent-line: var(--text-primary);   /* 11.18 к сукну и 4.98 к зелёному */

  /*
   * Затемнение под шторкой. Полупрозрачность тут обязательна — сквозь неё
   * видно, что экран не ушёл, — но берётся она из главного фона, а не из
   * случайной чёрной с альфой.
   */
  --scrim: color-mix(in srgb, var(--bg-main) 72%, transparent);

  /* Игровой слой: у каждой игры своё сукно, лицо карты общее. */
  --felt-durak: #103a44;
  /* Сукно UNOQ. Тот же цвет, что у значка игры в хабе: одна игра — один цвет. */
  --felt-colors: #1b2a4a;
  --felt-chess: #2c3d3a;
  --card-face: #f7f5ef;
  --suit-black: #171b1c;
  /*
   * Номиналы летящих фишек — тоже игровой арт. Три цвета, чтобы по экрану
   * летели разные фишки, а не один и тот же кружок.
   */
  --chip-1: #d9a93a;
  --chip-2: #d23c4b;
  --chip-3: #2c6fd1;

  /* ------------------------------------------- АЛИАСЫ старых имён --k-* */
  /*
   * Ни одного своего значения: каждый алиас смотрит в токен выше. Правка
   * цвета делается в одном месте, а экраны переезжают на новые имена по
   * одному. Девять из десяти цветов совпали со старыми --k-* до байта —
   * поменялся только зелёный.
   */
  --k-bg: var(--bg-main);
  --k-surface: var(--bg-surface);
  --k-elevated: var(--bg-elevated);
  --k-text: var(--text-primary);
  --k-text-2: var(--text-secondary);
  --k-divider: var(--border-color);
  --k-disabled: var(--color-muted);
  --k-green: var(--color-success);
  --k-felt-poker: var(--table-felt);
  --k-card-face: var(--card-face);
  --k-suit-red: var(--color-danger);
  --k-suit-black: var(--suit-black);

  /* Текст на зелёной заливке — СВЕТЛЫЙ. Тёмный на ней запрещён: 3.50. */
  --k-on-green: var(--text-on-success);
  /* Нажатая зелёная кнопка — тот же зелёный, притушенный. */
  --k-green-pressed: color-mix(in srgb, var(--color-success) 82%, #000);
  /* Подложка нажатия на вторичной и призрачной кнопке. */
  --k-press: color-mix(in srgb, var(--text-primary) 8%, transparent);

  /* ---------------------------------------------------------- отступы */
  /* Кит, раздел 3. Шкала целиком — других значений не бывает. */
  --k-s4: 4px;
  --k-s8: 8px;
  --k-s12: 12px;
  --k-s16: 16px;
  --k-s24: 24px;
  --k-s32: 32px;
  --k-s48: 48px;

  /* Как шкала применяется — тоже из кита, чтобы не решать заново на каждом экране. */
  --k-screen-x: var(--k-s16);      /* поля экрана по горизонтали */
  --k-section-gap: var(--k-s24);   /* между разделами */
  --k-row-gap: var(--k-s16);       /* между строками */
  --k-pad-y: var(--k-s12);         /* внутренние поля компонента */
  --k-pad-x: var(--k-s16);
  --k-sticky-top: var(--k-s16);    /* липкая зона действий сверху */
  --k-sticky-bottom: calc(var(--k-s16) + env(safe-area-inset-bottom, 0px));

  /*
   * Высота любого органа управления. 48 — из той же шкалы, и палец в неё
   * попадает: иконка 24 плюс по 12 полей с каждой стороны.
   */
  --k-control-h: var(--k-s48);
  --k-icon: var(--k-s24);
  /*
   * Зона нажатия. Меньше этого палец не попадает — порог один на все
   * интерактивные компоненты, и его стережёт npm run kit.
   */
  --k-tap: 44px;

  /*
   * Размеры аватара — кит, раздел 10. Своя шкала, не шкала отступов: 40 в
   * ней есть, а среди отступов его нет и быть не должно.
   */
  --k-av-lg: 48px;
  --k-av-md: 40px;
  --k-av-sm: 32px;
  --k-av-xs: 24px;

  /* -------------------------------------------------------- скругления */
  /* Кит, раздел 4. Три значения — и два исключения, которые не размер. */
  --k-r-sm: 6px;
  --k-r-md: 8px;
  --k-r-lg: 12px;
  --k-r-sheet: 20px;               /* только верх шторки */
  /*
   * «Совсем круглое» — тумблер, бегунок, аватар. Это не четвёртое значение
   * шкалы, а отказ от размера вовсе: скругление всегда в половину высоты,
   * какой бы она ни была.
   */
  --k-r-pill: 999px;

  /* -------------------------------------------------------- типографика */
  /*
   * ШРИФТ: системный стек, Inter первым. Ни одного запроса в сеть.
   *
   * Mini App грузится на плохом мобильном интернете, и шрифт из сети — это
   * и задержка первого кадра, и ещё одна точка отказа; положить файлы рядом
   * — это десятки килобайт на каждую холодную загрузку. Системный стек не
   * стоит ни одного байта и ни одного запроса, а на телефонах, где живёт
   * Telegram, это SF Pro и Roboto — шрифты того же сложения, что Inter, и
   * на 12–16 пикселях разницы не видно.
   *
   * Inter стоит первым: у кого он установлен, тот его и получит. Решение
   * обратимо одной строкой — положить woff2 в miniapp/ и добавить @font-face.
   */
  --k-font: Inter, -apple-system, 'SF Pro Text', 'SF Pro Display',
    'Helvetica Neue', 'Segoe UI', Roboto, system-ui, Arial, sans-serif;

  /*
   * СЕМЬ начертаний, кит раздел 2. Восьмого не заводить.
   *
   * Названных ролей в ките восемь, но «Game Numeric» (20/600/28) — это тот
   * же размер и тот же вес, что «Section Title»: роли разные, начертание
   * одно. Поэтому различимых семь, как и сказано в docs/redesign.md §2.
   */
  --k-fs-title: 32px;      --k-lh-title: 40px;      /* заголовок экрана */
  --k-fs-num: 24px;        --k-lh-num: 32px;        /* крупное число */
  --k-fs-section: 20px;    --k-lh-section: 28px;    /* заголовок раздела, игровое число */
  --k-fs-component: 16px;  --k-lh-component: 24px;  /* заголовок компонента */
  --k-fs-body: 16px;       --k-lh-body: 24px;       /* текст */
  --k-fs-secondary: 14px;  --k-lh-secondary: 20px;  /* вторичный текст */
  --k-fs-caption: 12px;    --k-lh-caption: 16px;    /* подпись */

  --k-w-regular: 400;
  --k-w-semibold: 600;

  /* ------------------------------------------------------------ прочее */
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k-fast: 0.14s;
  /*
   * Кит, раздел 22: ни градиентов, ни свечения, ни стекла, ни объёмных
   * теней. Отделить всплывающее от страницы — работа плоской линии, а не
   * тени в 32 пикселя размытия: тень рисует объём, которого на плоском
   * экране нет. Поэтому у шторки контур, а токена тени больше нет.
   */
  --k-sheet-line: 1px solid var(--border-color);

  color-scheme: dark;
}