/* ─────────────────────────────────────────────────────────
   Base / reset / typography
   ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  transition: background-color .15s ease, color .15s ease;
}

html[dir="rtl"] body {
  font-family: var(--font-ar);
}
html[dir="ltr"] body {
  font-family: var(--font-en);
}
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  font-family: var(--font-ar);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }