/* ==========================================================================
   Typography & Sacred Text Styles for Bilingual Bible (CUV & NIV 1984)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');

:root {
  /* Font Stacks */
  --font-serif-en: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --font-serif-zh: 'Noto Serif SC', 'Songti SC', SimSun, 'Source Han Serif SC', serif;
  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Font Scales */
  --font-scale-ratio: 1;
  --base-verse-size: 1.16rem;
  --base-line-height: 1.85;

  /* Theme Tokens: Default to Parchment / Warm Classic */
  --bg-app: #fcf9f2;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f5efe4;
  --bg-surface-subtle: #faf5eb;
  
  --text-main: #2b2520;
  --text-muted: #72685d;
  --text-faint: #a89f91;

  --accent-gold: #b38738;
  --accent-gold-hover: #966f28;
  --accent-gold-soft: rgba(179, 135, 56, 0.12);
  --accent-gold-border: rgba(179, 135, 56, 0.35);

  --border-subtle: rgba(100, 80, 50, 0.1);
  --border-strong: rgba(100, 80, 50, 0.22);

  --audio-playing-glow: rgba(179, 135, 56, 0.22);
  --audio-playing-border: #b38738;
  --audio-playing-bg: rgba(245, 235, 215, 0.75);

  --shadow-sm: 0 2px 8px rgba(43, 37, 32, 0.05);
  --shadow-md: 0 8px 24px rgba(43, 37, 32, 0.08);
  --shadow-lg: 0 16px 40px rgba(43, 37, 32, 0.14);
}

/* Light / Pristine Mode */
[data-theme="light"] {
  --bg-app: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f5f9;
  --bg-surface-subtle: #f8fafc;
  
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-faint: #94a3b8;

  --accent-gold: #0284c7;
  --accent-gold-hover: #0369a1;
  --accent-gold-soft: rgba(2, 132, 199, 0.1);
  --accent-gold-border: rgba(2, 132, 199, 0.3);

  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;

  --audio-playing-glow: rgba(2, 132, 199, 0.2);
  --audio-playing-border: #0284c7;
  --audio-playing-bg: rgba(240, 249, 255, 0.88);

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
}

/* Midnight Dark Mode */
[data-theme="dark"] {
  --bg-app: #0e1116;
  --bg-surface: #161b22;
  --bg-surface-elevated: #21262d;
  --bg-surface-subtle: #1c2128;
  
  --text-main: #f0f6fc;
  --text-muted: #8b949e;
  --text-faint: #484f58;

  --accent-gold: #d29922;
  --accent-gold-hover: #e3b341;
  --accent-gold-soft: rgba(210, 153, 34, 0.15);
  --accent-gold-border: rgba(210, 153, 34, 0.4);

  --border-subtle: rgba(240, 246, 252, 0.1);
  --border-strong: rgba(240, 246, 252, 0.2);

  --audio-playing-glow: rgba(210, 153, 34, 0.3);
  --audio-playing-border: #d29922;
  --audio-playing-bg: rgba(210, 153, 34, 0.14);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7);
}

/* Typography Classes */
.text-display {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.text-zh-scripture {
  font-family: var(--font-serif-zh);
  line-height: calc(var(--base-line-height) * 1.05);
  font-size: calc(var(--base-verse-size) * var(--font-scale-ratio));
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
}

.text-en-scripture {
  font-family: var(--font-serif-en);
  line-height: var(--base-line-height);
  font-size: calc(var(--base-verse-size) * 1.08 * var(--font-scale-ratio));
  letter-spacing: 0.01em;
}

/* 中文拼音大字版（长辈阅读） */
.pinyin-text {
  font-family: var(--font-serif-zh);
  font-size: calc(var(--base-verse-size) * 1.15 * var(--font-scale-ratio));
  line-height: calc(var(--base-line-height) * 1.55);
  letter-spacing: 0.05em;
}

.py-ruby {
  ruby-align: center;
  margin: 0 0.02em;
}

.py-ruby rt {
  font-family: var(--font-sans);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  user-select: none;
}

.verse-number {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-gold);
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  margin-right: 0.5rem;
  border-radius: 4px;
  background: var(--accent-gold-soft);
  vertical-align: 0.15em;
}