fix(website): align raw markdown code blocks with prototype styling

Astro's default Shiki config bakes in the fixed 'github-dark' theme's
literal colors, ignoring the site's actual light/dark mode - this made
plain markdown-fenced code blocks (as opposed to the prototype's own
SyntaxHighlightedCode component) always render a hardcoded dark box
regardless of theme.

Switch shikiConfig to the 'css-variables' theme so highlighted tokens
resolve through --astro-code-* custom properties instead, then map
those to the same brand color tokens the prototype's codeBlock uses
(canvas-subtle background, border-muted border, brand text/link/accent
colors for tokens). Raw markdown code blocks now match the prototype's
bordered, canvas-subtle surface in both color modes.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6

website/astro.config.mjs

@@ -27,6 +27,19 @@ export default defineConfig({
     remarkPlugins: [
       [remarkGithubAdmonitionsToDirectives, { mapping: githubAdmonitionMapping }],
     ],
+    // The prototype's own code blocks (SyntaxHighlightedCode.tsx) are styled
+    // entirely through brand CSS tokens rather than baked-in theme colours, so
+    // they automatically match the site's light/dark mode. Raw markdown code
+    // fences render through Shiki instead, which by default bakes a fixed
+    // "github-dark" theme's literal colours into inline styles — that ignores
+    // the site's actual colour mode and clashes with the prototype's bordered,
+    // canvas-subtle code block styling. The "css-variables" theme emits
+    // `var(--astro-code-*)` custom properties instead of literal colours,
+    // which are mapped to the same brand tokens in
+    // src/components/brand/styles/{dotnet-upgrade,github-copilot-app}.module.css.
+    shikiConfig: {
+      theme: "css-variables",
+    },
   },
   // English is served at the site root (no locale prefix), preserving all
   // existing URLs. Additional locales are served under a locale prefix

website/src/components/brand/styles/dotnet-upgrade.module.css

@@ -549,6 +549,42 @@
   color: var(--brand-color-text-link-pressed);
 }
 
+/* Raw markdown fenced code blocks render through Shiki's "css-variables"
+   theme (see astro.config.mjs), which emits `--astro-code-*` custom
+   properties instead of baking in a fixed theme's literal colours. Map those
+   to the same brand tokens the prototype's SyntaxHighlightedCode component
+   uses, and match its bordered, canvas-subtle surface so both code paths look
+   identical in both colour modes. */
+.articleSection :global(pre.astro-code) {
+  --astro-code-foreground: var(--brand-color-text-default);
+  --astro-code-background: var(--brand-color-canvas-subtle);
+  --astro-code-token-constant: var(--brand-color-accent-primary);
+  --astro-code-token-string: var(--brand-color-accent-primary);
+  --astro-code-token-comment: var(--brand-color-text-muted);
+  --astro-code-token-keyword: var(--brand-color-text-link-rest);
+  --astro-code-token-parameter: var(--brand-color-text-default);
+  --astro-code-token-function: var(--brand-color-text-default);
+  --astro-code-token-string-expression: var(--brand-color-accent-primary);
+  --astro-code-token-punctuation: var(--brand-color-text-default);
+  --astro-code-token-link: var(--brand-color-text-link-rest);
+  margin: 0;
+  padding: var(--base-size-20);
+  overflow-x: auto;
+  border-radius: var(--brand-borderRadius-medium);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  background-color: var(--brand-color-canvas-subtle);
+  color: var(--brand-color-text-default);
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-400);
+  tab-size: 2;
+}
+
+.articleSection :global(pre.astro-code):focus-visible {
+  outline: var(--base-size-2) solid var(--brand-color-accent-primary);
+  outline-offset: calc(-1 * var(--base-size-2));
+}
+
 .articleHeading {
   margin: 0;
   /* Two medium gaps separate the title from the text below, while the

website/src/components/brand/styles/github-copilot-app.module.css

@@ -971,6 +971,42 @@
   color: var(--brand-color-text-link-pressed);
 }
 
+/* Raw markdown fenced code blocks render through Shiki's "css-variables"
+   theme (see astro.config.mjs), which emits `--astro-code-*` custom
+   properties instead of baking in a fixed theme's literal colours. Map those
+   to the same brand tokens the prototype's SyntaxHighlightedCode component
+   uses (see .codeBlock below), so both code paths look identical in both
+   colour modes. */
+.articleSection :global(pre.astro-code) {
+  --astro-code-foreground: var(--brand-color-text-default);
+  --astro-code-background: var(--brand-color-canvas-subtle);
+  --astro-code-token-constant: var(--brand-color-accent-primary);
+  --astro-code-token-string: var(--brand-color-accent-primary);
+  --astro-code-token-comment: var(--brand-color-text-muted);
+  --astro-code-token-keyword: var(--brand-color-text-link-rest);
+  --astro-code-token-parameter: var(--brand-color-text-default);
+  --astro-code-token-function: var(--brand-color-text-default);
+  --astro-code-token-string-expression: var(--brand-color-accent-primary);
+  --astro-code-token-punctuation: var(--brand-color-text-default);
+  --astro-code-token-link: var(--brand-color-text-link-rest);
+  margin: 0;
+  padding: var(--base-size-20);
+  overflow-x: auto;
+  border-radius: var(--brand-borderRadius-medium);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  background-color: var(--brand-color-canvas-subtle);
+  color: var(--brand-color-text-default);
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-400);
+  tab-size: 2;
+}
+
+.articleSection :global(pre.astro-code):focus-visible {
+  outline: var(--base-size-2) solid var(--brand-color-accent-primary);
+  outline-offset: calc(-1 * var(--base-size-2));
+}
+
 .articleHeading {
   margin: 0;
   margin-block-end: var(--base-size-16);