Paint the console ground from the chosen theme, not the OS scheme

The @hanzo/gui engine writes --background onto :root and paints <body> from
it with an unlayered rule for prefers-color-scheme, which outranks every
Tailwind layer, so a visitor on a light OS got a light page under dark text.
The app's ground token is --ground, and an unlayered `html body` rule sets
the ground and ink of the scheme the theme provider chose. The d3 charts
read the same token.

Co-authored-by: Hanzo Dev <[email protected]>

console/app/globals.css

@@ -30,7 +30,9 @@
   --radius-lg: var(--radius); /* 10px */
   --radius-xl: calc(var(--radius) + 6px); /* 16px — .panel / .card */
 
-  --color-background: var(--background);
+  /* The page ground is --ground: the @hanzo/gui engine writes its own
+     --background onto :root for the OS colour scheme, and that one would win. */
+  --color-background: var(--ground);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
@@ -97,7 +99,7 @@
    borders, same near-monochrome surfaces, same accent semantics. */
 :root {
   --radius: 0.625rem; /* 10px */
-  --background: #ffffff;
+  --ground: #ffffff;
   --foreground: #0a0a0a;
   --card: #ffffff;
   --card-foreground: #0a0a0a;
@@ -138,7 +140,7 @@
    Pure black ground, #f5f5f5 ink, 55% muted, 8% hairline / 18% strong border,
    #1a1a1a active fill, and lux.cloud's status greens/ambers/reds. */
 .dark {
-  --background: #000000;
+  --ground: #000000;
   --foreground: #f5f5f5;
   --card: #000000;
   --card-foreground: #f5f5f5;
@@ -235,3 +237,12 @@
     display: none;
   }
 }
+
+/* The @hanzo/gui engine paints <body> from its own palette for the OS colour
+   scheme with an unlayered rule, and an unlayered rule outranks every layer
+   above. This one is unlayered too and more specific, so the page takes the
+   ground and ink of the scheme the theme provider chose. */
+html body {
+  background: var(--ground);
+  color: var(--foreground);
+}

console/components/d3/donut-chart.tsx

@@ -73,7 +73,7 @@ export function DonutChart({
     slices.append("path")
       .attr("d", arc)
       .attr("fill", (d) => d.data.color)
-      .attr("stroke", "hsl(var(--background))")
+      .attr("stroke", "var(--ground)")
       .attr("stroke-width", 2)
       .style("cursor", "pointer")
       .on("mouseenter", function(event, d: d3.PieArcDatum<DonutData>) {

console/components/d3/globe-view.tsx

@@ -76,7 +76,7 @@ export function GlobeView({ data, width = 500, height = 500, className }: GlobeV
       .attr("cx", width / 2)
       .attr("cy", height / 2)
       .attr("r", scale)
-      .attr("fill", "hsl(var(--background))")
+      .attr("fill", "var(--ground)")
       .attr("stroke", "hsl(var(--border))")
       .attr("stroke-width", 1)