/* =========================================
   SEVIN — DESIGN SYSTEM
========================================= */

@font-face {
	font-family: "Sevin IRANSans";
	src: url("../../fonts/IRANSansX-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sevin IRANSans";
	src: url("../../fonts/IRANSansX-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sevin IRANSans FaNum";
	src: url("../../fonts/IRANSansWebFaNum.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sevin IRANSans FaNum";
	src: url("../../fonts/IRANSansWebFaNum_Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sevin IRANSans FaNum";
	src: url("../../fonts/IRANSansWebFaNum_Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colors */
	--sevin-charcoal: #14212b;
	--sevin-cream: #f4f0e8;
	--sevin-green: #247272;
	--sevin-orange: #ce7838;
	--sevin-gray: #b8b5ae;
	--sevin-white: #f5f8f8;

	/* Typography */
	--sevin-font: "Sevin IRANSans", Tahoma, sans-serif;
	--sevin-font-num: "Sevin IRANSans FaNum", Tahoma, sans-serif;

	--sevin-h1: clamp(34px, 3.6vw, 52px);
	--sevin-h2: clamp(28px, 2.4vw, 36px);
	--sevin-h3: clamp(22px, 1.7vw, 27px);
	--sevin-h4: 22px;
	--sevin-body: 17px;
	--sevin-small: 15px;
	--sevin-vsmall: 13px;

	/* Layout */
	--sevin-container: 1240px;
	--sevin-container-narrow: 980px;

	/* Spacing */
	--sevin-space-xs: 6px;
	--sevin-space-sm: 10px;
	--sevin-space-md: 16px;
	--sevin-space-lg: 24px;
	--sevin-space-xl: 32px;
	--sevin-space-2xl: 48px;
	--sevin-space-3xl: 68px;
	--sevin-space-4xl: 100px;

	/* Shape */
	--sevin-radius: 3px;
	--sevin-radius-sm: 3px;
	--sevin-radius-md: 5px;
	--sevin-radius-lg: 8px;
	--sevin-radius-xlg: 12px;

	/* Motion and shadow */
	--sevin-transition: 280ms cubic-bezier(.22, .61, .36, 1);
	--sevin-shadow: 0 18px 45px rgba(22, 27, 34, .12);
}

/* =========================================
   SHARED CONTAINERS
========================================= */

.sevin-container {
	width: min(
		calc(100% - (var(--sevin-space-lg) * 2)),
		var(--sevin-container)
	);
	margin-inline: auto;
}

.sevin-container--narrow {
	width: min(
		calc(100% - (var(--sevin-space-lg) * 2)),
		var(--sevin-container-narrow)
	);
	margin-inline: auto;
}

/* =========================================
   SHARED SECTION LABEL
========================================= */

.sevin-section-label {
	display: inline-flex;
	align-items: center;
	gap: var(--sevin-space-sm);
	margin: 0 0 var(--sevin-space-md);
	color: var(--sevin-orange);
	font-family: var(--sevin-font-num);
	font-size: var(--sevin-vsmall);
	font-weight: 700;
	letter-spacing: .04em;
}

.sevin-section-label::before {
	flex: 0 0 30px;
	width: 30px;
	height: 1px;
	background: currentColor;
	content: "";
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {
	:root {
		--sevin-body: 16px;
	}

	.sevin-container,
	.sevin-container--narrow {
		width: min(
			calc(100% - (var(--sevin-space-md) * 2)),
			var(--sevin-container)
		);
	}
}