/* Self-hosted variable fonts; licenses are included in assets/fonts. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./assets/fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./assets/fonts/PlusJakartaSans-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("./assets/fonts/Vazirmatn-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* One UI face per language. Tokens stay so page CSS can keep using them. */
:root {
  --font-en: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --font-fa: "Vazirmatn", Tahoma, sans-serif;
  --font-site: var(--font-en);
  --font-nav: var(--font-en);
  --font-blog: var(--font-en);
  --font-heading: var(--font-en);
  --font-widget: var(--font-en);
  --font-article: var(--font-en);
  --font-lato: var(--font-en);
  --font-havoc: var(--font-en);
}

html[lang="fa"] {
  --font-site: var(--font-fa);
  --font-nav: var(--font-fa);
  --font-blog: var(--font-fa);
  --font-heading: var(--font-fa);
  --font-widget: var(--font-fa);
  --font-article: var(--font-fa);
  --font-lato: var(--font-fa);
  --font-havoc: var(--font-fa);
  --font-shabnam: var(--font-fa);
}

body {
  font-family: var(--font-site);
}

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

.site-header .desktop-nav a,
.site-header .mobile-nav a,
.site-header .mobile-nav button,
.site-header .login-link,
.site-header .nav-download,
.site-header .lang-toggle {
  font-family: var(--font-nav);
}

body.page-blog {
  font-family: var(--font-blog);
  font-size: 14px;
}