/* ============================================================ BibleBridge Reader — reader.css Logos-inspired: clean typography, sidebar nav, warm white ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --sidebar-width: 220px; --header-height: 60px; --brand-dark: #1a1512; --brand-mid: #2a1f15; --accent: #9e7640; --accent-hover: #7e5c2e; --text-primary: #1a1a1a; --text-secondary: #555; --text-muted: #888; --bg-page: #faf9f7; --bg-sidebar: #1a1512; --bg-sidebar-hover: rgba(255,255,255,0.06); --bg-sidebar-active: rgba(255,255,255,0.12); --border-light: #e8e4de; --border-divider: #ccc7bf; --verse-font-size: 1.15rem; --verse-line-height: 1.9; /* surface vars — swap for dark mode */ --bg-card: #ffffff; --bg-subtle: #f5f3ef; --bg-hover: rgba(158,118,64,0.07); --highlight-bg: #fef8e4; --highlight-border: #c49226; --search-em-bg: #fef3c7; --search-em-color: #1a1a1a; --badge-bg: #ede9e3; --badge-color: #7a6e64; --rel-type-bg: #ede9e3; } /* ============================================================ DARK MODE — toggled via [data-theme="dark"] on Applied before first paint by inline script in ============================================================ */ [data-theme="dark"] { --text-primary: #ddd8ce; --text-secondary: #9a9285; --text-muted: #62594f; --bg-page: #191815; --bg-sidebar: #0f0e0c; --bg-sidebar-hover: rgba(255,255,255,0.05); --bg-sidebar-active: rgba(255,255,255,0.10); --border-light: #2c2924; --border-divider: #3a3530; --accent: #c49840; --accent-hover: #a07828; --brand-dark: #0c0b09; --brand-mid: #181610; --bg-card: #222018; --bg-subtle: #1e1c16; --bg-hover: rgba(196,152,64,0.08); --highlight-bg: #28220e; --highlight-border: #c49226; --search-em-bg: #2a2310; --search-em-color: #e8d89a; --badge-bg: #292520; --badge-color: #66605a; --rel-type-bg: #252118; } /* Smooth theme transitions */ body { transition: background-color 0.2s ease, color 0.2s ease; } /* Dark mode: recolor light-coded edge/relation badges */ [data-theme="dark"] .te-edge-leadsto, [data-theme="dark"] .rel-type[data-type="leads-to"] { background: #0e2232; color: #60b4e8; } [data-theme="dark"] .te-edge-resultsin, [data-theme="dark"] .rel-type[data-type="results-in"] { background: #0e2218; color: #4ecf84; } [data-theme="dark"] .te-edge-cause, [data-theme="dark"] .rel-type[data-type="cause"] { background: #2a1010; color: #d46060; } [data-theme="dark"] .te-edge-determines, [data-theme="dark"] .te-edge-dependson, [data-theme="dark"] .rel-type[data-type="depends-on"] { background: #261c0a; color: #c89050; } [data-theme="dark"] .te-edge-reverses, [data-theme="dark"] .rel-type[data-type="reverses"] { background: #280e1e; color: #d470a8; } [data-theme="dark"] .te-edge-transformsto, [data-theme="dark"] .te-edge-parentchild, [data-theme="dark"] .rel-type[data-type="parent_child"]{ background: #1c1030; color: #a060e0; } html { overflow-x: hidden; overflow-y: scroll; } body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg-page); color: var(--text-primary); overflow-x: hidden; } /* Applied by inline