/* Global dark rendering layer for pages without a native dark palette.
   Marketplace pages (loopcart.css) have their own variables and are marked html.theme-native, so this file
   leaves them alone. Everything else is rendered through a colour inversion with media re-inverted,
   which keeps layout, contrast and brand imagery intact. A native per-stylesheet palette can replace
   this later without changing how the preference is stored or applied. */
html[data-theme="dark"]:not(.theme-native) {
  background: #101211;
  color-scheme: dark;
  filter: invert(0.92) hue-rotate(180deg);
}
html[data-theme="dark"]:not(.theme-native) img,
html[data-theme="dark"]:not(.theme-native) video,
html[data-theme="dark"]:not(.theme-native) canvas,
html[data-theme="dark"]:not(.theme-native) iframe,
html[data-theme="dark"]:not(.theme-native) picture,
html[data-theme="dark"]:not(.theme-native) [style*="background-image"],
html[data-theme="dark"]:not(.theme-native) .no-dark-invert {
  filter: invert(1) hue-rotate(180deg);
}
/* Follow the OS when the preference is "System" */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"]:not(.theme-native) {
    background: #101211;
    color-scheme: dark;
    filter: invert(0.92) hue-rotate(180deg);
  }
  html[data-theme="system"]:not(.theme-native) img,
  html[data-theme="system"]:not(.theme-native) video,
  html[data-theme="system"]:not(.theme-native) canvas,
  html[data-theme="system"]:not(.theme-native) iframe,
  html[data-theme="system"]:not(.theme-native) picture,
  html[data-theme="system"]:not(.theme-native) [style*="background-image"],
  html[data-theme="system"]:not(.theme-native) .no-dark-invert {
    filter: invert(1) hue-rotate(180deg);
  }
}
/* Native marketplace palette already switches on data-theme="dark"; make "system" follow the OS there too */
@media (prefers-color-scheme: dark) {
  html.theme-native[data-theme="system"] {
    --canvas: #11120f; --surface: #1a1b17; --surface-2: #24251f; --ink: #f5f2e9; --muted: #a8aaa1;
    --line: rgba(255,255,255,.12); --shadow: 0 28px 90px rgba(0,0,0,.45); color-scheme: dark;
  }
}