/* Токены. Значения живут здесь и только здесь.
 *
 * Взяты из макета «Tripbox Web», но **сведены в шкалы**. В макете 24 кегля,
 * 20 отступов, 11 радиусов и 11 теней — обычное дело для сгенерированной
 * разметки, где каждое значение подобрано на месте. Скопировать это построчно
 * значит получить дизайн-систему, в которой нечего менять: «почти такой же
 * серый» встретится в четырёх местах, и ни один нельзя будет поправить.
 * Разница на экране — доли пикселя, разница в поддержке — принципиальная.
 *
 * Тёмной темы нет намеренно (решение владельца, 12.08.2026): сейчас делается
 * ровно светлый макет. Но ни одного значения в разметке — поэтому тёмная тема,
 * когда понадобится, станет одним блоком переопределений, а не пересборкой
 * вёрстки.
 */

:root {
  /* --- Бумага. Пять поверхностей и четыре линии, больше не нужно. --- */
  --paper: #f5f6f7;
  --card: #ffffff;
  --field: #fbfbfc;
  --sunken: #f7f8f9;
  --fill: #f1f2f4;
  --fill-hover: #e7e9ec;

  --line: #edeff1;
  --line-soft: #f2f3f5;
  --edge: #e4e6e9;
  --edge-card: #e9ebee;
  --edge-dash: #d5d9de;
  --faint: #c9ced4;

  /* --- Тушь: пять ступеней и ни одной сверх. --- */
  --ink: #17181a;
  --ink-2: #3b4148;
  --ink-3: #6b7079;
  --ink-4: #8a9099;
  --ink-5: #a6acb4;

  /* --- Тёмная колонка.
   *
   * Это **не тёмная тема, а материал боковой колонки**: он тёмный и в светлом
   * интерфейсе. Отдельный набор, потому что смешивать его с бумажным значило бы
   * получить «серый, который иногда светлый». */
  --rail: #17181a;
  --rail-up: #212326;
  --rail-card: #1e2124;
  --rail-line: #26282b;
  --rail-line-2: #2e3135;
  --rail-ink: #f4f5f6;
  --rail-ink-2: #c5c9cf;
  --rail-ink-3: #9aa1a9;
  --rail-ink-4: #7c838c;
  --rail-ink-5: #6e757d;
  --rail-dot: #4a4e54;

  /* --- Акцент. Один на всё приложение.
   *
   * Пять производных вместо поля у поездки: смена акцента — правка этих пяти
   * строк, и ни одна из них в разметку значением не попадает. Готовые наборы
   * из макета на замену: терракота #b4552f, зелёный #1f6e52, фиолетовый #7a4bc4. */
  --accent: #2b5ce6;
  --accent-hover: #2450cc;
  --accent-soft: #f1f4fd;
  --accent-border: #c9d3f2;
  --accent-tint: #eef2fe;

  /* --- Время на карте: одно семейство акцента в три ступени.
   *
   * Раньше фазу перегона несли тон серого и толщина. Тон серого проигрывал
   * подложке, а «пройдено / идёт / предстоит» — главное, что карта сообщает
   * о живой поездке. Теперь это три ступени одного синего: прошлое выцвело,
   * текущее — сам акцент, будущее — насыщенный средний.
   *
   * Появляются **только на живой поездке**: у завершённой и у ненаступившей
   * фаз нет, и линии остаются графитовыми (`--ink-2`). --- */
  --time-past: #9fb0d8;
  --time-next: #4a6ab5;

  /* --- Виды транспорта: цвет заливки знака на линии.
   *
   * Отдельный набор, а не переиспользование состояний: «беда» терракотой нужна
   * проекту целиком, и занимать её паромом нельзя. Синего здесь нет намеренно —
   * он принадлежит времени, поэтому перелёт берёт графит: его точечная дуга
   * и так ни с чем не путается.
   *
   * Вода — единственный новый цвет во всей затее. Земля и рельсы взяты
   * из состояний, у них тон совпадает.
   *
   * Воздух — сине-серый, а не графит: графитом залит пин города, и чёрный знак
   * в 20 px рядом с чёрным пином в 28 читался ещё одним городом. Проверено
   * на живой карте, на образце этого видно не было. --- */
  --type-road: #9a7524;
  --type-rail: #3e6b48;
  --type-air: #3f5878;
  --type-water: #2a6b78;

  /* --- Состояния. Цвет обозначает состояние, а не вид: тип несут значок
   * и подпись. --- */
  --ok-bg: #edf3ee;
  --ok-ink: #3e6b48;
  --ok-edge: #d6e4d8;
  --warn-bg: #fdf4e3;
  --warn-ink: #9a7524;
  --warn-edge: #f3e2c0;
  --warn-deep: #5e4a1c;
  --alarm: #b4552f;
  /* Тревога получила ту же тройку, что и предупреждение: до сих пор у неё был
   * один тон, и кнопка «Стоп» на нём не строилась — фон приходилось брать
   * у янтаря, отчего остановка выглядела предупреждением. */
  --alarm-bg: #f8ece6;
  --alarm-edge: #ecd5cb;
  --alarm-deep: #8f3f1c;

  /* Ступень «устарело»: ярче янтаря подписи, потому что живёт точкой в 7 px.
   * `--warn-ink` на таком размере не читается вовсе — он рассчитан на текст. */
  --stale: #d9a824;

  /* --- Полоса-справка. Не бумага и не карточка: горизонтальная лента,
   * которая сообщает условия работы экрана и ничего не содержит.
   * Отдельным тоном, потому что на бумаге она сливается, а на карточке
   * читается как ещё одна карточка. --- */
  --band: #eef0f3;

  /* --- Гарнитуры. Две: тело и то, что читают вслух. --- */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Кегли: одиннадцать ступеней. --- */
  --t-10: 10px;
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-17: 17px;
  --t-19: 19px;
  --t-22: 22px;
  --t-27: 27px;

  /* Трекинг: у капслок-подписей широкий, у крупных заголовков отрицательный. */
  --track-caps: 0.14em;
  --track-caps-wide: 0.16em;
  --track-tight: -0.02em;

  /* --- Отступы: десять ступеней плюс волосяной. --- */
  /* Зазор внутри строки — между названием и его подписью. Меньше первой ступени
   * намеренно: это не отступ между блоками, а межстрочное дыхание. */
  --hair: 3px;
  --s1: 4px;
  --s2: 6px;
  --s3: 8px;
  --s4: 10px;
  --s5: 12px;
  --s6: 14px;
  --s7: 16px;
  --s8: 20px;
  --s9: 26px;
  --s10: 40px;

  /* --- Радиусы: шесть и капсула. --- */
  --r1: 6px;
  --r2: 8px;
  --r3: 10px;
  --r4: 12px;
  --r5: 14px;
  --r6: 16px;
  --r-pill: 999px;

  /* --- Тени: пять глубин. Больше — и они перестают отличаться друг от друга. --- */
  --sh-row: 0 1px 2px rgba(23, 24, 26, 0.12);
  --sh-card: 0 6px 18px -12px rgba(23, 24, 26, 0.5);
  --sh-float: 0 10px 26px -16px rgba(23, 24, 26, 0.5);
  --sh-panel: 0 20px 50px -22px rgba(23, 24, 26, 0.6);
  /* Та же тень, отражённая вверх, — для панели, прижатой к нижнему краю.
     `--sh-panel` направлена вниз, и у календаря она уходила в обрезанные
     `overflow: hidden` двадцать шесть пикселей под ним: панель читалась
     приклеенной. Значения те же, чтобы вес совпадал с «Выбранным на карте». */
  --sh-panel-up: 0 -20px 50px -22px rgba(23, 24, 26, 0.6);
  --sh-modal: 0 40px 90px -30px rgba(20, 22, 25, 0.7);
  /* Отрыв метки от подложки карты. Своя ступень, а не `--sh-row`: та рассчитана
   * на строку в списке, где под ней бумага, а здесь под меткой чужая карта
   * со своими линиями, и тень в 12% на ней не читается вовсе. */
  --sh-mark: 0 1px 3px rgba(23, 24, 26, 0.22);

  --scrim: rgba(20, 22, 25, 0.45);
  /* Вуаль под кадром во весь экран. Отдельным токеном от `--scrim`: под ящиком
   * страница обязана просвечивать — по ней возвращаются, — а рядом
   * с фотографией она мешает, и полупрозрачная подложка читается
   * как «страница ещё здесь». */
  --scrim-deep: rgba(12, 13, 15, 0.88);

  /* --- Каркас. --- */
  /* Высота управления в верхней панели и рядом с полями. Повторяется у кнопки,
   * поля поиска и переключателя поездок — значит это токен, а не число. */
  --control: 34px;
  --topbar: 64px;
  --rail-width: 232px;
  --rail-mini: 64px;
  --panel-width: 400px;
  /* Минимум макета. Ниже — заглушка: журнал живёт на компьютере,
   * в дороге приложение. */
  --min-width: 1280px;

  /* --- Движение. Макет не анимирован вовсе, и это верно для плотного
   * интерфейса: движется отзыв на наведение и фокус, появление панелей —
   * и одно кольцо на карте, у которого своя причина (см. ниже). --- */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --dur-fast: 0.12s;
  --dur: 0.18s;

  /* Единственная длительность **непрерывного** движения: кольцо у выбранной
   * точки карты. Отдельной ступенью, а не кратным `--dur`: тот отмеряет
   * отклик на действие, а эта задаёт темп покоя, и совпадение их значений
   * было бы случайным. Взята под удар сердца в покое. */
  --dur-pulse: 1.8s;
}