/* Colour themes for the library and the app: light (the site's own colours), sepia and dark.
   Hand-written. The theme is chosen in the reading view or the app's settings (localStorage 'lib-reader:prefs',
   theme auto | light | sepia | dark) and applied before first paint by the small inline script in every page's head
   (scripts/build_site.py, head_icons()): it sets html.cnz-themed and data-rd-theme="light|sepia|dark" on library,
   app and offline pages only. The rest of the site keeps its light colours this round.
   Most colours follow from the site variables (--paper, --ink, --muted, --tint, --line, --accent, --gold), which the
   plan card and the reader also use; the rules below fix the few places the site sets colours directly. */

html.cnz-themed[data-rd-theme="dark"]{
  --paper:#0f1c28;--ink:#ece4d4;--muted:#a7b3bc;--tint:#16283a;--line:#294052;--accent:#e9bd76;--gold:#e9bd76;
  --cz-body:#d3d9de;--cz-card:#14263a;--cz-deep:#0a1520;--cz-link:#f0c27e;--cz-btn:#e9bd76;--cz-btn-fg:#10202d;--cz-btn-hover:#f4d39b;
  color-scheme:dark}
html.cnz-themed[data-rd-theme="sepia"]{
  --paper:#f5ecd9;--ink:#33291e;--muted:#6b5a46;--tint:#ece0c5;--line:#dbcca9;--accent:#93531f;--gold:#c99a4a;
  --cz-body:#433628;--cz-card:#faf4e6;--cz-deep:#3a2e22;--cz-link:#874411;--cz-btn:#3a2e22;--cz-btn-fg:#f8f0de;--cz-btn-hover:#4d3e2e}

html.cnz-themed[data-rd-theme="dark"] body,html.cnz-themed[data-rd-theme="sepia"] body{background:var(--paper);color:var(--ink)}
html.cnz-themed[data-rd-theme="dark"] .masthead,html.cnz-themed[data-rd-theme="sepia"] .masthead,
html.cnz-themed[data-rd-theme="dark"] .skip,html.cnz-themed[data-rd-theme="sepia"] .skip{background:var(--paper)}
html.cnz-themed[data-rd-theme="dark"] .menu-toggle,html.cnz-themed[data-rd-theme="sepia"] .menu-toggle{background:transparent;color:var(--ink)}
html.cnz-themed[data-rd-theme="dark"] .brand img{filter:brightness(0) invert(.9) sepia(.25)}
html.cnz-themed[data-rd-theme="sepia"] .brand img{filter:sepia(.6) brightness(.85)}

/* text */
html.cnz-themed[data-rd-theme] .prose p,html.cnz-themed[data-rd-theme] .prose li,
html.cnz-themed[data-rd-theme] .lib-text p,html.cnz-themed[data-rd-theme] .lib-panel p,html.cnz-themed[data-rd-theme] .lib-list p,
html.cnz-themed[data-rd-theme] .lib-feature p,html.cnz-themed[data-rd-theme] .lib-notes li{color:var(--cz-body,#334955)}
html.cnz-themed[data-rd-theme="light"] .prose p,html.cnz-themed[data-rd-theme="light"] .prose li,
html.cnz-themed[data-rd-theme="light"] .lib-panel p,html.cnz-themed[data-rd-theme="light"] .lib-list p,
html.cnz-themed[data-rd-theme="light"] .lib-feature p,html.cnz-themed[data-rd-theme="light"] .lib-notes li{color:#334955}
html.cnz-themed[data-rd-theme="light"] .lib-text p{color:#26394a}
html.cnz-themed[data-rd-theme="dark"] .prose a:not(.button),html.cnz-themed[data-rd-theme="sepia"] .prose a:not(.button),
html.cnz-themed[data-rd-theme="dark"] .lib-panel a,html.cnz-themed[data-rd-theme="dark"] .lib-credit a,
html.cnz-themed[data-rd-theme="dark"] .lib-text a:not(.bref){color:var(--cz-link)}
html.cnz-themed[data-rd-theme="dark"] a:hover{color:var(--cz-link)}

/* surfaces */
html.cnz-themed[data-rd-theme="dark"] .lib-feature,html.cnz-themed[data-rd-theme="sepia"] .lib-feature,
html.cnz-themed[data-rd-theme="dark"] .link-card,html.cnz-themed[data-rd-theme="sepia"] .link-card,
html.cnz-themed[data-rd-theme="dark"] .argument-card,html.cnz-themed[data-rd-theme="sepia"] .argument-card,
html.cnz-themed[data-rd-theme="dark"] .lib-chips a,html.cnz-themed[data-rd-theme="sepia"] .lib-chips a{background:var(--cz-card)}
html.cnz-themed[data-rd-theme="dark"] .lib-rx,html.cnz-themed[data-rd-theme="sepia"] .lib-rx,
html.cnz-themed[data-rd-theme="dark"] .coc-today,html.cnz-themed[data-rd-theme="sepia"] .coc-today,
html.cnz-themed[data-rd-theme="dark"] .invitation,html.cnz-themed[data-rd-theme="sepia"] .invitation,
html.cnz-themed[data-rd-theme="dark"] .top-verse,html.cnz-themed[data-rd-theme="sepia"] .top-verse{background:var(--cz-deep);color:#f3eee4}
html.cnz-themed[data-rd-theme="dark"] .lib-rx,html.cnz-themed[data-rd-theme="dark"] .coc-today{border:1px solid var(--line)}
html.cnz-themed[data-rd-theme] .coc-today blockquote,html.cnz-themed[data-rd-theme] .invitation h2{color:#f6f1e7}
html.cnz-themed[data-rd-theme="dark"] .lib-rx li{border-color:#22384b}
html.cnz-themed[data-rd-theme="dark"] .lib-flag{color:#10202d}

/* buttons */
html.cnz-themed[data-rd-theme="dark"] .button,html.cnz-themed[data-rd-theme="sepia"] .button,
html.cnz-themed[data-rd-theme="dark"] .prose a.button,html.cnz-themed[data-rd-theme="sepia"] .prose a.button{background:var(--cz-btn);color:var(--cz-btn-fg);border-color:var(--cz-btn)}
html.cnz-themed[data-rd-theme="dark"] .button:hover,html.cnz-themed[data-rd-theme="sepia"] .button:hover{background:var(--cz-btn-hover);color:var(--cz-btn-fg)}
html.cnz-themed[data-rd-theme="dark"] .button.secondary,html.cnz-themed[data-rd-theme="sepia"] .button.secondary,
html.cnz-themed[data-rd-theme="dark"] .prose a.button.secondary,html.cnz-themed[data-rd-theme="sepia"] .prose a.button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
html.cnz-themed[data-rd-theme="dark"] .button.secondary:hover,html.cnz-themed[data-rd-theme="sepia"] .button.secondary:hover{background:var(--tint)}
html.cnz-themed[data-rd-theme="dark"] .nav-links .contact-link{border-color:var(--line)}

/* search (Pagefind UI) */
html.cnz-themed[data-rd-theme="dark"] #lib-search,html.cnz-themed[data-rd-theme="dark"] .app-search{
  --pagefind-ui-primary:#e9bd76;--pagefind-ui-text:#ece4d4;--pagefind-ui-background:#0f1c28;--pagefind-ui-border:#2f4759;--pagefind-ui-tag:#16283a}
html.cnz-themed[data-rd-theme="sepia"] #lib-search,html.cnz-themed[data-rd-theme="sepia"] .app-search{
  --pagefind-ui-primary:#3a2e22;--pagefind-ui-text:#33291e;--pagefind-ui-background:#faf4e6;--pagefind-ui-border:#d3c29c;--pagefind-ui-tag:#ece0c5}
html.cnz-themed[data-rd-theme="dark"] #lib-search .pagefind-ui__result-link{color:#f0c27e}
html.cnz-themed[data-rd-theme="sepia"] #lib-search .pagefind-ui__result-link{color:#874411}

/* verse pop-ups and footnote pop-ups outside the reading view */
html.cnz-themed[data-rd-theme="dark"]:not(.lib-reading) .rd-pop{--rd-bg:#14263a;--rd-fg:#e3dccd;--rd-line:#2f4759;--rd-accent:#e9bd76;--rd-link:#f0c27e}
html.cnz-themed[data-rd-theme="sepia"]:not(.lib-reading) .rd-pop{--rd-bg:#faf4e6;--rd-fg:#33291e;--rd-line:#dbcca9;--rd-accent:#93531f;--rd-link:#874411}

@media (prefers-reduced-motion:no-preference){html.cnz-themed body{transition:background-color .2s ease}}
html.cnz-themed[data-rd-theme="dark"] .bv-pop,html.cnz-themed[data-rd-theme="sepia"] .bv-pop{background:var(--cz-card);box-shadow:0 18px 48px rgba(0,0,0,.4)}
html.cnz-themed[data-rd-theme="dark"] .bv-head,html.cnz-themed[data-rd-theme="sepia"] .bv-head{background:var(--cz-deep)}