@tangle-network/brand 1.29.0 → 1.31.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 1.31.0
+
+### Minor Changes
+
+- 36a423d: Per-user accent scopes. `data-accent="violet" | "orange" | "teal" | "blue" | "pink" | "brown" | "cyan" | "lime"` on `<html>` or any theme boundary rebinds the four indigo roles (fill, mark, line, ink) and the ring to that category's hue, in both modes and inside every named theme; buttons, focus, selection, interaction states, wells, gradients and the chart accent follow, while planes, body ink and status stay the theme's. `gen-ladders.mjs` solves each hue's roles (`--tone-<hue>-{fill,ring,mark,line,ink}`): the fill carries white at 4.5:1, the ink clears 4.5:1 on the page, the card and every selected tint, the line and the focus border clear 3:1. No picker ships; a product sets the attribute.
+  
+  `tangle-drift`'s `settings_layout` counts a settings page as composed when it binds the shared frame with `bindSettingsNav` from `@tangle-network/ui/presentation`, as a server-rendered host does, as well as when it imports `@tangle-network/agent-app/settings-react`.
+
+## 1.30.0
+
+### Minor Changes
+
+- 29e2a49: One loop period, one shadow colour and one radius ramp.
+  
+  - `--duration-ambient` (2000ms) and `--motion-ambient` (ease-in-out) are the only loop period on a page; the shared `tangle-breathe` keyframe breathes a running mark on them, opacity only. Reduced motion keeps that period, so the essential "still working" signal survives.
+  - `--shadow-color` is the one shadow colour, as HSL channels: black in dark, `220 40% 8%` in light. Every spine shadow, the agents and hospitality themes and system.css draw in it; hospitality's forest-tinted shadow becomes the light shadow colour. The dark `--shadow-overlay` no longer inverts into a white halo.
+  - Radius roles are one ramp: `--radius-tag` 4, `--radius-control` 8, `--radius-card` 12, `--radius-container` 16, `--radius-pill`. `--radius-chip`, `--radius-field` and `--radius-panel` keep their values as aliases of control, card and container.
+
 ## 1.29.0
 
 ### Minor Changes

package/README.md

@@ -60,6 +60,7 @@ For finer control, use the exported filenames:
 | `.dark[data-theme="intelligence"]` | Existing dark-only product surface; `.light` keeps the identity and uses canonical light |
 | `[data-theme="hospitality"]` + `.dark[data-theme="hospitality"]` | Hospitality's sage-and-forest product theme in both modes. Set it on the document root. Without `.dark` it is a complete light scope, including before hydration; `.dark` selects the dark baseline and its dark ladder. Status tones stay canonical |
 | `.dark[data-theme="website"]` + `[data-theme="website"]` | The public site's indigo-night planes and indigo-paper light. Set `class="dark" data-theme="website"` on the document root; a section with `data-theme="website"` and no `.dark` is a complete light island. Accent, status, category and syntax tones stay canonical |
+| `data-accent="violet"`, `"orange"`, `"teal"`, `"blue"`, `"pink"`, `"brown"`, `"cyan"` or `"lime"` | A per-user accent. Set it on `<html>` or any theme boundary, in either mode and inside any named theme. It rebinds the four indigo roles (`--hsl-primary` fill, `--brand-primary` mark, `--brand-cool` line, `--accent-text` ink) and `--hsl-ring` to that category's `--tone-<hue>-*` values, and everything the spine derives from them follows: buttons, focus, selection, interaction states, wells, gradients, chart accent. Planes, body ink and status stay the theme's. Generated by `scripts/gen-ladders.mjs`; no picker ships, the product stores and sets the attribute |
 
 Set one coherent mode on each boundary; do not author contradictory `.light`/`.dark`/named-mode markers. Named light variants keep their existing palettes; `tangle-light` is not silently retuned to the neutral base light palette. Each known boundary receives a complete baseline before named overrides, so nested scopes do not inherit opposite-mode syntax, status or already-resolved HSL aliases.
 
@@ -82,7 +83,7 @@ The Agent App light-default contract is an explicit exception to Brand's default
 /* Import globals.css separately only when the host already intends those globals. */
 ```
 
-Choose this **instead of** `styles`, `tokens.css` and `named-themes.css`; do not stack the two default contracts. The projection contains canonical declarations with a zero-specificity light root default, keeps all explicit mode selectors, and omits `--radius`, which the legacy consumer deliberately leaves to its host. It includes no global component rules, keyframes or automatic ladder/system imports.
+Choose this **instead of** `styles`, `tokens.css` and `named-themes.css`; do not stack the two default contracts. The projection contains canonical declarations with a zero-specificity light root default, keeps all explicit mode selectors, and omits `--radius`, which the legacy consumer deliberately leaves to its host. It includes no global component rules or automatic ladder/system imports; its one keyframe, `tangle-breathe`, runs only where a component names it.
 
 This export is the shared migration boundary, **not a claim that Agent App has already migrated** and not a replacement for that package's entire stylesheet. Its component-specific variables, neutral-ramp API, keyframes and structural rules remain consumer-owned until a separate, explicit migration reconciles them. Remove duplicate shared palette declarations in that migration rather than placing competing global token systems on the same page.
 
@@ -123,9 +124,9 @@ Renderers that cannot read CSS variables (PDF, canvas, WebGL, email, the `theme-
 
 The base surface ladder is the one GTM proved out: dark is indigo-lifted `#0a0a14` / `#191826` / `#221f33` / `#2c2942`; light is a cool `#eceef3` canvas, white paper cards and overlays, and `#f1f2f7` nested wells. The cast stays below 0.1 chroma and ink stays achromatic, so indigo still reads as the interaction accent, not the base field. Existing named products may supply deliberate surface overrides.
 
-Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Inter (variable, then static) leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.
+Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Role radii are one ramp: `--radius-tag` 4, `--radius-control` 8, `--radius-card` 12, `--radius-container` 16, and `--radius-pill` for every chip; `--radius-chip`, `--radius-field` and `--radius-panel` are older names of control, card and container. Every shadow is drawn in `--shadow-color`, HSL channels that are black in dark and `220 40% 8%` in light; a named theme retints its shadows by setting that one token. Inter (variable, then static) leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.
 
-Existing `--transition-*` values are preserved. The shared `--duration-*`, `--ease-*` and `--motion-*` vocabulary comes from the existing Agent App contract. It does not apply animations automatically. Reduced motion zeroes those durations and re-resolves composites at theme boundaries. The adjacent `--interaction-*` roles are elapsed acknowledgment/loading thresholds for existing product instrumentation, not animation durations; reduced motion does not change them.
+Existing `--transition-*` values are preserved. The shared `--duration-*`, `--ease-*` and `--motion-*` vocabulary comes from the existing Agent App contract. It does not apply animations automatically. Reduced motion zeroes those durations and re-resolves composites at theme boundaries. `--duration-ambient` (2000 ms; `--motion-ambient` adds ease-in-out) is the only loop period on a page: a running mark breathes on it with the `tangle-breathe` keyframe, opacity only. Reduced motion keeps that one, because it is the essential "still working" signal and moves nothing. The adjacent `--interaction-*` roles are elapsed acknowledgment/loading thresholds for existing product instrumentation, not animation durations; reduced motion does not change them.
 
 Focus uses `--focus-border`, `--focus-halo`, their danger variants, and `--border-strong`, derived from the local ring/border palette. UI's `focusField` / `focusRing` consume them. `globals.css` supplies the existing fallback for controls without their own focus treatment.
 

package/bin/tangle-drift.mjs

@@ -143,11 +143,12 @@ export const RULE_PATTERNS = {
  */
 export const PAGE_PATTERNS = {
   // A settings page drawn locally. agent-app's settings-react owns the settings composition: the
-  // section nav, frame, rows and save behaviour.
+  // section nav, frame, rows and save behaviour. A server-rendered host binds the same frame with
+  // ui's bindSettingsNav.
   settings_layout: {
     name: "settings",
-    composes: String.raw`(?:\bfrom|\bimport)\s*\(?\s*["']@tangle-network/agent-app/settings-react(?:/[^"']*)?["']`,
-    reason: "imports nothing from @tangle-network/agent-app/settings-react",
+    composes: String.raw`(?:\bfrom|\bimport)\s*\(?\s*["']@tangle-network/agent-app/settings-react(?:/[^"']*)?["']|\bimport\s*\{[^}]*\bbindSettingsNav\b[^}]*\}\s*from\s*["']@tangle-network/ui/presentation["']`,
+    reason: "imports nothing from @tangle-network/agent-app/settings-react, nor bindSettingsNav from @tangle-network/ui/presentation",
   },
 };
 const PAGE_DIR = /(?:^|\/)(?:routes|pages|views)\//i;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.29.0",
+  "version": "1.31.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",

package/src/accent-scopes.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+// Each data-accent scope inside an explicit .dark and .light boundary and two
+// named themes: fill, ink, focus border, selection, mark and line follow the
+// hue while the card, body ink and status stay the theme's.
+const HUES = ["violet", "orange", "teal", "blue", "pink", "brown", "cyan", "lime"] as const;
+
+function Island({ accent, theme, label }: { accent?: string; theme?: string; label: string }) {
+  return (
+    <section data-accent={accent} data-theme={theme} className="rounded-[var(--radius-card)] border border-border bg-card p-3 text-foreground">
+      <p className="mb-2 text-xs text-muted-foreground">{label}</p>
+      <div className="flex flex-wrap items-center gap-2">
+        <button type="button" className="h-8 rounded-[var(--radius-control)] bg-primary px-3 text-sm font-medium text-primary-foreground">
+          Run
+        </button>
+        <span className="text-sm font-medium text-[var(--accent-text)]">Accent ink</span>
+        <span className="h-8 w-14 rounded-[var(--radius-control)] border border-[var(--focus-border)] shadow-[0_0_0_3px_var(--focus-halo)]" />
+        <span className="rounded-[var(--radius-pill)] bg-[var(--bg-selection)] px-2 py-0.5 text-xs">Selected</span>
+        <span className="size-4 rounded-full bg-[var(--brand-primary)]" />
+        <span className="w-8 border-t-2 border-[var(--brand-cool)]" />
+        <span className="text-xs text-[var(--surface-success-text)]">Done</span>
+      </div>
+    </section>
+  );
+}
+
+function Mode({ mode }: { mode: "dark" | "light" }) {
+  return (
+    <div className={`${mode} bg-background p-4`} data-mode={mode}>
+      <div className="grid gap-3 sm:grid-cols-3">
+        <Island label="indigo (no accent)" />
+        {HUES.map((hue) => (
+          <Island key={hue} accent={hue} label={hue} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta = { title: "Brand/Accent scopes", parameters: { layout: "fullscreen" } };
+export default meta;
+
+export const AllHues: StoryObj = {
+  render: () => (
+    <div>
+      <Mode mode="dark" />
+      <Mode mode="light" />
+      <div className="grid gap-3 p-4 sm:grid-cols-2">
+        <Island theme="aubergine" accent="pink" label="pink inside aubergine" />
+        <Island theme="super-light" accent="teal" label="teal inside super-light" />
+      </div>
+    </div>
+  ),
+};

package/src/styles/legacy-light.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-compat.mjs. Do not edit.
  * Source: tokens.css + named-themes.css
- * SHA-256: 0a80a683644d15e5e56e938a3094142b9f1a2dd6f3fe136154af4b6bc7c033e0
+ * SHA-256: 728da214076ca13bbac43529a3ba30c5349fdd796266ebe18b354598b58acc40
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -239,6 +239,46 @@
     --surface-teal-bg: #18333b;
     --surface-teal-border: #207e73;
     --surface-teal-text: #0bd8b6;
+    --tone-violet-fill: 272 44.9% 50.2%;
+    --tone-violet-ring: 272 100% 80.8%;
+    --tone-violet-mark: #8e4ec6;
+    --tone-violet-line: #8e4ec6;
+    --tone-violet-ink: #d19dff;
+    --tone-orange-fill: 22 93.6% 36.9%;
+    --tone-orange-ring: 26 100% 67.1%;
+    --tone-orange-mark: #f76b15;
+    --tone-orange-line: #f76b15;
+    --tone-orange-ink: #ffa057;
+    --tone-teal-fill: 172 95% 23.7%;
+    --tone-teal-ring: 170 90.3% 44.5%;
+    --tone-teal-mark: #12a594;
+    --tone-teal-line: #12a594;
+    --tone-teal-ink: #0bd8b6;
+    --tone-blue-fill: 209 86.3% 40%;
+    --tone-blue-ring: 210 100% 72%;
+    --tone-blue-mark: #0090ff;
+    --tone-blue-line: #0090ff;
+    --tone-blue-ink: #70b8ff;
+    --tone-pink-fill: 322 65.1% 46.1%;
+    --tone-pink-ring: 327 100% 77.6%;
+    --tone-pink-mark: #d6409f;
+    --tone-pink-line: #d6409f;
+    --tone-pink-ink: #ff8dcc;
+    --tone-brown-fill: 24 29.6% 39%;
+    --tone-brown-ring: 28 49.7% 72%;
+    --tone-brown-mark: #ad7f58;
+    --tone-brown-line: #ad7f58;
+    --tone-brown-ink: #dbb594;
+    --tone-cyan-fill: 192 80.4% 30%;
+    --tone-cyan-ring: 190 75.5% 60%;
+    --tone-cyan-mark: #00a2c7;
+    --tone-cyan-line: #00a2c7;
+    --tone-cyan-ink: #4ccce6;
+    --tone-lime-fill: 84 44.2% 30.2%;
+    --tone-lime-ring: 80 69.9% 66.1%;
+    --tone-lime-mark: #bdee63;
+    --tone-lime-line: #bdee63;
+    --tone-lime-ink: #bde56c;
     --run-mix-succeeded: #76edb9;
     --run-mix-waiting: #e9b642;
     --run-mix-failed: #e1918e;
@@ -272,12 +312,12 @@
     --code-success: var(--surface-success-text);
     --code-comment: var(--syntax-comment);
     --code-error: var(--syntax-error);
-    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
+    --shadow-color: 0 0% 0%;
+    --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
+    --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45);
     --shadow-glow: none;
-    --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-overlay: 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
-    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
+    --shadow-accent: var(--shadow-card);
+    --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.3), 0 16px 40px hsl(var(--shadow-color) / 0.5);
     --scrim: rgb(0 0 0 / 0.4);
     --scrim-strong: rgb(0 0 0 / 0.72);
     --on-media: #ffffff;
@@ -292,9 +332,12 @@
     --radius-full: 999px;
     --radius-composer: 26px;
     --radius-tag: 4px;
-    --radius-chip: 8px;
-    --radius-field: 12px;
-    --radius-panel: 16px;
+    --radius-control: var(--radius-md);
+    --radius-card: var(--radius-xl);
+    --radius-container: 16px;
+    --radius-chip: var(--radius-control);
+    --radius-field: var(--radius-card);
+    --radius-panel: var(--radius-container);
     --radius-cover: 20px;
     --radius-sheet: 24px;
     --control-height: 2.25rem;
@@ -377,6 +420,8 @@
     --motion-dismiss: var(--duration-instant) var(--ease-exit);
     --motion-stream: var(--duration-stream) var(--ease-expo);
     --motion-arrive: var(--duration-arrive) var(--ease-expo);
+    --duration-ambient: 2000ms;
+    --motion-ambient: var(--duration-ambient) ease-in-out;
     --interaction-feedback-budget: 100ms;
     --interaction-pending-delay: 200ms;
     --interaction-long-work-delay: 1000ms;
@@ -526,6 +571,46 @@
     --surface-teal-bg: #e0f8f3;
     --surface-teal-border: #a1ded2;
     --surface-teal-text: #017d6d;
+    --tone-violet-fill: 272 44.9% 50.2%;
+    --tone-violet-ring: 272 44.9% 50.2%;
+    --tone-violet-mark: #8e4ec6;
+    --tone-violet-line: #8e4ec6;
+    --tone-violet-ink: #753ea6;
+    --tone-orange-fill: 22 93.6% 36.9%;
+    --tone-orange-ring: 22 93.6% 36.9%;
+    --tone-orange-mark: #f76b15;
+    --tone-orange-line: #cc4e00;
+    --tone-orange-ink: #953d0e;
+    --tone-teal-fill: 172 95% 23.7%;
+    --tone-teal-ring: 172 95% 23.7%;
+    --tone-teal-mark: #12a594;
+    --tone-teal-line: #008573;
+    --tone-teal-ink: #066558;
+    --tone-blue-fill: 209 86.3% 40%;
+    --tone-blue-ring: 209 86.3% 40%;
+    --tone-blue-mark: #0090ff;
+    --tone-blue-line: #0588f0;
+    --tone-blue-ink: #0f59a3;
+    --tone-pink-fill: 322 65.1% 46.1%;
+    --tone-pink-ring: 322 65.1% 46.1%;
+    --tone-pink-mark: #d6409f;
+    --tone-pink-line: #d6409f;
+    --tone-pink-ink: #a02071;
+    --tone-brown-fill: 24 29.6% 39%;
+    --tone-brown-ring: 24 29.6% 39%;
+    --tone-brown-mark: #ad7f58;
+    --tone-brown-line: #ad7f58;
+    --tone-brown-ink: #725440;
+    --tone-cyan-fill: 192 80.4% 30%;
+    --tone-cyan-ring: 192 80.4% 30%;
+    --tone-cyan-mark: #00a2c7;
+    --tone-cyan-line: #107d98;
+    --tone-cyan-ink: #0f6277;
+    --tone-lime-fill: 84 44.2% 30.2%;
+    --tone-lime-ring: 84 44.2% 30.2%;
+    --tone-lime-mark: #bdee63;
+    --tone-lime-line: #5c7c2f;
+    --tone-lime-ink: #4b6126;
     --run-mix-succeeded: #3c9b78;
     --run-mix-waiting: #c16227;
     --run-mix-failed: #cd342f;
@@ -533,10 +618,10 @@
     --run-mix-cancelled: #515367;
     --glass-bg-strong: var(--depth-1);
     --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
-    --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
-    --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
-    --shadow-glow: none;
-    --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
+    --shadow-color: 220 40% 8%;
+    --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.06);
+    --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.1);
+    --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.1), 0 16px 40px hsl(var(--shadow-color) / 0.16);
 }
 :where(:root),
 .dark,
@@ -640,6 +725,11 @@
     --chart-tier-a: #5b5bd6;
     --chart-tier-s: #272962;
 }
+@keyframes tangle-breathe {
+    50% {
+        opacity: 0.45;
+    }
+}
 @media (prefers-reduced-motion: reduce) {
     :where(:root),
   .dark,
@@ -1262,9 +1352,9 @@
     --field-border: #798479;
     --border-accent: rgba(40, 88, 66, 0.20);
     --border-accent-hover: rgba(40, 88, 66, 0.36);
-    --shadow-card: 0 1px 2px rgba(23, 38, 29, 0.07), 0 4px 14px -4px rgba(23, 38, 29, 0.10);
-    --shadow-raised: 0 1px 1px rgba(23, 38, 29, 0.05), 0 2px 6px -2px rgba(23, 38, 29, 0.07);
-    --shadow-well: inset 0 1px 2px rgba(23, 38, 29, 0.06);
+    --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.07), 0 4px 14px -4px hsl(var(--shadow-color) / 0.1);
+    --shadow-raised: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 2px 6px -2px hsl(var(--shadow-color) / 0.07);
+    --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.06);
     --edge-highlight: 0 0 0 0 transparent;
     --accent-text: #285842;
     --accent-surface-soft: rgba(40, 88, 66, 0.05);
@@ -1364,9 +1454,9 @@
     --field-border: #939c94;
     --border-accent: rgba(118, 183, 145, 0.35);
     --border-accent-hover: rgba(118, 183, 145, 0.50);
-    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
-    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35);
-    --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.5);
+    --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.45), 0 10px 24px -14px hsl(var(--shadow-color) / 0.6);
+    --shadow-raised: 0 1px 2px hsl(var(--shadow-color) / 0.35);
+    --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.5);
     --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
     --accent-text: #b2dbc2;
     --accent-surface-soft: rgba(118, 183, 145, 0.07);
@@ -1448,8 +1538,8 @@
     --border-default: #49474e;
     --border-hover: #625f69;
     --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
-    --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
-    --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
+    --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
+    --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px hsl(var(--shadow-color) / 0.6);
 }
 [data-theme="agents-light"] {
     --bg-card: #ffffff;
@@ -1502,9 +1592,9 @@
     --border-subtle: #dbd8e0;
     --border-default: #d0cdd7;
     --border-hover: #bcbac7;
-    --shadow-card: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
-    --shadow-dropdown: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
-    --shadow-overlay: 0 8px 28px rgb(33 31 38 / 0.28);
+    --shadow-card: 0 0 0 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px hsl(var(--shadow-color) / 0.05), 0 4px 8px hsl(var(--shadow-color) / 0.08);
+    --shadow-dropdown: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
+    --shadow-overlay: 0 8px 28px hsl(var(--shadow-color) / 0.28);
 }
 [data-theme="website"]:where(:not(.dark)) {
     --hsl-background: 240 42.9% 97.3%;
@@ -1598,3 +1688,139 @@
     --text-muted: #9496bc;
     --text-dim: #9496bc;
 }
+[data-accent="violet"],
+[data-accent="violet"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --hsl-primary: var(--tone-violet-fill);
+    --hsl-ring: var(--tone-violet-ring);
+    --brand-primary: var(--tone-violet-mark);
+    --brand-cool: var(--tone-violet-line);
+    --accent-text: var(--tone-violet-ink);
+}
+[data-accent="orange"],
+[data-accent="orange"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --hsl-primary: var(--tone-orange-fill);
+    --hsl-ring: var(--tone-orange-ring);
+    --brand-primary: var(--tone-orange-mark);
+    --brand-cool: var(--tone-orange-line);
+    --accent-text: var(--tone-orange-ink);
+}
+[data-accent="teal"],
+[data-accent="teal"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --hsl-primary: var(--tone-teal-fill);
+    --hsl-ring: var(--tone-teal-ring);
+    --brand-primary: var(--tone-teal-mark);
+    --brand-cool: var(--tone-teal-line);
+    --accent-text: var(--tone-teal-ink);
+}
+[data-accent="blue"],
+[data-accent="blue"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --hsl-primary: var(--tone-blue-fill);
+    --hsl-ring: var(--tone-blue-ring);
+    --brand-primary: var(--tone-blue-mark);
+    --brand-cool: var(--tone-blue-line);
+    --accent-text: var(--tone-blue-ink);
+}
+[data-accent="pink"],
+[data-accent="pink"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --hsl-primary: var(--tone-pink-fill);
+    --hsl-ring: var(--tone-pink-ring);
+    --brand-primary: var(--tone-pink-mark);
+    --brand-cool: var(--tone-pink-line);
+    --accent-text: var(--tone-pink-ink);
+}
+[data-accent="brown"],
+[data-accent="brown"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --hsl-primary: var(--tone-brown-fill);
+    --hsl-ring: var(--tone-brown-ring);
+    --brand-primary: var(--tone-brown-mark);
+    --brand-cool: var(--tone-brown-line);
+    --accent-text: var(--tone-brown-ink);
+}
+[data-accent="cyan"],
+[data-accent="cyan"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --hsl-primary: var(--tone-cyan-fill);
+    --hsl-ring: var(--tone-cyan-ring);
+    --brand-primary: var(--tone-cyan-mark);
+    --brand-cool: var(--tone-cyan-line);
+    --accent-text: var(--tone-cyan-ink);
+}
+[data-accent="lime"],
+[data-accent="lime"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --hsl-primary: var(--tone-lime-fill);
+    --hsl-ring: var(--tone-lime-ring);
+    --brand-primary: var(--tone-lime-mark);
+    --brand-cool: var(--tone-lime-line);
+    --accent-text: var(--tone-lime-ink);
+}
+:is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]), :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]):is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]) :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+    --btn-primary-hover: color-mix(in srgb, hsl(var(--hsl-primary)), white 10%);
+    --brand-purple: light-dark(var(--brand-primary), color-mix(in srgb, var(--accent-text), white 35%));
+    --brand-strong: color-mix(in srgb, hsl(var(--hsl-primary)), black 50%);
+    --md3-primary-fixed: light-dark(color-mix(in srgb, var(--accent-text) 12%, white), var(--accent-text));
+    --md3-inverse-primary: light-dark(color-mix(in srgb, var(--brand-primary), white 40%), var(--btn-primary-bg));
+    --hsl-primary-foreground: 0 0% 100%;
+    --btn-primary-text: #ffffff;
+    --md3-on-primary: #ffffff;
+    --brand-glow: var(--accent-text);
+    --brand-vibrant: var(--brand-primary);
+    --btn-primary-bg: hsl(var(--hsl-primary));
+    --btn-cta-bg: var(--btn-primary-bg);
+    --btn-cta-text: var(--btn-primary-text);
+    --sidebar-primary: var(--hsl-primary);
+    --sidebar-primary-foreground: var(--hsl-primary-foreground);
+    --sidebar-ring: var(--hsl-ring);
+    --md3-primary: var(--accent-text);
+    --md3-primary-dim: light-dark(var(--btn-primary-bg), var(--brand-primary));
+    --md3-primary-container: var(--btn-primary-bg);
+    --md3-on-primary-container: light-dark(#ffffff, var(--brand-purple));
+    --md3-primary-fixed-dim: light-dark(color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)), var(--brand-cool));
+    --md3-secondary: light-dark(var(--accent-text), var(--brand-purple));
+    --md3-secondary-dim: light-dark(var(--btn-primary-bg), var(--accent-text));
+    --md3-secondary-container: light-dark(var(--md3-primary-fixed), var(--brand-strong));
+    --md3-on-secondary: light-dark(#ffffff, var(--brand-purple));
+    --md3-on-secondary-container: light-dark(var(--accent-text), var(--brand-purple));
+    --md3-surface-tint: light-dark(var(--brand-primary), var(--accent-text));
+    --accent-surface-soft: light-dark(color-mix(in srgb, var(--btn-primary-bg) 5%, transparent), color-mix(in srgb, var(--accent-text) 7%, transparent));
+    --accent-surface-strong: light-dark(color-mix(in srgb, var(--btn-primary-bg) 13%, transparent), color-mix(in srgb, var(--btn-primary-bg) 30%, transparent));
+    --bg-hover: var(--accent-surface-soft);
+    --bg-selection: light-dark(color-mix(in srgb, var(--btn-primary-bg) 16%, transparent), color-mix(in srgb, var(--brand-primary) 28%, transparent));
+    --border-accent: light-dark(color-mix(in srgb, var(--btn-primary-hover) 18%, transparent), color-mix(in srgb, var(--brand-cool) 35%, transparent));
+    --border-accent-hover: light-dark(color-mix(in srgb, var(--btn-primary-hover) 35%, transparent), color-mix(in srgb, var(--brand-cool) 50%, transparent));
+    --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), light-dark(var(--btn-primary-hover), var(--accent-text)));
+    --tangle-gradient-text: linear-gradient(135deg, light-dark(var(--btn-primary-bg), var(--brand-purple)), light-dark(var(--btn-primary-hover), var(--accent-text)));
+    --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), light-dark(var(--btn-primary-hover), var(--brand-primary)));
+    --status-creating: var(--accent-text);
+    --primary: var(--hsl-primary);
+    --primary-foreground: var(--hsl-primary-foreground);
+    --ring: var(--hsl-ring);
+    --syntax-meta: var(--accent-text);
+    --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
+    --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
+    --focus-border: hsl(var(--hsl-ring) / 0.8);
+    --focus-halo: hsl(var(--hsl-ring) / 0.18);
+    --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
+    --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
+    --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
+    --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
+    --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
+    --ix-sel-bg: light-dark(hsl(var(--hsl-ring) / 0.13), hsl(var(--hsl-ring) / 0.18));
+    --ix-hover-bg: light-dark(hsl(var(--hsl-ring) / 0.07), hsl(var(--hsl-ring) / 0.08));
+    --chart-shade: var(--bg-hover);
+    --chart-accent: light-dark(hsl(var(--hsl-primary)), var(--brand-cool));
+    --color-brand: var(--brand-primary);
+    --color-brand-dim: var(--btn-primary-bg);
+    --color-brand-cool: var(--brand-cool);
+    --color-brand-glow: var(--brand-glow);
+    --color-status-creating: var(--status-creating);
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-ring: hsl(var(--ring));
+}

package/src/styles/named-themes.css

@@ -393,9 +393,9 @@
   --border-hover: rgba(23, 38, 29, 0.28); --border-strong: #798479;
   --field-border: #798479;
   --border-accent: rgba(40, 88, 66, 0.20); --border-accent-hover: rgba(40, 88, 66, 0.36);
-  --shadow-card: 0 1px 2px rgba(23, 38, 29, 0.07), 0 4px 14px -4px rgba(23, 38, 29, 0.10);
-  --shadow-raised: 0 1px 1px rgba(23, 38, 29, 0.05), 0 2px 6px -2px rgba(23, 38, 29, 0.07);
-  --shadow-well: inset 0 1px 2px rgba(23, 38, 29, 0.06);
+  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.07), 0 4px 14px -4px hsl(var(--shadow-color) / 0.1);
+  --shadow-raised: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 2px 6px -2px hsl(var(--shadow-color) / 0.07);
+  --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.06);
   --edge-highlight: 0 0 0 0 transparent;
   --accent-text: #285842;
   --accent-surface-soft: rgba(40, 88, 66, 0.05); --accent-surface-strong: rgba(40, 88, 66, 0.13);
@@ -443,9 +443,9 @@
   --border-hover: rgba(227, 233, 229, 0.28); --border-strong: #939c94;
   --field-border: #939c94;
   --border-accent: rgba(118, 183, 145, 0.35); --border-accent-hover: rgba(118, 183, 145, 0.50);
-  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
-  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35);
-  --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.5);
+  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.45), 0 10px 24px -14px hsl(var(--shadow-color) / 0.6);
+  --shadow-raised: 0 1px 2px hsl(var(--shadow-color) / 0.35);
+  --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.5);
   --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
   /* Lifted from #99caad so selected text on a primary tint still clears 4.5:1
    * over the lighter raised plane (L 37.9). */
@@ -517,8 +517,8 @@
   --border-default: #49474e;
   --border-hover: #625f69;
   --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
-  --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
-  --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
+  --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
+  --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px hsl(var(--shadow-color) / 0.6);
 }
 [data-theme="agents-light"] {
   --bg-card: #ffffff;
@@ -571,9 +571,9 @@
   --border-subtle: #dbd8e0;
   --border-default: #d0cdd7;
   --border-hover: #bcbac7;
-  --shadow-card: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
-  --shadow-dropdown: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
-  --shadow-overlay: 0 8px 28px rgb(33 31 38 / 0.28);
+  --shadow-card: 0 0 0 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px hsl(var(--shadow-color) / 0.05), 0 4px 8px hsl(var(--shadow-color) / 0.08);
+  --shadow-dropdown: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
+  --shadow-overlay: 0 8px 28px hsl(var(--shadow-color) / 0.28);
 }
 /* agents:end */
 
@@ -629,3 +629,149 @@
   --border-hover: rgba(255, 255, 255, 0.28);
   --text-primary: #fdfdfd; --text-secondary: #aaa8b8; --text-muted: #9496bc; --text-dim: #9496bc;
 }
+
+/* accent-scopes:begin — generated by scripts/gen-ladders.mjs from its CATEGORY map and the spine; edit there, not these lines.
+ * data-accent="<category>" on <html> or any theme boundary retints the
+ * interaction accent: the five roles take the hue's --tone-<hue>-* values and
+ * the shared rule re-declares what derives from them. Planes, body ink and
+ * status stay the theme's. Last in the stylesheet, so a scope wins over the
+ * named theme it sits on or in. */
+[data-accent="violet"],
+[data-accent="violet"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --hsl-primary: var(--tone-violet-fill);
+  --hsl-ring: var(--tone-violet-ring);
+  --brand-primary: var(--tone-violet-mark);
+  --brand-cool: var(--tone-violet-line);
+  --accent-text: var(--tone-violet-ink);
+}
+[data-accent="orange"],
+[data-accent="orange"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --hsl-primary: var(--tone-orange-fill);
+  --hsl-ring: var(--tone-orange-ring);
+  --brand-primary: var(--tone-orange-mark);
+  --brand-cool: var(--tone-orange-line);
+  --accent-text: var(--tone-orange-ink);
+}
+[data-accent="teal"],
+[data-accent="teal"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --hsl-primary: var(--tone-teal-fill);
+  --hsl-ring: var(--tone-teal-ring);
+  --brand-primary: var(--tone-teal-mark);
+  --brand-cool: var(--tone-teal-line);
+  --accent-text: var(--tone-teal-ink);
+}
+[data-accent="blue"],
+[data-accent="blue"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --hsl-primary: var(--tone-blue-fill);
+  --hsl-ring: var(--tone-blue-ring);
+  --brand-primary: var(--tone-blue-mark);
+  --brand-cool: var(--tone-blue-line);
+  --accent-text: var(--tone-blue-ink);
+}
+[data-accent="pink"],
+[data-accent="pink"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --hsl-primary: var(--tone-pink-fill);
+  --hsl-ring: var(--tone-pink-ring);
+  --brand-primary: var(--tone-pink-mark);
+  --brand-cool: var(--tone-pink-line);
+  --accent-text: var(--tone-pink-ink);
+}
+[data-accent="brown"],
+[data-accent="brown"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --hsl-primary: var(--tone-brown-fill);
+  --hsl-ring: var(--tone-brown-ring);
+  --brand-primary: var(--tone-brown-mark);
+  --brand-cool: var(--tone-brown-line);
+  --accent-text: var(--tone-brown-ink);
+}
+[data-accent="cyan"],
+[data-accent="cyan"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --hsl-primary: var(--tone-cyan-fill);
+  --hsl-ring: var(--tone-cyan-ring);
+  --brand-primary: var(--tone-cyan-mark);
+  --brand-cool: var(--tone-cyan-line);
+  --accent-text: var(--tone-cyan-ink);
+}
+[data-accent="lime"],
+[data-accent="lime"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+[data-accent="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --hsl-primary: var(--tone-lime-fill);
+  --hsl-ring: var(--tone-lime-ring);
+  --brand-primary: var(--tone-lime-mark);
+  --brand-cool: var(--tone-lime-line);
+  --accent-text: var(--tone-lime-ink);
+}
+:is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]),
+:is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]):is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
+:is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]) :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --btn-primary-hover: color-mix(in srgb, hsl(var(--hsl-primary)), white 10%);
+  --brand-purple: light-dark(var(--brand-primary), color-mix(in srgb, var(--accent-text), white 35%));
+  --brand-strong: color-mix(in srgb, hsl(var(--hsl-primary)), black 50%);
+  --md3-primary-fixed: light-dark(color-mix(in srgb, var(--accent-text) 12%, white), var(--accent-text));
+  --md3-inverse-primary: light-dark(color-mix(in srgb, var(--brand-primary), white 40%), var(--btn-primary-bg));
+  --hsl-primary-foreground: 0 0% 100%;
+  --btn-primary-text: #ffffff;
+  --md3-on-primary: #ffffff;
+  --brand-glow: var(--accent-text);
+  --brand-vibrant: var(--brand-primary);
+  --btn-primary-bg: hsl(var(--hsl-primary));
+  --btn-cta-bg: var(--btn-primary-bg);
+  --btn-cta-text: var(--btn-primary-text);
+  --sidebar-primary: var(--hsl-primary);
+  --sidebar-primary-foreground: var(--hsl-primary-foreground);
+  --sidebar-ring: var(--hsl-ring);
+  --md3-primary: var(--accent-text);
+  --md3-primary-dim: light-dark(var(--btn-primary-bg), var(--brand-primary));
+  --md3-primary-container: var(--btn-primary-bg);
+  --md3-on-primary-container: light-dark(#ffffff, var(--brand-purple));
+  --md3-primary-fixed-dim: light-dark(color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)), var(--brand-cool));
+  --md3-secondary: light-dark(var(--accent-text), var(--brand-purple));
+  --md3-secondary-dim: light-dark(var(--btn-primary-bg), var(--accent-text));
+  --md3-secondary-container: light-dark(var(--md3-primary-fixed), var(--brand-strong));
+  --md3-on-secondary: light-dark(#ffffff, var(--brand-purple));
+  --md3-on-secondary-container: light-dark(var(--accent-text), var(--brand-purple));
+  --md3-surface-tint: light-dark(var(--brand-primary), var(--accent-text));
+  --accent-surface-soft: light-dark(color-mix(in srgb, var(--btn-primary-bg) 5%, transparent), color-mix(in srgb, var(--accent-text) 7%, transparent));
+  --accent-surface-strong: light-dark(color-mix(in srgb, var(--btn-primary-bg) 13%, transparent), color-mix(in srgb, var(--btn-primary-bg) 30%, transparent));
+  --bg-hover: var(--accent-surface-soft);
+  --bg-selection: light-dark(color-mix(in srgb, var(--btn-primary-bg) 16%, transparent), color-mix(in srgb, var(--brand-primary) 28%, transparent));
+  --border-accent: light-dark(color-mix(in srgb, var(--btn-primary-hover) 18%, transparent), color-mix(in srgb, var(--brand-cool) 35%, transparent));
+  --border-accent-hover: light-dark(color-mix(in srgb, var(--btn-primary-hover) 35%, transparent), color-mix(in srgb, var(--brand-cool) 50%, transparent));
+  --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), light-dark(var(--btn-primary-hover), var(--accent-text)));
+  --tangle-gradient-text: linear-gradient(135deg, light-dark(var(--btn-primary-bg), var(--brand-purple)), light-dark(var(--btn-primary-hover), var(--accent-text)));
+  --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), light-dark(var(--btn-primary-hover), var(--brand-primary)));
+  --status-creating: var(--accent-text);
+  --primary: var(--hsl-primary);
+  --primary-foreground: var(--hsl-primary-foreground);
+  --ring: var(--hsl-ring);
+  --syntax-meta: var(--accent-text);
+  --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
+  --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
+  --focus-border: hsl(var(--hsl-ring) / 0.8);
+  --focus-halo: hsl(var(--hsl-ring) / 0.18);
+  --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
+  --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
+  --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
+  --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
+  --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
+  --ix-sel-bg: light-dark(hsl(var(--hsl-ring) / 0.13), hsl(var(--hsl-ring) / 0.18));
+  --ix-hover-bg: light-dark(hsl(var(--hsl-ring) / 0.07), hsl(var(--hsl-ring) / 0.08));
+  --chart-shade: var(--bg-hover);
+  --chart-accent: light-dark(hsl(var(--hsl-primary)), var(--brand-cool));
+  --color-brand: var(--brand-primary);
+  --color-brand-dim: var(--btn-primary-bg);
+  --color-brand-cool: var(--brand-cool);
+  --color-brand-glow: var(--brand-glow);
+  --color-status-creating: var(--status-creating);
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-ring: hsl(var(--ring));
+}
+/* accent-scopes:end */

package/src/styles/named-themes.test.ts

@@ -301,7 +301,7 @@ for (const [name, mode] of [
       it("is a white page whose cards separate by shadow", () => {
         expect(declIn(css, "hsl-background")).toBe("0 0% 100%");
         expect(declIn(css, "hsl-card")).toBe("0 0% 100%");
-        expect(declIn(css, "shadow-card")).toMatch(/rgb\(/);
+        expect(declIn(css, "shadow-card")).toMatch(/hsl\(var\(--shadow-color\)/);
       });
     }
   });

package/src/styles/system.css

@@ -140,12 +140,15 @@
    * action. White text passes on every stop (5.37, 5.39 and 5.18:1). */
   --cta: linear-gradient(90deg, #5b5bd6 0%, #6e56cf 55%, #8e4ec6 100%);
   --cta-hover: linear-gradient(90deg, #5151cd 0%, #654dc4 55%, #8347b9 100%);
-  /* Radius by role. The numeric --radius-sm..xl scale is unchanged, so no
-   * existing surface re-rounds; new surfaces pick the role they play. */
+  /* Radius by role, the tokens.css ramp: tag 4, control 8, card 12,
+   * container 16, pill. Chip, field and panel are the older names. */
   --radius-tag: 4px;
-  --radius-chip: 8px;
-  --radius-field: 12px;
-  --radius-panel: 16px;
+  --radius-control: 8px;
+  --radius-card: 12px;
+  --radius-container: 16px;
+  --radius-chip: var(--radius-control);
+  --radius-field: var(--radius-card);
+  --radius-panel: var(--radius-container);
   --radius-cover: 20px;
   --radius-sheet: 24px;
   --radius-pill: 999px;
@@ -191,10 +194,11 @@
   --text-figure--line-height: 2.75rem;
   --text-figure--letter-spacing: -0.02em;
   --text-figure--font-weight: 600;
+  --shadow-color: 0 0% 0%;
   /* Elevation. In dark, a white hairline states the edge; only floating layers cast a shadow. */
   --shadow-1: inset 0 0 0 1px rgb(255 255 255 / 0.06);
-  --shadow-2: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
-  --shadow-3: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
+  --shadow-2: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
+  --shadow-3: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px hsl(var(--shadow-color) / 0.6);
   --shadow-card: var(--shadow-1);
   --shadow-dropdown: var(--shadow-2);
   --shadow-overlay: var(--shadow-3);
@@ -332,12 +336,15 @@
    * action. White text passes on every stop (5.37, 5.39 and 5.18:1). */
   --cta: linear-gradient(90deg, #5b5bd6 0%, #6e56cf 55%, #8e4ec6 100%);
   --cta-hover: linear-gradient(90deg, #5151cd 0%, #654dc4 55%, #8347b9 100%);
-  /* Radius by role. The numeric --radius-sm..xl scale is unchanged, so no
-   * existing surface re-rounds; new surfaces pick the role they play. */
+  /* Radius by role, the tokens.css ramp: tag 4, control 8, card 12,
+   * container 16, pill. Chip, field and panel are the older names. */
   --radius-tag: 4px;
-  --radius-chip: 8px;
-  --radius-field: 12px;
-  --radius-panel: 16px;
+  --radius-control: 8px;
+  --radius-card: 12px;
+  --radius-container: 16px;
+  --radius-chip: var(--radius-control);
+  --radius-field: var(--radius-card);
+  --radius-panel: var(--radius-container);
   --radius-cover: 20px;
   --radius-sheet: 24px;
   --radius-pill: 999px;
@@ -383,10 +390,11 @@
   --text-figure--line-height: 2.75rem;
   --text-figure--letter-spacing: -0.02em;
   --text-figure--font-weight: 600;
+  --shadow-color: 220 40% 8%;
   /* Elevation. In light, shadow separates a card from the white page. */
-  --shadow-1: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
-  --shadow-2: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
-  --shadow-3: 0 8px 28px rgb(33 31 38 / 0.28);
+  --shadow-1: 0 0 0 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px hsl(var(--shadow-color) / 0.05), 0 4px 8px hsl(var(--shadow-color) / 0.08);
+  --shadow-2: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
+  --shadow-3: 0 8px 28px hsl(var(--shadow-color) / 0.28);
   --shadow-card: var(--shadow-1);
   --shadow-dropdown: var(--shadow-2);
   --shadow-overlay: var(--shadow-3);

package/src/styles/theme-scopes.ts

@@ -80,6 +80,14 @@ export const scopes: Array<{ name: string; sources: string[] }> = [
     sources: [named('[data-theme="website"]:where(:not(.dark))'), LIGHT, DARK],
   },
   { name: "website dark", sources: [named('.dark[data-theme="website"]'), DARK] },
+  // Every data-accent scope on each canonical mode: its role rule, then the spine.
+  ...[...themes.matchAll(/^\[data-accent="([a-z]+)"\],$/gm)].flatMap(([, hue]) => {
+    const rule = blockIn(themes, `[data-accent="${hue}"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme])`);
+    return [
+      { name: `accent ${hue} on dark`, sources: [rule, DARK] },
+      { name: `accent ${hue} on light`, sources: [rule, LIGHT, DARK] },
+    ];
+  }),
 ];
 
 export type Rgb = [number, number, number];

package/src/styles/theme.css

@@ -36,12 +36,10 @@
   --radius-xl: 12px;
   --radius-full: 999px;
 
-  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
+  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
+  --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45);
   --shadow-glow: none;
-  --shadow-overlay:
-    0 2px 6px hsl(var(--hsl-foreground) / 0.1),
-    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
+  --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.3), 0 16px 40px hsl(var(--shadow-color) / 0.5);
 }
 
 /* Inline variable-dependent utilities so their source is resolved on the

package/src/styles/tokens.css

@@ -310,6 +310,46 @@
   --surface-teal-bg: #18333b;
   --surface-teal-border: #207e73;
   --surface-teal-text: #0bd8b6;
+  --tone-violet-fill: 272 44.9% 50.2%;
+  --tone-violet-ring: 272 100% 80.8%;
+  --tone-violet-mark: #8e4ec6;
+  --tone-violet-line: #8e4ec6;
+  --tone-violet-ink: #d19dff;
+  --tone-orange-fill: 22 93.6% 36.9%;
+  --tone-orange-ring: 26 100% 67.1%;
+  --tone-orange-mark: #f76b15;
+  --tone-orange-line: #f76b15;
+  --tone-orange-ink: #ffa057;
+  --tone-teal-fill: 172 95% 23.7%;
+  --tone-teal-ring: 170 90.3% 44.5%;
+  --tone-teal-mark: #12a594;
+  --tone-teal-line: #12a594;
+  --tone-teal-ink: #0bd8b6;
+  --tone-blue-fill: 209 86.3% 40%;
+  --tone-blue-ring: 210 100% 72%;
+  --tone-blue-mark: #0090ff;
+  --tone-blue-line: #0090ff;
+  --tone-blue-ink: #70b8ff;
+  --tone-pink-fill: 322 65.1% 46.1%;
+  --tone-pink-ring: 327 100% 77.6%;
+  --tone-pink-mark: #d6409f;
+  --tone-pink-line: #d6409f;
+  --tone-pink-ink: #ff8dcc;
+  --tone-brown-fill: 24 29.6% 39%;
+  --tone-brown-ring: 28 49.7% 72%;
+  --tone-brown-mark: #ad7f58;
+  --tone-brown-line: #ad7f58;
+  --tone-brown-ink: #dbb594;
+  --tone-cyan-fill: 192 80.4% 30%;
+  --tone-cyan-ring: 190 75.5% 60%;
+  --tone-cyan-mark: #00a2c7;
+  --tone-cyan-line: #00a2c7;
+  --tone-cyan-ink: #4ccce6;
+  --tone-lime-fill: 84 44.2% 30.2%;
+  --tone-lime-ring: 80 69.9% 66.1%;
+  --tone-lime-mark: #bdee63;
+  --tone-lime-line: #bdee63;
+  --tone-lime-ink: #bde56c;
   /* tones:end */
   /* Run-mix ramp — the fills of a proportional status bar.
    *
@@ -374,23 +414,18 @@
   --code-comment: var(--syntax-comment);
   --code-error: var(--syntax-error);
 
-  /* Shadows — flat, no inner ring, no indigo glow */
-  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
+  /* Shadows — flat, no inner ring, no glow. Every shadow is one colour,
+     --shadow-color, as HSL channels so each sets its own alpha: black here, a
+     deep cool ink in light. A shadow never inverts into a light halo; dark
+     elevation is the plane step plus --edge-highlight. --shadow-overlay is the
+     lift above --shadow-dropdown, for a surface that covers the page (a
+     drawer, a modal, a floating dock): a tight contact layer plus a wide one. */
+  --shadow-color: 0 0% 0%;
+  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
+  --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45);
   --shadow-glow: none;
-  --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
-  /* The lift above --shadow-dropdown, for a surface that covers the page
-     rather than sitting beside it: a drawer, a modal, a floating dock.
-     Two layers — a tight contact shadow plus a wide ambient one.
-     Alone among the shadows this is derived from --hsl-foreground instead of
-     a fixed rgba, so it INVERTS with the theme. That is what makes it work in
-     dark: a black shadow on a dark canvas renders as nothing (see the ladder
-     note at the top of this file), while the foreground is near-white there,
-     so the same declaration reads as a soft halo. One definition therefore
-     serves both themes and the light block does not restate it. */
-  --shadow-overlay:
-    0 2px 6px hsl(var(--hsl-foreground) / 0.1),
-    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
+  --shadow-accent: var(--shadow-card);
+  --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.3), 0 16px 40px hsl(var(--shadow-color) / 0.5);
   /* Scrim and media ink. A scrim dims the page behind a modal or sheet, or
      darkens a photo under its caption. It is black in every theme: a dimming
      layer that inverted in dark mode would brighten the page it covers.
@@ -410,12 +445,18 @@
   --radius-pill: 999px;
   --radius-full: 999px;
   --radius-composer: 26px;    /* centered composer pill */
-  /* Radius by role. New surfaces pick the role they play; system.css repeats
-     these for pages that load it on its own ladders. */
+  /* Radius by role, one ramp: tag 4, control 8, card 12, container 16, and
+     --radius-pill for every chip and status pill. Chip, field and panel are
+     the older names of control, card and container. Cover and sheet are the
+     media and bottom-sheet radii. system.css repeats these for pages that load
+     it on its own ladders. */
   --radius-tag: 4px;
-  --radius-chip: 8px;
-  --radius-field: 12px;
-  --radius-panel: 16px;
+  --radius-control: var(--radius-md);
+  --radius-card: var(--radius-xl);
+  --radius-container: 16px;
+  --radius-chip: var(--radius-control);
+  --radius-field: var(--radius-card);
+  --radius-panel: var(--radius-container);
   --radius-cover: 20px;
   --radius-sheet: 24px;
   --radius: 0.5rem;           /* 8px chrome default (was 10px) */
@@ -527,6 +568,11 @@
   --motion-dismiss: var(--duration-instant) var(--ease-exit);
   --motion-stream: var(--duration-stream) var(--ease-expo);
   --motion-arrive: var(--duration-arrive) var(--ease-expo);
+  /* The only loop period on a page. A running mark breathes on it with
+     `tangle-breathe` (opacity, never position or scale), so every live thing
+     shares one rhythm. Reduced motion keeps it: see the rule below. */
+  --duration-ambient: 2000ms;
+  --motion-ambient: var(--duration-ambient) ease-in-out;
 
   /* Elapsed interaction thresholds, not animation durations. See
    * docs/design-bible.md#interaction. Reduced motion leaves these unchanged. */
@@ -709,6 +755,46 @@
   --surface-teal-bg: #e0f8f3;
   --surface-teal-border: #a1ded2;
   --surface-teal-text: #017d6d;
+  --tone-violet-fill: 272 44.9% 50.2%;
+  --tone-violet-ring: 272 44.9% 50.2%;
+  --tone-violet-mark: #8e4ec6;
+  --tone-violet-line: #8e4ec6;
+  --tone-violet-ink: #753ea6;
+  --tone-orange-fill: 22 93.6% 36.9%;
+  --tone-orange-ring: 22 93.6% 36.9%;
+  --tone-orange-mark: #f76b15;
+  --tone-orange-line: #cc4e00;
+  --tone-orange-ink: #953d0e;
+  --tone-teal-fill: 172 95% 23.7%;
+  --tone-teal-ring: 172 95% 23.7%;
+  --tone-teal-mark: #12a594;
+  --tone-teal-line: #008573;
+  --tone-teal-ink: #066558;
+  --tone-blue-fill: 209 86.3% 40%;
+  --tone-blue-ring: 209 86.3% 40%;
+  --tone-blue-mark: #0090ff;
+  --tone-blue-line: #0588f0;
+  --tone-blue-ink: #0f59a3;
+  --tone-pink-fill: 322 65.1% 46.1%;
+  --tone-pink-ring: 322 65.1% 46.1%;
+  --tone-pink-mark: #d6409f;
+  --tone-pink-line: #d6409f;
+  --tone-pink-ink: #a02071;
+  --tone-brown-fill: 24 29.6% 39%;
+  --tone-brown-ring: 24 29.6% 39%;
+  --tone-brown-mark: #ad7f58;
+  --tone-brown-line: #ad7f58;
+  --tone-brown-ink: #725440;
+  --tone-cyan-fill: 192 80.4% 30%;
+  --tone-cyan-ring: 192 80.4% 30%;
+  --tone-cyan-mark: #00a2c7;
+  --tone-cyan-line: #107d98;
+  --tone-cyan-ink: #0f6277;
+  --tone-lime-fill: 84 44.2% 30.2%;
+  --tone-lime-ring: 84 44.2% 30.2%;
+  --tone-lime-mark: #bdee63;
+  --tone-lime-line: #5c7c2f;
+  --tone-lime-ink: #4b6126;
   /* tones:end */
   /* Run-mix ramp — the fills of a proportional status bar.
    *
@@ -737,11 +823,11 @@
   --glass-bg-strong: var(--depth-1);
   --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
 
-  /* Shadows — flat, no inner ring, no glow */
-  --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
-  --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
-  --shadow-glow: none;
-  --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
+  /* Shadows — the dark roles in the light shadow colour, at light alphas. */
+  --shadow-color: 220 40% 8%;
+  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.06);
+  --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.1);
+  --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.1), 0 16px 40px hsl(var(--shadow-color) / 0.16);
 }
 
 
@@ -940,7 +1026,11 @@
 
 
 /* Motion is opt-in at the component, but its reduced-motion preference is
- * shared. Re-declare composites at the same boundary as their durations. */
+ * shared. Re-declare composites at the same boundary as their durations.
+ * --duration-ambient is not zeroed: the essential running mark
+ * (data-motion="essential") keeps its opacity-only breathe, because it is the
+ * only "still working" signal and it never moves anything. */
+@keyframes tangle-breathe { 50% { opacity: 0.45; } }
 @media (prefers-reduced-motion: reduce) {
   :root,
   .dark,

package/src/styles/tokens.test.ts

@@ -5,10 +5,12 @@ import {
   blockIn,
   compositeOver,
   contrastRatio,
+  declIn,
   hexIn,
   hexRelativeLuminanceIn,
   hslIn,
   hslToRgb,
+  resolveIn,
 } from "./css-test-utils";
 
 /**
@@ -608,3 +610,75 @@ describe("each colour is declared once: a role, then aliases", () => {
     expect(literalsOutsideTones(spine).size).toBeLessThanOrEqual(ceiling);
   });
 });
+
+describe("shadow, radius and loop period are one role each", () => {
+  // The run-UI critique of 2026-10-27 (fixes 9, 10 and 22) found a white shadow
+  // haze in dark mode, six radii and seven loop periods. Each is now one role
+  // that every other name aliases, so a surface cannot drift to a second value.
+  it.each([
+    ["dark", DARK, "0 0% 0%"],
+    ["light", LIGHT, "220 40% 8%"],
+  ] as const)("%s: every shadow is drawn in --shadow-color and never inverts", (_, spine, colour) => {
+    expect(declIn(spine, "shadow-color")).toBe(colour);
+    for (const token of ["shadow-card", "shadow-dropdown", "shadow-overlay"]) {
+      const value = declIn(spine, token);
+      expect(value, `--${token}`).toMatch(/^[^,]*hsl\(var\(--shadow-color\) \/ [\d.]+\)/);
+      expect(value, `--${token} names a colour of its own`).not.toMatch(/rgba?\(|#[0-9a-f]{3,8}\b|--hsl-foreground/i);
+    }
+  });
+
+  it("draws radii from one ramp, and the older role names alias it", () => {
+    const ramp = { tag: "4px", control: "8px", card: "12px", container: "16px", pill: "999px" };
+    for (const [role, px] of Object.entries(ramp)) expect(resolveIn(DARK, `radius-${role}`), role).toBe(px);
+    for (const [older, role] of [["chip", "control"], ["field", "card"], ["panel", "container"]]) {
+      expect(declIn(DARK, `radius-${older}`)).toBe(`var(--radius-${role})`);
+    }
+  });
+
+  it("has one loop period, which reduced motion keeps for an opacity-only breathe", () => {
+    expect(declIn(DARK, "duration-ambient")).toBe("2000ms");
+    expect(declIn(DARK, "motion-ambient")).toBe("var(--duration-ambient) ease-in-out");
+    const reduced = tokens.match(/@media \(prefers-reduced-motion: reduce\) \{([\s\S]*?)\n\}/)![1];
+    expect(reduced).toContain("--duration-fast: 0ms");
+    expect(reduced, "the essential breathe keeps its period").not.toContain("--duration-ambient");
+    const breathe = tokens.match(/@keyframes tangle-breathe \{([\s\S]*?)\}\s*\}/)?.[1];
+    expect(breathe, "the shared breathe keyframe").toMatch(/opacity/);
+    expect(breathe, "a loop never moves or scales").not.toMatch(/transform|translate|scale|rotate/);
+  });
+});
+
+describe("data-accent scopes retint the accent and nothing else", () => {
+  // Palette plan item 6: a product sets data-accent="<category>" on <html> or a
+  // theme boundary. Each hue's roles are generated (gen-ladders.mjs) into the
+  // tone regions, which the ratchet above already counts as generated tones.
+  const themes = readFileSync(path.resolve(import.meta.dirname, "named-themes.css"), "utf8");
+  const region = themes.match(/\/\* accent-scopes:begin[\s\S]*?accent-scopes:end \*\//)?.[0] ?? "";
+  const hues = [...region.matchAll(/^\[data-accent="([a-z]+)"\],$/gm)].map((m) => m[1]);
+
+  it("scopes every categorical hue", () => {
+    expect(hues).toEqual(["violet", "orange", "teal", "blue", "pink", "brown", "cyan", "lime"]);
+  });
+
+  for (const [theme, spine] of [
+    ["dark", DARK],
+    ["light", LIGHT],
+  ] as const) {
+    it.each(hues)(`${theme} %s: the accent ink clears 4.5:1 on the page and the card`, (hue) => {
+      for (const plane of ["md3-surface", "md3-surface-container"]) {
+        expect(contrastRatio(hexIn(spine, `tone-${hue}-ink`), hexIn(spine, plane)), plane).toBeGreaterThanOrEqual(4.5);
+      }
+    });
+  }
+
+  it("maps the five roles to the hue and re-declares no plane, body ink or status", () => {
+    for (const hue of hues) {
+      const rule = blockIn(region, `[data-accent="${hue}"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme])`);
+      expect([...rule.matchAll(/--([a-z-]+): var\(--tone-([a-z]+)-([a-z]+)\);/g)].map((m) => `${m[1]}=${m[2]}-${m[3]}`)).toEqual([
+        `hsl-primary=${hue}-fill`, `hsl-ring=${hue}-ring`, `brand-primary=${hue}-mark`, `brand-cool=${hue}-line`, `accent-text=${hue}-ink`,
+      ]);
+    }
+    const declared = [...region.matchAll(/--([a-z0-9-]+):/g)].map((m) => m[1]);
+    const untouchable = /^(hsl-(background|card|popover|secondary|muted|accent|border|input|foreground|muted-foreground|success|warning|destructive|info)|text-|md3-(surface($|-(container|dim|bright|variant))|on-surface|outline)|depth-|bg-(root|card|elevated|dark|section|input)|surface-|status-(running|stopped|warm|cold|error|deleted))/;
+    expect(declared.filter((t) => untouchable.test(t))).toEqual([]);
+  });
+});