/* ═══════════════════════════════════════════════
   WAJHA AGENCY — BASE.CSS
   Rule: Document-level defaults, typography, scrollbars.
   All values must come from var(--color-*), var(--font-*), etc.
   ═══════════════════════════════════════════════ */

:root {
  color-scheme: dark;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-arabic);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  overflow-x: hidden;
  text-align: start;
}

/* Typography Selection Rules for BiDi (Arabic/Latin) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-arabic);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

/* Set Space Grotesk for numbers/latin segments */
[lang="en"], .number-font, .stat-number, .price-number {
  font-family: var(--font-latin);
}

/* Force LTR direction on numbers and phone/whatsapp links to prevent RTL scrambling */
.number-font, .stat-number, .price-number, [href^="tel:"], [href*="wa.me"] {
  direction: ltr !important;
  unicode-bidi: embed !important;
  display: inline-block;
}

p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: var(--space-2);
  height: var(--space-2);
}

::-webkit-scrollbar-track {
  background: var(--color-bg-page);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-base);
  border-radius: var(--radius-full);
  transition: background var(--ease-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-primary-mid);
}

/* Selection highlight */
::selection {
  background-color: var(--color-brand-primary-mid);
  color: var(--color-text-primary);
}

/* Focus indicator resets */
:focus-visible {
  outline: 2px solid var(--color-brand-accent);
  outline-offset: 4px;
}

/* ── BILINGUAL VISIBILITY RULES ── */
html[lang="ar"] [data-lang="en"] {
  display: none !important;
}

html[lang="en"] [data-lang="ar"] {
  display: none !important;
}

/* English Typography Override */
html[lang="en"] body,
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] .btn,
html[lang="en"] .form-control {
  font-family: var(--font-latin);
}