/* Dimension tokens from the Jules Zang Figma collection (VariableCollectionId:30:110).
   Modes apply from each frame width downward: 1920, 1440, 1024, 768, 480, 320. */

:root {
	--font-display-lg: 200px;
	--font-display-md: 128px;
	--font-title-lg: 108px;
	--font-title-md: 80px;
	--font-title-sm: 48px;
	--font-descriptor-lg: 40px;
	--font-descriptor-md: 32px;
	--font-descriptor-sm: 26px;
	--font-descriptor-xs: 14px;
	--font-paragraph-md: 26px;
	--font-paragraph-sm: 20px;
	--font-button-text-md: 20px;
	--font-button-text-sm: 18px;
	--font-link-popup: 24px;

	--spacing-6xs: 6px;
	--spacing-5xs: 10px;
	--spacing-4xs: 12px;
	--spacing-3xs: 14px;
	--spacing-2xs: 20px;
	--spacing-xs: 24px;
	--spacing-sm: 32px;
	--spacing-md: 40px;
	--spacing-lg: 48px;
	--spacing-xl: 80px;
	--spacing-2xl: 108px;
	--spacing-3xl: 160px;

	--spacing-section-sm: 40px;
	--spacing-section-md: 80px;
	--spacing-section-lg: 108px;
	--spacing-section-xl: 128px;
	--spacing-section-2xl: 160px;
	--spacing-section-inline: 40px;
	--spacing-section-left: 80px;
}

@media (max-width: 1919px) {
	:root {
		--font-display-lg: 160px;
		--font-display-md: 108px;
		--font-title-lg: 80px;
		--font-title-md: 60px;
		--font-title-sm: 40px;
		--font-descriptor-lg: 32px;
		--font-descriptor-md: 24px;
		--font-descriptor-sm: 20px;
		--font-descriptor-xs: 12px;
		--font-paragraph-md: 20px;
		--font-paragraph-sm: 16px;
		--font-button-text-md: 16px;
		--font-button-text-sm: 14px;
		--font-link-popup: 20px;

		--spacing-6xs: 4px;
		--spacing-5xs: 8px;
		--spacing-4xs: 10px;
		--spacing-3xs: 12px;
		--spacing-2xs: 16px;
		--spacing-xs: 20px;
		--spacing-sm: 24px;
		--spacing-md: 32px;
		--spacing-lg: 40px;
		--spacing-xl: 64px;
		--spacing-2xl: 80px;
		--spacing-3xl: 128px;

		--spacing-section-sm: 40px;
		--spacing-section-md: 64px;
		--spacing-section-lg: 80px;
		--spacing-section-xl: 108px;
		--spacing-section-2xl: 128px;
		--spacing-section-inline: 40px;
		--spacing-section-left: 80px;
	}
}

@media (max-width: 1439px) {
	:root {
		--font-display-lg: 96px;
		--font-display-md: 80px;
		--font-title-lg: 60px;
		--font-title-md: 40px;
		--font-title-sm: 32px;
		--font-descriptor-lg: 24px;
		--font-descriptor-md: 20px;
		--font-descriptor-sm: 16px;
		--font-descriptor-xs: 10px;
		--font-paragraph-md: 16px;
		--font-paragraph-sm: 14px;
		--font-button-text-md: 14px;
		--font-button-text-sm: 12px;
		--font-link-popup: 16px;

		--spacing-6xs: 4px;
		--spacing-5xs: 6px;
		--spacing-4xs: 8px;
		--spacing-3xs: 10px;
		--spacing-2xs: 12px;
		--spacing-xs: 16px;
		--spacing-sm: 20px;
		--spacing-md: 24px;
		--spacing-lg: 32px;
		--spacing-xl: 64px;
		--spacing-2xl: 80px;
		--spacing-3xl: 96px;

		--spacing-section-sm: 32px;
		--spacing-section-md: 40px;
		--spacing-section-lg: 64px;
		--spacing-section-xl: 80px;
		--spacing-section-2xl: 96px;
		--spacing-section-inline: 32px;
		--spacing-section-left: 72px;
	}
}

@media (max-width: 1023px) {
	:root {
		--font-display-lg: 128px;
		--font-display-md: 72px;
		--font-title-lg: 48px;
		--font-title-md: 40px;
		--font-title-sm: 32px;
		--font-descriptor-lg: 24px;
		--font-descriptor-md: 20px;
		--font-descriptor-sm: 16px;
		--font-descriptor-xs: 10px;
		--font-paragraph-md: 16px;
		--font-paragraph-sm: 14px;
		--font-button-text-md: 14px;
		--font-button-text-sm: 12px;
		--font-link-popup: 16px;

		--spacing-6xs: 4px;
		--spacing-5xs: 6px;
		--spacing-4xs: 8px;
		--spacing-3xs: 10px;
		--spacing-2xs: 12px;
		--spacing-xs: 16px;
		--spacing-sm: 20px;
		--spacing-md: 24px;
		--spacing-lg: 28px;
		--spacing-xl: 48px;
		--spacing-2xl: 64px;
		--spacing-3xl: 72px;

		--spacing-section-sm: 32px;
		--spacing-section-md: 40px;
		--spacing-section-lg: 48px;
		--spacing-section-xl: 64px;
		--spacing-section-2xl: 72px;
		--spacing-section-inline: 24px;
		--spacing-section-left: 0px;
	}
}

@media (max-width: 767px) {
	:root {
		--font-display-lg: 72px;
		--font-display-md: 40px;
		--font-title-lg: 32px;
		--font-title-md: 28px;
		--font-title-sm: 24px;
		--font-descriptor-lg: 20px;
		--font-descriptor-md: 18px;
		--font-descriptor-sm: 16px;
		--font-descriptor-xs: 10px;
		--font-paragraph-md: 16px;
		--font-paragraph-sm: 14px;
		--font-button-text-md: 14px;
		--font-button-text-sm: 12px;
		--font-link-popup: 16px;

		--spacing-6xs: 2px;
		--spacing-5xs: 6px;
		--spacing-4xs: 6px;
		--spacing-3xs: 8px;
		--spacing-2xs: 10px;
		--spacing-xs: 12px;
		--spacing-sm: 16px;
		--spacing-md: 20px;
		--spacing-lg: 24px;
		--spacing-xl: 32px;
		--spacing-2xl: 48px;
		--spacing-3xl: 64px;

		--spacing-section-sm: 24px;
		--spacing-section-md: 32px;
		--spacing-section-lg: 40px;
		--spacing-section-xl: 48px;
		--spacing-section-2xl: 64px;
		--spacing-section-inline: 16px;
		--spacing-section-left: 0px;
	}
}

@media (max-width: 479px) {
	:root {
		--font-display-lg: 48px;
	}
}