:root {
	--dark-bg: #111111;
	--dark-text: #F9F9F9;
	--dark-text-soft: #D0D0D0;
	--dark-text-muted: #929292;
	--dark-accent: #85E077;
	--dark-accent-2: #FFE071;
	--dark-card: #F3F3F3;

	--light-bg: #F9F9F9;
	--light-text: #191919;
	--light-text-soft: #585858;
	--light-accent: #38A326;
	--light-accent-2: #FFE071;

	--font-heading: 'Lexend';
	--font-body: 'DM Sans';
	--eyebrow: 'DM Mono';

	--radius: 30px;
	--radius-xl: 50px;
	--radius-circle: 50%;

	--space-xs: 10px;
	--space-sm: 20px;
	--space-md: 30px;
	--space-lg: 40px;
	--space-xl: 60px;
	--space-2xl: 150px;

	--fs-heading: 48px;
	--fs-title-lg: 32px;
	--fs-title-sm: 26px;
	--fs-body-lg: 20px;
	--fs-body-sm: 18px;
	--fs-body-xs: 16px;
	--fs-note: 15px;
}

@media (max-width: 1535.98px) {
	:root {
		--fs-heading: 44px;
	}
}

@media (max-width: 1399.98px) {
	:root {
		--radius: 20px;

		--space-xs: 8px;
		--space-sm: 16px;
		--space-md: 24px;
		--space-lg: 32px;
		--space-xl: 48px;
		--space-2xl: 80px;

		--fs-heading: 36px;
		--fs-title-lg: 24px;
		--fs-title-sm: 22px;
		--fs-body-lg: 17px;
		--fs-body-sm: 15px;
		--fs-body-xs: 14px;
		--fs-note: 13px;
	}
}

@media (max-width: 991.98px) {
	:root {
		--fs-heading: 30px;
		--fs-title-sm: 20px;
	}
}

@media (max-width: 767.98px) {
	:root {
		--radius: 15px;
		--radius-xl: 30px;

		--fs-title-lg: 20px;
		--fs-note: 11px;
	}
}

@media (max-width: 375.98px) {
	:root {
		--radius: 10px;
		--radius-xl: 20px;

		--space-xs: 6px;
		--space-sm: 12px;
		--space-md: 18px;
		--space-lg: 24px;
		--space-xl: 30px;
		--space-2xl: 40px;

		--fs-heading: 20px;
		--fs-title-lg: 15px;
		--fs-title-sm: 15px;
		--fs-body-lg: 13px;
		--fs-body-sm: 13px;
		--fs-body-xs: 10px;
		--fs-note: 10px;
	}
}