@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
	--color-primary: #e50914;
	--color-secondary: #f6c343;
	--color-background: #09090b;
	--color-surface: #151518;
	--color-text: #f7f7f8;
	--color-muted: #a1a1aa;
	--color-accent: #f6c343;
	--color-border: #2b2b31;
	--color-primary-dark: #b70710;
	--color-primary-soft: rgba(229, 9, 20, 0.14);
	--color-surface-raised: #1d1d22;
	--color-header-bg: rgba(9, 9, 11, 0.94);
	--color-footer-bg: #050506;
	--color-hero-overlay-start: rgba(9, 9, 11, 0.95);
	--color-hero-overlay-mid: rgba(9, 9, 11, 0.78);
	--color-hero-overlay-end: rgba(229, 9, 20, 0.5);
	--color-section-muted: #111114;
	color-scheme: dark;
	--font-heading: "Montserrat", "Arial Black", Impact, sans-serif;
	--font-body: "Plus Jakarta Sans", "Inter", Arial, sans-serif;
	--font-button: "Montserrat", Arial, sans-serif;
	--container: 1120px;
}

:root[data-theme="light"] {
	--color-background: #f7f7f2;
	--color-surface: #ffffff;
	--color-text: #18181b;
	--color-muted: #52525b;
	--color-border: #deded4;
	--color-primary-soft: rgba(229, 9, 20, 0.1);
	--color-surface-raised: #eeeee6;
	--color-header-bg: rgba(255, 255, 250, 0.94);
	--color-footer-bg: #ffffff;
	--color-hero-overlay-start: rgba(9, 9, 11, 0.82);
	--color-hero-overlay-mid: rgba(9, 9, 11, 0.58);
	--color-hero-overlay-end: rgba(229, 9, 20, 0.32);
	--color-section-muted: #eeeee6;
	color-scheme: light;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 160ms ease, color 160ms ease;
}

a {
	color: inherit;
}

h1,
h2,
h3,
.site-header__brand,
.button {
	font-family: var(--font-heading);
	letter-spacing: 0;
	text-transform: uppercase;
}

.container {
	width: min(100% - 32px, var(--container));
	margin: 0 auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 860px) {
	html {
		scroll-padding-top: 84px;
	}
}

@media (max-width: 420px) {
	html {
		scroll-padding-top: 84px;
	}
}