/*
 * One type system across the public site and both dashboards: Inter for
 * Latin, Readex Pro for Arabic.
 *
 * A single stack rather than one per language. The browser picks the face
 * per character, so an English screen showing an Arabic buyer name, or an
 * Arabic screen showing a reference code, each get the right glyphs without
 * the page having to know which is which.
 *
 * `:is()` takes the specificity of its most specific argument, which lifts
 * every selector here above the template's own element and class rules.
 */

:root {
  --app-font: Inter, "Readex Pro", "Segoe UI", Tahoma, sans-serif;
}

html :is(
  body, .nxl-navigation, .nxl-header,
  input, select, textarea, button,
  .form-control, .btn, .card, .modal, .dropdown-menu,
  h1, h2, h3, h4, h5, h6
) {
  font-family: var(--app-font);
}