/*
 * Living Literature — Phase 2 & 3
 * Zone A: Reader Browsing  (all public pages)
 * Zone B: Reader Room      (.reader-landing-page)
 *
 * Loaded after main.css and any page-specific CSS.
 * Per-page CSS files (books.css, research.css, etc.) control --page-bg
 * and --page-accent, preserving each section's colour personality.
 * This file adds only new --ll-* variables and overrides typography/buttons.
 *
 * Fonts: DM Serif Display · Lora · Inter — injected via <link> in HTML
 */

/* ── New variables (do NOT re-declare --page-* here) ───── */
:root {
  --ll-ink:              #1a2230;
  --ll-ink-soft:         #3a4455;
  --ll-btn-primary:      #2d3e56;
  --ll-btn-hover:        #1e2d42;
  --ll-border:           #e4dbd0;
  --ll-btn-ghost-border: #b8c4d4;
}

/* ════════════════════════════════════════════════════════
   ZONE A — Typography
   ════════════════════════════════════════════════════════ */

/* Body — Lora for all running text */
body {
  font-family: 'Lora', Georgia, serif;
  color: var(--ll-ink-soft);
}

/* Keep UI elements in sans-serif */
input, select, textarea, button,
#header, #menu, #footer,
.button, nav {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
}

/* h1 — DM Serif Display, natural case */
#main h1,
.ll-hero-copy h1,
#wrapper > article > header h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ll-ink);
  line-height: 1.15;
}

/* h2 — DM Serif Display section heads */
#main h2,
#wrapper > article h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.45em;
  line-height: 1.25;
  color: var(--ll-ink);
  margin-bottom: 0.75em;
}

/* h3 — Inter small-caps label */
#main h3,
#wrapper > article h3 {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ll-ink);
  line-height: 1.4;
  margin-bottom: 1em;
}

/* ── Links (colour comes from per-page --page-accent) ───── */
a {
  color: var(--ll-ink-soft);
  border-bottom-color: rgba(58, 68, 85, 0.2);
}
a:hover {
  color: var(--page-accent) !important;
  border-bottom-color: transparent;
}

/* Eyebrow labels */
.eyebrow,
.ll-hero .eyebrow {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
  color: var(--page-accent-strong, #8a7a68);
  opacity: 0.8;
}

/* ── Buttons — Zone A palette (navy primary always) ──────── */
.button {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 7px !important;
  background: transparent;
  color: var(--ll-btn-primary) !important;
  box-shadow: none !important;
  border: 1.5px solid var(--ll-btn-ghost-border) !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.button:hover {
  background: rgba(45, 62, 86, 0.05) !important;
  border-color: var(--ll-btn-primary) !important;
  color: var(--ll-btn-primary) !important;
  box-shadow: none !important;
}
.button.primary {
  background: var(--ll-btn-primary) !important;
  border-color: var(--ll-btn-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.button.primary:hover {
  background: var(--ll-btn-hover) !important;
  border-color: var(--ll-btn-hover) !important;
}

/* Book card buttons */
.ll-book-card .ll-actions .button.primary {
  background: var(--ll-btn-primary) !important;
  color: #fff !important;
  border-color: var(--ll-btn-primary) !important;
  box-shadow: none !important;
}
.ll-book-card .ll-actions .button:not(.primary) {
  background: transparent !important;
  color: var(--ll-btn-primary) !important;
  border: 1.5px solid var(--ll-btn-ghost-border) !important;
  box-shadow: none !important;
}

/* ── Cards / surfaces ─────────────────────────────────────── */
.demo-card,
.companion-card,
.stage-card {
  background: var(--page-surface, #faf7f2);
  border-color: var(--ll-border);
}

.quote-block {
  background: var(--page-surface, #faf7f2);
  border-left-color: var(--page-accent, #9a8a78);
  border-color: var(--ll-border);
}

.ll-book-card {
  background: var(--page-surface, #faf7f2);
  border-color: var(--ll-border);
}

.ll-compact-block {
  background: var(--page-surface, #faf7f2);
  border-color: var(--ll-border);
  border-radius: 8px;
}

.ll-intro-block {
  background: var(--page-surface-strong, #f5f0e8);
  border-color: var(--page-accent-soft, rgba(154, 138, 120, 0.2));
}

.ll-indices-block {
  background: var(--page-surface, #faf7f2);
  border-color: var(--ll-border);
}

/* Footer */
#footer {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
}

/* ════════════════════════════════════════════════════════
   ZONE B — Reader Room (.reader-landing-page)
   ════════════════════════════════════════════════════════ */

.reader-landing-page {
  background: #0d1b2a;
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
}

/* Zone B h1 */
.reader-landing-page h1,
.reader-landing-page .reader-hero h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  color: #dce8f4;
}

/* Zone B h2 */
.reader-landing-page h2,
.reader-landing-page .reader-card h2 {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 0.72em;
  text-transform: uppercase;
  color: #4a7090;
  margin-bottom: 0.6em;
}

/* Zone B body text */
.reader-landing-page p,
.reader-landing-page .reader-card p {
  font-family: 'Lora', Georgia, serif;
  color: #9ab8cc;
  line-height: 1.7;
}

/* Zone B kicker */
.reader-landing-page .reader-kicker {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
  color: #4a7090;
}

/* Zone B links */
.reader-landing-page a {
  color: #4a9e95;
  border-bottom-color: rgba(74, 158, 149, 0.3);
}
.reader-landing-page a:hover {
  color: #6ab8af !important;
  border-bottom-color: transparent;
}

/* Zone B buttons — teal */
.reader-landing-page .button {
  background: #4a9e95 !important;
  border-color: #4a9e95 !important;
  color: #0a1520 !important;
  border-radius: 7px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow: none !important;
}
.reader-landing-page .button:hover {
  background: #3a8e85 !important;
  border-color: #3a8e85 !important;
}

/* Zone B cards */
.reader-landing-page .reader-card {
  background: #12253a;
  border-color: #1e3550;
  border-radius: 8px;
}

/* Zone B disabled */
.reader-landing-page .reader-card .button[aria-disabled="true"] {
  background: rgba(74, 158, 149, 0.28) !important;
  border-color: rgba(74, 158, 149, 0.35) !important;
  color: #6ab8af !important;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════
   ZONE B — Member Room (body.member-room-env)
   ════════════════════════════════════════════════════════ */

/* Base font */
body.member-room-env {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
}

/* h1 — DM Serif Display */
body.member-room-env .mem-room-heading h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  color: #dce8f4;
}

/* Subtitle — Lora */
body.member-room-env .mem-subtitle {
  font-family: 'Lora', Georgia, serif;
  color: #9ab8cc;
  font-style: italic;
}

/* Kicker badge — Inter */
body.member-room-env .mem-kicker {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
  color: #4a9e95;
  border-color: rgba(74, 158, 149, 0.35);
  background: rgba(74, 158, 149, 0.1);
}

/* User line */
body.member-room-env .mem-userline {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
  color: #9ab8cc;
}

/* Card / panel h2 labels — keep Inter uppercase */
body.member-room-env .mem-card h2,
body.member-room-env .mem-main h2 {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
  color: #4a7090;
  letter-spacing: 0.14em;
}

/* Companion response text — Lora for reading */
body.member-room-env .mem-msg.assistant {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.9em;
  line-height: 1.72;
  color: #c8daf0;
}

/* User message — Inter */
body.member-room-env .mem-msg.user {
  font-family: 'Inter', 'Source Sans Pro', Helvetica, sans-serif;
}

/* Welcome text — Lora */
body.member-room-env .mem-welcome-intro,
body.member-room-env .mem-welcome-outro {
  font-family: 'Lora', Georgia, serif;
  color: #9ab8cc;
  line-height: 1.7;
}

/* ── Header utility buttons (Switch to Light, My Reader Page, Sign Out) ── */
body.member-room-env .mem-header-actions .button {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: none !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #9ab8cc !important;
  border: 1.5px solid rgba(74, 158, 149, 0.35) !important;
  box-shadow: none !important;
  padding: 0.35em 0.85em !important;
  line-height: 1.6 !important;
  height: auto !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}
body.member-room-env .mem-header-actions .button:hover {
  border-color: #4a9e95 !important;
  color: #dce8f4 !important;
  background: rgba(74, 158, 149, 0.08) !important;
}

/* ── Bottom action buttons — Zone B demo sizing ────────────── */
body.member-room-env .mem-response-actions .button,
body.member-room-env .mem-input-actions .button,
body.member-room-env .mem-danger-zone .button {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: none !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #9ab8cc !important;
  border: 1.5px solid rgba(74, 158, 149, 0.35) !important;
  box-shadow: none !important;
  padding: 0.38em 1em !important;
  line-height: 1.6 !important;
  height: auto !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
body.member-room-env .mem-response-actions .button:hover,
body.member-room-env .mem-input-actions .button:hover,
body.member-room-env .mem-danger-zone .button:hover {
  border-color: #4a9e95 !important;
  color: #dce8f4 !important;
  background: rgba(74, 158, 149, 0.08) !important;
}
/* Send button — teal filled */
body.member-room-env .mem-input-actions .button.primary {
  background: #4a9e95 !important;
  border-color: #4a9e95 !important;
  color: #0a1520 !important;
}
body.member-room-env .mem-input-actions .button.primary:hover {
  background: #3a8e85 !important;
  border-color: #3a8e85 !important;
}

/* ── Light theme text fix ─────────────────────────────────── */
body.member-theme-light.member-room-env .mem-msg.assistant {
  color: #1c2a4a !important;
}
body.member-theme-light.member-room-env .mem-welcome-intro,
body.member-theme-light.member-room-env .mem-welcome-outro {
  color: #2a3a54 !important;
}

/* Primary button — Zone B teal */
body.member-room-env .button.primary,
body.member-room-env button.primary {
  background: #4a9e95 !important;
  border-color: #4a9e95 !important;
  color: #0a1520 !important;
  box-shadow: none !important;
}
body.member-room-env .button.primary:hover,
body.member-room-env button.primary:hover {
  background: #3a8e85 !important;
  border-color: #3a8e85 !important;
}