/*
* Imports
*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/*
* Root
*/
:root {
	/* Typography */
	--ff-default: 'Jost', sans-serif;
	--ff-titles: 'Jost', sans-serif;
	--ff-serif: 'Playfair Display', serif;

	--fc-400: #404040;
	--fc-700: var(--fc-400);

	--fw-thin: 100;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 600;
	--fw-black: 900;

	--fs-100: 0.625rem;
	--fs-200: 0.75rem;
	--fs-300: 0.875rem;
	--fs-400: 1rem;
	--fs-450: 1.125rem;
	--fs-500: 1.25rem;
	--fs-600: 1.5rem;
	--fs-650: 1.75rem;
	--fs-700: 2rem;
	--fs-750: 2.5rem;
	--fs-800: 3rem;
	--fs-850: 3.5rem;
	--fs-900: 4rem;
	--fs-950: 5rem;

	/* Colors */
	--clr-primary-hsl-400: 0, 0%, 65%;
	--clr-primary-hsl-500: 0, 0%, 55%;
	--clr-secondary-hsl-400: 241, 81%, 54%;
	--clr-secondary-hsl-500: 241, 72%, 46%;

	--clr-neutral-hsl-100: 0, 0%, 100%;
	--clr-neutral-hsl-150: 0, 0%, 96%;
	--clr-neutral-hsl-200: 0, 0%, 92%;
	--clr-neutral-hsl-300: 0, 0%, 87%;
	--clr-neutral-hsl-400: 0, 0%, 67%;
	--clr-neutral-hsl-500: 0, 0%, 47%;
	--clr-neutral-hsl-600: 0, 0%, 31%;
	--clr-neutral-hsl-700: 0, 0%, 13%;
	--clr-neutral-hsl-800: 0, 0%, 6%;
	--clr-neutral-hsl-900: 0, 0%, 0%;

	--clr-good-400: green;
	--clr-good-500: darkgreen;
	--clr-bad-400: red;
	--clr-bad-500: darkred;

	--clr-background-hsl: var(--clr-neutral-hsl-100);

	--clr-surface-100: var(--clr-neutral-100);
	--clr-surface-400: var(--clr-neutral-150);
	--clr-surface-700: var(--clr-neutral-400);

	--gradient-primary-bottom: linear-gradient(to bottom, var(--clr-primary-400), #fff);
	--gradient-primary-transparent-bottom: linear-gradient(to bottom, var(--clr-primary-400), hsl(var(--clr-primary-hsl-400), 0));

	/* Borders */
	--border-clr-200: var(--clr-neutral-200);
	--border-clr-400: var(--clr-neutral-300);
	--border-clr-700: var(--clr-neutral-700);

	--border-width: 2px;

	--border-radius-400: 0;
	--border-radius-700: 0;
	--border-radius-800: 0;
	--border-radius-1000: 0;

	--border: var(--border-width) solid var(--border-clr-400);

	/* Shadows */
	--shadow-clr: var(--clr-neutral-hsl-900);
	--shadow-intensity: 0.1;
	--shadow: 0 1rem 2rem hsla(var(--shadow-clr), var(--shadow-intensity));
	--shadow-big: 0 2rem 4rem hsla(var(--shadow-clr), var(--shadow-intensity));

	/* Animations */
	--animation-movement-intensity: 0.5rem;
	--animation-duration: 0.4s;

	/* Elements */
	--button-fw: var(--fw-medium);
	--button--primary-fc: #fff;
	--button--secondary-border-width: var(--border-width);

	--inp-height: 3rem;
	--inp-border-width: var(--border-width);
	--inp-border-radius: var(--border-radius-400);
	--inp-shadow: 0 0 5px rgba(16, 114, 191, 0.1);
	--inp-clr-bgr: var(--clr-neutral-200);
	--inp-clr-accent: var(--clr-primary-400);
	--inp-fc: var(--fc-700);
	--inp-fs: var(--fs-300);

	/* Wrappers */
	--wrap-width: 1200px;
	--wrap-padding: 1rem;
}

@media (min-width: 481px) {
	:root {
		--wrap-padding: 2rem;
		--fw-bold: 700;
	}
}

@media (max-width: 480px) {
	html {
		font-size: 85%;
	}
}

/*
* 3. Typography
*/
h1,
h2,
h3 {
	letter-spacing: 0.03em;
	line-height: 1;
}

.title {
	font-size: var(--fs-600);
	font-weight: var(--fw-bold);
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.subtitle {
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: var(--fs-200);
}

.section-title {
	font-size: var(--fs-700);
	font-weight: var(--fw-bold);
}

.section-subtitle {
	font-size: var(--fs-500);
}

.text {
	font-size: var(--fs-300);
}

.breadcrumbs {
	--icon-size: 0.25em;
	flex-wrap: wrap;
	gap: 0 0.75em;
	font-size: var(--fs-300);
	letter-spacing: 0.1em;
	line-height: 1.2;
}

.breadcrumbs .icon-embed {
	margin: unset;
}

.contrasting-background {
	--fc-400: var(--clr-neutral-100);
	--fc-700: var(--clr-neutral-100);
	--border-clr-700: var(--clr-neutral-100);
	color: var(--fc-400);
}

html[data-theme='light'] .dark-background {
	--fc-400: var(--clr-neutral-100);
	--fc-700: var(--clr-neutral-100);
	color: var(--fc-400);
}

html[data-theme='dark'] .light-background {
	--fc-400: var(--clr-neutral-100);
	--fc-700: var(--clr-neutral-100);
	color: var(--fc-400);
}

/*
* 4. Elements
*/
.surface {
	padding: 2rem;
	background: var(--clr-surface-400);
	box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
}

/*
* Buttons
*/
.button {
	--_padding-block: 1.7em;
	font-size: var(--fs-300);
	letter-spacing: 0.1em;
}

.button--secondary:hover {
	background-color: var(--fc-700);
	border-color: var(--fc-700);
	color: #fff;
}

@media (min-width: 481px) {
	.button {
		--_padding-block: 1.4em;
		font-size: var(--fs-300);
	}
}