Namespace the subtree theme scopes as .theme-light/.theme-dark: dark: follows the nearest scope, portalled dashboard menus and tooltips restate it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WgBfkm4rCmtd1T4vHWjEPx

frontend/src/index.css

@@ -2,14 +2,19 @@
 @import "tw-animate-css";
 @import "./vendor.css";
 
-@custom-variant dark (&:is(.dark *));
+/* `dark:` follows the nearest theme scope: inside the dark document or a
+   `.theme-dark` subtree, unless a `.theme-light` subtree sits in between. */
+@custom-variant dark (&:is(:where(:root.dark, .theme-dark) *):not(
+    :where(:root.dark, .theme-dark) .theme-light *
+  ));
 
 /*
  * Self-hosted font, duplicated verbatim across the fluksio and website repos (a
  * sync point like `lib/motion.ts`; see the root DESIGN-GUIDELINES.md,
  * Typography). Kept OUT of the byte-identical `@theme inline` / `:root` /
- * `.dark` blocks. Inter is used for both body (set on `body` in `@layer base`)
- * and the display face applied via the `.font-display` class below.
+ * `.theme-dark` blocks. Inter is used for both body (set on `body` in
+ * `@layer base`) and the display face applied via the `.font-display` class
+ * below.
  */
 @font-face {
   font-family: "Inter";
@@ -106,11 +111,13 @@
  * `--primary`, the rest are hues that clear 3:1 against `--card` and stay
  * apart under colour blindness. See DESIGN-GUIDELINES.md → Colour tokens.
  */
-/* `.light` is the symmetric half of `.dark` below: both are plain classes, so
-   either themes a subtree as well as the whole document — which is what lets a
-   dashboard forced to one theme sit inside a shell on the other. `:root` is
-   listed second so the parity grep keeps its anchor line. */
-.light,
+/* `.theme-light` and `.theme-dark` theme a subtree, which is what lets a
+   dashboard forced to one theme sit inside a shell on the other. The document
+   is themed by the bare `.dark` the theme provider puts on `<html>`, matched
+   only there as `:root.dark`, so a library that stamps `light` or `dark` on its
+   own wrapper cannot re-theme what is inside it. `:root` is listed second so
+   the parity grep keeps its anchor line. */
+.theme-light,
 :root {
   --background: #ffffff;
   --foreground: #333232;
@@ -152,7 +159,8 @@
   --chart-8: #b32474;
 }
 
-.dark {
+:root.dark,
+.theme-dark {
   --background: #0a0a0a;
   --foreground: #f5f5f5;
   --card: #1a1a1a;