:root {
    --ui-color-bg: #0b0d10;
    --ui-color-surface: #16181c;
    --ui-color-surface-2: #1b1e23;
    --ui-color-surface-3: #272729;
    /* Плотная заливка кнопок. Ставится точечно: массовая замена полупрозрачной
       белой (rgba(255,255,255,.06)) на неё ломает ховеры, разделители и подложки
       иконок — те осветляют фон под собой, а не заливают его. */
    --ui-color-control: #14171b;
    --ui-color-border: rgba(255, 255, 255, 0.08);
    --ui-color-border-strong: rgba(255, 255, 255, 0.14);
    --ui-color-text: #ffffff;
    --ui-color-text-muted: #9aa0a6;
    --ui-color-text-soft: #dcdde0;
    --ui-color-accent: #3282d7;
    --ui-color-accent-hover: #2266b0;
    --ui-color-accent-soft: rgba(50, 130, 215, 0.16);
    --ui-color-success: #3d9966;
    --ui-color-success-hover: #2f7f53;
    --ui-color-danger: #dc4e41;
    --ui-color-danger-hover: #bd3c31;
    --ui-color-warning: #f59e0b;
    --ui-color-info: #3b82f6;
    --ui-color-overlay: rgba(0, 0, 0, 0.58);

    --ui-radius-sm: 0.75rem;
    --ui-radius-md: 1rem;
    --ui-radius-lg: 1.375rem;
    --ui-radius-xl: 1.5rem;
    --ui-radius-pill: 62.4375rem;

    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.25rem;
    --ui-space-6: 1.5rem;

    --ui-shadow-sheet: 0 -1.125rem 3rem rgba(0, 0, 0, 0.32);
    --ui-shadow-modal: 0 1.125rem 3rem rgba(0, 0, 0, 0.38);
    --ui-duration-fast: 160ms;
    --ui-duration-base: 220ms;
    --ui-duration-slow: 320ms;
    --ui-ease-standard: cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Движение шторок. Длительность выбирается по фазе жеста: открытие чуть
       длиннее закрытия. Всё, что двигается вместе со шторкой (оверлей, нижнее
       меню), обязано брать эти же значения, иначе один жест распадается на
       несколько несинхронных движений. */
    --ui-sheet-enter-duration: 460ms;
    --ui-sheet-exit-duration: 360ms;
    /* Кривая, наоборот, выбирается по направлению движения самого элемента, а
       не по фазе. Меню уходит вниз ровно тогда, когда шторка приходит снизу,
       поэтому одна и та же фаза требует разных кривых для разных элементов.
       На экран — торможение к финальной позиции. */
    --ui-sheet-enter-ease: var(--ui-ease-standard);
    /* За экран — разгон. Кривая с мгновенным стартом здесь читается как рывок:
       уходящий элемент за первую десятую времени проскакивает треть пути, а
       остаток медленно доползает. Финальная скорость не мешает — она уже за
       краем экрана. */
    --ui-sheet-exit-ease: cubic-bezier(0.4, 0, 1, 1);

    --ui-z-dropdown: 900;
    --ui-z-overlay: 9990;
    --ui-z-sheet: 10000;
    --ui-z-toast: 10020;

    /* Ширина колонки контента. По ней равняется всё, что обязано совпасть с её
       краями: верхняя панель, пилюля нижнего меню, шторки. Значение одно на
       весь проект — раньше оно было продублировано числом по семи файлам и
       расходилось после каждой правки. Читаемость текста от неё не зависит:
       чат и сторис держат свою, более узкую меру. */
    --app-column-width: 37.5rem;
}

/* Десктоп получает колонку шире мобильной — на её ширине в ряд помещаются две
   карточки. Соседство с боковым меню разбирается в bottom-menu.css: поля по
   бокам считаются от этой величины, и при ней меню с подписями влезает не в
   каждое окно. */
html.web-desktop {
    --app-column-width: 45rem;

    /* Шторка на мобильной проезжает всю высоту экрана, и её полсекунды уходят
       на дорогу. Десктопная модалка никуда не едет — она проявляется на месте,
       и та же длительность читается как задержка перед ответом.
       Правится здесь, а не в переходах bottom-panel.css: на эти же токены
       завязаны подложка, снятие visibility и страховочный таймер в ui.js
       (он читает их с html — потому переопределение и висит на нём, а не на
       body). Уменьшить одну строку перехода значит рассинхронизировать
       остальные. */
    --ui-sheet-enter-duration: 260ms;
    --ui-sheet-exit-duration: 200ms;
}