fix dark/light mode surface colors and Remove button color

- Fix ContentViewer background invisible against card in dark mode
- Fix Remove button not red in dark mode by using color="red.6"
- Add distinct card background for light mode (gray-0) vs app background
- Use CSS custom properties for card background across color schemes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/web/src/App.css

@@ -22,9 +22,9 @@
   --inspector-text-inverse: var(--mantine-color-white);
 
   /* ── Surfaces ──────────────────────────────────────────── */
-  --inspector-surface-body: var(--mantine-color-body);
+  --inspector-surface-body: var(--mantine-color-dark-9);
-  --inspector-surface-card: var(--mantine-color-default);
+  --inspector-surface-card: var(--mantine-color-gray-0);
-  --inspector-surface-code: var(--mantine-color-gray-0);
+  --inspector-surface-code: var(--mantine-color-white);
 
   /* ── Borders ───────────────────────────────────────────── */
   --inspector-border-default: var(--mantine-color-default-border);
@@ -69,7 +69,8 @@
 
 /* Dark mode overrides — tokens that need adjustment in dark scheme */
 [data-mantine-color-scheme="dark"] {
-  --inspector-surface-code: var(--mantine-color-dark-6);
+  --inspector-surface-card: var(--mantine-color-gray-9);
+  --inspector-surface-code: var(--mantine-color-dark-9);
   --inspector-border-subtle: var(--mantine-color-dark-4);
 }
 

clients/web/src/components/molecules/ServerCard/ServerCard.tsx

@@ -117,7 +117,7 @@ export function ServerCard({
             <Button variant="subtle" size="xs" onClick={onEdit}>
               Edit
             </Button>
-            <Button variant="transparent" size="xs" color="red" onClick={onRemove}>
+            <Button variant="subtle" size="xs" color="red.6" onClick={onRemove}>
               Remove
             </Button>
           </ActionsRow>

clients/web/src/theme/Card.ts

@@ -10,4 +10,7 @@ export const ThemeCard = Card.extend({
     if (props.variant === "responsive") return { root: "card-responsive" };
     return {};
   },
+  styles: () => ({
+    root: { backgroundColor: "var(--inspector-surface-card)" },
+  }),
 });