@import "./reset.css";
@import "./fonts.css";
@import "./designSystem.css";
@import "./header.css";
@import "./footer.css";
@import "./button.css";
@import "./icons.css";
@import "./components/banner/analytic.css";

/*
    ==============================
    📱 Mobile
    ==============================
*/

:root {
	/* Color */
	--color-grey-100: hsla(0, 0%, 98%);
	--color-grey-200: hsla(0, 0%, 93%);
	--color-grey-300: hsla(0, 0%, 89%);
	--color-grey-400: hsla(0, 0%, 83%);
	--color-grey-500: hsla(0, 0%, 71%);
	--color-grey-600: hsla(0, 0%, 46%);
	--color-grey-700: hsla(0, 0%, 31%);
	--color-grey-800: hsl(0, 0%, 23%);
	--color-grey-900: hsl(0, 0%, 15%);
	--color-grey-900-50: hsla(0, 0%, 15%, 0.5);
	--color-white: hsl(0, 0%, 100%);
	--color-red: #dc3545;
	/* Font */
	--font-heading-1: calc(var(--font-text) * 2);
	--font-heading-2: calc(var(--font-text) * 1.75);
	--font-heading-3: calc(var(--font-text) * 1.5);
	--font-heading-4: calc(var(--font-text) * 1.25);
	--font-heading-5: var(--font-text);
	--font-heading-6: var(--font-label);
	--font-text: 1rem;
	--font-label: 0.875rem;
	/* Shadows */
	--shadow-default: hsla(210, 8%, 62%, 0.2) 0px 8px 24px;
	--shadow-default-inside: inset 0 1px 2px hsla(0, 0%, 0%, 0.075);
	/* Spacing */
	--space-xs: calc(var(--space-s) / 2);
	--space-s: 1rem;
	--space-m: calc(var(--space-s) * 1.5);
	--space-l: calc(var(--space-s) * 2);
	--space-xl: calc(var(--space-s) * 2.5);
	--space-2xl: calc(var(--space-s) * 3);
	--space-horizontal: var(--space-m);
	--space-vertical: var(--space-xl);
	/* Animation */
	--animation-default-transition: all 0.25s ease-in-out;
}

.hidden {
	display: none;
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
}

.section {
	&:nth-child(odd) {
		background-color: var(--color-grey-100);
	}

	&:nth-child(even) {
		background-color: var(--color-grey-200);
	}
}

/*
    ==============================
    🖥️ Desktop
    ==============================
*/
@media only screen and (min-width: 1024px) {
	:root {
		--font-text: 1.125rem;
		--font-label: 1rem;
		--space-horizontal: calc(var(--space-s) * 6);
		--space-vertical: calc(var(--space-s) * 4.5);
	}

	.max-width {
		margin: auto;
		max-width: 1200px;
	}
}