/* Codexa in the Nightshade palette.
 *
 * Codexa's library UI is built on a dozen custom properties set on :root (and again on
 * html[data-lib-theme=...] for the user's explicit Day / Night / E-ink choice). This file
 * loads after main.css and points those properties at the house palette, which it imports
 * from theme.park through the proxy (same origin, so Codexa's CSP is untouched). No colour
 * is written here: change themepark_config/nightshade.css and this follows.
 *
 * Only the library pages are dressed. The reading view keeps Codexa's own reader themes
 * (Light, Sepia, Dark, Midnight, Nord, Custom): a reader palette is a reading choice, not
 * branding, and the "Custom" theme lets anyone pick the aubergine by hand.
 */
@import url("/_nightshade/palette.css");

:root,
html[data-lib-theme="night"],
.sidebar-layout[data-lib-theme="night"] {
  --color-bg:          var(--main-bg-color);
  --color-surface:     var(--modal-bg-color);
  --color-surface2:    color-mix(in srgb, var(--modal-bg-color) 78%, rgb(var(--accent-color)));
  --color-accent:      var(--button-color);
  --color-accent-dark: color-mix(in srgb, var(--button-color) 80%, black);
  --color-text:        var(--text);
  --color-text-muted:  var(--text-muted);
  --color-border:      rgba(var(--accent-color), .22);
  --shadow:            0 4px 24px rgba(0, 0, 0, .5);
}

/* Links and focus follow the palette's link colour rather than the accent red. */
a { color: var(--link-color); }
a:hover { color: var(--link-color-hover); }

/* The reading view's "Nightshade" theme. Codexa's reader applies a theme by writing hex
 * values from its THEME_UI table straight onto :root as inline custom properties, so the
 * table entry (added to reader.js by the proxy) must carry hexes; these rules then re-point
 * the chrome at the live palette, which wins over the inline values by being !important.
 * The page colours themselves (bg/text/link of the book) stay with the table entry, since
 * the reader paints them into the book frame directly. */
body[data-reader-theme="nightshade"] {
  --color-bg:          var(--main-bg-color) !important;
  --color-surface:     var(--modal-bg-color) !important;
  --color-surface2:    color-mix(in srgb, var(--modal-bg-color) 78%, rgb(var(--accent-color))) !important;
  --color-accent:      var(--button-color) !important;
  --color-accent-dark: color-mix(in srgb, var(--button-color) 80%, black) !important;
  --color-text:        var(--text) !important;
  --color-text-muted:  var(--text-muted) !important;
  --color-border:      rgba(var(--accent-color), .22) !important;
}
/* The picker swatch for the new button (the buttons are plain <button data-theme>). */
.theme-btn[data-theme="nightshade"] {
  background: var(--main-bg-color);
  color: var(--text);
  border-color: rgb(var(--accent-color));
}