/* Opt-in light mode, shared by all pages.

   The UI is a hard-coded dark theme (no CSS variables to override), so light mode is
   produced by inverting the rendered page. These rules are scoped entirely to
   html[data-theme="light"] -- with no attribute set (the default) this file does
   nothing and the dark theme is byte-for-byte unchanged.

   The filter is applied to the document root, which is exempt from establishing a
   containing block for fixed-positioned descendants, so modals / overlays keep working. */

html[data-theme="light"] {
    filter: invert(1) hue-rotate(180deg);
    background: #222222;
}

/* Re-invert real imagery so photos, flags, logos and videos keep their true colours. */
html[data-theme="light"] img,
html[data-theme="light"] video,
html[data-theme="light"] canvas,
html[data-theme="light"] iframe,
html[data-theme="light"] embed,
html[data-theme="light"] object {
    filter: invert(1) hue-rotate(180deg);
}