@font-face {
  font-family: "SF Arabic Rounded";
  src: url("/assets/fonts/SF/SF-Arabic-Rounded.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/fonts/SF/SF-Pro-Display-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/fonts/SF/SF-Pro-Display-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-english: "SF Pro Display", Arial, sans-serif;
  --font-arabic: "SF Arabic Rounded", Arial, sans-serif;
  --font-numeric: "SF Pro Display", Arial, sans-serif;
  --font-active: var(--font-english);
}

html[lang="ar"] { --font-active: var(--font-arabic); }
html[lang="en"] { --font-active: var(--font-english); }

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-active);
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
  font-family: var(--font-arabic);
}

.numeric,
[data-numeric] {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: lining-nums tabular-nums;
  unicode-bidi: isolate;
}