/* Premium themes: "emerald" (Emerald Crown) and "sapphire" (Sapphire Dawn).
   Active when <html data-skin="emerald|sapphire">. Without data-skin the classic theme applies.
   Each skin is dark by default (or when the visitor picks dark) and has a light version. */

/* ---------- palettes ---------- */
:root[data-skin="emerald"] {
  --bg: #04110c; --surface: rgb(13 38 29 / .72); --surface-solid: #0d261d; --surface-2: rgb(255 255 255 / .06);
  --ink: #f4efe0; --ink-soft: #cdd9cf; --muted: #8fa99a; --line: rgb(242 193 78 / .16);
  --accent: #46d39a; --accent-2: #7ff0bf; --accent-ink: #03140c; --blue: #6aa5ff;
  --gold: #f2c14e; --gold-2: #ffe08a; --gold-soft: rgb(242 193 78 / .14); --mark: rgb(242 193 78 / .35);
  --chrome: rgb(3 16 11 / .72); --chrome-ink: #f4efe0;
  --page: #0b2219;
  --aurora-1: rgb(70 211 154 / .38); --aurora-2: rgb(51 112 230 / .42); --aurora-3: rgb(242 193 78 / .30);
  --hero-base: linear-gradient(160deg, #052a1d 0%, #06231f 45%, #0a1d3c 100%);
  --feature: linear-gradient(145deg, #0a3a28 0%, #08302b 45%, #0c2348 100%);
  --shadow: 0 1px 0 rgb(255 255 255 / .05) inset, 0 12px 34px rgb(0 0 0 / .35);
  --shadow-lg: 0 1px 0 rgb(255 255 255 / .07) inset, 0 26px 60px rgb(0 0 0 / .5);
  color-scheme: dark;
}
:root[data-skin="sapphire"] {
  --bg: #040a1a; --surface: rgb(14 28 58 / .72); --surface-solid: #0e1c3a; --surface-2: rgb(255 255 255 / .06);
  --ink: #eef3ff; --ink-soft: #c8d4ee; --muted: #8b9bbd; --line: rgb(120 160 255 / .18);
  --accent: #5b9bff; --accent-2: #8fbcff; --accent-ink: #03102a; --blue: #5b9bff;
  --gold: #f6c453; --gold-2: #ffe39a; --gold-soft: rgb(246 196 83 / .14); --mark: rgb(246 196 83 / .35);
  --chrome: rgb(4 10 26 / .72); --chrome-ink: #eef3ff;
  --page: #0b1730;
  --aurora-1: rgb(91 155 255 / .45); --aurora-2: rgb(52 211 153 / .32); --aurora-3: rgb(246 196 83 / .30);
  --hero-base: linear-gradient(160deg, #0a1f4d 0%, #071737 50%, #06302a 100%);
  --feature: linear-gradient(145deg, #0f2a66 0%, #0b1f4a 50%, #0a3a33 100%);
  --shadow: 0 1px 0 rgb(255 255 255 / .05) inset, 0 12px 34px rgb(0 0 0 / .4);
  --shadow-lg: 0 1px 0 rgb(255 255 255 / .07) inset, 0 26px 60px rgb(0 0 0 / .55);
  color-scheme: dark;
}
/* Light versions (system light, or the visitor chose light). */
@media (prefers-color-scheme: light) {
  :root[data-skin="emerald"]:not([data-theme="dark"]) {
    --bg: #f6f2e6; --surface: rgb(255 253 246 / .86); --surface-solid: #fffdf6; --surface-2: #ece6d3;
    --ink: #0d2a20; --ink-soft: #35503f; --muted: #6f8576; --line: rgb(13 42 32 / .12);
    --accent: #0e7a4c; --accent-2: #13965e; --accent-ink: #ffffff; --blue: #1f5fbf;
    --gold: #c99418; --gold-2: #e8b53a; --gold-soft: #f6e7bd; --mark: #f7dd8f; --page: #fffdf6;
    --shadow: 0 1px 2px rgb(20 40 30 / .06), 0 14px 34px rgb(20 40 30 / .10); --shadow-lg: 0 2px 4px rgb(20 40 30 / .08), 0 26px 60px rgb(20 40 30 / .18);
    color-scheme: light;
  }
  :root[data-skin="sapphire"]:not([data-theme="dark"]) {
    --bg: #f2f5fb; --surface: rgb(255 255 255 / .88); --surface-solid: #ffffff; --surface-2: #e4eaf6;
    --ink: #0b1a38; --ink-soft: #34466a; --muted: #6b7a99; --line: rgb(11 26 56 / .12);
    --accent: #1f5fd6; --accent-2: #3474ee; --accent-ink: #ffffff; --blue: #1f5fd6;
    --gold: #c9921a; --gold-2: #e8b53a; --gold-soft: #f8e9c4; --mark: #f7dd8f; --page: #ffffff;
    --shadow: 0 1px 2px rgb(10 25 60 / .06), 0 14px 34px rgb(10 25 60 / .10); --shadow-lg: 0 2px 4px rgb(10 25 60 / .08), 0 26px 60px rgb(10 25 60 / .18);
    color-scheme: light;
  }
}
:root[data-skin="emerald"][data-theme="light"] {
  --bg: #f6f2e6; --surface: rgb(255 253 246 / .86); --surface-solid: #fffdf6; --surface-2: #ece6d3;
  --ink: #0d2a20; --ink-soft: #35503f; --muted: #6f8576; --line: rgb(13 42 32 / .12);
  --accent: #0e7a4c; --accent-2: #13965e; --accent-ink: #ffffff; --blue: #1f5fbf;
  --gold: #c99418; --gold-2: #e8b53a; --gold-soft: #f6e7bd; --mark: #f7dd8f; --page: #fffdf6;
  --shadow: 0 1px 2px rgb(20 40 30 / .06), 0 14px 34px rgb(20 40 30 / .10); --shadow-lg: 0 2px 4px rgb(20 40 30 / .08), 0 26px 60px rgb(20 40 30 / .18);
  color-scheme: light;
}
:root[data-skin="sapphire"][data-theme="light"] {
  --bg: #f2f5fb; --surface: rgb(255 255 255 / .88); --surface-solid: #ffffff; --surface-2: #e4eaf6;
  --ink: #0b1a38; --ink-soft: #34466a; --muted: #6b7a99; --line: rgb(11 26 56 / .12);
  --accent: #1f5fd6; --accent-2: #3474ee; --accent-ink: #ffffff; --blue: #1f5fd6;
  --gold: #c9921a; --gold-2: #e8b53a; --gold-soft: #f8e9c4; --mark: #f7dd8f; --page: #ffffff;
  --shadow: 0 1px 2px rgb(10 25 60 / .06), 0 14px 34px rgb(10 25 60 / .10); --shadow-lg: 0 2px 4px rgb(10 25 60 / .08), 0 26px 60px rgb(10 25 60 / .18);
  color-scheme: light;
}

/* ---------- shared premium styling ---------- */
:root[data-skin] body {
  background:
    radial-gradient(900px 600px at 100% -5%, var(--aurora-2), transparent 60%),
    radial-gradient(800px 600px at -10% 30%, var(--aurora-1), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-skin] body::before { /* fine grain for a printed, premium feel */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-skin] #app, :root[data-skin] .site-footer { position: relative; z-index: 1; }

/* Glass top bar with a gold hairline */
:root[data-skin] .topbar {
  background: var(--chrome); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1;
}
:root[data-skin] .brand em { background: linear-gradient(90deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin] .topnav a.active { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #1a1205; box-shadow: 0 4px 14px rgb(242 193 78 / .35); }
:root[data-skin] .site-footer { background: var(--chrome); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }

/* Hero: moving aurora, gold-gradient title word, ornament */
:root[data-skin] .hero {
  background:
    radial-gradient(600px 300px at 15% 20%, var(--aurora-1), transparent 65%),
    radial-gradient(700px 380px at 85% 10%, var(--aurora-3), transparent 65%),
    radial-gradient(700px 400px at 60% 110%, var(--aurora-2), transparent 65%),
    var(--hero-base);
  background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100%;
  animation: aurora 18s ease-in-out infinite alternate;
  border-bottom: 1px solid var(--line);
}
@keyframes aurora {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  100% { background-position: 30% 20%, 70% 30%, 20% 80%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { :root[data-skin] .hero { animation: none; } }
:root[data-skin] .hero h1 { text-shadow: 0 2px 30px rgb(0 0 0 / .35); }
:root[data-skin] .hero h1 .gold { background: linear-gradient(100deg, #fff4c2 0%, var(--gold-2) 30%, var(--gold) 60%, #d98c12 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
:root[data-skin] .hero p::before { content: ""; display: block; width: 120px; height: 12px; margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent) center / 100% 1px no-repeat,
              radial-gradient(circle, var(--gold) 0 3.5px, transparent 4px) center / 12px 12px no-repeat; }
:root[data-skin] .hero .date { background: rgb(255 255 255 / .08); border-color: rgb(242 193 78 / .35); color: var(--gold-2); backdrop-filter: blur(6px); }
:root[data-skin] .hero .hero-search input { background: rgb(255 255 255 / .96); }
:root[data-skin] .hero .hero-search .btn.primary { background: linear-gradient(135deg, var(--gold-2), var(--gold)); }

/* Glass cards with a soft inner highlight */
:root[data-skin] .card, :root[data-skin] .book-list, :root[data-skin] .results a, :root[data-skin] .qa-item,
:root[data-skin] .study-item, :root[data-skin] .day, :root[data-skin] .ref-help, :root[data-skin] .account-card {
  background: var(--surface); border-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
:root[data-skin] .eyebrow { color: var(--gold); }
:root[data-skin] .eyebrow::before { background: linear-gradient(90deg, var(--gold), var(--accent)); width: 22px; }

/* Gradient-bordered feature cards */
:root[data-skin] .quote-card, :root[data-skin] .votd-card { position: relative; isolation: isolate; }
:root[data-skin] .quote-card::after, :root[data-skin] .votd-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, var(--gold-2), var(--accent) 45%, var(--blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
:root[data-skin] .quote-card {
  background: radial-gradient(600px 260px at 100% 0%, rgb(242 193 78 / .22), transparent 60%), var(--feature);
}
:root[data-skin] .quote-card blockquote::before { background: linear-gradient(180deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin] .votd-card {
  background: radial-gradient(500px 220px at 100% 0%, rgb(255 255 255 / .45), transparent 60%),
              linear-gradient(135deg, #ffe08a 0%, #f2c14e 45%, #e5a524 100%);
}
:root[data-skin] .plan-card { border-top-color: var(--accent); }
:root[data-skin] .qa-card { border-top-color: var(--gold); }
:root[data-skin] .believer-card { border-left-color: var(--blue); }
:root[data-skin] .continue { border-left-color: var(--accent); }

/* Buttons */
:root[data-skin] .btn { background: var(--surface-2); border-color: var(--line); }
:root[data-skin] .btn:hover { border-color: var(--gold); }
:root[data-skin] .btn.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-skin] .listen-btn, :root[data-skin] .donate-cta { background: linear-gradient(135deg, var(--gold-2), var(--gold)) !important; border-color: transparent !important; color: #1a1205 !important; }

/* Collection tiles in emerald, sapphire, and gold tones */
:root[data-skin] .cat-tile { border: 1px solid rgb(255 255 255 / .12); box-shadow: var(--shadow); }
:root[data-skin] .cat-tile::after { background: radial-gradient(circle, rgb(255 255 255 / .22), transparent 70%); width: 220px; height: 220px; right: -70px; top: -80px; }
:root[data-skin] .cat-tile { --c1: #0b5a3c; --c2: #17a36b; }
:root[data-skin] .cat-tile:nth-child(8n+2) { --c1: #123d8f; --c2: #2f74e0; }
:root[data-skin] .cat-tile:nth-child(8n+3) { --c1: #8a5a07; --c2: #e0a923; }
:root[data-skin] .cat-tile:nth-child(8n+4) { --c1: #075e5e; --c2: #14a3a0; }
:root[data-skin] .cat-tile:nth-child(8n+5) { --c1: #1e3a8a; --c2: #4f6fd8; }
:root[data-skin] .cat-tile:nth-child(8n+6) { --c1: #2f5d1c; --c2: #6aa832; }
:root[data-skin] .cat-tile:nth-child(8n+7) { --c1: #0c4a6e; --c2: #1d8fc4; }
:root[data-skin] .cat-tile.bible-tile { --c1: #4a3006 !important; --c2: #b8860b !important; }
:root[data-skin] .cat-tile h3 { text-shadow: 0 2px 12px rgb(0 0 0 / .25); }

/* Reader page: deep "paper" in dark, ivory in light */
:root[data-skin] .reader { background: var(--page); border-color: var(--line); backdrop-filter: none; }
:root[data-skin] .reader h3.t-title::after { background: linear-gradient(90deg, var(--gold), var(--accent)); }
:root[data-skin] .reader h4.t-sub { color: var(--accent); border-left-color: var(--gold); }
:root[data-skin] .reader-bar { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
:root[data-skin] a.bref { text-decoration-color: var(--gold); }
:root[data-skin] a.egwref { text-decoration-color: var(--blue); }

/* Bars and popups */
:root[data-skin] .tabbar { background: var(--chrome); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid var(--line); }
:root[data-skin] .tabbar a.active { color: var(--gold); }
:root[data-skin] .verse-pop { background: var(--surface-solid); border-top-color: var(--gold); }
:root[data-skin] .note-dlg { background: var(--surface-solid); }
:root[data-skin] .page-grid a:hover { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); }
:root[data-skin] .chip[aria-pressed="true"], :root[data-skin] .study-tabs a[aria-selected="true"] { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border-color: transparent; }
:root[data-skin] .progress > i { background: linear-gradient(90deg, var(--accent), var(--gold), var(--blue)); }
:root[data-skin] .brand img { filter: hue-rotate(var(--logo-hue, 0deg)); }
:root[data-skin="emerald"] { --logo-hue: -110deg; }
:root[data-skin="sapphire"] { --logo-hue: -40deg; }
:root[data-skin] .votd-card .eyebrow { color: #3b2400; }
:root[data-skin] .votd-card .eyebrow::before { background: #3b2400; }
:root[data-skin] .votd-card .btn { background: rgb(255 255 255 / .5); border-color: rgb(59 36 0 / .2); }
:root[data-skin] .votd-card .btn.primary { background: #0b2a1f; color: var(--gold-2); box-shadow: none; }
:root[data-skin="sapphire"] .votd-card .btn.primary { background: #0b1f4a; }
:root[data-skin] .quote-card .btn { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .25); color: #fff; }
:root[data-skin] .quote-card .btn:hover { background: rgb(255 255 255 / .22); border-color: var(--gold); }
:root[data-skin] .quote-card .cite, :root[data-skin] .quote-card blockquote { color: #fff; }
:root[data-skin] .quote-card .cite a { color: var(--gold-2, #ffe08a); }

/* Reader page styles chosen in the Aa panel (after the skins, so they win). */
:root[data-paper="sepia"] .reader { --page: #f5ecd7; --ink: #3a2e1e; --ink-soft: #5a4932; --muted: #8b7656; --line: #e2d3b2;
  --accent: #7b4b10; --gold: #a86d0c; --mark: #f2d37d; --surface: #fbf4e4; --bg: #efe3c8; background: var(--page); color: var(--ink); color-scheme: light; }
:root[data-paper="white"] .reader { --page: #ffffff; --ink: #171717; --ink-soft: #3d3d3d; --muted: #737373; --line: #e5e5e5;
  --accent: #0b6b4a; --gold: #b07a0a; --mark: #ffe08a; --surface: #ffffff; --bg: #f4f4f4; background: var(--page); color: var(--ink); color-scheme: light; }
:root[data-paper="night"] .reader { --page: #0c0f0e; --ink: #d5dcd8; --ink-soft: #aab4ae; --muted: #7d8882; --line: #1f2724;
  --accent: #7fd3a8; --gold: #e2b955; --mark: #5a4712; --surface: #121715; --bg: #090b0a; background: var(--page); color: var(--ink); color-scheme: dark; }
:root[data-paper] .reader .vcite { color: #2a1c02; }