/*
 * Bammat — дизайн-токены.
 *
 * ОДИН ИСТОЧНИК ДЛЯ ВСЕГО ВИДИМОГО: витрина, касса, кабинет, рабочие
 * экраны сборки (ops.css). Кнопка не может разойтись с кнопкой, пока
 * обе берут размеры и цвета отсюда.
 *
 * ЦВЕТ БРЕНДА НЕ ЗАШИТ. Его задаёт владелец в Bammat → ⚡ Quick Controls,
 * ядро печатает `--bm-blue` на `html:root` (PART 1). Здесь мы только
 * ссылаемся на него с запасным значением. Урок 24 августа: 114 зашитых
 * `#517dfc` держали настройку цвета нерабочей половину месяца.
 *
 * Силу селектора держим `:root`, а не `html:root`: переменные ядра
 * объявлены сильнее и должны побеждать наши запасные.
 */

:root {
	/* ── Бренд ─────────────────────────────────────────────────────── */
	--ba-accent: var(--bm-blue, #517dfc);
	--ba-accent-rgb: var(--bm-blue-rgb, 81, 125, 252);
	--ba-accent-ink: #ffffff;
	--ba-accent-press: color-mix(in srgb, var(--ba-accent) 84%, #000);
	--ba-accent-soft: color-mix(in srgb, var(--ba-accent) 11%, transparent);
	--ba-accent-soft-2: color-mix(in srgb, var(--ba-accent) 18%, transparent);

	--ba-ok: var(--bm-green, #2fbf71);
	--ba-ok-soft: color-mix(in srgb, var(--ba-ok) 14%, transparent);
	--ba-bad: var(--bm-red, #e5484d);
	--ba-bad-soft: color-mix(in srgb, var(--ba-bad) 12%, transparent);
	--ba-warn: var(--bm-orange, #f59e0b);
	--ba-warn-soft: color-mix(in srgb, var(--ba-warn) 16%, transparent);
	--ba-promo: var(--bm-promo, #e0485b);
	--ba-promo-ink: #ffffff;

	/* ── Поверхности и текст (светлая) ─────────────────────────────── */
	--ba-bg: #ffffff;
	--ba-canvas: #f4f5f8;
	--ba-surface: #ffffff;
	--ba-surface-2: #f2f3f6;
	--ba-surface-3: #e8eaef;
	--ba-glass: rgba(255, 255, 255, 0.78);
	--ba-ink: #101216;
	--ba-ink-2: #555c6b;
	--ba-ink-3: #8a909d;
	--ba-line: #e8eaef;
	--ba-line-2: #d8dbe2;
	--ba-scrim: rgba(10, 12, 18, 0.42);

	/* ── Шрифт ─────────────────────────────────────────────────────────
	   Системный: на iPhone это SF Pro, на Android — Roboto, то есть
	   ровно тот шрифт, которым написаны приложения вокруг. Ни одного
	   запроса за шрифтом и ни одного кадра с чужим начертанием. */
	--ba-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--ba-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

	--ba-fs-xs: 12px;
	--ba-fs-sm: 13px;
	--ba-fs-md: 15px;
	--ba-fs-base: 16px;
	--ba-fs-lg: 17px;
	--ba-fs-xl: 20px;
	--ba-fs-2xl: 24px;
	--ba-fs-3xl: 30px;
	--ba-fs-4xl: 36px;
	--ba-track-tight: -0.022em;

	/* ── Размеры ───────────────────────────────────────────────────── */
	--ba-r-xs: 8px;
	--ba-r-sm: 12px;
	--ba-r-md: 16px;
	--ba-r-lg: 20px;
	--ba-r-xl: 28px;
	--ba-r-pill: 999px;

	--ba-g: 16px;              /* поле по краям экрана */
	--ba-w: 1180px;            /* ширина содержимого на большом экране */
	--ba-bar-h: 56px;
	--ba-tab-h: 58px;
	--ba-tap: 44px;            /* подушечка пальца, а не красивое число */
	--ba-safe-b: env(safe-area-inset-bottom, 0px);
	--ba-safe-t: env(safe-area-inset-top, 0px);

	/* ── Тени: ближний слой рисует край, дальний — отрыв ────────────── */
	--ba-sh-1: 0 1px 2px rgba(16, 18, 22, 0.06), 0 1px 1px rgba(16, 18, 22, 0.03);
	--ba-sh-2: 0 1px 2px rgba(16, 18, 22, 0.05), 0 8px 24px -8px rgba(16, 18, 22, 0.16);
	--ba-sh-3: 0 2px 6px rgba(16, 18, 22, 0.06), 0 18px 48px -12px rgba(16, 18, 22, 0.28);
	--ba-sh-accent: 0 8px 20px -6px rgba(var(--ba-accent-rgb), 0.55);

	/* ── Движение ──────────────────────────────────────────────────── */
	--ba-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ba-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ba-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--ba-d1: 120ms;
	--ba-d2: 220ms;
	--ba-d3: 380ms;

	color-scheme: light;
}

/*
 * iPhone в приложении: черта «домой» живёт в нижних 21 пикселе экрана,
 * а обёртка сообщает отступ нулём. Если однажды сообщит правду —
 * возьмём её (`max`), если нет — не меньше 26 пикселей.
 */
html.ba-ios-app { --ba-safe-b: max(env(safe-area-inset-bottom, 0px), 26px); }

/*
 * ТЁМНАЯ ТЕМА — ПО ВЫБОРУ ЧЕЛОВЕКА, А НЕ ТЕЛЕФОНА.
 *
 * 29 сентября владелец увидел сайт тёмным и не понял почему: телефон
 * стоял в тёмном режиме, и сайт честно шёл за ним. Решение владельца —
 * по умолчанию светлая, а в меню переключатель «Светлая / Тёмная /
 * Как в системе». Выбор ставит атрибут `data-theme` на `<html>` крошечный
 * скрипт в самом начале головы — до первого кадра, иначе страница
 * мигала бы светлой.
 *
 * Меняются только поверхности и текст: бренд остаётся тем, что задал
 * владелец. Тени в тёмной теме почти не видны, поэтому отрыв слоёв
 * держится цветом поверхности.
 */
:root[data-theme="dark"] {
	--ba-bg: #0b0d12;
	--ba-canvas: #0b0d12;
	--ba-surface: #151821;
	--ba-surface-2: #1c202b;
	--ba-surface-3: #262b37;
	--ba-glass: rgba(18, 21, 29, 0.8);
	--ba-ink: #f2f4f8;
	--ba-ink-2: #a8afbd;
	--ba-ink-3: #767d8c;
	--ba-line: rgba(255, 255, 255, 0.08);
	--ba-line-2: rgba(255, 255, 255, 0.14);
	--ba-scrim: rgba(0, 0, 0, 0.6);
	--ba-accent-soft: color-mix(in srgb, var(--ba-accent) 22%, transparent);
	--ba-accent-soft-2: color-mix(in srgb, var(--ba-accent) 30%, transparent);
	--ba-sh-1: 0 0 0 1px rgba(255, 255, 255, 0.04);
	--ba-sh-2: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px -10px rgba(0, 0, 0, 0.7);
	--ba-sh-3: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -12px rgba(0, 0, 0, 0.8);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] {
		--ba-bg: #0b0d12;
		--ba-canvas: #0b0d12;
		--ba-surface: #151821;
		--ba-surface-2: #1c202b;
		--ba-surface-3: #262b37;
		--ba-glass: rgba(18, 21, 29, 0.8);
		--ba-ink: #f2f4f8;
		--ba-ink-2: #a8afbd;
		--ba-ink-3: #767d8c;
		--ba-line: rgba(255, 255, 255, 0.08);
		--ba-line-2: rgba(255, 255, 255, 0.14);
		--ba-scrim: rgba(0, 0, 0, 0.6);
		--ba-accent-soft: color-mix(in srgb, var(--ba-accent) 22%, transparent);
		--ba-accent-soft-2: color-mix(in srgb, var(--ba-accent) 30%, transparent);
		--ba-sh-1: 0 0 0 1px rgba(255, 255, 255, 0.04);
		--ba-sh-2: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px -10px rgba(0, 0, 0, 0.7);
		--ba-sh-3: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -12px rgba(0, 0, 0, 0.8);
		color-scheme: dark;
	}
}

@media (min-width: 600px) {
	:root {
		--ba-g: 24px;
		--ba-bar-h: 64px;
	}
}

@media (min-width: 1024px) {
	:root {
		--ba-g: 32px;
	}
}