:root {
	--color-background: #fafafa;
	--color-surface: #ffffff;
	--color-text: #777777;
	--color-heading: #121212;
	--color-muted: #777777;
	--color-border: #e4e4e4;
	--color-accent: #77be40;
	--color-accent-dark: #121212;
	--color-dark: #121212;
	--color-on-dark: #ffffff;
	--font-family: "Onest", sans-serif;
	--font-size-small: 0.875rem;
	--font-size-base: 1rem;
	--font-size-large: 1.125rem;
	--font-size-accent: 0.8125rem;
	--font-size-h1: 3.9375rem;
	--font-size-h2: 3.125rem;
	--font-size-h3: 1.625rem;
	--font-size-h4: 1.5rem;
	--font-size-h5: 1.375rem;
	--font-size-h6: 1.25rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-6: 4.5rem;
	--space-7: 7rem;
	--content-width: 1120px;
	--container-width: 1300px;
	--header-height: 6rem;
	--radius-small: 0.25rem;
	--radius-medium: 0.5rem;
	--z-header: 100;
}

@media (max-width: 1024px) {
	:root {
		--font-size-small: 0.8125rem;
		--font-size-base: 0.9375rem;
		--font-size-large: 1.0625rem;
		--font-size-accent: 0.75rem;
		--font-size-h1: 3.25rem;
		--font-size-h2: 2.75rem;
		--font-size-h3: 1.5625rem;
		--font-size-h4: 1.4375rem;
		--font-size-h5: 1.3125rem;
		--font-size-h6: 1.1875rem;
		--header-height: 4.75rem;
		--space-6: 3.5rem;
		--space-7: 5rem;
	}
}

@media (max-width: 767px) {
	:root {
		--font-size-small: 0.75rem;
		--font-size-h1: 2.25rem;
		--font-size-h2: 2.25rem;
		--font-size-h3: 1.5rem;
		--font-size-h4: 1.375rem;
		--font-size-h5: 1.25rem;
		--font-size-h6: 1.125rem;
	}
}

@media (max-width: 540px) {
	:root {
		--space-6: 3rem;
		--space-7: 4rem;
	}
}

:is(.call-to-action__heading, .card-grid__heading, .faq-block__heading, .contact-form-section__heading) {
	font-size: var(--font-size-h2);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.7px;
	text-wrap: balance;
}