Improve global.css as scaffolding template (#403)

Update `global.css` in all `basic-server-*` examples (and `integration-server`
for consistency) to better serve as templates for AI coding agents scaffolding
new MCP Apps.

Changes:
- Use CSS custom properties (`--font-sans`, `--color-text-primary`, etc.) with
  sensible fallbacks, enabling host design system integration
- Add `color-scheme: light dark` and `light-dark()` fallbacks for theme support
- Include comprehensive typography: h1-h6, body text, `code`/`pre`/`kbd`, `b`/`strong`
- Move `#server-time` styles from global CSS to component stylesheets (classes
  instead of IDs for better CSS practices)

Updates E2E test selectors in `DYNAMIC_MASKS` to match the new class-based
selectors.

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

examples/basic-server-react/src/global.css

@@ -1,18 +1,49 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 1rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+  font-size: var(--font-text-md-size, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--font-text-md-line-height, 1.5);
+  color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
 }
 
-code {
+h1 {
+  font-size: var(--font-heading-3xl-size, 2.25rem);
+  line-height: var(--font-heading-3xl-line-height, 1.1);
+}
+h2 {
+  font-size: var(--font-heading-2xl-size, 1.875rem);
+  line-height: var(--font-heading-2xl-line-height, 1.2);
+}
+h3 {
+  font-size: var(--font-heading-xl-size, 1.5rem);
+  line-height: var(--font-heading-xl-line-height, 1.25);
+}
+h4 {
+  font-size: var(--font-heading-lg-size, 1.25rem);
+  line-height: var(--font-heading-lg-line-height, 1.3);
+}
+h5 {
+  font-size: var(--font-heading-md-size, 1rem);
+  line-height: var(--font-heading-md-line-height, 1.4);
+}
+h6 {
+  font-size: var(--font-heading-sm-size, 0.875rem);
+  line-height: var(--font-heading-sm-line-height, 1.4);
+}
+
+code, pre, kbd {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-size: 1em;
 }
 
-/* Server time fills remaining width for consistent E2E screenshot masking */
-#server-time {
-  flex: 1;
-  min-width: 0;
+b, strong {
+  font-weight: var(--font-weight-bold, 700);
 }

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

@@ -70,3 +70,9 @@
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+.serverTime {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-react/src/mcp-app.tsx

@@ -131,7 +131,7 @@ function GetTimeAppInner({ app, toolResult, hostContext }: GetTimeAppInnerProps)
 
       <div className={styles.action}>
         <p>
-          <strong>Server Time:</strong> <code id="server-time">{serverTime}</code>
+          <strong>Server Time:</strong> <code className={styles.serverTime}>{serverTime}</code>
         </p>
         <button onClick={handleGetTime}>Get Server Time</button>
       </div>