Complete "Support native host styling using CSS variables" pattern documentation

References existing type-checked examples instead of a stub:
- Vanilla JS: `applyHostStyleVariables_fromHostContext` from `src/styles.examples.ts`
- React: `useHostStyles_basicUsage` from `src/react/useHostStyles.examples.tsx`

Expanded `applyHostStyleVariables_fromHostContext` to show the full pattern:
using CSS variables in styles, applying on `onhostcontextchanged`, and
applying initial styles after `connect()`.

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

src/styles.examples.ts

@@ -43,11 +43,23 @@ function applyDocumentTheme_fromHostContext(app: App) {
  */
 function applyHostStyleVariables_fromHostContext(app: App) {
   //#region applyHostStyleVariables_fromHostContext
+  // Use CSS variables in your styles
+  document.body.style.background = "var(--color-background-primary)";
+
+  // Apply when host context changes
   app.onhostcontextchanged = (params) => {
     if (params.styles?.variables) {
       applyHostStyleVariables(params.styles.variables);
     }
   };
+
+  // Apply initial styles after connecting
+  app.connect().then(() => {
+    const ctx = app.getHostContext();
+    if (ctx?.styles?.variables) {
+      applyHostStyleVariables(ctx.styles.variables);
+    }
+  });
   //#endregion applyHostStyleVariables_fromHostContext
 }