/* Base reset and globals */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

html,
body {
	overflow-x: hidden;
}

body {
	font-family: 'Montserrat', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img {
	max-width: 100%;
	height: auto;
	display: block;
}

:root {
	--text: rgb(242, 242, 248);
	--text-dark: rgb(20, 20, 40);
	--accent: rgb(255, 100, 90);

	--color1: hsl(240, 60%, 32%);
	--color2: hsl(225, 56%, 30%);
	--color3: hsl(210, 54%, 30%);
	--color4: hsl(195, 54%, 28%);
	--color5: hsl(180, 48%, 24%);

	--surface: rgba(255, 255, 255, 0.08);
	--surface-strong: rgba(255, 255, 255, 0.12);
	--border: rgba(255, 255, 255, 0.18);

	--shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}