Improve example CSS files to better demonstrate host style integration

Update `mcp-app.css`, `mcp-app.module.css`, and Svelte/Vue component
styles across all `basic-server-*` examples (and `integration-server`)
to use CSS variables instead of hardcoded values:

- Remove component-local color variables (`--color-primary`, etc.)
- Add derived spacing variables to `global.css` based on `--spacing-unit`
- Replace hardcoded spacing with `--spacing-xs/sm/md/lg` variables
- Add app-defined accent color variables (`--color-accent`,
  `--color-text-on-accent`) to `global.css` for brand customization
- Use app accent colors for button styling
- Update button hover to use `color-mix()` for theme-adaptive lightening
- Change focus-visible to use `--color-ring-primary` outline

This makes the templates more instructive for users and AI coding agents
building new MCP Apps by showing how to consume host-provided variables
semantically, define app-specific accent colors, and create adaptive
styling that integrates with host themes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

examples/basic-server-react/src/mcp-app.module.css

@@ -1,8 +1,4 @@
 .main {
-  --color-primary: #2563eb;
-  --color-primary-hover: #1d4ed8;
-  --color-notice-bg: #eff6ff;
-
   width: 100%;
   max-width: 425px;
   box-sizing: border-box;
@@ -13,7 +9,7 @@
   }
 
   > * + * {
-    margin-top: 1.5rem;
+    margin-top: var(--spacing-lg);
   }
 }
 
@@ -25,45 +21,50 @@
   }
 
   > * + * {
-    margin-top: 0.5rem;
+    margin-top: var(--spacing-sm);
   }
 
   /* Server time row: flex layout for consistent mask width in E2E tests */
   > p {
     display: flex;
     align-items: baseline;
-    gap: 0.25em;
+    gap: var(--spacing-xs);
   }
 
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {
+    display: block;
     font-family: inherit;
     font-size: inherit;
   }
 
   button {
-    padding: 0.5rem 1rem;
+    padding: var(--spacing-sm) var(--spacing-md);
     border: none;
-    border-radius: 6px;
-    color: white;
-    font-weight: bold;
-    background-color: var(--color-primary);
+    border-radius: var(--border-radius-md);
+    color: var(--color-text-on-accent);
+    font-weight: var(--font-weight-bold);
+    background-color: var(--color-accent);
     cursor: pointer;
 
-    &:hover,
+    &:hover {
+      background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
+    }
+
     &:focus-visible {
-      background-color: var(--color-primary-hover);
+      outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
+      outline-offset: var(--border-width-regular);
     }
   }
 }
 
 .notice {
-  padding: 0.5rem 0.75rem;
-  color: var(--color-primary);
+  padding: var(--spacing-sm) var(--spacing-md);
+  color: var(--color-text-info);
   text-align: center;
   font-style: italic;
-  background-color: var(--color-notice-bg);
+  background-color: var(--color-background-info);
 
   &::before {
     content: "ℹ️ ";