/**
 * Dreamtime responsive spacing + typography tokens.
 * Desktop defaults on :root; each max-width block overrides only what shrinks.
 *
 * @package dreamtime
 */

:root {
	--dt-container: 92%;
	--dt-section-y: 80px;
	--dt-section-gap: 64px;
	--dt-hero-pt: 88px;
	--dt-hero-pb: 80px;
	--dt-grid-gap: 28px;
	--dt-stack-gap: 22px;
	--dt-head-mb: 34px;

	--dt-h1-hero: 36px;
	--dt-h1-page: 34px;
	--dt-h1-product: 34px;
	--dt-h2: 30px;
	--dt-h3: 21px;
	--dt-h4: 18px;
	--dt-body: 16px;
	--dt-lead: 17px;
	--dt-small: 13px;
	--dt-caption: 11px;

	--dt-line-body: 1.65;
	--dt-line-lead: 1.6;
	--dt-line-heading: 1.12;
	--dt-lead-lh: 1.6;
	--dt-btn-min-h: 48px;
}

@media (max-width: 1440px) {
	:root {
		--dt-container: 94%;
		--dt-section-y: 72px;
		--dt-section-gap: 58px;
		--dt-hero-pt: 72px;
		--dt-hero-pb: 72px;
		--dt-grid-gap: 26px;
		--dt-head-mb: 32px;
	}
}

@media (max-width: 1280px) {
	:root {
		--dt-section-y: 64px;
		--dt-section-gap: 52px;
		--dt-hero-pt: 60px;
		--dt-hero-pb: 64px;
		--dt-grid-gap: 24px;
		--dt-stack-gap: 20px;
		--dt-head-mb: 30px;
		--dt-h1-hero: 34px;
		--dt-h1-page: 32px;
		--dt-h1-product: 32px;
		--dt-h2: 28px;
		--dt-h3: 20px;
	}
}

@media (max-width: 1200px) {
	:root {
		--dt-section-y: 56px;
		--dt-section-gap: 48px;
		--dt-hero-pt: 52px;
		--dt-hero-pb: 56px;
		--dt-h1-hero: 32px;
		--dt-h1-page: 30px;
		--dt-h1-product: 30px;
		--dt-h2: 27px;
	}
}

@media (max-width: 991px) {
	:root {
		--dt-container: 92%;
		--dt-section-y: 48px;
		--dt-section-gap: 40px;
		--dt-hero-pt: 40px;
		--dt-hero-pb: 48px;
		--dt-grid-gap: 20px;
		--dt-stack-gap: 18px;
		--dt-head-mb: 24px;
		--dt-h1-hero: 28px;
		--dt-h1-page: 28px;
		--dt-h1-product: 28px;
		--dt-h2: 26px;
		--dt-h3: 19px;
		--dt-h4: 17px;
		--dt-body: 15px;
		--dt-lead: 16px;
		--dt-line-body: 1.62;
		--dt-line-lead: 1.58;
	}
}

@media (max-width: 768px) {
	:root {
		--dt-section-y: 40px;
		--dt-section-gap: 34px;
		--dt-hero-pt: 32px;
		--dt-hero-pb: 40px;
		--dt-grid-gap: 18px;
		--dt-stack-gap: 16px;
		--dt-head-mb: 20px;
		--dt-h1-hero: 26px;
		--dt-h1-page: 26px;
		--dt-h1-product: 26px;
		--dt-h2: 24px;
		--dt-h3: 18px;
		--dt-lead: 15px;
	}
}

@media (max-width: 576px) {
	:root {
		--dt-container: 90%;
		--dt-section-y: 36px;
		--dt-section-gap: 30px;
		--dt-hero-pt: 26px;
		--dt-hero-pb: 32px;
		--dt-grid-gap: 16px;
		--dt-stack-gap: 14px;
		--dt-head-mb: 18px;
		--dt-h1-hero: 24px;
		--dt-h1-page: 24px;
		--dt-h1-product: 24px;
		--dt-h2: 22px;
		--dt-h3: 17px;
		--dt-body: 14px;
		--dt-lead: 15px;
		--dt-small: 12px;
		--dt-line-body: 1.6;
	}
}

@media (max-width: 480px) {
	:root {
		--dt-section-y: 32px;
		--dt-section-gap: 26px;
		--dt-hero-pt: 22px;
		--dt-hero-pb: 28px;
		--dt-grid-gap: 14px;
		--dt-head-mb: 16px;
		--dt-h1-hero: 22px;
		--dt-h1-page: 22px;
		--dt-h1-product: 22px;
		--dt-h2: 20px;
		--dt-h3: 16px;
		--dt-btn-min-h: 44px;
	}
}