:root {

/* Foundations */
	--black: #1E1F22;
	--white: #FFFFFF;
	
	--success-light: #bae9bb;
	--success-normal: #41BE45;
	--error-light: #e5c3b8;
	--error-normal: #C86341;

	--neutral-surface: #F4F5F6;
	--neutral-stroke: #DEE0E4;
	--neutral-light: #CED1D7;
	--neutral-normal: #949BA9;
	--neutral-dark: #878D9A;

	--primary-superlight: #f6fbff;
	--primary-surface: #E6F0FB;
	--primary-stroke: #B0D2F2;
	--primary-light: #8ABCEC;
	--primary-normal: #006DD6;
	--primary-dark: #0063C3;

	--secondary-surface: #EBEDF1;
	--secondary-stroke: #C0C6D3;
	--secondary-light: #A2ABBE;
	--secondary-normal: #344871;
	--secondary-dark: #2F4267;

	--font-size-4x-large: 3rem;
	--font-size-3x-large: 2.5rem;
	--font-size-2x-large: 2rem;
	--font-size-x-large: 1.5rem;
	--font-size-large: 1.125rem;
	--font-size-medium: 1rem;
	--font-size-small: 0.875rem;
	--font-size-x-small: 0.75rem;

	--line-height-4x-large: 3.5rem;
	--line-height-3x-large: 3rem;
	--line-height-2x-large: 2.5rem;
	--line-height-x-large: 2rem;
	--line-height-large: 1.625rem;
	--line-height-medium: 1.5rem;
	--line-height-small: 1.25rem;
	--line-height-x-small: 1rem;


	--size-4x-large: 6rem;
	--size-3x-large: 5rem;
	--size-2x-large: 4rem;
	--size-x-large: 3rem;
	--size-large: 2rem;
	--size-medium: 1.5rem;
	--size-x-small: 1rem;
	--size-2x-small: 0.75rem;
	--size-3x-small: 0.5rem;
	--size-4x-small: 0.25rem;

	--size-3x-large: 5rem;
	--size-2x-large: 4rem;
	--size-x-large: 3rem;
	--size-large: 2rem;
	--size-medium: 1.5rem;
	--size-small: 1.25rem;
	--size-x-small: 1rem;

	--radius-3x-large: 3rem;
	--radius-2x-large: 2rem;
	--radius-x-large: 1.5rem;
	--radius-large: 1rem;
	--radius-medium: 0.75rem;
	--radius-small: 0.5rem;
	--radius-x-small: 0.375rem;

	--spacing-3x-large: 5rem;
	--spacing-2x-large: 4rem;
	--spacing-x-large: 3rem;
	--spacing-large: 2.5rem;
	--spacing-medium: 2rem;
	--spacing-small: 1.5rem;
	--spacing-x-small: 1rem;
	--spacing-2x-small: 0.75rem;
	--spacing-3x-small: 0.5rem;
	--spacing-4x-small: 0.25rem;

/* Typography */

	--h1-font-size: var(--font-size-4x-large);
	--h1-line-height: var(--line-height-4x-large);
	--h2-font-size: var(--font-size-3x-large);
	--h2-line-height: var(--line-height-3x-large);
	--h3-font-size: var(--font-size-2x-large);
	--h3-line-height: var(--line-height-2x-large);
	--h4-font-size: var(--font-size-x-large);
	--h4-line-height: var(--line-height-x-large);
	--h5-font-size: var(--font-size-large);
	--h5-line-height: var(--line-height-large);


	--t1-font-size: var(--font-size-large);
	--t1-line-height: var(--line-height-large);
	--t2-font-size: var(--font-size-medium);
	--t2-line-height: var(--line-height-medium);
	--t3-font-size: var(--font-size-small);
	--t3-line-height: var(--line-height-small);
	--t4-font-size: var(--font-size-x-small);
	--t4-line-height: var(--line-height-x-small);

/* Variables */

	--max-width-large: 1200px;
	--max-width-medium: 840px;

	--sides: var(--spacing-small);
	--radius: var(--radius-x-large);

	--gap-large: var(--spacing-medium);
	--gap-medium: var(--spacing-small);
	--gap-small: var(--spacing-x-small);

	--hero-gap: var(--spacing-2x-large);

	--section-top: var(--spacing-3x-large);
	--section-gap: var(--spacing-medium);
	--section-content-gap: var(--spacing-medium);

	--block-padding: var(--spacing-large);
	--block-gap: var(--spacing-small);

	--bps-gap: var(--spacing-medium);

}

/* Media */

@media screen and (max-width: 1024px) {
	:root {
		--section-top: var(--spacing-2x-large);
		--section-content-gap: var(--spacing-small);

		--block-padding: var(--spacing-medium);

		--bps-gap: var(--spacing-small);
	}
}

@media screen and (max-width: 768px) {
	:root {
		--sides: var(--spacing-x-small);

		--hero-gap: var(--spacing-x-large);

		--section-top: var(--spacing-x-large);
		--section-gap: var(--spacing-small);
		--section-content-gap: var(--spacing-x-small);

		--block-padding: var(--spacing-small);
		--block-gap: var(--spacing-x-small);

		--bps-gap: var(--spacing-x-small);
	}
}