@font-face {
  font-family: "VYLI Arabic";
  src: url("/fonts/IBMPlexSansArabic-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "VYLI Arabic";
  src: url("/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "VYLI Arabic";
  src: url("/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "VYLI Arabic";
  src: url("/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

html[lang="ar"] body,
html[lang="ar"] .font-serif,
html[lang="ar"] main h1,
html[lang="ar"] main h2 {
  font-family: "VYLI Arabic", "SF Arabic", "Geeza Pro", Tahoma, Arial, sans-serif;
}

html[lang="ar"] :where(h1, h2, h3, p, a, button, label, span, input, select, textarea) {
  letter-spacing: normal;
}

html[lang="ar"] main h1,
html[lang="ar"] main h2 {
  line-height: 1.3;
  font-weight: 300;
}

html[lang="ar"] main h1 {
  font-size: clamp(2.35rem, 4vw, 4rem);
}

html[lang="ar"] main h2 {
  font-size: clamp(2rem, 3.25vw, 3.4rem);
}

html[lang="ar"] nav a,
html[lang="ar"] button {
  font-weight: 500;
}

html[lang="ar"] .vyli-wordmark {
  font-family: Inter, ui-sans-serif, sans-serif;
  letter-spacing: 0.2em;
}