update dark and ligth theme

src/app/globals.css

@@ -22,13 +22,31 @@
 /*
  * Paint the canvas before React mounts. AppShell sets these itself once it
  * renders, but this guarantees the very first frame — and any non-shell route
- * such as an error boundary — is already black rather than white.
+ * such as an error boundary — already has the right ground colour.
+ *
+ * These rules are UNLAYERED, so they beat everything in loyaly.css. That is
+ * why `color-scheme` has to be resolved from `data-theme` here rather than
+ * pinned: a flat `color-scheme: dark` silently won over the theme's own
+ * html[data-theme="light"] rule, and every `light-dark()` token in the
+ * stylesheet kept resolving to its dark branch no matter what mode said.
+ *
+ * data-theme is written by the root layout (from the cookie) and re-synced by
+ * Astryx's <Theme>. It is absent in system mode — that is what leaves
+ * `light dark` in force so the OS preference decides.
  */
 html {
   background-color: var(--color-background-body);
+  color-scheme: light dark;
+}
+
+html[data-theme='dark'] {
   color-scheme: dark;
 }
 
+html[data-theme='light'] {
+  color-scheme: light;
+}
+
 @layer components {
   /*
    * Global Data Table Inset Contract: 24px left lead-in, 32px right inset.