style(words): drawer per-scope accent color + tinted header (COLOR-2)

Each drawer panel category gets a distinct hue so the user reads the
panel's *kind* at a glance:

- Text scopes (format, block) → primary accent (project violet)
- Structure scopes (cell, row, table, list, list-item) → secondary
  (slate-blue) — the contextual scaffolding around the text
- Media scopes (image, code) → fulfill (teal-mint) — opaque blocks
- Default (document outline) → neutral toolbar tone

Implementation: scope hue resolves into `--_drawer-scope-accent` via
`[data-words-drawer-panel][data-mode=...]` selectors. Then:

- The left border (already used as depth indicator) inherits the
  scope accent at decreasing alpha as depth grows (leaf 100%, depth 1
  65%, 2 40%, 3 25%).
- Open panel headers paint with a 6% tint of the scope accent + the
  accent color for the title text.
- Active action chips inside a panel inherit the scope accent for
  background + border + text, so the active variant matches the
  scope's color identity (no more "always-violet" Striped/Plain).

Visual cohesion: a user in a table cell with text selected now sees:
- FORMAT panel header in violet (text scope)
- CELL/ROW/TABLE headers in slate-blue when expanded (structure scope)
- IMAGE/CODE panels in teal-mint (media scope)
- DEFAULT in neutral

CSS-only change; nothing in soma/morfo touched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/uix/eidos/components/words/words.css

@@ -291,20 +291,69 @@
 	color: var(--words-command-color);
 }
 
-/* Depth indicator — the leaf panel is full-strength; deeper-in-the-
+/* Per-scope accent — each category of scope gets a distinct hue so
-   hierarchy panels render slightly muted so the user can read the
+   the user can read the panel's *kind* at a glance:
-   precedence visually. */
+   - Text scopes (format, block) → primary (project accent)
+   - Structure scopes (cell, row, table, list, list-item) → secondary
+   - Media scopes (image, code) → fulfill (tealish)
+   - Default (document) → neutral
+   Variables here resolve from the eidos color tokens, so themes
+   re-tint everything coherently. */
+[data-words-drawer-panel][data-mode='default'] {
+	--_drawer-scope-accent: var(--words-toolbar-border);
+	--_drawer-scope-tint: var(--words-toolbar-bg);
+}
+[data-words-drawer-panel][data-mode='format'],
+[data-words-drawer-panel][data-mode='block'] {
+	--_drawer-scope-accent: var(--_words-accent-border);
+	--_drawer-scope-tint: color-mix(in srgb, var(--_words-accent-solid) 6%, transparent);
+}
+[data-words-drawer-panel][data-mode='cell'],
+[data-words-drawer-panel][data-mode='row'],
+[data-words-drawer-panel][data-mode='table'],
+[data-words-drawer-panel][data-mode='list'],
+[data-words-drawer-panel][data-mode='list-item'] {
+	--_drawer-scope-accent: var(--words-secondary-text);
+	--_drawer-scope-tint: color-mix(in srgb, var(--words-secondary-text) 6%, transparent);
+}
+[data-words-drawer-panel][data-mode='image'],
+[data-words-drawer-panel][data-mode='code'] {
+	--_drawer-scope-accent: var(--words-fulfill-text);
+	--_drawer-scope-tint: color-mix(in srgb, var(--words-fulfill-text) 6%, transparent);
+}
+
+/* Depth indicator — leaf panel is full-strength scope accent; deeper
+   panels render the same hue at decreasing alpha so the precedence is
+   readable visually. */
 [data-words-drawer-panel][data-depth='0'] {
-	border-inline-start: 2px solid var(--_words-accent-border);
+	border-inline-start: 3px solid var(--_drawer-scope-accent);
 }
 [data-words-drawer-panel][data-depth='1'] {
-	border-inline-start: 2px solid
+	border-inline-start: 3px solid
-		color-mix(in srgb, var(--_words-accent-border) 60%, transparent);
+		color-mix(in srgb, var(--_drawer-scope-accent) 65%, transparent);
+}
+[data-words-drawer-panel][data-depth='2'] {
+	border-inline-start: 3px solid
+		color-mix(in srgb, var(--_drawer-scope-accent) 40%, transparent);
 }
-[data-words-drawer-panel][data-depth='2'],
 [data-words-drawer-panel][data-depth='3'] {
-	border-inline-start: 2px solid
+	border-inline-start: 3px solid
-		color-mix(in srgb, var(--_words-accent-border) 30%, transparent);
+		color-mix(in srgb, var(--_drawer-scope-accent) 25%, transparent);
+}
+
+/* When the panel is open, paint its header with the scope tint so the
+   active scope reads at a glance. */
+[data-words-drawer-panel][data-open] [data-words-drawer-panel-header] {
+	background: var(--_drawer-scope-tint);
+	color: var(--_drawer-scope-accent);
+}
+
+/* Action chip active state — inherit the scope accent so the
+   selected variant matches the panel's color identity. */
+[data-words-drawer-panel] [data-words-drawer-action][data-active] {
+	background: color-mix(in srgb, var(--_drawer-scope-accent, var(--_words-accent-solid)) 20%, var(--words-bg));
+	border-color: var(--_drawer-scope-accent, var(--_words-accent-border));
+	color: var(--_drawer-scope-accent, var(--_words-accent-text));
 }
 
 [data-words-drawer-panel-title] {