Portal: theme-aware code blocks and hero-navy token (#7003)

# Description of Changes

Makes the code-snippet boxes theme-aware (a light palette in light mode)
and moves the hero navy into a design token without changing the colour
itself.

Part of a portal (processor) UI-consistency pass, split into small
focused PRs.

## Before / after

<img width="2136" height="272" alt="after-codeblock-light"
src="https://github.com/user-attachments/assets/ebdd4a7d-2d1a-429a-971b-0b04e93854fe"
/>
<img width="1800" height="740" alt="before-codeblock-light"
src="https://github.com/user-attachments/assets/6819231a-10d5-4730-9b7d-3c36dc1c8170"
/>

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have run `task check` to verify linters, typechecks, and tests
pass
- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing)
for more details.

frontend/editor/src/core/tokens/tokens.css

@@ -270,8 +270,29 @@
   --grad-banner: linear-gradient(135deg, #0f172a 0%, #111827 50%, #1a1535 100%);
 }
 
-/* Always-dark code palette. Not theme-switched. */
-:root {
+/* Code palette — theme-aware: a light GitHub-style box in light mode, the dark
+   terminal palette in dark mode. (CodeBlock renders plain text, so only the
+   base colours are load-bearing; the syntax slots are kept for future Shiki. */
+:root,
+[data-theme="light"] {
+  --code-bg: #f6f8fa;
+  --code-bg-alt: #eef1f4;
+  --code-bg-header: #eaeef2;
+  --code-text: #1f2328;
+  --code-dim: #656d76;
+  --code-muted: #8c959f;
+  --code-keyword: #cf222e;
+  --code-string: #0a3069;
+  --code-number: #0550ae;
+  --code-fn: #8250df;
+  --code-type: #953800;
+  --code-property: #0550ae;
+  --code-comment: #6e7781;
+  --code-border: #d0d7de;
+  /* Window-chrome traffic-light dots in the code-block header. */
+  --code-dot: #d0d7de;
+}
+[data-theme="dark"] {
   --code-bg: #0f172a;
   --code-bg-alt: #1e293b;
   --code-bg-header: #1a2332;
@@ -286,12 +307,16 @@
   --code-property: #93c5fd;
   --code-comment: #475569;
   --code-border: #1e293b;
-  /* Window-chrome traffic-light dots in the code-block header. */
   --code-dot: #475569;
 }
 
 /* Radii / typography / motion / spacing / z-index — theme-stable */
 :root {
+  /* Home hero strip navy. Theme-stable by design — the hero keeps this deep
+     navy in both light and dark (it's a branded surface, like the assistant
+     header), so it's defined once here rather than in the light/dark blocks. */
+  --color-hero-navy: #16213e;
+
   --radius-xs: 0.1875rem;
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;

frontend/editor/src/core/ui/CodeBlock.css

@@ -51,7 +51,8 @@
   transition: background var(--motion-fast);
 }
 .sui-code__copy:hover {
-  background: rgba(255, 255, 255, 0.05);
+  /* Subtle tint that reads on both the light and dark code surfaces. */
+  background: color-mix(in srgb, var(--code-text) 8%, transparent);
 }
 .sui-code__pre {
   margin: 0;

frontend/editor/src/portal/components/EditorStatusCard.css

@@ -15,7 +15,7 @@
   align-items: center;
   gap: 1.25rem;
   padding: 1rem 1.25rem;
-  background: #16213e;
+  background: var(--color-hero-navy);
 }
 
 .portal-editor-hero__logo {
@@ -123,7 +123,7 @@
 .portal-editor-hero__action .portal-editor-hero__cta.sui-btn {
   background: #ffffff;
   border-color: #ffffff;
-  color: #16213e;
+  color: var(--color-hero-navy);
 }
 .portal-editor-hero__action .portal-editor-hero__cta.sui-btn:hover {
   background: rgba(255, 255, 255, 0.88);

frontend/editor/src/portal/components/WelcomeBanner.css

@@ -18,7 +18,7 @@
   gap: 1rem;
   flex-wrap: wrap;
   padding: 0.875rem 1.25rem;
-  background: #16213e;
+  background: var(--color-hero-navy);
 }
 
 .portal-welcome__brand {
@@ -90,7 +90,7 @@
 .portal-welcome__header .portal-welcome__cta.sui-btn {
   background: #ffffff;
   border-color: #ffffff;
-  color: #16213e;
+  color: var(--color-hero-navy);
 }
 .portal-welcome__header .portal-welcome__cta.sui-btn:hover {
   background: rgba(255, 255, 255, 0.88);