/*
 * Smartmarket — дизайн-токены.
 *
 * ОДИН ИСТОЧНИК ДЛЯ ВСЕГО ВИДИМОГО: витрина, корзина, касса, кабинет.
 * Кнопка не может разойтись с кнопкой, пока обе берут размеры и цвета отсюда.
 *
 * ЯЗЫК ОФОРМЛЕНИЯ (вторая версия, 5 октября 2026). Образец — приложения
 * доставки с белым экраном и одним цветом действия: белая шапка, товары
 * на светло-сером «колодце», крупная цена первой строкой, заполненные
 * серым поля без рамок, большие радиусы и почти никаких теней.
 *
 *   • БРЕНД-ЖЁЛТЫЙ — только у главного действия: «в корзину», «оформить»,
 *     выбранное окно доставки. Текст на нём тёмный. Больше жёлтого на экране
 *     нет: чем его меньше, тем заметнее кнопка.
 *   • ЗЕЛЁНЫЙ — «хорошие новости»: бесплатно, экономия, готово.
 *   • КРАСНЫЙ — акция и цена по акции.
 *   • Всё остальное — чёрный текст, два серых и белый.
 *
 * ЦВЕТ БРЕНДА НЕ ЗАШИТ. Его задаёт владелец в Smartmarket → ⚡ Quick Controls,
 * ядро печатает `--sm-accent`, `--sm-header`, `--sm-promo` на `html:root`.
 * Здесь мы только ссылаемся на них с запасным значением, и сила селектора
 * у нас `:root` — ниже, чем у ядра: настройка обязана побеждать запасное.
 *
 * ШРИФТ ЛЕЖИТ В ТЕМЕ (Manrope, 40 КБ на оба набора знаков): ни одного
 * запроса на чужой сервер — ни по скорости, ни по GDPR вопросов нет.
 */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* ── Бренд: цвет главного действия ─────────────────────────────── */
	--sa-brand: var(--sm-header, #ffbf00);
	--sa-brand-ink: #21201f;
	--sa-brand-press: color-mix(in srgb, var(--sa-brand) 86%, #000);
	--sa-brand-soft: color-mix(in srgb, var(--sa-brand) 20%, #fff);

	/* ── «Хорошие новости» ─────────────────────────────────────────── */
	--sa-accent: var(--sm-accent, #3c8d24);
	--sa-accent-rgb: var(--sm-accent-rgb, 60, 141, 36);
	--sa-accent-ink: #ffffff;
	--sa-accent-soft: color-mix(in srgb, var(--sa-accent) 10%, #fff);

	/* ── Акция, состояния ──────────────────────────────────────────── */
	--sa-promo: var(--sm-promo, #f5432c);
	--sa-promo-ink: #ffffff;
	--sa-promo-soft: color-mix(in srgb, var(--sa-promo) 9%, #fff);
	--sa-ok: var(--sa-accent);
	--sa-ok-soft: var(--sa-accent-soft);
	--sa-bad: #e0352b;
	--sa-bad-soft: #fdecea;
	--sa-warn: #9a5b00;
	--sa-warn-soft: #fff4d6;
	--sa-gift: #8a5a00;
	--sa-gift-soft: #fff1c9;

	/* ── Поверхности и текст ───────────────────────────────────────── */
	--sa-bg: #ffffff;           /* страница каталога */
	--sa-canvas: #f5f4f2;       /* страница корзины, кассы, кабинета: белые блоки на сером */
	--sa-surface: #ffffff;
	--sa-fill: #f5f4f2;         /* «колодец» под фото, плитка, поле ввода */
	--sa-fill-2: #edece8;       /* нажатое, полоса прогресса */
	--sa-fill-3: #e1dfda;
	--sa-ink: #21201f;
	--sa-ink-2: #6f6c68;
	--sa-ink-3: #a5a29d;
	--sa-line: #efeeeb;
	--sa-scrim: rgba(33, 32, 31, 0.42);

	/* Прежние имена — для того, что ещё на них ссылается (счёт, старые блоки). */
	--sa-surface-2: var(--sa-fill);
	--sa-surface-3: var(--sa-fill-2);
	--sa-line-2: var(--sa-fill-3);
	--sa-head: var(--sa-brand);
	--sa-head-ink: var(--sa-brand-ink);

	/* Выбор окна доставки ядра берёт цвета отсюда. */
	--smc-line: transparent;
	--smc-surface: var(--sa-fill);

	/* ── Шрифт ─────────────────────────────────────────────────────── */
	--sa-font: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sa-fs-xs: 12px;
	--sa-fs-sm: 13px;
	--sa-fs-md: 15px;
	--sa-fs-base: 16px;
	--sa-fs-lg: 18px;
	--sa-fs-xl: 22px;
	--sa-fs-2xl: 28px;
	--sa-fs-3xl: 34px;

	/* ── Размеры ───────────────────────────────────────────────────── */
	--sa-r-xs: 10px;
	--sa-r-sm: 14px;
	--sa-r-md: 18px;
	--sa-r-lg: 24px;
	--sa-r-xl: 32px;
	--sa-r-pill: 999px;

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

	/* ── Тени: только у того, что плавает над страницей ─────────────── */
	--sa-sh-1: 0 2px 8px rgba(33, 32, 31, 0.1);
	--sa-sh-2: 0 6px 20px -4px rgba(33, 32, 31, 0.16);
	--sa-sh-3: 0 12px 40px -8px rgba(33, 32, 31, 0.28);

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

	color-scheme: light;
}

/* Приложение на iPhone: обёртка отдаёт нижний отступ нулём, а черта «домой» есть. */
html.sm-ios-app { --sa-safe-b: max(env(safe-area-inset-bottom, 0px), 22px); }

@media (min-width: 600px) {
	:root { --sa-g: 24px; }
}

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