@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@layer reset, theme, layout, sections, utilities;



@layer reset{
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	img{
		max-width: 100%;
		vertical-align: middle;
	}
}



@layer theme{
	:root{
		/* COLORS*/
		--accent-base: #3a57f0;
		--accent-dark: #344ed8;
		--accent-light: #eceefe;
		--neutral-dark: #080808;
		--neutral-soft-dark: #414141;
		--neutral-gris2: #f2f2f2;
		--neutral-gris3: #dddddb;
		--neutral-light: #fff;

		--header-bg-color: var(--neutral-light);
		--footer-text-color: var(--neutral-light);
		--footer-bg-color: var(--accent-base);
		--site-bg-color: var(--neutral-gris2);

		/* FONTS */
		--font-type-main: "Open Sans", sans-serif;
		--font-type-headings: "Domine", serif;
		--font-XL: 1.25rem;
		--font-L: 1.125rem;
		--font-M: 1rem;
		--font-S: .875rem;
		--font-XS: .812rem;
		--font-bold: 500;
		--font-regular: 300;
		--heading-6XL: 2.56rem;
		--heading-5XL: 2rem;
		--heading-4XL: 1.812rem;

		/* SPACING/SIZES */
		--fixed-width: 1090px;
		--spacing-4XL: 120px;
		--spacing-3XL: 80px;
		--spacing-2XL: 64px;
		--spacing-XL: 48px;
		--spacing-M: 24px;
		--spacing-S: 16px;
		--spacing-XS: 12px;
		--spacing-XXS: 8px;
	}
	body{
		font-family: var(--font-type-main);
		font-optical-sizing: auto;
		font-style: normal;
		font-weight: var(--font-regular);
		background-color: var(--site-bg-color);
	}
	h1{
		font-family: var(--font-type-headings);
		font-size: clamp(var(--heading-5XL), 5vw, var(--heading-6XL));
		font-weight: var(--font-bold);
	}
}




@layer layout{
	.fixed-width{
		max-width: var(--fixed-width);
		margin-inline: auto;
		padding: var(--spacing-2XL) var(--spacing-S) var(--spacing-4XL);
	}
}





@layer utilities{
	.accent-title{
		font-size: var(--font-XL);
	}
	.mb-XXS{margin-bottom: var(--spacing-XXS);}
	.mb-XL{margin-bottom: var(--spacing-XL);}
}