/* Design tokens and font faces. Everything else in the site refers to these,
   never to a raw hex value or pixel size. Source of truth: SPEC.md §5. */

/* Fonts -------------------------------------------------------------------
   unicode-range routes each codepoint to the right face, so one font stack
   serves both scripts: Latin and digits resolve to Plex Sans / Serif / Mono,
   Arabic resolves to Plex Sans Arabic. That is what keeps reference codes and
   dates identical either side of the language switch. See fonts/README.md. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular-subset.069deb8d42e3.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium-subset.8b1b48c4b204.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-SemiBold-subset.79e23e082ab5.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium-subset.1eba473813ae.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular-subset.fc946916041c.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+FE70-FEFF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Medium-subset.61c960528195.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+FE70-FEFF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold-subset.862fbec94214.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+FE70-FEFF;
}

:root {
  /* Colour -----------------------------------------------------------------
     Brass and verdigris are the same metal at two ages. Brass covers roughly
     five percent of any screen — rules, the stamp, reference codes — and is
     never a background fill. It passes contrast on limestone for large text
     only, so body copy is always --ink. */
  --ink: #10222c;
  --slate: #35505c;
  --limestone: #e7eceb;
  --brass: #9c7a3c;
  --verdigris: #2e6b63;

  /* Derived surfaces. Kept few on purpose. */
  --paper: #f2f5f4;
  --hairline: rgb(53 80 92 / 0.22);
  --brass-hairline: rgb(156 122 60 / 0.45);
  --ink-inverse: var(--limestone);

  /* Type -------------------------------------------------------------------
     Plex Sans Arabic carries every Arabic role; the unicode-range faces above
     make each stack script-aware without a second declaration per language. */
  --font-display: "IBM Plex Serif", "IBM Plex Sans Arabic", Georgia, serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;

  --size-display: 3.25rem;
  --size-title: 2rem;
  --size-lead: 1.375rem;
  --size-body: 1rem;
  --size-fine: 0.8125rem;

  --tracking-display: -0.02em;
  --tracking-mono: 0.06em;
  /* Arabic needs the extra leading more than Latin does — never tightened in RTL. */
  --leading-body: 1.65;
  --leading-display: 1.1;

  /* Space ------------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Structure -------------------------------------------------------------- */
  --measure: 68rem;
  --measure-text: 38rem;
  --radius: 2px;
  --rule: 1px;
  --rule-heavy: 2px;

  --motion-stamp: 400ms;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 48rem) {
  :root {
    --size-display: 2.25rem;
    --size-title: 1.625rem;
    --size-lead: 1.125rem;
    --space-2xl: 3.5rem;
    --space-xl: 2.5rem;
  }
}