/* ============================================================
 * BAMMAT — ТОКЕНЫ
 *
 * Продолжение дизайн-системы из woodmart-child/design-system.css:
 * синий #517dfc, серый холст, белые карточки. Значения сохранены,
 * добавлены те, которых там не хватало для «как в приложении»:
 * высоты панелей, safe-area, кривые анимаций, слои по z-index.
 * ========================================================== */

:root {
	/* ── бренд ── */
	--bm-blue:        #517dfc;
	--bm-blue-dark:   #3a5fd9;
	--bm-blue-press:  #2f4fbe;
	--bm-blue-tint:   #eef3ff;
	--bm-blue-ring:   rgba(81, 125, 252, .28);

	--bm-green:       #1f9d5f;
	--bm-green-tint:  #e6f7ee;
	--bm-amber:       #b4700c;
	--bm-amber-tint:  #fdf3e2;
	--bm-red:         #d6453e;
	--bm-red-tint:    #fdecec;

	/* ── текст ── */
	--bm-ink:    #131826;
	--bm-ink-2:  #5b6479;
	--bm-ink-3:  #8b93a7;
	--bm-ink-on: #ffffff;

	/* ── поверхности ── */
	--bm-bg:      #f5f6fa;
	--bm-card:    #ffffff;
	--bm-sunken:  #eef0f6;
	--bm-line:    #e7eaf1;
	--bm-line-2:  #d9dde8;
	--bm-scrim:   rgba(16, 20, 32, .44);

	/* ── скругления ── */
	--bm-r-xs:  8px;
	--bm-r-sm:  12px;
	--bm-r:     16px;
	--bm-r-lg:  22px;
	--bm-r-xl:  28px;
	--bm-r-pill: 999px;

	/* ── тени ── */
	--bm-sh-sm:   0 1px 2px rgba(19, 24, 38, .05);
	--bm-sh:      0 1px 2px rgba(19, 24, 38, .04), 0 8px 24px rgba(19, 24, 38, .06);
	--bm-sh-lift: 0 2px 6px rgba(19, 24, 38, .06), 0 16px 40px rgba(19, 24, 38, .12);
	--bm-sh-nav:  0 -2px 24px rgba(19, 24, 38, .10);

	/* ── отступы: 4px шаг ── */
	--bm-1: 4px;   --bm-2: 8px;   --bm-3: 12px;  --bm-4: 16px;
	--bm-5: 20px;  --bm-6: 24px;  --bm-7: 28px;  --bm-8: 32px;
	--bm-10: 40px; --bm-12: 48px; --bm-16: 64px;

	/* ── типографика ──
	   Системный шрифт: на iPhone это San Francisco, и именно он
	   заставляет веб-страницу читаться как родной экран приложения.
	   Никаких веб-шрифтов — это ещё и минус запрос и минус мерцание. */
	--bm-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
	           Roboto, Helvetica, Arial, sans-serif;
	--bm-font-num: ui-monospace, SFMono-Regular, Menlo, monospace;

	--bm-t-xs:  11px;
	--bm-t-sm:  13px;
	--bm-t-md:  15px;
	--bm-t-lg:  17px;
	--bm-t-xl:  20px;
	--bm-t-2xl: 24px;
	--bm-t-3xl: 30px;

	/* ── высоты панелей ──
	   Вынесены в переменные, потому что от них зависят отступы контента:
	   если контент не отодвинуть, его закроет плавающая панель. */
	--bm-header-h: 56px;
	--bm-nav-h:    62px;
	--bm-safe-b:   env(safe-area-inset-bottom, 0px);
	--bm-safe-t:   env(safe-area-inset-top, 0px);

	/* ── движение ──
	   spring — для того, что должно ощущаться физическим (кнопки, шторки).
	   ease — для того, что просто меняет состояние. */
	--bm-spring: cubic-bezier(.34, 1.4, .5, 1);
	--bm-ease:   cubic-bezier(.32, .72, 0, 1);
	--bm-fast:   .16s;
	--bm-mid:    .26s;
	--bm-slow:   .38s;

	/* ── слои ──
	   Значения высокие не для красоты: bammat-core расставляет свои
	   фиксированные элементы на z-index от 8888 до 10000 (панель магазина
	   из PART 7, мини-корзина, кнопка «назад» в приложении). При скромных
	   100–300 они перекрывали шапку темы при прокрутке.
	   Выше нас остаются только настоящие модальные окна плагина
	   (999999 и 9999999) — им и положено быть сверху. */
	--bm-z-header:  100000;
	--bm-z-nav:     100100;
	--bm-z-scrim:   100200;
	--bm-z-sheet:   100300;
	--bm-z-toast:   100400;
}

/* Тёмная тема. Приложение в WebView наследует системную тему телефона,
   поэтому без неё ночью экран бьёт по глазам белым. */
@media (prefers-color-scheme: dark) {
	:root {
		--bm-blue:       #7f9dfd;
		--bm-blue-dark:  #9db3fe;
		--bm-blue-press: #6b8cfc;
		--bm-blue-tint:  #1b2540;
		--bm-blue-ring:  rgba(127, 157, 253, .3);

		--bm-green:      #4fc98b;
		--bm-green-tint: #12291e;
		--bm-amber:      #e0a955;
		--bm-amber-tint: #2b2212;
		--bm-red:        #f0817c;
		--bm-red-tint:   #331b1b;

		--bm-ink:    #e8ebf3;
		--bm-ink-2:  #a3abbf;
		--bm-ink-3:  #7b8398;

		--bm-bg:     #0d1017;
		--bm-card:   #161a24;
		--bm-sunken: #1e2331;
		--bm-line:   #252b39;
		--bm-line-2: #333a4b;
		--bm-scrim:  rgba(0, 0, 0, .6);

		--bm-sh-sm:   0 1px 2px rgba(0, 0, 0, .3);
		--bm-sh:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
		--bm-sh-lift: 0 2px 6px rgba(0, 0, 0, .34), 0 16px 40px rgba(0, 0, 0, .44);
		--bm-sh-nav:  0 -2px 24px rgba(0, 0, 0, .4);
	}
}

/* Ручное переключение — на случай, если добавим тумблер в приложении. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }