/* Per the CSS spec, @import must precede all other rules (besides @charset
   and @layer) or it is invalid and the browser drops it silently, along
   with every --kasb-* token used below. Keep this line first — do not move
   it after the @font-face blocks for tidiness. */
@import "/tokens.css";

@font-face {
  font-family: "Readex Pro";
  src: url("/fonts/readex-pro.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Readex Pro";
  src: url("/fonts/readex-pro-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: "Readex Pro", system-ui, sans-serif;
  /* Arabic body never goes below 16px, and never below 1.75 line-height. */
  font-size: 17px;
  line-height: 1.85;
  color: var(--kasb-text);
  background: var(--kasb-ground);
}

/* Latin-only tracking. Never applied to Arabic. */
.label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* Numbers that must line up in a column, and text a user retypes. */
.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

:focus-visible {
  outline: 2px solid var(--kasb-brand);
  outline-offset: 2px;
}