feat(slint): homologate menu surfaces with a defined muted border

Dropdown and context menus now sit on the content background
(surface-main) with a more defined border (border-muted, ~22% white)
instead of the elevated surface plus hairline border, so the popover
edge reads cleanly against the content instead of looking coarse.

cc

crates/qbz-slint/ui/foundation/palette.slint

@@ -25,4 +25,5 @@ export global Palette {
 
     out property <color> alpha-6: #ffffff10;  // ~6% white — hover fills
     out property <color> alpha-8: #ffffff14;  // ~8% white — hairline borders
+    out property <color> alpha-strong: #ffffff38; // ~22% white — defined edges
 }

crates/qbz-slint/ui/foundation/semantic-colors.slint

@@ -29,6 +29,9 @@ export global Theme {
 
     // Borders
     out property <color> border-subtle: Palette.alpha-8;
+    // A more defined border for surfaces that share the content
+    // background and need a visible edge (popover menus, dropdowns).
+    out property <color> border-muted: Palette.alpha-strong;
 
     // Effects
     out property <color> card-shadow: Palette.shadow;

crates/qbz-slint/ui/primitives/ContextMenu.slint

@@ -6,10 +6,10 @@ import { Theme } from "../foundation/semantic-colors.slint";
 import { Radius } from "../foundation/radius.slint";
 
 export component ContextMenu inherits Rectangle {
-    background: Theme.surface-elevated;
+    background: Theme.surface-main;
     border-radius: Radius.sm;
     border-width: 1px;
-    border-color: Theme.border-subtle;
+    border-color: Theme.border-muted;
     drop-shadow-blur: 22px;
     drop-shadow-color: Theme.card-shadow;
     drop-shadow-offset-y: 6px;

crates/qbz-slint/ui/primitives/QbzSelect.slint

@@ -66,10 +66,10 @@ export component QbzSelect inherits Rectangle {
         height: root.options.length * 32px + 10px;
 
         Rectangle {
-            background: Theme.surface-elevated;
+            background: Theme.surface-main;
             border-radius: Radius.sm;
             border-width: 1px;
-            border-color: Theme.border-subtle;
+            border-color: Theme.border-muted;
             drop-shadow-blur: 20px;
             drop-shadow-color: Theme.card-shadow;
             drop-shadow-offset-y: 5px;

crates/qbz-slint/ui/shell/HeaderBar.slint

@@ -192,10 +192,10 @@ component NavTabWithMenu inherits Rectangle {
         height: menu-box.preferred-height;
 
         menu-box := Rectangle {
-            background: Theme.surface-elevated;
+            background: Theme.surface-main;
             border-radius: Radius.sm;
             border-width: 1px;
-            border-color: Theme.border-subtle;
+            border-color: Theme.border-muted;
             drop-shadow-blur: 24px;
             drop-shadow-color: Theme.card-shadow;
             drop-shadow-offset-y: 6px;
@@ -387,10 +387,10 @@ export component HeaderBar inherits Rectangle {
         height: 310px;
 
         Rectangle {
-            background: Theme.surface-elevated;
+            background: Theme.surface-main;
             border-radius: Radius.sm;
             border-width: 1px;
-            border-color: Theme.border-subtle;
+            border-color: Theme.border-muted;
             drop-shadow-blur: 24px;
             drop-shadow-color: Theme.card-shadow;
             drop-shadow-offset-y: 6px;