/* AUTO108 v4 — template_styles.css
 * Переменные палитры и базовые токены дизайн-системы.
 * Реальные стили компонентов будут поблочно подключаться через css/blocks/*.css
 * на этапах 3-5.
 */

:root {
	/* ===== Палитра бренда (наследие v2/v3, согласовано) ===== */
	--c-primary: #238EE3;          /* AUTO108 blue */
	--c-primary-dark: #1A6FB3;
	--c-whatsapp: #25D366;
	--c-bg-dark-from: #021138;
	--c-bg-dark-to: #031239;
	--c-light: #EDF2F8;
	--c-near-white: #F9F9FA;
	--c-text: #0c1320;
	--c-text-muted: #4a5568;
	--c-border: #e2e8f0;
	--c-warning: #F5A623;          /* "Доставка 0-1 день" */
	--c-success: #25D366;          /* "В наличии" */
	--c-danger: #e53e3e;           /* "Под заказ" */

	/* ===== Типографика (минимизация vs v2) ===== */
	--ff-base: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ff-display: 'Manrope', system-ui, sans-serif;
	--ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--fs-base: 16px;
	--lh-base: 1.5;

	/* ===== Сетка / отступы ===== */
	--container-max: 1280px;
	--container-pad: 24px;
	--gap-xs: 4px;
	--gap-sm: 8px;
	--gap-md: 16px;
	--gap-lg: 24px;
	--gap-xl: 48px;

	/* ===== Радиусы / тени ===== */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
	--shadow-md: 0 4px 20px rgba(0, 0, 0, .09);
	--shadow-lg: 0 10px 40px rgba(0, 0, 0, .12);

	/* ===== Анимации ===== */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--dur-fast: 150ms;
	--dur-base: 250ms;
}

/* ===== Минимальный reset (без normalize.css балласта) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--ff-base);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, picture, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* ===== Container / sticky preview banner ===== */
.v4-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
body.v4 { padding-top: 0; }
body.v4:has(.v4-preview-banner) { padding-top: 32px; }