/* Base styles: variables, reset, typography, and generic elements */
@font-face {
	font-family: "Vazirmatn";
	src: url("../fonts/vazirmatn/Vazirmatn-Variable.woff2") format("woff2-variations");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--bg: #242539;
	--bg-deep: #242539;
	--panel: rgba(38, 45, 74, 0.82);
	--panel-soft: rgba(255, 255, 255, 0.055);
	--border: rgba(255, 255, 255, 0.09);
	--text: #f7f7fb;
	--muted: #aeb4c5;
	--gold: #ffc414;
	--gold-dark: #c79300;
	--green: #43e986;
	--shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Vazirmatn", Tahoma, sans-serif;
	color: var(--text);
	background: var(--bg);
	overflow-x: hidden;
}

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

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

button,
input,
textarea,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
}