/* Fonts, reset, typography and small utilities. RTL-first: logical properties only. */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.3; font-weight: 600; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }

a { color: var(--color-primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }

.icon {
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Numbers, times and money: Western digits, aligned. */
.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 22px;
  white-space: nowrap;
}

.section { margin-block: var(--space-5); }
.section__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-block-end: var(--space-3);
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.skip-link:focus { inset-block-start: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Identity lockup (partials/brand_lockup): the image's height is set per place;
   the lighter copy replaces the brand-blue one in the dark theme. */
.brand-lockup { display: inline-flex; align-items: center; block-size: 40px; max-inline-size: 100%; }
.brand-lockup__img { block-size: 100%; inline-size: auto; max-inline-size: 100%; object-fit: contain; }
.brand-lockup__img--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-lockup__img--light { display: none; }
  :root:not([data-theme="light"]) .brand-lockup__img--dark { display: block; }
}
:root[data-theme="dark"] .brand-lockup__img--light { display: none; }
:root[data-theme="dark"] .brand-lockup__img--dark { display: block; }
.brand-lockup--header { block-size: 34px; }
.brand-lockup--sidebar { block-size: 46px; }
.brand-lockup--login { block-size: 76px; }
.brand-lockup--page { block-size: 60px; }
.brand-lockup--print { block-size: 52px; }