style: the status bar follows the chrome above it

Under the ribbon it takes the same --w-* remap .ribbon gives its pickers: the
app's dark neutrals are bluer than Word's, so the two ends of the window did
not match. Classic keeps the themed set. --color-primary is the brand slate
now, so both chromes share one accent.

docs/architecture/ribbon.md

@@ -34,7 +34,9 @@ readable (the clay itself is 3.3:1 on white). Both brand tokens are defined once
 `.ribbon` remaps the app's own tokens onto that palette (`--color-surface`, `--color-primary`,
 `--toolbar-btn-size`, …). Custom properties inherit, so every reused picker — `ColorPicker`,
 `HistoryButton`, `TablePicker`, `TableStylePicker`, the border pickers — adopts the ribbon's look
-with no edit of its own, while the classic toolbar keeps the themed set.
+with no edit of its own, while the classic toolbar keeps the themed set. The **status bar** takes
+the same remap while the ribbon is mounted (`.statusbar.w-chrome`, `App.svelte`) — it closes the
+frame the chrome opens, and the app's dark neutrals are bluer than Word's.
 
 **Dark** flips only the colours — every metric holds, so it is the same ribbon. The neutrals are
 Word's dark mode: Fluent's dark neutrals, chrome `#1f1f1f` on surface `#292929`; both brand tones

src/App.svelte

@@ -1448,7 +1448,7 @@
       <FindReplaceBar {editor} {tick} mode={findMode} focusNonce={findNonce} onClose={closeFind} />
     </div>
   {/if}
-  <footer class="statusbar">
+  <footer class="statusbar" class:w-chrome={chromeMode === 'ribbon'}>
     <div class="sb-left">
       <span>{t().status.pageOf(currentPage, numPages)}</span>
       <div class="wordcount-wrap" use:wordCountClickOutside>
@@ -2081,6 +2081,23 @@
     z-index: 50;
   }
 
+  /* The bar closes the frame the chrome above it opens, so under the ribbon it takes
+     the ribbon's palette — the same token remap .ribbon does for its pickers, which
+     is what the popup and the language picker inside here read too. */
+  .statusbar.w-chrome {
+    --color-toolbar-bg: var(--w-chrome);
+    --color-surface: var(--w-surface);
+    --color-border: var(--w-border);
+    --color-text: var(--w-text);
+    --color-text-muted: var(--w-text-dim);
+    --color-primary: var(--w-accent);
+    --color-btn-hover: var(--w-hover);
+    --font-sans: var(--w-font);
+    --radius: 3px;
+
+    border-top-color: var(--w-border-strong);
+  }
+
   /* Three zones: page count left, language picker centered, zoom right. The
      equal-flex sides keep the center cell centered regardless of side widths. */
   .sb-left {

src/styles/global.css

@@ -588,7 +588,7 @@
   --color-border: #e2e8f0;
   --color-text: #1e293b;
   --color-text-muted: #94a3b8;
-  --color-primary: #52748b;
+  --color-primary: var(--brand-slate);
   --color-toolbar-bg: #ffffff;
   --color-btn-hover: #cbd5e1;
   --color-page-bg: #ffffff;
@@ -605,7 +605,7 @@
     --color-border: #30363d;
     --color-text: #f2e6f3;
     --color-text-muted: #7d8590;
-    --color-primary: #52748b;
+    --color-primary: var(--brand-slate);
     --color-toolbar-bg: #161b22;
     --color-btn-hover: #3b4350;
     --color-page-bg: #ffffff;
@@ -622,7 +622,7 @@
   --color-border: #30363d;
   --color-text: #e6edf3;
   --color-text-muted: #7d8590;
-  --color-primary: #52748b;
+  --color-primary: var(--brand-slate);
   --color-toolbar-bg: #161b22;
   --color-btn-hover: #3b4350;
   --color-page-bg: #161b22;