/* ========================================
   Base Styles — Font Faces, RTL, Foundation
   ======================================== */

/* Arabic Quran Font — Uthmanic Hafs (Quran Foundation, locally hosted) */
@font-face {
  font-family: 'UthmanicHafs';
  src: url('../fonts/UthmanicHafs.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fallback Arabic font from CDN */
@font-face {
  font-family: 'AmiriQuran';
  src: url('https://cdn.jsdelivr.net/gh/alif-type/amiri@master/AmiriQuran-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-U+06FF, U+0750-U+077F, U+08A0-U+08FF, U+FB50-U+FDFF, U+FE70-U+FEFF;
}

html {
  font-family: var(--font-body);
  font-size: var(--font-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-canvas);
}

body {
  font-weight: var(--font-weight-normal);
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* RTL base — the mushaf is RTL, UI chrome can be LTR */
[dir="rtl"] {
  text-align: right;
}

/* Display headings — Playfair */
.heading-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
}

/* Body text — Inter */
.text-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
}

/* Muted text */
.text-muted {
  color: var(--color-text-muted);
}

.text-faint {
  color: var(--color-text-faint);
}

/* LTR override for English sections */
[dir="ltr"], .ltr {
  direction: ltr;
  text-align: left;
}

/* Smooth transitions for theme changes */
html {
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* Focus-visible — keyboard navigation gets a gold ring, mouse clicks don't */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Selection color */
::selection {
  background-color: var(--color-gold-glow);
  color: var(--color-text);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-faint);
}