/*
 * SPINE MOTION design tokens.
 * Source: 02_HOMEPAGE_UX_UI_WIREFRAME.md §1.
 * APPROVED baseline (original logo representative colors): brand-blue, brand-turquoise, white.
 * Everything marked PROPOSED still needs brand approval — do not treat as logo colors.
 */
:root {
	/* APPROVED baseline */
	--sm-brand-blue: #014172;
	--sm-brand-turquoise: #00d0a1; /* accent only — never small text on white */
	--sm-white: #ffffff;
	--sm-text-primary: #014172;

	/* PROPOSED */
	--sm-bg-soft: #f2f9fa;
	--sm-bg-mint: #d7f6eb;
	--sm-mid-blue: #0b567d;
	--sm-text-secondary: #314a58;
	--sm-border-soft: #d6e5ea;

	/* Typography — Heebo is PROPOSED and NOT loaded; system Hebrew stack until approved. */
	--sm-font-sans: system-ui, "Segoe UI", Arial, "Noto Sans Hebrew", "Arial Hebrew", sans-serif;

	--sm-fs-h1: clamp(2rem, 3.8vw, 3.6rem);
	--sm-lh-h1: 1.13;
	--sm-fs-h2: clamp(1.65rem, 2.6vw, 2.25rem);
	--sm-lh-h2: 1.22;
	--sm-fs-h3: 1.28rem;
	--sm-lh-h3: 1.35;
	--sm-fs-body: 1.08rem;
	--sm-lh-body: 1.75;
	--sm-fs-small: 0.92rem;

	/* Layout */
	--sm-container: 1200px;
	--sm-pad-inline: 24px;
	--sm-section-pad: 56px;
	--sm-gap: 24px;
	--sm-radius: 12px;
	--sm-btn-min-h: 48px;
	--sm-header-h: 68px;
	--sm-focus: 3px solid var(--sm-brand-turquoise);
}

@media (min-width: 768px) {
	:root {
		--sm-pad-inline: 32px;
		--sm-section-pad: 72px;
	}
}

@media (min-width: 1024px) {
	:root {
		--sm-pad-inline: 40px;
		--sm-section-pad: 96px;
		--sm-gap: 40px;
		--sm-header-h: 84px;
	}
}