/* ==========================================================================
   Koju Black Spice - dark mode for the public pages
   (Home, Products, Cart, Get a Quote, Terms, Login, Signup ...)
   koju-theme.js puts  data-theme="dark" | "light"  on <html>.
   (c) 2026 Koju Black Spice
   ========================================================================== */

html[data-theme="dark"] {
    background: #020202;
    color-scheme: dark;
}

/* The page is darkened as one piece: colours are flipped, then pictures, the black
   navigation bar, the footer and dark hero areas are flipped back so they keep their look. */
html[data-theme="dark"] body {
    filter: invert(1) hue-rotate(180deg);
    background-color: #fffdf7;
}

html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] picture,
html[data-theme="dark"] canvas,
html[data-theme="dark"] svg image,
html[data-theme="dark"] .kn-bar,
html[data-theme="dark"] .kf,
html[data-theme="dark"] .kum-menu,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .su-side {
    filter: invert(1) hue-rotate(180deg);
}

/* pictures inside areas that are already flipped back must not be flipped a third time */
html[data-theme="dark"] .kn-bar img,
html[data-theme="dark"] .kf img,
html[data-theme="dark"] .kum-menu img,
html[data-theme="dark"] .page-hero img,
html[data-theme="dark"] .page-header img,
html[data-theme="dark"] .hero img,
html[data-theme="dark"] .su-side img {
    filter: none;
}