/* Whole Word Music design tokens: Night Vigil 1.0.0.
 * GENERATED from tokens.json by build.mjs. Do not edit by hand; edit tokens.json and run
 *   node brand/tokens/build.mjs
 *
 * Dark is the default (on :root). Light follows the OS through prefers-color-scheme, the same
 * pattern the live site uses, and data-theme on <html> overrides either way:
 *   <html>                     dark, or light if the OS prefers light
 *   <html data-theme="dark">   always dark (covers, cards and the banner render this way)
 *   <html data-theme="light">  always light
 * .night on any element puts that block in the dark palette in either theme (the hero, the player).
 * Fonts are separate: @import "../fonts/fonts.css" (or copy its @font-face rules).
 */

:root {
  --bg: #0d1220;
  --surface: #141a2b;
  --surface-alt: #1a2236;
  --ink: #e9ecf4;
  --ink-soft: #aab3c8;
  --ink-faint: #8b95ab;
  --accent: #e8c271;
  --accent-ink: #1a1408;
  --accent-soft: #2a2616;
  --accent-on-soft: #e8c271;
  --rule: #262f45;
  --esv-bg: #142a20;
  --esv-ink: #8fd1aa;
  --kjv-bg: #2a2035;
  --kjv-ink: #cdb6e6;
  --scrim: 13,18,32;
  --glow: rgba(232,194,113,.28);
  color-scheme: dark;

  /* covers, cards, banner: always on dark */
  --cover-ink: #f2efe8;
  --cover-sub: #d3d8e4;
  --cover-scrim: #090c17;
  --card-sub: #cfd5e2;
  --qr-paper: #fbf8f1;

  /* type */
  --serif: "Newsreader", Georgia, "Iowan Old Style", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui: var(--sans);
  --mono: ui-monospace, Consolas, "SF Mono", monospace;

  /* shape and space */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --measure: 34rem;
  --tap: 48px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-alt: #eceff4;
    --ink: #141b2d;
    --ink-soft: #44506a;
    --ink-faint: #5d6880;
    --accent: #8a6414;
    --accent-ink: #ffffff;
    --accent-soft: #f4ecd9;
    --accent-on-soft: #76550f;
    --rule: #d9dee8;
    --esv-bg: #e0efe6;
    --esv-ink: #1f5b3a;
    --kjv-bg: #efe7f4;
    --kjv-ink: #5a3d73;
    --scrim: 246,247,249;
    --glow: rgba(138,100,20,.22);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-alt: #eceff4;
  --ink: #141b2d;
  --ink-soft: #44506a;
  --ink-faint: #5d6880;
  --accent: #8a6414;
  --accent-ink: #ffffff;
  --accent-soft: #f4ecd9;
  --accent-on-soft: #76550f;
  --rule: #d9dee8;
  --esv-bg: #e0efe6;
  --esv-ink: #1f5b3a;
  --kjv-bg: #efe7f4;
  --kjv-ink: #5a3d73;
  --scrim: 246,247,249;
  --glow: rgba(138,100,20,.22);
  color-scheme: light;
}

.night {
  --bg: #0d1220;
  --surface: #141a2b;
  --surface-alt: #1a2236;
  --ink: #e9ecf4;
  --ink-soft: #aab3c8;
  --ink-faint: #8b95ab;
  --accent: #e8c271;
  --accent-ink: #1a1408;
  --accent-soft: #2a2616;
  --accent-on-soft: #e8c271;
  --rule: #262f45;
  --esv-bg: #142a20;
  --esv-ink: #8fd1aa;
  --kjv-bg: #2a2035;
  --kjv-ink: #cdb6e6;
  --scrim: 13,18,32;
  --glow: rgba(232,194,113,.28);
  color-scheme: dark;
  color: var(--ink);
}