@font-face {
	font-family: 'Fira Sans';
	src: url('../fonts/FiraSans-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Fira Sans';
	src: url('../fonts/FiraSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Fira Sans Extra Condensed';
	src: url('../fonts/FiraSansExtraCondensed-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Pirata One';
	src: url('../fonts/PirataOne-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Pacifico';
	src: url('../fonts/Pacifico-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@layer theme {
	html
	{
		--color-light:  #f8f8f8;
		--color-pink: #f63073;
		--color-red: #ff4031;
		--color-orange: #ffa931;
		--color-yellow: #ffea31;
		--color-green: #2eee4f;
		--color-lavender: #2fcde3;
		--color-blue: #426be7;
		--color-purple: #9e36ce;
		--color-grey:  #ccc;
		--color-dark:  #444;
		
		--color-light-pink: #fba1bf;
		--color-light-red: #ff897f;
		--color-light-orange: #ffca80;
		--color-light-yellow: #fff493;
		--color-light-green: #bffac9;
		--color-light-lavender: #b9eef6;
		--color-light-blue: #aabdf4;
		--color-light-purple: #cc95e5;

		--color-dark-pink: #eb0a55;
		--color-dark-red: #f51000;
		--color-dark-orange: #ff990a;
		--color-dark-yellow: #f5dc00;
		--color-dark-green: #11d031;
		--color-dark-lavender: #18a1b4;
		--color-dark-blue: #1538a2;
		--color-dark-purple: #702494;

		--color-translucent-lighter: #FFF8;
		--color-translucent-light: #FFF2;
		--color-translucent-dark: #0002;
		--color-translucent-darker: #0008;

		--color-primary: var(--color-light-pink);
		--color-success: var(--color-light-green);
		--color-info: var(--color-light-lavender);
		--color-warning: var(--color-light-yellow);
		--color-danger: var(--color-light-red);
		--color-shadow: var(--color-dark);

		--text-color-base: var(--color-dark);
		--text-color-accent: var(--color-orange);

		--font-family-base: 'Fira Sans', sans;
		--font-family-narrow: 'Fira Sans Extra Condensed', sans;
		--font-family-arena: 'Pirata One', fantasy;
		--font-family-tomo: 'Pacifico', cursive;
		
		--font-size-xs: .5rem;
		--font-size-sm: .8rem;
		--font-size-md: 1rem;
		--font-size-lg: 1.25rem;
		--font-size-xl: 1.6rem;
		--font-size-xxl: 2rem;
		--font-size-xxl: 2.5rem;

		--font-size-base: var(--font-size-md);
		--font-size-accent: var(--font-size-lg);
		--font-size-small: var(--font-size-sm);

		--font-weight:400;

		--text-shadow-light: 1px 1px 0px var(--color-light);
		--text-shadow-dark: 1px 1px 0px var(--color-dark);
		/*

		Font sizes
		Line height
		Spacings:
			Paddings
			Margins
			Border radiuses

		*/
		
		--mini-height:5vh;
		--medium-height:60vh;
		--large-height:60vh;
		--full-width: 100vw;
		--full-height: 100vh;
		--full-avail-height: 100%;


		--footer-height: var(--mini-height);
		--main-height: calc(var(--full-height) - (var(--mini-height) * 2));

		--spacing-base: calc(var(--full-width) / 40);
		--spacing-lg: calc(var(--spacing-base) * 2);
			
		--border-radius: 4px;
		--border-radius-full: 50%;

		color: var(--text-color-base);
		font-family: var(--font-family-base);
		/* font-size: clamp(12px, 2.5vh, 24px); 16px is cool too */
	}
}