/* Shared brand: design tokens and base type/button styles. Linked by index.html, the other site pages
   and beta.firstword-bible.com (backend/services/beta). Never rename a class or token here without
   updating the beta Worker. Fonts are loaded by each page with its own <link>, not imported here. */
:root {
  --bg: #F7F3E8;
  --surface: #FFFDF6;
  --surface-2: #EEE9D9;
  --ink: #13272C;
  --ink-2: #3F5357;
  --ink-3: #5A6B6E;
  --line: #DED7C3;
  --line-strong: #C5BDA6;
  --accent: #CBBB7E;
  --accent-ink: #1D5B67;
  --accent-soft: #F1EAD0;
  --teal: #1D5B67;
  --teal-soft: #DDEBE9;
  --btn: #1D5B67;
  --btn-hover: #164954;
  --on-btn: #FFFDF6;
  --focus: #1D5B67;
  --hero-emblem: url("/emblem.webp");
  --deep: linear-gradient(135deg, #24474B 0%, #0E2730 100%);
  --deep-2: rgba(255,255,255,.07);
  --deep-ink: #EEF3EE;
  --deep-muted: #A9C4BD;
  --deep-gold: #DBC78B;
  --shadow: 0 1px 2px rgba(19,39,44,.06), 0 12px 40px -12px rgba(19,39,44,.22);
  --radius: 8px;
  --font-display: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-scripture: "Libre Baskerville", Baskerville, Georgia, serif; /* the reader font in the app */
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-hebrew: "Noto Serif Hebrew", "SBL Hebrew", "Times New Roman", serif;
  --font-greek: "Noto Serif", "SBL Greek", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D232A;
    --surface: #173A43;
    --surface-2: #133039;
    --ink: #EDF1EA;
    --ink-2: #BCCBC6;
    --ink-3: #9DB2AD;
    --line: #24474F;
    --line-strong: #35616A;
    --accent: #DBC78B;
    --accent-ink: #86C6C2;
    --accent-soft: #2F3A2E;
    --teal: #86C6C2;
    --teal-soft: #17414A;
    --btn: #DBC78B;
    --btn-hover: #E8D8A6;
    --on-btn: #0D232A;
    --focus: #DBC78B;
    --hero-emblem: url("/emblem-dark.webp");
    --deep: linear-gradient(135deg, #1B3B41 0%, #06171C 100%);
    --deep-2: rgba(255,255,255,.06);
    --deep-ink: #EEF3EE;
    --deep-muted: #A9C4BD;
    --deep-gold: #DBC78B;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 48px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D232A;
  --surface: #173A43;
  --surface-2: #133039;
  --ink: #EDF1EA;
  --ink-2: #BCCBC6;
  --ink-3: #9DB2AD;
  --line: #24474F;
  --line-strong: #35616A;
  --accent: #DBC78B;
  --accent-ink: #86C6C2;
  --accent-soft: #2F3A2E;
  --teal: #86C6C2;
  --teal-soft: #17414A;
  --btn: #DBC78B;
  --btn-hover: #E8D8A6;
  --on-btn: #0D232A;
  --focus: #DBC78B;
  --hero-emblem: url("/emblem-dark.webp");
  --deep: linear-gradient(135deg, #1B3B41 0%, #06171C 100%);
  --deep-2: rgba(255,255,255,.06);
  --deep-ink: #EEF3EE;
  --deep-muted: #A9C4BD;
  --deep-gold: #DBC78B;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 48px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

html { scroll-behavior: smooth; background: var(--bg); scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; min-height: 44px; padding: 10px 14px; transform: translateY(-160%); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 600; }
.skip-link:focus { transform: none; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.display { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.eyebrow { font: 600 12px/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.h2 { font-size: clamp(36px, 4.2vw, 54px); }
.lede { font-size: 19px; color: var(--ink-2); max-width: 34em; }
.small { font-size: 14px; color: var(--ink-3); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 11px 20px; border: 1px solid transparent; border-radius: var(--radius); font-size: 15px; font-weight: 600; text-decoration: none; }
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: var(--btn-hover); }
.text-link { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--accent-ink); }