@layer typography {

  /*
   * Bundled faces. Every src points at a real WOFF2 file inside this theme;
   * there is no remote font host, no Google Fonts and no CDN anywhere.
   *
   * No face carries a unicode-range. That is deliberate. A unicode-range split
   * makes the browser choose the typeface per character, so Latin words and
   * digits inside Arabic copy would silently render in a different typeface than
   * the sentence around them. Here the declared language of the content chooses
   * the family, and the chosen family renders every character in the run.
   *
   * The shipped IBM Plex Sans Arabic files are the complete-charset builds:
   * 1706 glyphs covering Arabic, Latin and Western digits. An Arabic page needs
   * no second family for a brand name or a year.
   */

  @font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  }

  @font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
  }

  @font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  }

  @font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
  }

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

  /* ---- Language decides the typeface ---------------------------------------- */

  /*
   * One rule each, driven by the declared language. Arabic content is set in IBM
   * Plex Sans Arabic throughout, including any Latin inside it. English content
   * is set in Inter throughout.
   *
   * A deliberate exception is written, not guessed: marking a run lang="en"
   * inside Arabic copy sets that run in Inter, and lang="ar" inside English copy
   * sets it in IBM Plex Sans Arabic. Ordinary content needs no extra markup, and
   * nothing switches typeface on its own.
   */

  :lang(ar) { font-family: var(--alasadi-font-ar); }

  :lang(en) { font-family: var(--alasadi-font-en); }

  /* ---- Headings ------------------------------------------------------------ */

  h1, h2, h3, h4, h5, h6 {
    line-height: var(--alasadi-leading-heading);
    font-weight: var(--alasadi-weight-semibold);
    /* No tracking on Arabic: it breaks the joining of the script. */
    letter-spacing: normal;
  }

  h1 { font-size: var(--alasadi-h1); }
  h2 { font-size: var(--alasadi-h2); }
  h3 { font-size: var(--alasadi-h3); }
  h4 { font-size: var(--alasadi-h4); }
  h5 { font-size: var(--alasadi-text-lg); }
  h6 { font-size: var(--alasadi-text-base); }

  /* Tracking is a Latin-only device and is scoped accordingly. */
  h1:lang(en),
  h2:lang(en) {
    letter-spacing: var(--alasadi-tracking-display);
  }

  /* ---- Body ----------------------------------------------------------------- */

  p, li, dd, figcaption, blockquote {
    line-height: var(--alasadi-leading-body);
  }

  small { font-size: var(--alasadi-text-sm); }

  strong, b { font-weight: var(--alasadi-weight-semibold); }

  /* ---- Editorial rhythm ------------------------------------------------------ */

  .alasadi-prose > * + * { margin-block-start: var(--alasadi-space-5); }

  .alasadi-prose > * + :is(h2, h3, h4) { margin-block-start: var(--alasadi-space-7); }

  .alasadi-prose {
    max-inline-size: var(--alasadi-measure);
    color: var(--alasadi-fg-soft);
  }

  .alasadi-prose :is(h1, h2, h3, h4, h5, h6) { color: var(--alasadi-fg); }

  .alasadi-prose :is(ul, ol) { padding-inline-start: var(--alasadi-space-5); }

  /* ---- Mixed-script isolation -------------------------------------------------- */

  /*
   * Latin runs inside Arabic (a brand name, a phone number) are isolated so the
   * bidirectional algorithm cannot reorder the surrounding sentence.
   */
  bdi { unicode-bidi: isolate; }
}