/* ============================================================
   VoxLive — Foundations
   Colors, type, spacing, radius, shadows.
   Dark-mode-first (AV booths) with warm-paper light mode.
   Trust blue accent · ink near-black · newsprint-warm canvas.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: light dark;

  /* ── PAPER · warm off-whites ─────────────────────────────── */
  --paper-50:  #FBF9F4;   /* brightest; card surface */
  --paper-100: #F7F4EE;   /* page bg in light mode */
  --paper-200: #EFEADF;   /* sunken / subtle band */
  --paper-300: #E3DCCC;   /* hairline */
  --paper-400: #CABFA8;   /* soft borders on paper */
  --paper-500: #A49980;   /* tertiary text on paper */

  /* ── INK · near-blacks (dark surfaces) ───────────────────── */
  --ink-50:   #F5F5F4;    /* foreground on ink */
  --ink-100:  #D6D5D1;    /* muted fg on ink */
  --ink-200:  #A09E97;    /* subtle fg on ink */
  --ink-300:  #6E6C65;
  --ink-400:  #3F3E39;    /* hairline on ink */
  --ink-500:  #2A2A26;    /* elevated surface on ink */
  --ink-600:  #1E1E1B;    /* card surface on ink */
  --ink-700:  #171714;    /* page surface on ink */
  --ink-800:  #111110;
  --ink-900:  #0A0A09;    /* deepest */

  /* ── TRUST · quiet steel-blue (primary accent) ───────────── */
  --trust-50:  #EEF3F7;
  --trust-100: #D5E0EB;
  --trust-200: #A8C0D3;
  --trust-300: #7298B5;
  --trust-400: #4A7898;
  --trust-500: #2C5D7C;   /* primary accent */
  --trust-600: #22495F;
  --trust-700: #1A3748;
  --trust-800: #132835;
  --trust-900: #0C1A23;

  /* ── SIGNAL · live coral (LIVE badge only) ───────────────── */
  --signal-50:  #FBEDE8;
  --signal-300: #E89A87;
  --signal-500: #C33D1F;   /* live badge */
  --signal-600: #9E2E13;
  --signal-700: #75200A;

  /* ── STATUS ──────────────────────────────────────────────── */
  --ok-500:    #3F7350;    /* success / healthy levels */
  --ok-100:    #DCE6DD;
  --warn-500:  #B58220;    /* low mic, soft warnings */
  --warn-100:  #F3E1B3;
  --info-500:  #4A7898;
  --info-100:  #D5E0EB;
  --danger-500: #9E2E13;
  --danger-100: #F4DAD0;

  /* ── Bible verse highlight (editorial) ───────────────────── */
  --verse-hl:    #FCF3D8;  /* active verse background, light */
  --verse-hl-dk: #3A3018;  /* active verse background, dark */
  --verse-num:   #A49980;  /* verse number in margin */
  --verse-num-dk:#8A8578;

  /* ═══════ SEMANTIC TOKENS — LIGHT MODE DEFAULT ═══════════ */

  --bg:            var(--paper-100);   /* page */
  --bg-paper:      var(--paper-50);    /* elevated card */
  --bg-sunken:     var(--paper-200);   /* input well */
  --bg-elevated:   var(--paper-50);
  --bg-ink:        var(--ink-700);     /* inverse / broadcast toolbar */
  --bg-ink-2:      var(--ink-800);

  --fg:            var(--ink-900);
  --fg-muted:      #4B4A44;
  --fg-subtle:     var(--paper-500);
  --fg-on-ink:     var(--ink-50);
  --fg-on-ink-muted: var(--ink-100);
  --fg-on-ink-subtle: var(--ink-200);
  --fg-on-accent:  #FFFFFF;

  --border:        var(--paper-300);
  --border-strong: var(--paper-400);
  --border-ink:    var(--ink-400);
  --border-focus:  var(--trust-500);

  --accent:        var(--trust-500);
  --accent-hover:  var(--trust-600);
  --accent-soft:   var(--trust-100);
  --accent-on-ink: #7FA9C6;  /* trust accent on dark bg — slightly lighter for contrast */

  --live:          var(--signal-500);
  --live-soft:     var(--signal-50);
  --live-on-ink:   #E87259;

  --wash-hover:    rgba(26,24,19,0.04);
  --wash-active:   rgba(26,24,19,0.08);
  --wash-hover-ink: rgba(245,245,244,0.06);
  --wash-active-ink: rgba(245,245,244,0.12);

  /* ── TYPE ─────────────────────────────────────────────────── */

  /* Editorial serif — pull-quotes, verse cards, hero headlines.
     Coverage: Latin + Cyrillic + Vietnamese.
     Fallbacks for CJK / Arabic listener bodies: Noto Serif SC / KR / JP / Arabic. */
  --font-display: 'Newsreader',
                  'Noto Serif SC', 'Noto Serif KR', 'Noto Serif JP',
                  'Noto Naskh Arabic', ui-serif, Georgia, serif;
  --font-serif:   var(--font-display);

  /* Working sans — UI, forms, navigation, meta.
     Coverage: Latin + Cyrillic. Fallbacks for other scripts: Noto Sans SC/KR/JP/Arabic. */
  --font-sans:    'Inter Tight',
                  'Noto Sans SC', 'Noto Sans KR', 'Noto Sans JP',
                  'Noto Sans Arabic', ui-sans-serif, system-ui,
                  -apple-system, 'Segoe UI', sans-serif;

  /* Mono — meters, timestamps, tech labels (tabular). Latin only. */
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — tuned for editorial + dense UI coexistence */
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
  --text-32: 32px;
  --text-40: 40px;
  --text-48: 48px;
  --text-56: 56px;
  --text-64: 64px;
  --text-80: 80px;
  --text-96: 96px;
  --text-128: 128px;

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.65;   /* Bible body copy */

  --track-tight:    -0.02em;
  --track-snug:     -0.01em;
  --track-normal:   0;
  --track-wide:     0.04em;
  --track-caps:     0.16em;  /* eyebrow labels */

  /* ── SPACING — 4px grid ──────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 120px;

  /* ── RADIUS ──────────────────────────────────────────────── */
  --r-xs:  3px;
  --r-sm:  5px;
  --r-md:  7px;
  --r-lg:  10px;
  --r-xl:  14px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ── SHADOW / ELEVATION ──────────────────────────────────── */
  --shadow-inset:   inset 0 1px 0 0 rgba(255,255,255,0.6), inset 0 -1px 0 0 rgba(26,24,19,0.03);
  --shadow-card:    0 1px 2px rgba(26,24,19,0.04), 0 2px 6px rgba(26,24,19,0.03);
  --shadow-card-lg: 0 2px 4px rgba(26,24,19,0.05), 0 8px 24px rgba(26,24,19,0.06);
  --shadow-menu:    0 8px 28px rgba(26,24,19,0.10), 0 2px 6px rgba(26,24,19,0.06);
  --shadow-overlay: 0 24px 64px rgba(10,10,9,0.18), 0 8px 20px rgba(10,10,9,0.10);

  --shadow-card-ink: 0 1px 2px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-menu-ink: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);

  /* ── MOTION ──────────────────────────────────────────────── */
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

/* ═══════ DARK MODE — studio, viewer default, AV booth ═════ */
/* Opt-in: add class="ink" to <html> or any scope. Also honors
   the user's OS pref via media query on [data-theme="auto"]. */
.ink,
[data-theme="dark"],
[data-theme="auto"]:where(:root) {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:            var(--ink-700);
    --bg-paper:      var(--ink-600);
    --bg-sunken:     var(--ink-800);
    --bg-elevated:   var(--ink-500);
    --bg-ink:        var(--ink-700);
    --bg-ink-2:      var(--ink-800);

    --fg:            var(--ink-50);
    --fg-muted:      var(--ink-100);
    --fg-subtle:     var(--ink-200);

    --border:        var(--ink-400);
    --border-strong: #55534C;

    --accent:        var(--accent-on-ink);
    --accent-hover:  #A3C3D9;
    --accent-soft:   rgba(44,93,124,0.20);
    --live:          var(--live-on-ink);

    --wash-hover:    var(--wash-hover-ink);
    --wash-active:   var(--wash-active-ink);

    --shadow-card:   var(--shadow-card-ink);
    --shadow-menu:   var(--shadow-menu-ink);

    --verse-hl:      var(--verse-hl-dk);
    --verse-num:     var(--verse-num-dk);
  }
}

.ink,
[data-theme="dark"] {
  --bg:            var(--ink-700);
  --bg-paper:      var(--ink-600);
  --bg-sunken:     var(--ink-800);
  --bg-elevated:   var(--ink-500);

  --fg:            var(--ink-50);
  --fg-muted:      var(--ink-100);
  --fg-subtle:     var(--ink-200);

  --border:        var(--ink-400);
  --border-strong: #55534C;

  --accent:        var(--accent-on-ink);
  --accent-hover:  #A3C3D9;
  --accent-soft:   rgba(44,93,124,0.22);
  --live:          var(--live-on-ink);

  --wash-hover:    var(--wash-hover-ink);
  --wash-active:   var(--wash-active-ink);

  --shadow-card:   var(--shadow-card-ink);
  --shadow-menu:   var(--shadow-menu-ink);

  --verse-hl:      var(--verse-hl-dk);
  --verse-num:     var(--verse-num-dk);
}

/* ═════════════════ BASE ELEMENTS ════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

/* ── Display / headline ───────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-64);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-40);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-28);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: var(--track-snug);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--text-14);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-2);
}

/* ── Body ────────────────────────────────────────────────── */
p {
  margin: 0 0 var(--space-4);
  max-width: 62ch;
  text-wrap: pretty;
}
p.lead {
  font-family: var(--font-display);
  font-size: var(--text-20);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
  font-weight: 400;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

small { font-size: var(--text-13); color: var(--fg-muted); }

/* ── Code / mono ─────────────────────────────────────────── */
code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss01", "ss02";
}
code { background: var(--bg-sunken); padding: 2px 5px; border-radius: var(--r-xs); }

/* ── Utilities ───────────────────────────────────────────── */
.tabular { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-32);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  font-variation-settings: "opsz" 42;
  font-weight: 400;
  margin: 0;
  max-width: 24ch;
}

/* Editorial drop-cap for Bible body */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.8em;
  float: left;
  line-height: 0.86;
  margin: 0.06em 0.08em 0 0;
  color: var(--accent);
}

/* Bible verse body — loose, serif, number-in-margin style */
.verse-body {
  font-family: var(--font-display);
  font-size: var(--text-20);
  line-height: var(--leading-loose);
  font-variation-settings: "opsz" 16;
  color: var(--fg);
  max-width: 36ch;
  font-weight: 400;
}
.verse-body sup {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.62em;
  color: var(--verse-num);
  vertical-align: 0.5em;
  margin-right: 0.25em;
  letter-spacing: 0;
}
.verse-body .active {
  background: var(--verse-hl);
  padding: 0 0.12em;
  border-radius: 2px;
  transition: background var(--dur-med) var(--ease-out);
}

/* RTL support — flips numerals margin for Arabic listener bodies */
[dir="rtl"] .verse-body sup { margin-left: 0.25em; margin-right: 0; }

/* Masthead rule (editorial divider) */
.masthead-rule {
  height: 2px;
  background: var(--fg);
  width: 64px;
}
.ink .masthead-rule, [data-theme="dark"] .masthead-rule { background: var(--fg-on-ink); }

/* Live pulse dot */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--live);
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* Focus ring — consistent across inputs & buttons */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Thin horizontal rule, editorial */
hr.ed {
  border: 0;
  border-top: 1px solid var(--border-ink);
  margin: var(--space-8) 0;
}