/* tokens.css — единственный источник цветов, шрифтов, размеров и движения.
 *
 * Палитра — направление B лендинга Chessnut (../chessnut-landing, ревью
 * 19.09.2026): снята пипеткой с официальной съёмки, а не подобрана.
 * Предмет ахроматичен — светлая клетка, тёмная клетка, графит корпуса,
 * — и единственная хроматика в нём — синий свет индикатора под фигурой.
 *
 * Здесь та же система в кинорежиме: страница — тёмный зал, доска стоит
 * в луче прожектора. Поэтому фон — чистый чёрный (как черное поле кадра
 * на съёмке Chessnut), а светлая клетка становится цветом текста.
 */

@import "./assets/fonts/fonts.css";

:root {
  /* ------------------------------------------------------------------ цвет */
  --square-light: #FCFCFC;
  --square-dark:  #242424;
  --frame:        #3C3C3C;
  --void:         #000000;

  /* Синий — цвет состояния, а не бренда: текущая сцена на рельсе, выбранный
   * комплект, фокус. На холсте он же — свет индикатора под фигурой. */
  --signal:      #4678B4;
  --signal-core: #7FB4EE;

  /* Красный Kaspi — только на кнопках, которые уводят на площадку. Белым
   * по #F14635 контраст 3,71:1, поэтому кегль этих кнопок не меньше 19 px
   * жирным (крупный текст по WCAG) — как в лендинге «ребёнок». */
  /* Красный Kaspi глубже фирменного #F14635: тот на чёрном кислотный, и белая
     надпись на нём 3,7:1 (ниже нормы 4,5). Этот 5,2:1 и всё ещё читается как Kaspi. */
  --kaspi:     #C8372D;
  --kaspi-ink: #FFFFFF;

  --fg:   var(--square-light);
  --fg-2: color-mix(in srgb, var(--square-light) 68%, var(--void));  /* 9.9:1 */
  --fg-3: color-mix(in srgb, var(--square-light) 50%, var(--void));  /* 5.2:1 */
  --line: color-mix(in srgb, var(--square-light) 16%, transparent);
  --wash: color-mix(in srgb, var(--square-light) 6%, transparent);
  --scrim: color-mix(in srgb, var(--void) 78%, transparent);

  /* --------------------------------------------------------- типографика
   *
   * Geologica с осью SHRP, закреплённой на 100: срезанные «фрезерованные»
   * терминалы — под доской стоит механика, и шрифт говорит о том же.
   * Golos Text нарисован от кириллицы — длинный русский текст не выглядит
   * переводным.
   */
  --font-display: "Geologica", "Geologica Fallback", Arial, system-ui, sans-serif;
  --font-text: "Golos", "Golos Fallback", Arial, system-ui, sans-serif;

  --fs-display:  clamp(3rem, 1.4rem + 6.4vw, 7.75rem);        /* 48 → 124 */
  --fs-finale:   clamp(3.5rem, 1.2rem + 9vw, 10rem);
  --fs-h2:       clamp(2.125rem, 1.45rem + 2.7vw, 4.25rem);   /* 34 → 68 */
  --fs-h3:       clamp(1.3rem, 1.15rem + 0.6vw, 1.75rem);
  --fs-statement: clamp(2rem, 1.1rem + 3.6vw, 5rem);
  --fs-lead:     clamp(1.125rem, 1.02rem + 0.42vw, 1.4rem);
  --fs-body:     clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
  --fs-small:    0.9375rem;
  --fs-fine:     0.8125rem;
  --fs-stat:     clamp(1.9rem, 1.5rem + 1.4vw, 3rem);

  --lh-display: 0.94;
  --lh-heading: 1.02;
  --lh-body: 1.55;

  --tracking-display: -0.04em;
  --tracking-heading: -0.03em;

  --weight-text: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-heading: 580;
  --weight-display: 640;

  --measure: 32rem;

  /* --------------------------------------------------------- сетка и ритм */
  --gutter: clamp(1rem, 0.4rem + 3vw, 5.5rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4.5rem;
  --space-12: 7rem;

  /* --------------------------------------------------------------- формы
   * Ноль на структурном, 2 px на интерактивном: радиус говорит «можно нажать». */
  --radius: 0;
  --radius-control: 2px;
  --hairline: 1px;
  --tap: 48px;

  /* ------------------------------------------------------------ движение
   * Метафора — ход: по прямой, без отскоков. Сцены на холсте ведёт прокрутка;
   * здесь — только ответ интерфейса на действие. */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 700ms;

  --z-stage: 0;
  --z-content: 2;
  --z-rail: 20;
  --z-bar: 30;
  --z-loader: 50;
}

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

.tnum { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }