:root {
	/* === BACKGROUND === */
	--clr-bg-light: hsl(210, 14%, 87%);
	--clr-bg-dark: hsl(240, 2%, 6%);
	--clr-bg-rgb-light: 233, 236, 239;
	--clr-bg-rgb-dark: 17, 17, 17;
	--clr-bg: var(--clr-bg-light);
	--clr-bg-invert: var(--clr-bg-dark);
	--clr-bg-rgb: var(--clr-bg-rgb-light);
	--clr-bg-invert-rgb: var(--clr-bg-rgb-dark);

	--clr-bg-2-light: hsl(210, 14%, 90%);
	--clr-bg-2-dark: hsl(240, 2%, 10%);
	--clr-bg-2-rgb-light: 255, 255, 255;
	--clr-bg-2-rgb-dark: 27, 28, 30;
	--clr-bg-2: var(--clr-bg-2-light);
	--clr-bg-2-invert: var(--clr-bg-2-dark);
	--clr-bg-2-rgb: var(--clr-bg-2-rgb-light);
	--clr-bg-2-invert-rgb: var(--clr-bg-2-rgb-dark);

	--clr-bg-3-light: hsl(210, 14%, 93%);
	--clr-bg-3-dark: hsl(240, 2%, 14%);
	--clr-bg-3-rgb-light: 245, 246, 248;
	--clr-bg-3-rgb-dark: 37, 38, 40;
	--clr-bg-3: var(--clr-bg-3-light);
	--clr-bg-3-invert: var(--clr-bg-3-dark);
	--clr-bg-3-rgb: var(--clr-bg-3-rgb-light);
	--clr-bg-3-invert-rgb: var(--clr-bg-3-rgb-dark);

	/* === TEXT === */
	--clr-text-light: #222329;
	--clr-text-dark: #eff2f6;
	--clr-text: var(--clr-text-light);
	--clr-text-invert: var(--clr-text-dark);
	--clr-text-rgb-light: 34, 35, 41;
	--clr-text-rgb-dark: 239, 242, 246;
	--clr-text-rgb: var(--clr-text-rgb-light);

	--clr-text-2-light: #3c3b41;
	--clr-text-2-dark: #d2d6db;
	--clr-text-2: var(--clr-text-2-light);
	--clr-text-2-invert: var(--clr-text-2-dark);
	--clr-text-2-rgb-light: 60, 59, 65;
	--clr-text-2-rgb-dark: 210, 214, 219;
	--clr-text-2-rgb: var(--clr-text-2-rgb-light);

	--clr-text-3-light: #5a5a5f;
	--clr-text-3-dark: #a0a4ab;
	--clr-text-3: var(--clr-text-3-light);
	--clr-text-3-invert: var(--clr-text-3-dark);
	--clr-text-3-rgb-light: 90, 90, 95;
	--clr-text-3-rgb-dark: 160, 164, 171;
	--clr-text-3-rgb: var(--clr-text-3-rgb-light);

	/* === ACCENT === */
	--clr-accent-light: #ff6b6b;
	--clr-accent-dark: #ff7f7f;
	--clr-accent: var(--clr-accent-light);
	--clr-accent-invert: var(--clr-accent-dark);

	/* === SUCCESS === */
	--clr-success-light: #4caf50;
	--clr-success-dark: #43a047;
	--clr-success: var(--clr-success-light);
	--clr-success-invert: var(--clr-success-dark);

	/* === WARNING === */
	--clr-warning-light: #ff9800;
	--clr-warning-dark: #fb8c00;
	--clr-warning: var(--clr-warning-light);
	--clr-warning-invert: var(--clr-warning-dark);

	/* === DISABLED === */
	--clr-disabled-light: #9e9e9e;
	--clr-disabled-dark: #757575;
	--clr-disabled: var(--clr-disabled-light);
	--clr-disabled-invert: var(--clr-disabled-dark);

	/* === ERROR === */
	--clr-error-light: #e53935;
	--clr-error-dark: #d32f2f;
	--clr-error: var(--clr-error-light);
	--clr-error-invert: var(--clr-error-dark);

	/* === AUTRES VARIABLES === */
	--border-radius: 12px;
	--border-radius-2: calc(12px - 0.35rem);
}

html.dark:root,
body.dark {
	/* on ne redéfinit que les alias, pas les hexa */

	--clr-bg: var(--clr-bg-dark);
	--clr-bg-invert: var(--clr-bg-light);
	--clr-bg-rgb: var(--clr-bg-rgb-dark);
	--clr-bg-invert-rgb: var(--clr-bg-rgb-light);

	--clr-bg-2: var(--clr-bg-2-dark);
	--clr-bg-2-invert: var(--clr-bg-2-light);
	--clr-bg-2-rgb: var(--clr-bg-2-rgb-dark);
	--clr-bg-2-invert-rgb: var(--clr-bg-2-rgb-light);

	--clr-bg-3: var(--clr-bg-3-dark);
	--clr-bg-3-invert: var(--clr-bg-3-light);
	--clr-bg-3-rgb: var(--clr-bg-3-rgb-dark);
	--clr-bg-3-invert-rgb: var(--clr-bg-3-rgb-light);

	--clr-text: var(--clr-text-dark);
	--clr-text-invert: var(--clr-text-light);
	--clr-text-rgb: var(--clr-text-rgb-dark);

	--clr-text-2: var(--clr-text-2-dark);
	--clr-text-2-invert: var(--clr-text-2-light);
	--clr-text-2-rgb: var(--clr-text-2-rgb-dark);

	--clr-text-3: var(--clr-text-3-dark);
	--clr-text-3-invert: var(--clr-text-3-light);
	--clr-text-3-rgb: var(--clr-text-3-rgb-dark);

	--clr-accent: var(--clr-accent-dark);
	--clr-accent-invert: var(--clr-accent-light);

	--clr-success: var(--clr-success-dark);
	--clr-success-invert: var(--clr-success-light);

	--clr-warning: var(--clr-warning-dark);
	--clr-warning-invert: var(--clr-warning-light);

	--clr-disabled: var(--clr-disabled-dark);
	--clr-disabled-invert: var(--clr-disabled-light);

	--clr-error: var(--clr-error-dark);
	--clr-error-invert: var(--clr-error-light);
	color-scheme: dark;
}

html {
	/* scroll-behavior: smooth; */
	-webkit-text-size-adjust: 100%;
}

body {
	font-family:
		'Urbanist Variable',
		'Urbanist',
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		'Open Sans',
		'Helvetica Neue',
		sans-serif;
	background-color: var(--clr-bg);
	color: var(--clr-text);
	line-height: 1.55;
	margin: 0;
}

* {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
}

h3 {
	margin: 0;
}

.section-title {
	margin: 0 0 0.5rem;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--clr-text);
}

main>section {
	position: relative;
	margin-bottom: 2rem;
}

.full-width {
	margin-bottom: 2rem;
	width: 100vw;
	max-width: 100vw;
	padding: 0;
}

main {
	padding: 0 16rem;
}

@media (max-width: 1440px) {
	main {
		padding: 0 4.5rem;
	}
}

@media (max-width: 1024px) {
	main {
		padding: 0 4rem;
	}
}

@media (max-width: 768px) {
	main {
		padding: 0 1rem;
	}

	.section-title {
		font-size: 2rem;
	}
}

button,
input {
	font-family: inherit;
}