:root {
	--max-width: 1200px;
	
	--font-family-sans: Inter, sans-serif;
	--font-family-mono: JetBrains Mono, monospace;
	--font-family-serif: IBM Plex Serif, serif;

	--font-size-2xs: 0.625rem;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 1.75rem;
	--font-size-3xl: 2rem;
	--font-size-4xl: 2.5rem;
	--font-size-5xl: 3rem;

	--breakpoint-2xs: 320px;
	--breakpoint-xs: 480px;
	--breakpoint-sm: 690px;
	--breakpoint-md: 1024px;
	--breakpoint-lg: 1400px;
	--breakpoint-xl: 1920px;

	--icon-size-xs: 1rem;
	--icon-size-sm: 2rem;
	--icon-size-md: 3rem;
	--icon-size-lg: 4rem;
	--icon-size-xl: 5rem;

	--slider-size-xs: 1rem;
	--slider-size-sm: 1.5rem;
	--slider-size-md: 2rem;
	--slider-size-lg: 2.5rem;
	--slider-size-xl: 3rem;

	--color-foreground: #2C2C2C;
	--color-background: #F8F7F5;
	--color-primary: #1B4D4F;
	--color-secondary: #C97B3D;
}

html,
body {
	width: 100%;
	max-width: 100vw;
	min-height: 100vh;
	min-height: 100svh;
	overflow-x: hidden;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	color: var(--foreground);
	background: var(--background);

	font-family: var(--font-family-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	line-height: 1.6;
}

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

button {
	all: unset;
	outline: revert;
}

button:focus {
	outline: revert;
}