/* =========================================================================
   Токены дизайн-направления «Медведь и Слон - Figma Cooperative».
   Значения не подобраны на глаз: они измерены на боевом video.medvedislon.com
   (Bricks Theme Style MainStyle, палитра HeaderMain, вычисленные стили рендера).
   Исходник общих токенов. tools/build-theme.mjs переносит их в theme.json;
   сгенерированный theme.json вручную не редактировать.
   ========================================================================= */

:root {
	/* --- цвет --- */
	--at-bg: #eef0f2;
	--at-surface: #ffffff;
	--at-surface-soft: #fafbfb;
	--at-surface-mute: #f1f3f5;

	--at-ink: #0e1a1f;
	--at-ink-body: #363636;
	--at-ink-soft: #5c6a71;
	--at-ink-on-accent: #ffffff;

	--at-accent: #ff9935;
	--at-accent-dark: #67321b;
	--at-accent-soft: #fff3e7;
	--at-accent-ring: rgba(255, 153, 53, .22);

	--at-support: #007a85;
	--at-danger: #ef2a2e;
	--at-success: #00a651;
	--at-price: #d23737;

	--at-border: #c4c4c4;
	--at-border-soft: #e3e6e9;

	/* --- фирменные цвета служб доставки ---
	   Чужие бренды, не палитра сайта: живут только в блоке доставки.
	   Взяты из самих официальных SVG в assets/img/carriers. */
	--at-cdek: #00b33c;
	--at-cdek-soft: #e6f7ed;
	--at-yandex: #fc3f1d;
	--at-yandex-soft: #ffece8;
	--at-yandex-ink: #b52a12;
	--at-post: #1928dc;
	--at-post-soft: #e9ebfd;

	/* --- типографика --- */
	--at-font: 'Involve', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--at-font-ui: 'Involve', 'Nunito', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--at-size-h1: 30px;
	--at-size-h2: 26px;
	--at-size-h3: 21px;
	--at-size-h4: 18px;
	--at-size-base: 15px;
	--at-size-sm: 14px;
	--at-size-xs: 13px;
	--at-size-2xs: 12px;
	--at-size-editor-large: clamp(24px, 2.4vw, 34px);
	--at-size-editor-x-large: clamp(38px, 5vw, 68px);

	--at-lh-display: 1.15;
	--at-lh-heading: 1.2;
	--at-lh-body: 1.6;
	--at-lh-prose: 1.65;

	/* --- шаг сетки (density 0.45, умеренно плотный магазин) --- */
	--at-space-3xs: 4px;
	--at-space-2xs: 8px;
	--at-space-xs: 12px;
	--at-space-sm: 16px;
	--at-space-md: 24px;
	--at-space-lg: 32px;
	--at-space-xl: 40px;
	--at-space-2xl: 64px;
	--at-space-3xl: 96px;
	--at-button-padding-x: 20px;

	/* --- форма --- */
	--at-radius-sm: 5px;
	--at-radius: 6px;
	--at-radius-lg: 10px;
	--at-radius-pill: 999px;

	/* Тень тонирована в ink и разрешена только всплывающим элементам. */
	--at-shadow: 0 2px 10px rgba(14, 26, 31, .08);
	--at-shadow-lg: 0 12px 40px rgba(14, 26, 31, .22);

	/* --- каркас --- */
	--at-container: 1280px;
	--at-content: 760px;
	--at-gutter: 40px;
	--at-header-h: 88px;

	/* motion 0.10: только функциональная интерфейсная отзывчивость. */
	--at-ease: .15s ease;
}

@media (max-width: 991px) {
	:root {
		--at-gutter: 10px;
		--at-size-h1: 26px;
		--at-size-h2: 22px;
		--at-size-h3: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root { --at-ease: 0s; }
}