:root {
	/* === DUAL === */
	--clr-wb-light: hsl(0, 0%, 100%);
	--clr-wb-dark: hsl(0, 0%, 0%);
	--clr-wb: var(--clr-wb-light);

	/* === BACKGROUND === */
	--clr-bg-light: hsl(210, 14%, 87%);
	--clr-bg-dark: hsl(240, 2%, 6%);
	--clr-bg: var(--clr-bg-light);
	--clr-bg-invert: var(--clr-bg-dark);
	--clr-bg-2-light: hsl(210, 14%, 90%);
	--clr-bg-2-dark: hsl(240, 2%, 10%);
	--clr-bg-2: var(--clr-bg-2-light);
	--clr-bg-2-invert: var(--clr-bg-2-dark);
	--clr-bg-3-light: hsl(210, 14%, 93%);
	--clr-bg-3-dark: hsl(240, 2%, 14%);
	--clr-bg-3: var(--clr-bg-3-light);
	--clr-bg-3-invert: var(--clr-bg-3-dark);
	--clr-bg-4-light: hsl(210, 14%, 96%);
	--clr-bg-4-dark: hsl(240, 2%, 18%);
	--clr-bg-4: var(--clr-bg-4-light);
	--clr-bg-4-invert: var(--clr-bg-4-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-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-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);

	/* === ACCENT === */
	--clr-accent-light: #7c3aed;
	--clr-accent-dark: #a673ff;
	--clr-accent: var(--clr-accent-light);
	--clr-accent-invert: var(--clr-accent-dark);
	--clr-accent-rgb: 139, 92, 246;
	--clr-accent-2-light: #8b5cf6;
	--clr-accent-2-dark: #b68cff;
	--clr-accent-2: var(--clr-accent-2-light);
	--clr-accent-2-invert: var(--clr-accent-2-dark);
	--clr-accent-3-light: #a78bfa;
	--clr-accent-3-dark: #cfb3ff;
	--clr-accent-3: var(--clr-accent-3-light);
	--clr-accent-3-invert: var(--clr-accent-3-dark);

	/* === SUCCESS === */
	--clr-success-light: #7bc992;
	--clr-success-dark: #6cc186;
	--clr-success: var(--clr-success-light);
	--clr-success-invert: var(--clr-success-dark);

	/* === WARNING === */
	--clr-warning-light: #f6bd60;
	--clr-warning-dark: #f6bd60;
	--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: #f58a8a;
	--clr-error-dark: #ff7f7f;
	--clr-error: var(--clr-error-light);
	--clr-error-invert: var(--clr-error-dark);

	/* === BORDER === */
	--border-radius: 0.7rem;
	--border-radius-2: calc(var(--border-radius) - 0.35rem);

	/* === TRANSITIONS === */
	--transition-duration: 0.3s;
	--transition-ease: cubic-bezier(0.4, 1, 0.3, 1);
	--transition: var(--transition-duration) var(--transition-ease);
	--transition-slow: calc(var(--transition-duration) * 3) var(--transition-ease);
	--scale: 1.02;

	/* === SERIES CARDS === */
	--series-card-width: 12rem;
	--series-card-height: calc((var(--series-card-width) * 3) / 2);

	/* === HERO BACKGROUND BRIGHTNESS === */
	--hero-bg-brightness-light: 0.65;
	--hero-bg-brightness-dark: 0.45;
	--hero-bg-brightness: var(--hero-bg-brightness-light);

	/* === LAYOUT === */
	--page-gutter: 16rem;
	--header-search-width: 15rem;
	--header-search-expanded-width: 20rem;
	--header-search-compact-size: 2.5rem;
}

html.dark:root,
body.dark {
	/* on ne redéfinit que les alias, pas les hexa */
	--clr-wb: var(--clr-wb-dark);
	--clr-bg: var(--clr-bg-dark);
	--clr-bg-invert: var(--clr-bg-light);
	--clr-bg-2: var(--clr-bg-2-dark);
	--clr-bg-2-invert: var(--clr-bg-2-light);
	--clr-bg-3: var(--clr-bg-3-dark);
	--clr-bg-3-invert: var(--clr-bg-3-light);
	--clr-bg-4: var(--clr-bg-4-dark);
	--clr-bg-4-invert: var(--clr-bg-4-light);
	--hero-bg-brightness: var(--hero-bg-brightness-dark);
	--clr-text: var(--clr-text-dark);
	--clr-text-invert: var(--clr-text-light);
	--clr-text-2: var(--clr-text-2-dark);
	--clr-text-2-invert: var(--clr-text-2-light);
	--clr-text-3: var(--clr-text-3-dark);
	--clr-text-3-invert: var(--clr-text-3-light);
	--clr-accent: var(--clr-accent-dark);
	--clr-accent-invert: var(--clr-accent-light);
	--clr-accent-rgb: 139, 92, 246;
	--clr-accent-2: var(--clr-accent-2-dark);
	--clr-accent-2-invert: var(--clr-accent-2-light);
	--clr-accent-3: var(--clr-accent-3-dark);
	--clr-accent-3-invert: var(--clr-accent-3-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);
}

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.15;
	margin: 0;
}
* {
	box-sizing: border-box;
}

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

h3 {
	margin: 0;
}

button {
	font-family: inherit;
	cursor: pointer;
}

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

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

.action-icon {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
}

main {
	padding: 0 var(--page-gutter);
}

@media (max-width: 90rem) {
	:root {
		--page-gutter: 4.5rem;
	}
}

@media (max-width: 48rem) {
	:root {
		--border-radius: 0.25rem;
		--page-gutter: 1.5rem;
	}
}