/** Locally hosted, licensed and hash-pinned Mesle Aval typography. */

@font-face {
	font-family: "Vazirmatn";
	src: url("../fonts/vazirmatn-v33.003-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-v4.1-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--font-family-persian: "Vazirmatn", Tahoma, Arial, sans-serif;
	--font-family-latin: "Inter", "Vazirmatn", Arial, sans-serif;
	--font-size-caption: 14px;
	--font-size-body: 16px;
	--font-size-h3: 18px;
	--font-size-h2: 22px;
	--font-size-h1: 28px;
	--font-size-display: 32px;
	--line-height-caption: 22px;
	--line-height-body: 26px;
	--line-height-h3: 28px;
	--line-height-h2: 32px;
	--line-height-h1: 40px;
	--line-height-display: 44px;
}

body.mesle-aval-theme,
:where(.mesle-aval-theme) :where(button, input, select, textarea) {
	font-family: var(--font-family-persian);
}

.ma-latin,
.ma-code,
[data-ma-code] {
	font-family: var(--font-family-latin);
	font-variant-numeric: tabular-nums;
}