/* ============================================================================
   ЕДИНЫЙ ИСТОЧНИК ЗНАЧЕНИЙ ДИЗАЙН-СИСТЕМЫ partybox.games
   ----------------------------------------------------------------------------
   Здесь и ТОЛЬКО здесь лежат сами значения — цвета, радиусы, отступы, кегли.
   Файл подключается ПЕРВЫМ, до connection/style.css и до workshop/workshop.css:
   обе библиотеки берут значения отсюда и своих копий не держат.

   Поменял цвет тут — поменялось на всём сайте: и в клиенте игры, и в Мастерской.
   Никогда не дублируй эти значения в других файлах и не пиши цвет числом
   в разметке или в локальном <style> страницы.
   ============================================================================ */

/* ---------------------------------------------------------------- ТОКЕНЫ - */
:root {
  /* Палитра Anthropic (значения 1-в-1 из --swatch--* на claude.com) */
  --pb-gray-1000: #000000;
  --pb-gray-950:  #141413;
  --pb-gray-900:  #1a1918;
  --pb-gray-850:  #1f1e1d;
  --pb-gray-800:  #262624;
  --pb-gray-750:  #30302e;
  --pb-gray-700:  #3d3d3a;
  --pb-gray-650:  #4d4c48;
  --pb-gray-600:  #5e5d59;
  --pb-gray-550:  #73726c;
  --pb-gray-500:  #87867f;
  --pb-gray-450:  #9c9a92;
  --pb-gray-400:  #b0aea5;
  --pb-gray-350:  #c2c0b6;
  --pb-gray-300:  #d1cfc5;
  --pb-gray-200:  #e8e6dc;
  --pb-gray-150:  #f0eee6;
  --pb-gray-100:  #f5f4ed;
  --pb-gray-050:  #faf9f5;
  --pb-gray-000:  #ffffff;

  /* Фирменный кремовый — основной светлый цвет текста и заливок */
  /* Ступени кремового. Тон (27°) и насыщенность (63%) у всех трёх ОДИНАКОВЫЕ,
     меняется только светлота: под курсором чуть ярче базового, под нажатием
     чуть темнее. Сдвиг небольшой и симметричный — кнопка не должна менять
     характер цвета, только «подсвечиваться» и «утапливаться».
     Правило на будущее: новый оттенок кремового берём сдвигом ТОЛЬКО светлоты.
     Уводить насыщенность нельзя — прежний ховер #E7D6C7 ронял её с 63% до 40%,
     и кнопка читалась как посеревшая. */
  --pb-cream:       #F7E8DC;  /* базовый        (L 92%) */
  --pb-cream-hover: #FBF3ED;  /* под курсором   (L 96%) — чуть ярче */
  --pb-cream-dim:   #F3DDCB;  /* под нажатием   (L 88%) — чуть глубже */
  /* Disabled-состояние светлых кнопок (primary/is-selected) — НЕ через opacity.
     Кнопка светлая с тёмным текстом; общий .btn[disabled] гасит непрозрачностью
     весь элемент разом, а на тёмном фоне страницы это стягивает и фон, и текст
     к одному и тому же тёмно-серому — они сходятся и текст перестаёт читаться
     (контраст падал до 3.4:1 при минимуме 4.5:1). Здесь непрозрачность 100%,
     приглушается сам цвет: тот же тон 27°, ниже насыщенность и светлота —
     контраст с тёмным текстом остаётся 6.6:1. */
  --pb-cream-disabled: #B29680;

  /* Акцент: он же деструктив, он же «выбрано» — один цвет на всё */
  --pb-accent:        #FF3F4E;
  --pb-accent-strong: #E62F3D;  /* акцент в интерактиве */
  --pb-accent-soft:   rgba(255, 63, 78, 0.12);

  --pb-mineral:     #629987;  /* успех */
  --pb-sky:         #6a9bcc;  /* инфо */

  /* Семантика — тёмная тема (единственная) */
  --pb-bg:          var(--pb-gray-950);
  --pb-surface:     var(--pb-gray-850);
  --pb-surface-2:   var(--pb-gray-800);
  --pb-surface-3:   var(--pb-gray-750);
  /* Чуть темнее обычного --pb-surface — только для полей ввода, чтобы
     они читались как "провал" на фоне окружающих кнопок/карточек. */
  --pb-surface-input: var(--pb-gray-900);
  --pb-line:        var(--pb-gray-750);
  --pb-line-strong: var(--pb-gray-700);

  --pb-text:        var(--pb-cream);
  --pb-text-muted:  var(--pb-gray-400);
  --pb-text-faint:  var(--pb-gray-500);
  --pb-on-accent:   #ffffff;   /* на красном — чистый белый, для контраста */
  --pb-on-light:    var(--pb-gray-950);

  /* Радиусы. Подобраны по пропорции радиус/размер элемента с claude.com
     (карточка ~430px — радиус ~24-28px; кнопка ~54px высотой — радиус
     ~16px, то есть около 30% высоты), а не по абсолютным пиксельным
     значениям — на маленьких элементах прежняя шкала 4/8/12/16/24
     выглядела заметно "квадратнее" референса. */
  --pb-r-xs:   6px;
  --pb-r-sm:  12px;
  --pb-r-md:  16px;
  --pb-r-lg:  20px;
  --pb-r-xl:  28px;
  --pb-r-pill: 999px;

  /* Отступы (шаг 4px) */
  --pb-s-1:  4px;
  --pb-s-2:  8px;
  --pb-s-3: 12px;
  --pb-s-4: 16px;
  --pb-s-5: 20px;
  --pb-s-6: 24px;
  --pb-s-8: 32px;
  --pb-s-10: 40px;
  --pb-s-12: 48px;
  --pb-s-16: 64px;

  /* Типографика. Фолбэки нужны для CJK — в Bebas нет иероглифов и хангыля. */
  --pb-font: 'Bebas Neue Pro', 'Noto Sans', -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Arial, sans-serif;
  --pb-font-display: 'Bebas Neue', 'Bebas Neue Pro', 'Noto Sans', Impact,
                     Arial, sans-serif;
  --pb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Шкала кеглей крупнее «системной»: Bebas узкий и с высокой линией шрифта,
     на 15px он читается заметно мельче обычного гротеска. */
  --pb-fs-xs:  14px;
  --pb-fs-sm:  16px;
  --pb-fs-md:  18px;   /* базовый размер интерфейса */
  --pb-fs-lg:  21px;
  --pb-fs-xl:  25px;
  --pb-fs-2xl: 30px;
  --pb-fs-3xl: 38px;
  --pb-fs-4xl: 48px;

  /* Интерлиньяж плотнее: у Bebas почти нет выносных элементов */
  --pb-lh-tight: 1.05;
  --pb-lh-snug:  1.25;
  --pb-lh-body:  1.4;

  /* Оптическая компенсация вертикального центрирования текста в пилюлях/
     кнопках фиксированной высоты. Флекс/паддинг центрируют line-box шрифта
     (ascent+descent из метрик файла), а не реальные "чернила" глифов —
     у обоих начертаний Bebas эти метрики сильно несимметричны, поэтому
     текст в кнопке визуально "тонет" (Pro) или "всплывает" (Neue капс)
     относительно геометрического центра. Замерено через Canvas
     actualBoundingBoxAscent/Descent на живых начертаниях (100px, средние
     по представительным строкам):
       Bebas Neue Pro,  "Код комнаты"/"Скачать для Windows" → +0.045em вниз
       Bebas Neue,      капс ("ТУРНИРНАЯ ТАБЛИЦА", "КОД")    → −0.053em вверх
     Не абсолютная величина на конкретный шрифт-размер — а доля em,
     поэтому масштабируется вместе с font-size. */
  --pb-optical-nudge: 0.045em;          /* --pb-font (Bebas Neue Pro) — сдвиг ВВЕРХ на эту величину */
  --pb-optical-nudge-display: 0.053em;  /* --pb-font-display (Bebas Neue, капс) — сдвиг ВНИЗ на эту величину */

  /* Границы и тени */
  --pb-bw: 1px;
  --pb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --pb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.34);
  --pb-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.42);

  /* Движение */
  --pb-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --pb-dur: 0.16s;

  /* Габариты элементов управления. Три ступени подняты на одинаковые +4px,
     чтобы пропорция между обычной/маленькой/крупной кнопкой не съехала. */
  --pb-control-h: 52px;
  --pb-control-h-sm: 40px;
  --pb-control-h-lg: 68px;

  /* Служебные (используются разметкой игры) */
  --pb-bottom-bar-height: 76px;
  --pb-bottom-offset: 0px;
  --pb-container-w: 380px;
}