/* Base Typography & Global Element Styles */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-lg);
}

p {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.7;
  max-width: 68ch;
}

p.lead {
  font-size: var(--text-md);
  color: var(--ink-light);
  line-height: 1.6;
}

/* Arabic Calligraphic Text */
.arabic-text {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  line-height: 1.8;
  font-size: var(--text-xl);
  color: var(--emerald);
}

.arabic-bismillah {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: center;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  color: var(--gold);
  margin-bottom: var(--space-4);
  letter-spacing: 0.05em;
  opacity: 0.95;
}

/* Text Selection */
::selection {
  background-color: var(--gold-light);
  color: var(--ink);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--parchment);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* Focus Visible Accessibility */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}