style: the ribbon takes the logo's colours

--w-accent is the logo's slate instead of Word's blue (5.1:1 on the chrome,
carries white), and the clay marks the contextual tabs — the pair meets where
those sit beside the normal ones. Both defined once from favicon.svg; the
label tone is darkened, the clay itself only 3.3:1 on white.

docs/architecture/ribbon.md

@@ -22,17 +22,23 @@ chrome is mounted at a time, so the two sets never coexist.
 ## Palette
 
 Word's greys live in `--w-*` in `global.css` — its own token set, not the app's, so the two
-chromes can look nothing alike while sharing a theme. Accent `--w-accent: #185abd`; the tab's
+chromes can look nothing alike while sharing a theme. The accent is **not** Word's blue but the
+logo's slate, `--brand-slate` (`#4c6c8a`, 5.1:1 on the chrome and carries white); the tab's
 active underline is 2.5px **inset 13px from each side**, not a full-width border.
 
+The logo's other colour, `--brand-clay`, marks the **contextual tabs** — the ones that exist only
+for the selected object — as their 2px bar, over a `--w-contextual` label darkened to stay
+readable (the clay itself is 3.3:1 on white). Both brand tokens are defined once, from
+`favicon.svg`; the classic chrome's island hairline already gradients between the same pair.
+
 `.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.
 
-**Dark** flips only the colours — every metric holds, so it is the same ribbon. The values are
-Word's dark mode: Fluent's dark neutrals, chrome `#1f1f1f` on surface `#292929`, and the accent
-lightened to `#479ef5` because `#185abd` on a dark chrome is unreadable. AllBlack goes on to
+**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
+lighten (`#8fb3cd` / `#e2916f`), unreadable on a dark chrome otherwise. AllBlack goes on to
 Word's Black theme (`#0f0f0f`), since the app's AllBlack canvas is darker than its dark one.
 
 That lightened accent cannot also carry white text, so a **second** pair exists for the one place

src/lib/components/ribbon/Ribbon.svelte

@@ -459,15 +459,16 @@
   .ribbon-tab:hover { color: var(--w-accent); }
 
   /* Word tints a contextual tab so it reads as belonging to the selected object
-     rather than to the document. */
-  .ribbon-tab.contextual { color: var(--w-accent-dark); }
+     rather than to the document. Ours takes the logo's second colour, so the pair
+     appears where the two tab kinds sit side by side. */
+  .ribbon-tab.contextual { color: var(--w-contextual); }
   .ribbon-tab.contextual::before {
     content: '';
     position: absolute;
     inset: 2px 4px auto;
     height: 2px;
     border-radius: 1px;
-    background: var(--w-accent-soft);
+    background: var(--brand-clay);
   }
   .ribbon-tab.active { color: var(--w-accent); }
 

src/styles/global.css

@@ -254,19 +254,25 @@
     /* Headings are sans, like LibreOffice's Heading style ('Arial' is the bundled
        Liberation Sans; see HEADING_FONT in export/odt.ts). */
     --font-heading: 'Arial', 'Liberation Sans', sans-serif;
-    /* Brand accents: the primary slate + the logo's warm coral; the gradient is
-       the app's signature (island hairline). */
-    --accent-warm: #d96b4a;
+    /* The logo's two colours (favicon.svg: .slate / .clay), one source of truth for
+       both chromes. The gradient is the app's signature (island hairline). */
+    --brand-slate: #4c6c8a;
+    --brand-clay: #d1734f;
+    --accent-warm: var(--brand-clay);
     --brand-gradient: linear-gradient(90deg, var(--color-primary), var(--accent-warm));
   }
 
-/* The ribbon's palette: Word's own greys and accent. Its own token set rather than
-   the app's, so the two chromes can look nothing alike while sharing a theme. */
+/* The ribbon's palette: Word's own greys, our own accent — the logo's slate, which
+   carries white and clears 4.5:1 on the chrome. Its own token set rather than the
+   app's, so the two chromes can look nothing alike while sharing a theme. */
 :root {
-  --w-accent: #185abd;
-  --w-accent-dark: #124a9e;
-  --w-accent-fill: #185abd;
-  --w-accent-fill-open: #124a9e;
+  --w-accent: var(--brand-slate);
+  --w-accent-dark: #3a5570;
+  --w-accent-fill: var(--brand-slate);
+  --w-accent-fill-open: #3a5570;
+  /* The logo's other colour, on the tabs that only exist for the selected object.
+     Darkened for the label; the bar above it takes the brand tone itself. */
+  --w-contextual: #a85a3a;
   --w-chrome: #ffffff;
   --w-surface: #ffffff;
   --w-border: #e3e6ea;
@@ -277,7 +283,7 @@
   --w-hover: #f3f2f1;
   --w-pressed: #edebe9;
   --w-active: #e2e0de;
-  --w-accent-soft: #e8f1fb;
+  --w-accent-soft: #eaeff4;
   --w-menu-shadow: 0 8px 24px rgb(0 0 0 / 18%);
   --w-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   /* Body height: three control rows plus the group-label row, and a big button's
@@ -285,14 +291,15 @@
   --w-ribbon-h: 84px;
 }
 
-/* Word's dark mode: the Fluent dark neutrals, and the accent lightened because
-   #185abd on a dark chrome is unreadable. Only the colours flip — every metric
-   above holds, so the two modes are the same ribbon. */
+/* Word's dark mode: the Fluent dark neutrals, and both brand tones lightened
+   because they are unreadable on a dark chrome. Only the colours flip — every
+   metric above holds, so the two modes are the same ribbon. */
 [data-theme='dark'], [data-theme='allBlack'] {
-  --w-accent: #479ef5;
-  --w-accent-dark: #2886de;
-  --w-accent-fill: #115ea3;
-  --w-accent-fill-open: #0f6cbd;
+  --w-accent: #8fb3cd;
+  --w-accent-dark: #6e93b0;
+  --w-accent-fill: #3c586f;
+  --w-accent-fill-open: #4c6c8a;
+  --w-contextual: #e2916f;
   --w-chrome: #1f1f1f;
   --w-surface: #292929;
   --w-border: #383838;
@@ -303,7 +310,7 @@
   --w-hover: #3d3d3d;
   --w-pressed: #333333;
   --w-active: #4a4a4a;
-  --w-accent-soft: #10395f;
+  --w-accent-soft: #2b3b49;
   --w-menu-shadow: 0 8px 24px rgb(0 0 0 / 45%);
 }
 
@@ -317,7 +324,7 @@
   --w-hover: #2e2e2e;
   --w-pressed: #262626;
   --w-active: #3d3d3d;
-  --w-accent-soft: #0d2d4d;
+  --w-accent-soft: #212e39;
 }
 
 /* Signature micro-interactions, shared across all toolbar components. */