/*
 * Taawil — cross-page tokens for typography and the language switcher.
 * Linked before each page's own <style>, so a page can still override.
 */

/* The Latin display/body pair, swapped for Arabic-aware faces when the
   interface language is Arabic (Cormorant and Jost have no Arabic glyphs,
   so without this the whole UI falls back to the system default). */
:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
}
html[lang="ar"] {
  --font-display: 'Amiri', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Noto Sans Arabic', 'Jost', system-ui, sans-serif;
}

/* Arabic is cursive: letter-spacing pulls the joins apart and makes words
   look broken, so the tracking used across the Latin design is neutralised.
   text-transform is a no-op on Arabic but harmless. */
html[lang="ar"] body,
html[lang="ar"] body * { letter-spacing: normal !important; }

/* …except the wordmark, which stays Latin and keeps its brand tracking. */
html[lang="ar"] .logo,
html[lang="ar"] .logo-sm { letter-spacing: 0.15em !important; }

/* Arabic sets taller — diacritics above, descenders below — so it needs
   more leading than the Latin default. */
html[lang="ar"] body { line-height: 1.9; }

/* The display headings are tracked tight for Latin capitals (down to 0.9),
   which makes Arabic ascenders and descenders collide between lines. Arabic
   also carries more width per glyph, so the largest sizes come down a step. */
html[lang="ar"] .hero-title {
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: 1.45;
}
html[lang="ar"] .section-title { font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.5; }
html[lang="ar"] .app-header h1 { line-height: 1.5; }
html[lang="ar"] .paywall-title,
html[lang="ar"] .modal h2,
html[lang="ar"] .auth-modal h2 { line-height: 1.5; }
html[lang="ar"] .plan-price,
html[lang="ar"] .step-num { line-height: 1.2; }

/* Amiri's italic is a slant of a naskh face and reads poorly; the design
   uses italics purely as an accent, so Arabic keeps the upright form. */
html[lang="ar"] em,
html[lang="ar"] i,
html[lang="ar"] .hero-title em,
html[lang="ar"] textarea { font-style: normal; }

/* ── Language switcher, shared by every page ── */
.lang-select {
  background-color: #111;
  border: 1px solid rgba(201, 168, 76, 0.15);
  color: #6b6560;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  outline: none;
  transition: color 0.3s, border-color 0.3s;
}
.lang-select:hover {
  color: #c9a84c;
  border-color: rgba(201, 168, 76, 0.4);
}
.lang-select:focus-visible {
  outline: 2px solid #e2c06e;
  outline-offset: 3px;
}
.lang-select option {
  background: #111;
  color: #d4cfc7;
}