/* Shared brand foundation — ESLabs Academy.
 *
 * The personal site repository carries a deliberately matching copy of the
 * @font-face block and the shared tokens below. The two products share this
 * foundation and differ only in --accent. A change here must be considered for
 * the other copy: https://github.com/MuhammadEissa/muhammad-eissa-website
 *
 * Fonts are self-hosted rather than loaded from Google Fonts. The academy's
 * Content-Security-Policy is style-src 'self' with no font host allowed, so a
 * third-party font would be silently blocked there; self-hosting also removes a
 * third-party dependency from the critical render path.
 *
 * Browsers only download a face that rendered text actually uses, so declaring
 * the mono and display faces costs nothing on pages that do not use them.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-tight-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-arabic-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plex-arabic-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-var.woff2") format("woff2");
}

:root {
  /* Typography. Inter Tight is used for display sizes only, where its tighter
     sidebearings stop long headlines falling apart. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;

  /* Display type wants negative tracking; body text does not. */
  --tracking-display: -0.022em;
  --tracking-eyebrow: 0.14em;

  /* Mint #53f5b0 measures 13.16:1 on the dark surface, but only 1.28:1 on
     --paper and 1.39:1 on white. It is sound on dark and as a button fill with
     dark text on it, which is how this site already uses it. --accent-text is
     the pairing for mint-coloured text on a light surface, where mint itself
     would be unreadable: #0a7d55 measures 4.73:1 on --paper and 5.15:1 on white. */
  --accent-text: #0a7d55;
}