@tangle-network/sandbox-ui 1.1.8 → 2.0.0

package/dist/tokens.css

@@ -1,29 +1,5 @@
-/* Tangle design tokens — the single palette every Tangle surface renders from.
- *
- * The surface ladder is near-neutral grey with a faint indigo cast; the indigo
- * accent is trim, never field. Each plane steps at least 4.4 OKLCH L off the
- * plane it sits on (surface-ladder.test.ts), so a card, a card in a card and a
- * field each read by their own fill. Dark adds a 1.5:1 hairline and a top edge
- * highlight, because a black shadow on a dark canvas renders as nothing; light
- * is white paper on a grey canvas, separated by shadow.
- *
- * Each colour is declared ONCE, as a role (a plane, an ink tier, one of four
- * indigos, one ink per status hue), and every other name of that colour is an
- * alias of it, so a retune or a named theme moves one value and every family
- * follows: hsl-*, md3-*, depth-*, bg-*, status-*, surface-*, code-* and brand-*.
- *
- * Apps consume this spine as-is. If a product needs its own accent identity,
- * add a named theme in named-themes.css (`data-theme="<name>"`) — do NOT re-declare
- * these tokens in the app, or its surfaces silently stop tracking the brand. */
-
-/* Dark is the default theme (`:root`/`[data-sandbox-ui]`). It also responds to
- * the standard `[data-theme="dark"]` / `.dark` switch so any consumer can pin or
- * toggle a theme without inventing an ad-hoc `data-sandbox-theme` name. */
-/* Seed a complete baseline on every supported boundary BEFORE mode overrides.
- * Inherited var() aliases are already substituted at their parent; declaring
- * them here lets a nested light/dark/named scope resolve its own palette.
- * Light scopes are deliberately included in this baseline, then override it
- * below. Named themes only author their product-specific differences. */
+/* palette:begin — generated by scripts/gen-ladders.mjs; edit palette.mjs or palette-template.css. */
+/* Palette layout only. Colour inputs live in palette.mjs; gen-ladders.mjs writes the public stylesheets. */
 :root,
 [data-sandbox-ui],
 [data-sandbox-theme="vault"],
@@ -45,515 +21,295 @@
 .light,
 .dark {
   color-scheme: dark;
-
-  /* ── Planes ─────────────────────────────────────────────────────────────
-   * One ladder, authored once as HSL channels because the shadcn layer reads
-   * hsl(var(--hsl-*)); every hex plane below is derived from it, so a step
-   * moves in one place. OKLCH L x100: page 15.0, card 21.7, raised 26.6,
-   * raised-2 and overlay 31.6, each at least 4.4 over the plane it sits on.
-   * The page is lifted off black so near-white ink keeps room for its tiers. */
-  --hsl-background: 240 33% 6%;      /* L0 page #0a0a14 */
-  --hsl-input: 244 29% 9%;           /* L1 chrome (the sidebar) and the legacy field fill #11101e */
-  --hsl-card: 244 23% 12%;           /* L2 card #191826 */
-  --hsl-secondary: 249 24% 17.5%;    /* L3 raised: a card in a card, and the hover well #252237 */
-  --hsl-popover: 247 21% 23%;        /* L4 raised-2 and overlay #312e47: a popover carries body text, so it sits on the top plane the ink ramp reaches */
-  --hsl-muted: var(--hsl-secondary);
-  --hsl-accent: var(--hsl-secondary); /* neutral hover; indigo lives in --accent-surface-strong */
-  /* The floor of the ladder: the recessed page and the terminal well share it
-   * because dark has no plane below L0 to give them. They stay two tokens
-   * because they diverge in light, where the well is paper and the page grey. */
-  --md3-surface-dim: #040408;        /* 4.1 L under the L0 panel: the inset workspace surface needs >= 3 */
-  --md3-surface-container-lowest: var(--md3-surface-dim);
-  --md3-surface-bright: #232238;
-  --md3-surface: hsl(var(--hsl-background));
-  --md3-surface-container-low: hsl(var(--hsl-input));
-  --md3-surface-container: hsl(var(--hsl-card));
-  --md3-surface-container-high: hsl(var(--hsl-secondary));
-  --md3-surface-container-highest: hsl(var(--hsl-popover));
-  --md3-surface-variant: var(--md3-surface-container-high);
-  --depth-1: var(--md3-surface);
-  --depth-2: var(--md3-surface-container);
-  --depth-3: var(--md3-surface-container-high);
-  --depth-4: var(--md3-surface-container-highest);
-  --bg-root: var(--md3-surface);
-  --bg-dark: var(--depth-1);
-  --bg-card: var(--depth-2);
-  --bg-elevated: var(--depth-4);
-  --bg-section: var(--depth-1);
-  --bg-input: hsl(var(--hsl-input));
-  /* Sidebar: L1 chrome, one step BELOW the canvas, so the nav reads as what the
-   * content sits in front of rather than as another card. */
-  --sidebar-background: var(--hsl-input);
-  --sidebar-accent: var(--hsl-secondary);
-  --md3-inverse-surface: #fdfdfd;
-  --md3-inverse-on-surface: #000000;
-
-  /* ── Ink ────────────────────────────────────────────────────────────────
-   * Neutral on purpose: colour in the ink would compete with the one accent.
-   * Near-white on the canvas is the glare end of the range, so the tiers sit
-   * below it: 10.6 / 7.8 / 6.4 / 5.4 against the L2 card, solved against the
-   * WHOLE ladder so the faintest tier still clears the 4.5:1 body floor on the
-   * overlay plane. tokens.test.ts asserts every tier on every plane. */
-  --hsl-foreground: 0 0% 90.1961%;     /* #e6e6e6 */
-  --hsl-muted-foreground: 240 5% 68%;  /* #a9a9b1: the /70 and /60 caption derivatives still clear the large-text floor on the card */
-  --text-primary: hsl(var(--hsl-foreground));
-  --text-secondary: #c7c7c7;
-  --text-muted: #b5b5b5;
-  --text-dim: #a5a5a5;
-  --hsl-card-foreground: var(--hsl-foreground);
-  --hsl-popover-foreground: var(--hsl-foreground);
-  --hsl-secondary-foreground: var(--hsl-foreground);
-  --hsl-accent-foreground: var(--hsl-foreground);
-  --sidebar-foreground: var(--hsl-foreground);
-  --sidebar-accent-foreground: var(--hsl-foreground);
-  --md3-on-surface: var(--text-primary);
-  --md3-on-surface-variant: var(--text-muted);
-  --md3-outline: #8e8e8e;
-
-  /* ── Hairline ───────────────────────────────────────────────────────────
-   * ONE role for every divider, card edge and table rule, so lines never
-   * disagree. 1.5:1 against the card and 1.3:1 on the raised plane: quiet by
-   * design, it states where a plane ends without boxing every panel.
-   * --border-subtle and --border-default are its older names. */
-  --hsl-border: 244 16% 25%;           /* #37364a */
-  --md3-outline-variant: hsl(var(--hsl-border));
-  --sidebar-border: var(--hsl-border);
-  --border-subtle: hsl(var(--hsl-border));
-  --border-default: hsl(var(--hsl-border));
-  --border-hover: rgba(255, 255, 255, 0.28);
-
-  /* ── Accent: four indigos, each with one job ────────────────────────────
-   *   fill  --hsl-primary    carries white at 7.4:1: buttons, the CTA, the selected row at 30%
-   *   mark  --brand-primary  the brand indigo of the logo and marketing fills; never under text
-   *   line  --brand-cool     edges, chart accents, the focus ring family
-   *   ink   --accent-text    the bright indigo as TEXT and icon only: 6.7:1 on the card
-   * Every other indigo name is one of these four, so a named theme that retints
-   * the accent retints all of them. The ring is brighter than the fill on
-   * purpose: it is non-text and must clear 3:1 on the canvas AND the card,
-   * while the fill is tuned to carry white. */
-  --hsl-primary: 246 54% 51%;          /* fill #4c3fc6 */
-  --hsl-primary-foreground: 0 0% 100%;
-  --hsl-ring: 233 100% 87%;
-  --brand-primary: #7C6CF6;
-  --brand-cool: #818CF8;
-  --accent-text: #A5B4FC;
-  --brand-purple: #C7D2FE;             /* the ink, softened: gradient text and ink on the deep field */
-  --brand-strong: #2E2A5E;             /* the deep field the softened ink sits on */
-  --brand-strong-text: #ffffff;
-  --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
-  --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
-  --brand-glow: var(--accent-text);
-  --brand-vibrant: var(--brand-primary);
-  --btn-primary-bg: hsl(var(--hsl-primary));
-  --btn-primary-hover: #5a50d6;
-  --btn-primary-text: #ffffff;
-  --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: var(--brand-primary);
-  --md3-primary-container: var(--btn-primary-bg);
-  --md3-on-primary: #ffffff;
-  --md3-on-primary-container: var(--brand-purple);
-  --md3-primary-fixed: var(--accent-text);
-  --md3-primary-fixed-dim: var(--brand-cool);
-  --md3-secondary: var(--brand-purple);
-  --md3-secondary-dim: var(--accent-text);
-  --md3-secondary-container: var(--brand-strong);
-  --md3-on-secondary: var(--brand-purple);
-  --md3-on-secondary-container: var(--brand-purple);
-  --md3-inverse-primary: var(--btn-primary-bg);
-  --md3-surface-tint: var(--accent-text);
-  /* Accent wells: soft is the hover neutral, strong the active or selected row. */
-  --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
-  --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
-  --bg-hover: var(--accent-surface-soft);
-  --bg-selection: color-mix(in srgb, var(--brand-primary) 28%, transparent);
-  --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
-  --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
-  /* The indigo spark, kept ONLY for the logo mark and the send button. */
-  --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--accent-text));
-  --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text));
-  --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--brand-primary));
-
-  /* ── Status: one ink, one wash, one border per hue ──────────────────────
-   * The ink is pastel on purpose. A saturated fill vibrates on a 6% canvas,
-   * and the ink already clears AA on every plane, so it is also the fill: a
-   * status fill carries dark text, as the destructive one always has. The
-   * shadcn channels are the source; the surface, status, md3, code and brand
-   * names of each hue alias them. */
-  --hsl-success: 154.7 60.2% 60.6%;        /* #5ed7a4 */
-  --hsl-warning: 41.5 88.2% 63.3%;         /* #f4c14f */
-  --hsl-destructive: 2.8 100% 83.1%;       /* #ffada9 */
-  --hsl-destructive-foreground: 0 60% 10%;
-  --hsl-info: 199.7 100% 70.2%;            /* #67cdff */
-  --surface-success-text: hsl(var(--hsl-success));
-  --surface-success-bg: #2f5146;
-  --surface-success-border: #3c7760;
-  --surface-warning-text: hsl(var(--hsl-warning));
-  --surface-warning-bg: #4b4232;
-  --surface-warning-border: #7a6236;
-  --surface-danger-text: hsl(var(--hsl-destructive));
-  --surface-danger-bg: #5a3b40;
-  --surface-danger-border: #7d4d53;
-  --surface-info-text: hsl(var(--hsl-info));
-  --surface-info-bg: #2d4e67;
-  --surface-info-border: #3d7292;
-  --status-running: var(--surface-success-text);
-  --status-creating: var(--accent-text);
-  --status-stopped: var(--surface-warning-text);
-  --status-warm: var(--surface-orange-text);
-  --status-cold: var(--surface-info-text);
-  --status-error: var(--surface-danger-text);
-  --status-deleted: var(--text-dim);
-  --brand-emerald: var(--surface-success-text);
-  --md3-tertiary: var(--surface-success-text);
-  --md3-tertiary-container: var(--surface-success-bg);
-  --md3-error: var(--surface-danger-text);
-  --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
-  --md3-error-container: var(--surface-danger-bg);
-  --md3-on-error: hsl(var(--hsl-destructive-foreground));
-  --md3-on-error-container: var(--surface-danger-text);
-  /* ── shadcn aliases: the names @tangle-network/ui and Tailwind read ─────
-   * Declared once; they re-resolve per theme through the --hsl-* spine. --input
-   * is the input BORDER and the Switch off-track, a mid-tone that must stay
-   * visible against a surface, so it is NOT the field fill (--bg-input). */
-  --background: var(--hsl-background);
-  --foreground: var(--hsl-foreground);
-  --card: var(--hsl-card);
-  --card-foreground: var(--hsl-card-foreground);
-  --popover: var(--hsl-popover);
-  --popover-foreground: var(--hsl-popover-foreground);
-  --primary: var(--hsl-primary);
-  --primary-foreground: var(--hsl-primary-foreground);
-  --secondary: var(--hsl-secondary);
-  --secondary-foreground: var(--hsl-secondary-foreground);
-  --muted: var(--hsl-muted);
-  --muted-foreground: var(--hsl-muted-foreground);
-  --accent: var(--hsl-accent);
-  --accent-foreground: var(--hsl-accent-foreground);
-  --destructive: var(--hsl-destructive);
-  --destructive-foreground: var(--hsl-destructive-foreground);
-  --border: var(--hsl-border);
-  --input: var(--hsl-muted-foreground);
-  --ring: var(--hsl-ring);
-  --success: var(--hsl-success);
-  --warning: var(--hsl-warning);
-  --error: var(--hsl-destructive);
-  --info: var(--hsl-info);
-
+  --hsl-background: 246.6667 31.0345% 5.6863%; /* #0b0a13 */
+  --hsl-input: 245 26.087% 9.0196%; /* #12111d */
+  --hsl-card: 244.2857 22.5806% 12.1569%; /* #191826 */
+  --hsl-secondary: 243.3333 20.4545% 17.2549%; /* #242335 */
+  --hsl-popover: 242.7273 18.9655% 22.7451%; /* #302f45 */
+  --hsl-muted: var(--hsl-secondary); --hsl-accent: var(--hsl-secondary);
+  --md3-surface-dim: hsl(240 33.3333% 2.3529%);
+  --md3-surface-container-lowest: var(--md3-surface-dim); --md3-surface-bright: hsl(var(--hsl-popover));
+  --md3-surface: hsl(var(--hsl-background)); --md3-surface-container-low: hsl(var(--hsl-input));
+  --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
+  --md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high);
+  --depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container);
+  --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest);
+  --bg-root: var(--depth-1); --bg-dark: var(--depth-1);
+  --bg-card: var(--depth-2); --bg-elevated: var(--depth-4);
+  --bg-section: var(--depth-1); --bg-input: hsl(var(--hsl-input));
+  --sidebar-background: var(--hsl-input); --sidebar-accent: var(--hsl-secondary);
+  --md3-inverse-surface: hsl(0 0% 100%); --md3-inverse-on-surface: hsl(0 0% 0%);
+  --hsl-foreground: 0 0% 84.3137%; /* #d7d7d7 */
+  --hsl-muted-foreground: 0 0% 67.0588%; /* #ababab */
+  --text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 74.1176%);
+  --text-muted: hsl(0 0% 67.0588%); --text-dim: hsl(0 0% 60.3922%);
+  --hsl-card-foreground: var(--hsl-foreground); --hsl-popover-foreground: var(--hsl-foreground);
+  --hsl-secondary-foreground: var(--hsl-foreground); --hsl-accent-foreground: var(--hsl-foreground);
+  --sidebar-foreground: var(--hsl-foreground); --sidebar-accent-foreground: var(--hsl-foreground);
+  --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
+  --md3-outline: hsl(var(--hsl-muted-foreground));
+  --hsl-border: 245 18.4615% 25.4902%; /* #37354d */
+  --md3-outline-variant: hsl(var(--hsl-border)); --sidebar-border: var(--hsl-border);
+  --border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
+  --border-hover: rgb(215 215 215 / 0.28);
+  --hsl-primary: 245.9504 54.2601% 56.2745%; /* #5f53cc */
+  --hsl-primary-foreground: 0 0% 100%; /* #ffffff */ --hsl-ring: 245.5556 93.1034% 88.6275%; /* #ccc7fd */
+  --brand-primary: hsl(245.5102 65.3333% 70.5882%); --brand-cool: hsl(246.0465 85.4305% 70.3922%);
+  --accent-text: hsl(245.5556 93.1034% 88.6275%); --brand-purple: hsl(245.1429 94.5946% 92.7451%);
+  --brand-strong: hsl(246 41.6667% 28.2353%);
+  --brand-strong-text: hsl(0 0% 100%); --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
+  --brand-strong-text-dim: rgba(255, 255, 255, 0.5); --brand-glow: var(--accent-text);
+  --brand-vibrant: var(--brand-primary); --btn-primary-bg: hsl(var(--hsl-primary));
+  --btn-primary-hover: hsl(246.055 54.2289% 60.5882%); --btn-primary-text: hsl(0 0% 100%);
+  --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: var(--btn-primary-bg); --md3-primary-container: var(--btn-primary-bg);
+  --md3-on-primary: hsl(0 0% 100%); --md3-on-primary-container: var(--brand-purple);
+  --md3-primary-fixed: var(--accent-text); --md3-primary-fixed-dim: var(--brand-cool);
+  --md3-secondary: var(--brand-purple); --md3-secondary-dim: var(--accent-text);
+  --md3-secondary-container: var(--brand-strong); --md3-on-secondary: var(--brand-purple);
+  --md3-on-secondary-container: var(--brand-purple); --md3-inverse-primary: var(--btn-primary-bg);
+  --md3-surface-tint: var(--accent-text); --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
+  --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent); --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
+  --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent); --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
+  --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent); --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
+  --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text)); --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
+  --hsl-success: 155.1429 64.8148% 78.8235%; /* #a6eccf */
+  --hsl-warning: 38.5714 65.1163% 83.1373%; /* #f0dcb8 */
+  --hsl-destructive: 0 74.4681% 90.7843%; /* #f9d6d6 */
+  --hsl-destructive-foreground: 0 0% 0%; /* #000000 */ --hsl-info: 201.7021 66.1972% 86.0784%; /* #c4e2f3 */
+  --surface-success-text: hsl(var(--hsl-success)); --surface-success-bg: #21342c;
+  --surface-success-border: #496b5d; --surface-warning-text: hsl(var(--hsl-warning));
+  --surface-warning-bg: #362f22; --surface-warning-border: #6e634f;
+  --surface-danger-text: hsl(var(--hsl-destructive)); --surface-danger-bg: #412a2a;
+  --surface-danger-border: #785e5e; --surface-info-text: hsl(var(--hsl-info));
+  --surface-info-bg: #243239; --surface-info-border: #546771;
+  --status-running: var(--surface-success-text); --status-creating: var(--accent-text);
+  --status-stopped: var(--surface-warning-text); --status-warm: var(--surface-orange-text);
+  --status-cold: var(--surface-info-text); --status-error: var(--surface-danger-text);
+  --status-deleted: var(--text-dim); --brand-emerald: var(--surface-success-text);
+  --md3-tertiary: var(--surface-success-text); --md3-tertiary-container: var(--surface-success-bg);
+  --md3-error: var(--surface-danger-text); --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
+  --md3-error-container: var(--surface-danger-bg); --md3-on-error: hsl(var(--hsl-destructive-foreground));
+  --md3-on-error-container: var(--surface-danger-text); --background: var(--hsl-background);
+  --foreground: var(--hsl-foreground); --card: var(--hsl-card);
+  --card-foreground: var(--hsl-card-foreground); --popover: var(--hsl-popover);
+  --popover-foreground: var(--hsl-popover-foreground); --primary: var(--hsl-primary);
+  --primary-foreground: var(--hsl-primary-foreground); --secondary: var(--hsl-secondary);
+  --secondary-foreground: var(--hsl-secondary-foreground); --muted: var(--hsl-muted);
+  --muted-foreground: var(--hsl-muted-foreground); --accent: var(--hsl-accent);
+  --accent-foreground: var(--hsl-accent-foreground); --destructive: var(--hsl-destructive);
+  --destructive-foreground: var(--hsl-destructive-foreground); --border: var(--hsl-border);
+  --input: var(--hsl-muted-foreground); --ring: var(--hsl-ring);
+  --success: var(--hsl-success); --warning: var(--hsl-warning);
+  --error: var(--hsl-destructive); --info: var(--hsl-info);
   /* tones:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
-  --tone-violet-bg: #392751;
-  --tone-violet-bg-hover: #432b60;
-  --tone-violet-bg-selected: #4c306c;
-  --tone-violet-border: #8457aa;
-  --tone-violet-border-selected: #d19dff;
-  --tone-violet-text: #ecd9fa;
-  --tone-violet-icon: #d19dff;
-  --tone-orange-bg: #432823;
-  --tone-orange-bg-hover: #512d22;
-  --tone-orange-bg-selected: #5e3221;
-  --tone-orange-border: #a35829;
-  --tone-orange-border-selected: #f76b15;
-  --tone-orange-text: #ffe0c2;
-  --tone-orange-icon: #f76b15;
-  --tone-teal-bg: #18333b;
-  --tone-teal-bg-hover: #173b42;
-  --tone-teal-bg-selected: #174448;
-  --tone-teal-border: #207e73;
-  --tone-teal-border-selected: #12a594;
-  --tone-teal-text: #adf0dd;
-  --tone-teal-icon: #12a594;
-  --tone-blue-bg: #143051;
-  --tone-blue-bg-hover: #123861;
-  --tone-blue-bg-selected: #113e6b;
-  --tone-blue-border: #2870bd;
-  --tone-blue-border-selected: #0090ff;
-  --tone-blue-text: #c2e6ff;
-  --tone-blue-icon: #0090ff;
-  --tone-pink-bg: #462243;
-  --tone-pink-bg-hover: #55254d;
-  --tone-pink-bg-selected: #612754;
-  --tone-pink-border: #a84885;
-  --tone-pink-border-selected: #de51a8;
-  --tone-pink-text: #fdd1ea;
-  --tone-pink-icon: #de51a8;
-  --tone-brown-bg: #372d30;
-  --tone-brown-bg-hover: #413434;
-  --tone-brown-bg-selected: #4a3a37;
-  --tone-brown-border: #7c5f46;
-  --tone-brown-border-selected: #ad7f58;
-  --tone-brown-text: #f2e1ca;
-  --tone-brown-icon: #ad7f58;
-  --tone-cyan-bg: #143245;
-  --tone-cyan-bg-hover: #133b4e;
-  --tone-cyan-bg-selected: #114358;
-  --tone-cyan-border: #11809c;
-  --tone-cyan-border-selected: #00a2c7;
-  --tone-cyan-text: #b6ecf7;
-  --tone-cyan-icon: #00a2c7;
-  --tone-lime-bg: #2b302d;
-  --tone-lime-bg-hover: #32382f;
-  --tone-lime-bg-selected: #384132;
-  --tone-lime-border: #577538;
-  --tone-lime-border-selected: #bdee63;
-  --tone-lime-text: #e3f7ba;
-  --tone-lime-icon: #bdee63;
-  --surface-violet-bg: #392751;
-  --surface-violet-border: #8457aa;
-  --surface-violet-text: #d19dff;
-  --surface-orange-bg: #432823;
-  --surface-orange-border: #a35829;
-  --surface-orange-text: #ffa057;
-  --surface-teal-bg: #18333b;
-  --surface-teal-border: #207e73;
-  --surface-teal-text: #0bd8b6;
+  --tone-violet-bg: hsl(270.8108 31.6239% 22.9412%);
+  --tone-violet-bg-hover: hsl(271.4286 31.3433% 26.2745%);
+  --tone-violet-bg-selected: hsl(271.9149 31.5436% 29.2157%);
+  --tone-violet-border: hsl(272.1739 27.49% 49.2157%);
+  --tone-violet-border-selected: hsl(272.4 79.3651% 75.2941%);
+  --tone-violet-text: hsl(272 81.0811% 85.4902%);
+  --tone-violet-icon: hsl(272.4 79.3651% 75.2941%);
+  --tone-violet-fill: 272.1081 80.0866% 54.7059%;
+  --tone-violet-ring: 272.5424 80.8219% 85.6863%;
+  --tone-violet-mark: hsl(272.4 79.3651% 75.2941%);
+  --tone-violet-line: hsl(272.4 79.3651% 75.2941%);
+  --tone-violet-ink: hsl(272.5424 80.8219% 85.6863%);
+  --tone-orange-bg: hsl(23.2258 32.6316% 18.6275%);
+  --tone-orange-bg-hover: hsl(21.6667 32.7273% 21.5686%);
+  --tone-orange-bg-selected: hsl(22.5 32.7869% 23.9216%);
+  --tone-orange-border: hsl(22.4176 43.5407% 40.9804%);
+  --tone-orange-border-selected: hsl(22.2517 79.8942% 62.9412%);
+  --tone-orange-text: hsl(22.5 80% 78.4314%);
+  --tone-orange-icon: hsl(22.2517 79.8942% 62.9412%);
+  --tone-orange-fill: 22 79.7872% 36.8627%;
+  --tone-orange-ring: 22.1429 80.7692% 79.6078%;
+  --tone-orange-mark: hsl(22.2517 79.8942% 62.9412%);
+  --tone-orange-line: hsl(22.2517 79.8942% 62.9412%);
+  --tone-orange-ink: hsl(22.1429 80.7692% 79.6078%);
+  --tone-teal-bg: hsl(170.7692 32.5% 15.6863%);
+  --tone-teal-bg-hover: hsl(172 32.6087% 18.0392%);
+  --tone-teal-bg-selected: hsl(172.5 31.3725% 20%);
+  --tone-teal-border: hsl(171.7895 66.4336% 28.0392%);
+  --tone-teal-border-selected: hsl(171.9512 79.6117% 40.3922%);
+  --tone-teal-text: hsl(171.9 80% 49.0196%);
+  --tone-teal-icon: hsl(171.9512 79.6117% 40.3922%);
+  --tone-teal-fill: 172.2772 79.5276% 24.902%;
+  --tone-teal-ring: 171.7647 80.315% 49.8039%;
+  --tone-teal-mark: hsl(171.9512 79.6117% 40.3922%);
+  --tone-teal-line: hsl(171.9512 79.6117% 40.3922%);
+  --tone-teal-ink: hsl(171.7647 80.315% 49.8039%);
+  --tone-blue-bg: hsl(208.125 32.6531% 19.2157%);
+  --tone-blue-bg-hover: hsl(208.3333 32.1429% 21.9608%);
+  --tone-blue-bg-selected: hsl(208.5 31.746% 24.7059%);
+  --tone-blue-border: hsl(209.3023 39.4495% 42.7451%);
+  --tone-blue-border-selected: hsl(209.1429 80.4598% 65.8824%);
+  --tone-blue-text: hsl(208.9157 80.5825% 79.8039%);
+  --tone-blue-icon: hsl(209.1429 80.4598% 65.8824%);
+  --tone-blue-fill: 209.0683 80.0995% 39.4118%;
+  --tone-blue-ring: 208.4211 79.1667% 81.1765%;
+  --tone-blue-mark: hsl(209.1429 80.4598% 65.8824%);
+  --tone-blue-line: hsl(209.1429 80.4598% 65.8824%);
+  --tone-blue-ink: hsl(208.4211 79.1667% 81.1765%);
+  --tone-pink-bg: hsl(322.9412 31.4815% 21.1765%);
+  --tone-pink-bg-hover: hsl(322.5 32.2581% 24.3137%);
+  --tone-pink-bg-selected: hsl(323.1818 31.8841% 27.0588%);
+  --tone-pink-border: hsl(322.7027 31.0924% 46.6667%);
+  --tone-pink-border-selected: hsl(322.4348 80.4196% 71.9608%);
+  --tone-pink-text: hsl(322.7273 80.4878% 83.9216%);
+  --tone-pink-icon: hsl(322.4348 80.4196% 71.9608%);
+  --tone-pink-fill: 322 80.3571% 43.9216%;
+  --tone-pink-ring: 322.7273 80.4878% 83.9216%;
+  --tone-pink-mark: hsl(322.4348 80.4196% 71.9608%);
+  --tone-pink-line: hsl(322.4348 80.4196% 71.9608%);
+  --tone-pink-ink: hsl(322.7273 80.4878% 83.9216%);
+  --tone-brown-bg: hsl(24 31.9149% 18.4314%);
+  --tone-brown-bg-hover: hsl(24.7059 31.4815% 21.1765%);
+  --tone-brown-bg-selected: hsl(24.6154 32.2314% 23.7255%);
+  --tone-brown-border: hsl(24.2553 22.2749% 41.3725%);
+  --tone-brown-border-selected: hsl(24 35.5191% 64.1176%);
+  --tone-brown-text: hsl(24.6154 35.1351% 78.2353%);
+  --tone-brown-icon: hsl(24 35.5191% 64.1176%);
+  --tone-brown-fill: 23.662 36.0406% 38.6275%;
+  --tone-brown-ring: 25 35.2941% 80%;
+  --tone-brown-mark: hsl(24 35.5191% 64.1176%);
+  --tone-brown-line: hsl(24 35.5191% 64.1176%);
+  --tone-brown-ink: hsl(25 35.2941% 80%);
+  --tone-cyan-bg: hsl(192.8571 32.5581% 16.8627%);
+  --tone-cyan-bg-hover: hsl(191.25 32.6531% 19.2157%);
+  --tone-cyan-bg-selected: hsl(191.6667 32.7273% 21.5686%);
+  --tone-cyan-border: hsl(192.3214 68.2927% 32.1569%);
+  --tone-cyan-border-selected: hsl(192.0619 80.1653% 47.451%);
+  --tone-cyan-text: hsl(191.7188 80% 68.6275%);
+  --tone-cyan-icon: hsl(192.0619 80.1653% 47.451%);
+  --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
+  --tone-cyan-ring: 191.8966 79.4521% 71.3725%;
+  --tone-cyan-mark: hsl(192.0619 80.1653% 47.451%);
+  --tone-cyan-line: hsl(192.0619 80.1653% 47.451%);
+  --tone-cyan-ink: hsl(191.8966 79.4521% 71.3725%);
+  --tone-lime-bg: hsl(82.5 30.7692% 15.2941%);
+  --tone-lime-bg-hover: hsl(84.8276 32.5843% 17.451%);
+  --tone-lime-bg-selected: hsl(84.375 32% 19.6078%);
+  --tone-lime-border: hsl(84 52.6316% 29.8039%);
+  --tone-lime-border-selected: hsl(84.2647 60.177% 44.3137%);
+  --tone-lime-text: hsl(83.6975 59.799% 60.9804%);
+  --tone-lime-icon: hsl(84.2647 60.177% 44.3137%);
+  --tone-lime-fill: 84.5783 59.7122% 27.2549%;
+  --tone-lime-ring: 84 60.4396% 64.3137%;
+  --tone-lime-mark: hsl(84.2647 60.177% 44.3137%);
+  --tone-lime-line: hsl(84.2647 60.177% 44.3137%);
+  --tone-lime-ink: hsl(84 60.4396% 64.3137%);
+  --surface-violet-bg: var(--tone-violet-bg);
+  --surface-violet-border: var(--tone-violet-border);
+  --surface-violet-text: var(--tone-violet-text);
+  --surface-orange-bg: var(--tone-orange-bg);
+  --surface-orange-border: var(--tone-orange-border);
+  --surface-orange-text: var(--tone-orange-text);
+  --surface-teal-bg: var(--tone-teal-bg);
+  --surface-teal-border: var(--tone-teal-border);
+  --surface-teal-text: var(--tone-teal-text);
   /* tones:end */
-  /* Run-mix ramp — the fills of a proportional status bar.
-   *
-   * Separate from the `--surface-*-text` tones because a 6px bar is read
-   * differently from a chip: it is told by hue alone, at a size too small to
-   * carry a glyph or a label, so its slices must ALSO separate from each other
-   * in greyscale. These five are spaced at least 1.18:1 apart in relative
-   * luminance — 1.30 in dark, 1.20 in light, where the ramp has less room
-   * before it runs into the paper — and each clears 3:1 against the track, so
-   * the mix stays countable with any form of colour blindness and in a
-   * monochrome screenshot. 1.18 is the floor the gate holds them to.
-   *
-   * Ranked by how much the reader needs to tell them apart: succeeded is
-   * brightest and cancelled quietest, so the two that matter — succeeded and
-   * failed — sit at opposite ends and can never be confused.
-   *
-   * Spacing them by OKLCH lightness does NOT work: that is perceptual, and the
-   * contrast ratio is computed from relative luminance, so an even perceptual
-   * ramp left every pair at 1.1:1. Solved in luminance space instead. */
-  --run-mix-succeeded: #76edb9;
-  --run-mix-waiting: #e9b642;
-  --run-mix-failed: #e1918e;
-  --run-mix-in-flight: #2d9bca;
-  --run-mix-cancelled: #767d90;
-
-  --surface-neutral-bg: var(--depth-3);
-  --surface-neutral-border: var(--border-subtle);
+  --run-mix-succeeded: hsl(154.9315 59.8361% 47.8431%); --run-mix-waiting: hsl(37.7483 60.1594% 49.2157%);
+  --run-mix-failed: hsl(0 60.4278% 63.3333%); --run-mix-in-flight: hsl(200.8889 60% 44.1176%);
+  --run-mix-cancelled: hsl(229.2857 11.7647% 46.6667%);
+  --surface-neutral-bg: var(--depth-3); --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
-
-  /* Legacy glass aliases — mapped to solid depth tokens */
-  --glass-bg: var(--depth-2);
-  --glass-bg-strong: var(--depth-3);
-  --glass-border: var(--border-subtle);
-  --glass-border-hover: var(--border-hover);
+  --glass-bg: var(--depth-2); --glass-bg-strong: var(--depth-3);
+  --glass-border: var(--border-subtle); --glass-border-hover: var(--border-hover);
   --glass-blur: 0px;
-
-  /* Mesh glows — off; depth comes from the ladder, not from glow */
-  --mesh-teal: transparent;
-  --mesh-violet: transparent;
+  --mesh-teal: transparent; --mesh-violet: transparent;
   --mesh-blue: transparent;
-
-  /* ── Code ───────────────────────────────────────────────────────────────
-   * The same inks as the status family and the accent, so a keyword, a
-   * string and a warning never carry three different purples or ambers.
-   * Keywords take the categorical violet, not the accent: a keyword is not a
-   * link. --code-* is the older name for the same roles. */
-  --code-header-bg: hsl(var(--hsl-background));
-  --syntax-foreground: var(--text-primary);
-  --syntax-variable: var(--text-secondary);
-  --syntax-comment: var(--text-dim);
-  --syntax-keyword: var(--tone-violet-icon);
-  --syntax-meta: var(--accent-text);
-  --syntax-function: var(--surface-info-text);
-  --syntax-string: var(--surface-success-text);
-  --syntax-number: var(--surface-warning-text);
-  --syntax-error: var(--surface-danger-text);
-  --code-keyword: var(--syntax-keyword);
-  --code-string: var(--syntax-string);
-  --code-function: var(--syntax-function);
-  --code-number: var(--syntax-number);
-  --code-success: var(--surface-success-text);
-  --code-comment: var(--syntax-comment);
+  --code-header-bg: hsl(var(--hsl-background)); --syntax-foreground: var(--text-primary);
+  --syntax-variable: var(--text-secondary); --syntax-comment: var(--text-dim);
+  --syntax-keyword: var(--tone-violet-text); --syntax-meta: var(--accent-text);
+  --syntax-function: var(--surface-info-text); --syntax-string: var(--surface-success-text);
+  --syntax-number: var(--surface-warning-text); --syntax-error: var(--surface-danger-text);
+  --code-keyword: var(--syntax-keyword); --code-string: var(--syntax-string);
+  --code-function: var(--syntax-function); --code-number: var(--syntax-number);
+  --code-success: var(--surface-success-text); --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);
-  --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);
-  /* 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.
-     --on-media is the ink for text set directly on a photo or a scrim. */
-  --scrim: rgb(0 0 0 / 0.4);
-  --scrim-strong: rgb(0 0 0 / 0.72);
-  --on-media: #ffffff;
-  --shadow-status-running: none;
-  --shadow-status-creating: none;
-  --shadow-status-error: none;
-
-  /* Radii */
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 10px;
-  --radius-xl: 12px;          /* chrome stays tight (was 16px) */
-  --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-tag: 4px;
-  --radius-chip: 8px;
-  --radius-field: 12px;
-  --radius-panel: 16px;
-  --radius-cover: 20px;
-  --radius-sheet: 24px;
-  --radius: 0.5rem;           /* 8px chrome default (was 10px) */
-
-  /* Density */
-  --control-height: 2.25rem;
-  /* Control scale: Button, IconButton sizes, Input, Textarea and SelectTrigger
-     share one height and text size per size, so a row of mixed controls aligns.
-     md is --control-height, the density knob a subtree may override. */
-  --control-height-sm: 2rem;      /* 32px */
-  --control-height-lg: 2.75rem;   /* 44px — touch target */
-  --control-text-sm: 0.75rem;     /* 12px */
-  --control-text-md: 0.875rem;    /* 14px */
-  --control-text-lg: 1rem;        /* 16px — fields never zoom on iOS */
-  /* Form text: labels name a field; help text describes or reports on it. */
-  --font-size-label: 0.875rem;    /* 14px */
-  --font-size-help: 0.75rem;      /* 12px */
-  --panel-padding: 1rem;
-  --content-max-width: 80rem;
-  /* Shell: every header row in the app shell (sidebar rail, main pane, side
-     panels, drawers, the assistant) is this tall, so their bottom dividers
-     share one y. Header content fills the row; it never sets the height.
-     An inset pane sits one gutter plus its 1px border below the shell top, so
-     its header is shorter by exactly that amount (see ShellHeader). */
-  --shell-header-height: 3.5rem;  /* 56px */
-  --shell-inset-gutter: 0.5rem;   /* 8px */
-  /* Transcript: the person's and the agent's messages share one family, size
-     and leading; they differ only by alignment and surface. */
-  --transcript-font-size: 1rem;   /* 16px: the chat reading size */
+  --shadow-color: 0 0% 0%; /* #000000 */ --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: 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; --shadow-status-running: none;
+  --shadow-status-creating: none; --shadow-status-error: none;
+  --radius-sm: 6px; --radius-md: 8px;
+  --radius-lg: 10px; --radius-xl: 12px;
+  --radius-pill: 999px; --radius-full: 999px;
+  --radius-composer: 26px;
+  --radius-tag: 4px; --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;
+  --control-height: 2.25rem; --control-height-sm: 2rem;
+  --control-height-lg: 2.75rem;
+  --control-text-sm: 0.75rem;
+  --control-text-md: 0.875rem;
+  --control-text-lg: 1rem;
+  --font-size-label: 0.875rem;
+  --font-size-help: 0.75rem;
+  --panel-padding: 1rem; --content-max-width: 80rem;
+  --shell-header-height: 3.5rem;
+  --shell-inset-gutter: 0.5rem;
+  --transcript-font-size: 1rem;
   --transcript-line-height: var(--line-height-base);
-
-  /* Typography scale. Each --font-size-<step> is Tailwind's text-<step>, so a
-     step name means one size everywhere ("sm" is 14px); 12px is the floor.
-     Components reference these instead of pixel values; an app may override. */
-  --font-size-xs: 0.75rem;        /* 12px — meta, timestamps, eyebrows */
-  --font-size-sm: 0.875rem;       /* 14px — UI text */
-  --font-size-base: 1rem;         /* 16px — reading text */
-  --font-size-lg: 1.125rem;       /* 18px — emphasized text */
-  --font-size-xl: 1.25rem;        /* 20px — section title (h2) */
-  /* Display tier — page titles, marketing section heads, and heroes.
-     Hero sizes are fluid (clamp) so they scale with the viewport without
-     per-breakpoint overrides; the dense-app sizes above stay fixed. */
-  --font-size-2xl: 1.5rem;        /* 24px — large section title */
-  --font-size-3xl: 1.875rem;      /* 30px — page title (h1) */
-  --font-size-4xl: 2.25rem;       /* 36px — compact marketing section head */
-  --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);    /* 32→48px — secondary hero */
-  --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem); /* 40→64px — primary hero */
-  --line-height-tight: 1.3;
-  --line-height-base: 1.6;        /* tighter body rhythm (was 1.75) */
-  --line-height-relaxed: 1.75;
-  --line-height-display: 1.05;    /* heroes — near-solid set */
-  --line-height-heading: 1.15;    /* page/section titles */
-  /* Letter-spacing — titles tighten, eyebrows/labels open up */
-  --tracking-tight: -0.02em;      /* display + page titles */
-  --tracking-snug: -0.01em;       /* section titles */
-  --tracking-wide: 0.08em;        /* uppercase eyebrows / stat labels */
-
-  /* Expressive roles are opt-in; operational type and controls keep their scale. */
-  --tracking-display: -0.03em;
-  --hero-gutter: 1.5rem;
-  --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
-  --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
-  --display-max-width: 56rem;
-  --reading-max-width: 42rem;
-  --hero-action-gap: 0.75rem;
-  --hero-content-gap: 1.5rem;
-  --display-control-height: 2.875rem;
-  --display-control-radius: 0.625rem;
-  --display-control-font-size: 0.9375rem;
-  --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%);
-  --hero-grid-pitch: 3.5rem;
-  --hero-atmosphere-opacity: 0.16;
-  --hero-knot-opacity: 0.07;
-  --duration-expressive-entrance: 300ms;
-  --duration-expressive-ambient: 14s;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
+  --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
+  --line-height-tight: 1.3; --line-height-base: 1.6;
+  --line-height-relaxed: 1.75; --line-height-display: 1.05;
+  --line-height-heading: 1.15;
+  --tracking-tight: -0.02em;
+  --tracking-snug: -0.01em;
+  --tracking-wide: 0.08em;
+  --tracking-display: -0.03em; --hero-gutter: 1.5rem;
+  --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem); --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
+  --display-max-width: 56rem; --reading-max-width: 42rem;
+  --hero-action-gap: 0.75rem; --hero-content-gap: 1.5rem;
+  --display-control-height: 2.875rem; --display-control-radius: 0.625rem;
+  --display-control-font-size: 0.9375rem; --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%); --hero-grid-pitch: 3.5rem;
+  --hero-atmosphere-opacity: 0.16; --hero-knot-opacity: 0.07;
+  --duration-expressive-entrance: 300ms; --duration-expressive-ambient: 14s;
   --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
-
-  /* Component spacing — override per-app for tighter/looser layouts */
-  --avatar-size: 2rem;            /* 32px — chat avatars */
-  --timeline-dot-size: 0.625rem;  /* 10px — timeline connector dots */
-  --indicator-dot-size: 0.25rem;  /* 4px — thinking indicator dots */
-  --code-padding-x: 0.75rem;
-  --code-padding-y: 0.625rem;
-  --code-font-size: 0.8125rem;
-  --code-line-height: 1.5;
-  --chat-message-px: 0.875rem;
-  --chat-message-py: 0.5rem;
-  --chat-input-py: 0.625rem;
-  --card-padding: 1.25rem;
-  --tool-card-px: 0.75rem;
-  --tool-card-py: 0.5rem;
+  --avatar-size: 2rem;
+  --timeline-dot-size: 0.625rem;
+  --indicator-dot-size: 0.25rem;
+  --code-padding-x: 0.75rem; --code-padding-y: 0.625rem;
+  --code-font-size: 0.8125rem; --code-line-height: 1.5;
+  --chat-message-px: 0.875rem; --chat-message-py: 0.5rem;
+  --chat-input-py: 0.625rem; --card-padding: 1.25rem;
+  --tool-card-px: 0.75rem; --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
-
-  /* Shared motion vocabulary, previously authored by the light-default Agent
-   * App consumer. These are tokens only, not automatic animation classes. */
-  --duration-instant: 90ms;
-  --duration-fast: 150ms;
-  --duration-base: 240ms;
-  --duration-slow: 360ms;
-  --duration-stream: 420ms;
-  --duration-arrive: 600ms;
-  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
-  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
-  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
-  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
-  --motion-control: var(--duration-fast) var(--ease-standard);
-  --motion-surface: var(--duration-base) var(--ease-entrance);
-  --motion-dismiss: var(--duration-instant) var(--ease-exit);
-  --motion-stream: var(--duration-stream) var(--ease-expo);
-  --motion-arrive: var(--duration-arrive) var(--ease-expo);
-
-  /* Elapsed interaction thresholds, not animation durations. See
-   * docs/design-bible.md#interaction. Reduced motion leaves these unchanged. */
-  --interaction-feedback-budget: 100ms;
-  --interaction-pending-delay: 200ms;
-  --interaction-long-work-delay: 1000ms;
-  --interaction-mutation-budget: 500ms;
-  --stagger-step: 50ms;
-  --stagger-index: 0;
-  --arrive-distance: 8px;
-  --stream-blur: 4px;
-
-  /* Transitions — retain the existing Brand timings. */
-  --transition-fast: 0.1s ease;
-  --transition-default: 0.16s ease;
+  --duration-instant: 90ms; --duration-fast: 150ms;
+  --duration-base: 240ms; --duration-slow: 360ms;
+  --duration-stream: 420ms; --duration-arrive: 600ms;
+  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-control: var(--duration-fast) var(--ease-standard); --motion-surface: var(--duration-base) var(--ease-entrance);
+  --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; --interaction-mutation-budget: 500ms;
+  --stagger-step: 50ms; --stagger-index: 0;
+  --arrive-distance: 8px; --stream-blur: 4px;
+  --transition-fast: 0.1s ease; --transition-default: 0.16s ease;
   --transition-medium: 0.24s ease;
-
-  /* Fonts — unified on Inter (dark + light) */
-  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
+  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-
-/* Light theme — reachable via the named `vault` theme or the standard
- * `[data-theme="light"]` / `.light` switch. Both blocks are single-attribute/
- * class selectors, and this one is later in source order, so when an element
- * carries both `data-sandbox-ui` (dark) and `data-theme="light"`, light wins. */
 [data-sandbox-theme="vault"]:where(:not(.dark)),
 [data-sandbox-theme="dawn"]:where(:not(.dark)),
 [data-theme="hospitality"]:where(:not(.dark)),
@@ -566,282 +322,181 @@
 [data-theme="agents-light"],
 .light {
   color-scheme: light;
-
-  /* ── Planes: white paper on a cool grey canvas ───────────────────────────
-   * The light ladder ALTERNATES, and that is deliberate: a raised plane is
-   * PAPER and a recessed one is a neutral WELL, so the card and the overlay
-   * are both white and separate by shadow and ring, not by fill. Forcing a
-   * strictly darkening ladder here is what produced the white-on-white
-   * flatness this palette replaced. Pinned in tokens.test.ts. */
-  --hsl-background: 223 23% 94%;     /* L0 canvas #eceef3, BELOW the wells */
-  --hsl-input: 225 29% 97%;          /* L1 chrome and field wells #f5f6fa */
-  --hsl-card: 0 0% 100%;             /* L2 card: paper */
-  --hsl-secondary: 228 25% 94.5%;    /* L3 raised: a card in a card #edeff4, 4.8 L under its paper */
-  --hsl-popover: var(--hsl-card);    /* L4 overlay: paper, lifted by shadow, never out-lightening a card */
-  --md3-surface-dim: #dcdee6;        /* the recessed page */
-  --md3-surface-container-lowest: hsl(var(--hsl-card)); /* insets read as paper */
-  --md3-surface-bright: #ffffff;
-  --sidebar-background: var(--hsl-card); /* paper, flat, with a hairline */
-  --md3-inverse-surface: #2e2e3e;
-  --md3-inverse-on-surface: #f0f1f4;
-
-  /* ── Ink: neutral grey, so purple stays reserved for interaction ─────────
-   * 13.7:1 on paper and 11.4:1 on the canvas, AAA with headroom. --text-dim is
-   * pinned from the CANVAS, the lighter plane that binds the faintest tier:
-   * 4.6:1 there and 5.6:1 on the card, asserted in tokens.test.ts. */
-  --hsl-foreground: 0 0% 17.6471%;       /* #2d2d2d */
-  --hsl-muted-foreground: 0 0% 29.8039%; /* #4c4c4c: 3.0:1 at /60 and 8.6:1 at full strength on paper */
-  --text-secondary: #3f3f3f;
-  --text-muted: #4c4c4c;
-  --text-dim: #686868;
-  --md3-outline: #787878;
-
-  /* ── Hairline: 1.7:1 on paper, 1.4:1 on the canvas ──────────────────────── */
-  --hsl-border: 244 16% 81%;           /* #c8c7d6 */
-  --border-hover: rgba(0, 0, 0, 0.24);
-
-  /* ── Accent ─────────────────────────────────────────────────────────────
-   * The fill is the same indigo as dark (it carries white at 7.4:1) and is
-   * also the ring: on paper it clears 3:1 as a line. The ink is the bright
-   * indigo at 6.1:1 on paper; the mark is the website's indigo. */
-  --hsl-ring: var(--hsl-primary);
-  --brand-primary: #6366F1;
-  --brand-purple: var(--brand-primary);
-  --accent-text: #3c32e9;
-  --md3-primary: var(--accent-text);
-  --md3-primary-dim: var(--btn-primary-bg);
-  --md3-on-primary-container: #ffffff;
-  --md3-primary-fixed: #E8E5FF;        /* the accent tint: a chip or a selected row on paper */
-  --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
-  --md3-secondary: var(--accent-text);
-  --md3-secondary-dim: var(--btn-primary-bg);
-  --md3-secondary-container: var(--md3-primary-fixed);
-  --md3-on-secondary: #ffffff;
-  --md3-on-secondary-container: var(--accent-text);
-  --md3-inverse-primary: #A5B4FC;
-  --md3-surface-tint: var(--brand-primary);
-  --accent-surface-soft: color-mix(in srgb, var(--btn-primary-bg) 5%, transparent);
-  --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
-  --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
-  --border-accent: color-mix(in srgb, var(--btn-primary-hover) 18%, transparent);
-  --border-accent-hover: color-mix(in srgb, var(--btn-primary-hover) 35%, transparent);
-  --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
-  --tangle-gradient-text: var(--tangle-gradient);
-  --accent-gradient-strong: var(--tangle-gradient);
-
-  /* ── Status: the deep inks carry white, so each is its own fill too ─────── */
-  --hsl-success: 162.9 93.5% 24.3%;        /* #047857 */
-  --hsl-warning: 25.9 90% 35.3%;           /* #ab4f09 */
-  --hsl-destructive: 0 73.7% 41.8%;        /* #b91c1c */
-  --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-info: 201.3 96.3% 32.2%;           /* #0369a1 */
-  --surface-success-bg: #ecfdf5;
-  --surface-success-border: #a7f3d0;
-  --surface-warning-bg: #fffbeb;
-  --surface-warning-border: #fde68a;
-  --surface-danger-bg: #fff1f2;
-  --surface-danger-border: #fecdd3;
-  --surface-info-bg: #f0f9ff;
-  --surface-info-border: #bae6fd;
+  --hsl-background: 225 26.6667% 94.1176%; /* #eceef4 */
+  --hsl-input: 231.4286 46.6667% 97.0588%; /* #f4f5fb */
+  --hsl-card: 0 0% 100%; /* #ffffff */
+  --hsl-secondary: 225 28.5714% 94.5098%; /* #edeff5 */
+  --hsl-popover: 0 0% 100%; /* #ffffff */
+  --md3-surface-dim: hsl(231.4286 11.4754% 88.0392%);
+  --md3-surface-container-lowest: hsl(var(--hsl-card));
+  --md3-surface-bright: hsl(var(--hsl-popover)); --sidebar-background: var(--hsl-card);
+  --md3-inverse-surface: hsl(0 0% 18.0392%); --md3-inverse-on-surface: hsl(0 0% 100%);
+  --hsl-foreground: 0 0% 24.7059%; /* #3f3f3f */
+  --hsl-muted-foreground: 0 0% 36.4706%; /* #5d5d5d */
+  --text-secondary: hsl(0 0% 31.3725%); --text-muted: hsl(0 0% 36.4706%);
+  --text-dim: hsl(0 0% 41.9608%); --md3-outline: hsl(var(--hsl-muted-foreground));
+  --hsl-border: 222.8571 6.6667% 79.4118%; /* #c7c9ce */
+  --border-hover: rgb(63 63 63 / 0.28);
+  --hsl-ring: 245.9504 54.2601% 56.2745%; /* #5f53cc */ --brand-primary: hsl(245.9091 64.7059% 60%);
+  --brand-purple: hsl(246.5217 92% 70.5882%); --accent-text: hsl(246.2264 92.1739% 54.902%);
+  --md3-primary: var(--accent-text); --md3-primary-dim: var(--btn-primary-bg);
+  --md3-on-primary-container: hsl(0 0% 100%); --md3-primary-fixed: hsl(246.9231 92.8571% 94.5098%);
+  --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)); --md3-secondary: var(--accent-text);
+  --md3-secondary-dim: var(--btn-primary-bg); --md3-secondary-container: var(--md3-primary-fixed);
+  --md3-on-secondary: hsl(0 0% 100%); --md3-on-secondary-container: var(--accent-text);
+  --md3-inverse-primary: hsl(246.0759 64.2276% 75.8824%); --md3-surface-tint: var(--accent-text);
+  --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent); --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
+  --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent); --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
+  --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent); --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
+  --tangle-gradient-text: var(--tangle-gradient); --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
+  --hsl-success: 154.8148 64.8% 24.5098%; /* #166745 */
+  --hsl-warning: 38.2979 65.2778% 28.2353%; /* #775519 */
+  --hsl-destructive: 0 75.1244% 39.4118%; /* #b01919 */
+  --hsl-destructive-foreground: 0 0% 100%; /* #ffffff */ --hsl-info: 201.1429 65.2174% 31.5686%; /* #1c6085 */
+  --surface-success-bg: #f1f6f4; --surface-success-border: #afcbc0;
+  --surface-warning-bg: #f7f5f1; --surface-warning-border: #d1c5b0;
+  --surface-danger-bg: #faf1f1; --surface-danger-border: #e4b0b0;
+  --surface-info-bg: #f1f5f8; --surface-info-border: #b1c8d6;
   /* tones:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
-  --tone-violet-bg: #f7edfe;
-  --tone-violet-bg-hover: #f2e2fc;
-  --tone-violet-bg-selected: #ead5f9;
-  --tone-violet-border: #e0c4f4;
-  --tone-violet-border-selected: #8e4ec6;
-  --tone-violet-text: #402060;
-  --tone-violet-icon: #8e4ec6;
-  --tone-orange-bg: #ffefd6;
-  --tone-orange-bg-hover: #ffdfb5;
-  --tone-orange-bg-selected: #ffd19a;
-  --tone-orange-border: #ffc182;
-  --tone-orange-border-selected: #cc4e00;
-  --tone-orange-text: #582d1d;
-  --tone-orange-icon: #cc4e00;
-  --tone-teal-bg: #e0f8f3;
-  --tone-teal-bg-hover: #ccf3ea;
-  --tone-teal-bg-selected: #b8eae0;
-  --tone-teal-border: #a1ded2;
-  --tone-teal-border-selected: #008573;
-  --tone-teal-text: #0d3d38;
-  --tone-teal-icon: #008573;
-  --tone-blue-bg: #e6f4fe;
-  --tone-blue-bg-hover: #d5efff;
-  --tone-blue-bg-selected: #c2e5ff;
-  --tone-blue-border: #acd8fc;
-  --tone-blue-border-selected: #0d74ce;
-  --tone-blue-text: #113264;
-  --tone-blue-icon: #0d74ce;
-  --tone-pink-bg: #fee9f5;
-  --tone-pink-bg-hover: #fbdcef;
-  --tone-pink-bg-selected: #f6cee7;
-  --tone-pink-border: #efbfdd;
-  --tone-pink-border-selected: #cf3897;
-  --tone-pink-text: #651249;
-  --tone-pink-icon: #cf3897;
-  --tone-brown-bg: #f6eee7;
-  --tone-brown-bg-hover: #f0e4d9;
-  --tone-brown-bg-selected: #ebdaca;
-  --tone-brown-border: #e4cdb7;
-  --tone-brown-border-selected: #815e46;
-  --tone-brown-text: #3e332e;
-  --tone-brown-icon: #815e46;
-  --tone-cyan-bg: #def7f9;
-  --tone-cyan-bg-hover: #caf1f6;
-  --tone-cyan-bg-selected: #b5e9f0;
-  --tone-cyan-border: #9ddde7;
-  --tone-cyan-border-selected: #107d98;
-  --tone-cyan-text: #0d3c48;
-  --tone-cyan-icon: #107d98;
-  --tone-lime-bg: #eef6d6;
-  --tone-lime-bg-hover: #e2f0bd;
-  --tone-lime-bg-selected: #d3e7a6;
-  --tone-lime-border: #c2da91;
-  --tone-lime-border-selected: #5c7c2f;
-  --tone-lime-text: #37401c;
-  --tone-lime-icon: #5c7c2f;
-  --surface-violet-bg: #f7edfe;
-  --surface-violet-border: #e0c4f4;
-  --surface-violet-text: #8145b5;
-  --surface-orange-bg: #ffefd6;
-  --surface-orange-border: #ffc182;
-  --surface-orange-text: #bc4904;
-  --surface-teal-bg: #e0f8f3;
-  --surface-teal-border: #a1ded2;
-  --surface-teal-text: #017d6d;
+  --tone-violet-bg: hsl(272.3077 86.6667% 97.0588%);
+  --tone-violet-bg-hover: hsl(272.7273 78.5714% 94.5098%);
+  --tone-violet-bg-selected: hsl(270.9091 80.4878% 91.9608%);
+  --tone-violet-border: hsl(272.5301 80.5825% 79.8039%);
+  --tone-violet-border-selected: hsl(272.1569 80.1047% 62.549%);
+  --tone-violet-text: hsl(272.1212 79.8387% 51.3725%);
+  --tone-violet-icon: hsl(272.1569 80.1047% 62.549%);
+  --tone-violet-fill: 272.1081 80.0866% 54.7059%;
+  --tone-violet-ring: 272.1081 80.0866% 54.7059%;
+  --tone-violet-mark: hsl(272.1569 80.1047% 62.549%);
+  --tone-violet-line: hsl(272.1569 80.1047% 62.549%);
+  --tone-violet-ink: hsl(271.8857 79.9087% 42.9412%);
+  --tone-orange-bg: hsl(20 42.8571% 95.8824%);
+  --tone-orange-bg-hover: hsl(20 47.3684% 92.549%);
+  --tone-orange-bg-selected: hsl(20 47.3684% 88.8235%);
+  --tone-orange-border: hsl(22.1053 62.9139% 70.3922%);
+  --tone-orange-border-selected: hsl(21.9672 79.9127% 44.902%);
+  --tone-orange-text: hsl(22.0833 80% 35.2941%);
+  --tone-orange-icon: hsl(21.9672 79.9127% 44.902%);
+  --tone-orange-fill: 22 79.7872% 36.8627%;
+  --tone-orange-ring: 22 79.7872% 36.8627%;
+  --tone-orange-mark: hsl(21.9672 79.9127% 44.902%);
+  --tone-orange-line: hsl(21.9672 79.9127% 44.902%);
+  --tone-orange-ink: hsl(22.314 80.1325% 29.6078%);
+  --tone-teal-bg: hsl(171.4286 28% 95.098%);
+  --tone-teal-bg-hover: hsl(175 26.087% 90.9804%);
+  --tone-teal-bg-selected: hsl(170.5263 27.5362% 86.4706%);
+  --tone-teal-border: hsl(171.8182 35.1064% 63.1373%);
+  --tone-teal-border-selected: hsl(172.32 79.6178% 30.7843%);
+  --tone-teal-text: hsl(172.1212 80.4878% 24.1176%);
+  --tone-teal-icon: hsl(172.32 79.6178% 30.7843%);
+  --tone-teal-fill: 172.2772 79.5276% 24.902%;
+  --tone-teal-ring: 172.2772 79.5276% 24.902%;
+  --tone-teal-mark: hsl(172.32 79.6178% 30.7843%);
+  --tone-teal-line: hsl(172.32 79.6178% 30.7843%);
+  --tone-teal-ink: hsl(172.0482 80.5825% 20.1961%);
+  --tone-blue-bg: hsl(210 50% 96.0784%);
+  --tone-blue-bg-hover: hsl(208.4211 51.3514% 92.7451%);
+  --tone-blue-bg-selected: hsl(208.9655 52.7273% 89.2157%);
+  --tone-blue-border: hsl(209.4231 74.2857% 72.549%);
+  --tone-blue-border-selected: hsl(209.0909 79.8387% 48.6275%);
+  --tone-blue-text: hsl(209.2308 79.5918% 38.4314%);
+  --tone-blue-icon: hsl(209.0909 79.8387% 48.6275%);
+  --tone-blue-fill: 209.0683 80.0995% 39.4118%;
+  --tone-blue-ring: 209.0683 80.0995% 39.4118%;
+  --tone-blue-mark: hsl(209.0909 79.8387% 48.6275%);
+  --tone-blue-line: hsl(209.0909 79.8387% 48.6275%);
+  --tone-blue-ink: hsl(209.0909 80.4878% 32.1569%);
+  --tone-pink-bg: hsl(325 66.6667% 96.4706%);
+  --tone-pink-bg-hover: hsl(321.8182 64.7059% 93.3333%);
+  --tone-pink-bg-selected: hsl(320.625 61.5385% 89.8039%);
+  --tone-pink-border: hsl(322.2222 79.4118% 73.3333%);
+  --tone-pink-border-selected: hsl(321.7647 80.315% 49.8039%);
+  --tone-pink-text: hsl(321.9876 80.0995% 39.4118%);
+  --tone-pink-icon: hsl(321.7647 80.315% 49.8039%);
+  --tone-pink-fill: 322 80.3571% 43.9216%;
+  --tone-pink-ring: 322 80.3571% 43.9216%;
+  --tone-pink-mark: hsl(321.7647 80.315% 49.8039%);
+  --tone-pink-line: hsl(321.7647 80.315% 49.8039%);
+  --tone-pink-ink: hsl(321.9403 79.7619% 32.9412%);
+  --tone-brown-bg: hsl(15 20% 96.0784%);
+  --tone-brown-bg-hover: hsl(22.5 21.0526% 92.549%);
+  --tone-brown-bg-selected: hsl(23.0769 22.807% 88.8235%);
+  --tone-brown-border: hsl(23.4783 32.3944% 72.1569%);
+  --tone-brown-border-selected: hsl(23.8636 35.7724% 48.2353%);
+  --tone-brown-text: hsl(24.3478 35.7513% 37.8431%);
+  --tone-brown-icon: hsl(23.8636 35.7724% 48.2353%);
+  --tone-brown-fill: 23.662 36.0406% 38.6275%;
+  --tone-brown-ring: 23.662 36.0406% 38.6275%;
+  --tone-brown-mark: hsl(23.8636 35.7724% 48.2353%);
+  --tone-brown-line: hsl(23.8636 35.7724% 48.2353%);
+  --tone-brown-ink: hsl(23.3898 36.1963% 31.9608%);
+  --tone-cyan-bg: hsl(187.5 33.3333% 95.2941%);
+  --tone-cyan-bg-hover: hsl(192 34.8837% 91.5686%);
+  --tone-cyan-bg-selected: hsl(193.6364 34.375% 87.451%);
+  --tone-cyan-border: hsl(192.3077 44.8276% 65.8824%);
+  --tone-cyan-border-selected: hsl(192.1622 80.4348% 36.0784%);
+  --tone-cyan-text: hsl(192.4138 79.4521% 28.6275%);
+  --tone-cyan-icon: hsl(192.1622 80.4348% 36.0784%);
+  --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
+  --tone-cyan-ring: 192.3967 80.1325% 29.6078%;
+  --tone-cyan-mark: hsl(192.1622 80.4348% 36.0784%);
+  --tone-cyan-line: hsl(192.1622 80.4348% 36.0784%);
+  --tone-cyan-ink: hsl(192.2449 80.3279% 23.9216%);
+  --tone-lime-bg: hsl(90 25% 95.2941%);
+  --tone-lime-bg-hover: hsl(84 22.7273% 91.3725%);
+  --tone-lime-bg-selected: hsl(84 22.3881% 86.8627%);
+  --tone-lime-border: hsl(84.4444 30% 64.7059%);
+  --tone-lime-border-selected: hsl(83.8835 59.5376% 33.9216%);
+  --tone-lime-text: hsl(83.7037 60% 26.4706%);
+  --tone-lime-icon: hsl(83.8835 59.5376% 33.9216%);
+  --tone-lime-fill: 84.5783 59.7122% 27.2549%;
+  --tone-lime-ring: 84.5783 59.7122% 27.2549%;
+  --tone-lime-mark: hsl(83.8835 59.5376% 33.9216%);
+  --tone-lime-line: hsl(83.8835 59.5376% 33.9216%);
+  --tone-lime-ink: hsl(83.8235 59.6491% 22.3529%);
+  --surface-violet-bg: var(--tone-violet-bg);
+  --surface-violet-border: var(--tone-violet-border);
+  --surface-violet-text: var(--tone-violet-text);
+  --surface-orange-bg: var(--tone-orange-bg);
+  --surface-orange-border: var(--tone-orange-border);
+  --surface-orange-text: var(--tone-orange-text);
+  --surface-teal-bg: var(--tone-teal-bg);
+  --surface-teal-border: var(--tone-teal-border);
+  --surface-teal-text: var(--tone-teal-text);
   /* tones:end */
-  /* Run-mix ramp — the fills of a proportional status bar.
-   *
-   * Separate from the `--surface-*-text` tones because a 6px bar is read
-   * differently from a chip: it is told by hue alone, at a size too small to
-   * carry a glyph or a label, so its slices must ALSO separate from each other
-   * in greyscale. These five are spaced at least 1.18:1 apart in relative
-   * luminance — 1.30 in dark, 1.20 in light, where the ramp has less room
-   * before it runs into the paper — and each clears 3:1 against the track, so
-   * the mix stays countable with any form of colour blindness and in a
-   * monochrome screenshot. 1.18 is the floor the gate holds them to.
-   *
-   * Ranked by how much the reader needs to tell them apart: succeeded is
-   * brightest and cancelled quietest, so the two that matter — succeeded and
-   * failed — sit at opposite ends and can never be confused.
-   *
-   * Spacing them by OKLCH lightness does NOT work: that is perceptual, and the
-   * contrast ratio is computed from relative luminance, so an even perceptual
-   * ramp left every pair at 1.1:1. Solved in luminance space instead. */
-  --run-mix-succeeded: #3c9b78;
-  --run-mix-waiting: #c16227;
-  --run-mix-failed: #cd342f;
-  --run-mix-in-flight: #00679e;
-  --run-mix-cancelled: #515367;
-
-  --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);
+  --run-mix-succeeded: hsl(154.8718 60% 38.2353%); --run-mix-waiting: hsl(38.3193 60.4061% 38.6275%);
+  --run-mix-failed: hsl(0 59.6838% 49.6078%); --run-mix-in-flight: hsl(200.7692 60.4651% 33.7255%);
+  --run-mix-cancelled: hsl(228.5714 11.8644% 34.7059%);
+  --glass-bg-strong: var(--depth-1); --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
+  --shadow-color: 220 40% 8%; /* #0c121d */ --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);
 }
-
-
-/* Focus and field hover — the palette behind @tangle-network/ui's focus
- * treatment (`focusField` / `focusRing` in ui's lib/focus.ts).
- *
- * A focused field keeps its 1px border and shifts it to --focus-border, with a
- * 3px --focus-halo ring outside it. A focused button or tab draws a 1px
- * --focus-border line with the same halo beyond it. Both render as box-shadow,
- * so they follow border-radius and never move layout.
- *
- * The BORDER carries the contrast and the halo is decoration. --focus-border is
- * the ring at 80%: 4.7:1 on the white light-mode field and 5.7:1 on the dark
- * card, so the indicator clears the 3:1 non-text floor (WCAG 1.4.11) in every
- * theme, while reading as a tint of the field instead of a hard indigo outline.
- * An 18% halo sits near 1.3:1 against the page on purpose: it softens the edge
- * and is never the only cue. Gated in focus.test.ts.
- *
- * Every value is derived from a spine token (--hsl-ring, --surface-danger-text,
- * --hsl-border, --hsl-foreground), and a custom property that references
- * another is resolved where it is declared. So this rule names every scope that
- * can redefine those tokens: a named theme or a light island on a descendant
- * gets its own focus colors instead of inheriting the root's. */
 :root,
 .dark,
 .light,
 [data-sandbox-ui],
 [data-sandbox-theme],
 [data-theme] {
-  --focus-border: hsl(var(--hsl-ring) / 0.8);
-  --focus-halo: hsl(var(--hsl-ring) / 0.18);
-  /* The danger INK, not the destructive fill: the fill is tuned to carry white
-   * text and measures about 2:1 on the dark card. */
-  --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent);
-  --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
-  /* A resting hairline one step toward the ink, for hover: darker on light
-   * paper, lighter on a dark card, never tinted. */
+  --focus-border: hsl(var(--hsl-ring) / 0.8); --focus-halo: hsl(var(--hsl-ring) / 0.18);
+  --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent); --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
   --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
 }
-
-/* Surface ladder and interaction states — the palette behind @tangle-network/ui's
- * interaction helpers (`ixControl`, `ixField`, `ixSelected`, `ixRow` … in ui's
- * lib/interaction.ts) and the Card primitive's surface context.
- *
- * LADDER. A card (`[data-slot="card"]`) re-declares two context variables for
- * everything inside it, so nesting needs no app selector:
- *   --card  the plane a nested card or `bg-card` box paints: --hsl-raised one
- *           level in, --hsl-raised-2 two levels in.
- *   --well  the field fill: --well-page on the page, --well-card in a card,
- *           --well-raised in a card in a card, --well-raised-2 deeper still.
- * The canonical ladder is the spine's own planes: raised is L3 (--hsl-secondary),
- * raised-2 is L4 (--hsl-popover), and each well is a plane at least 4.4 OKLCH L
- * off the level it fills. Dark wells always sit deeper (page + 30% black on the
- * page and in a card, the card in a raised plane); light wells take the
- * opposite plane (paper on a grey level, the canvas on paper). Dark raised
- * planes also carry a 1px top highlight. Hospitality tunes its own ladder; the
- * other named themes keep a flat one (below) until theirs is tuned.
- *
- * INTERACTION. Four states, all from the focus ring hue (--hsl-ring), so one
- * green or one indigo marks every interactive thing in a theme:
- *   hover     1px edge at .45 plus a 4px halo at .16 (--ix-hover)
- *   press     1px edge at .95 plus a 4px halo at .30 (--ix-press)
- *   after     a mouse-focused control keeps a 1px .60 / 3px .14 ring (--ix-after)
- *   selected  a .13 tint (.18 in dark) with a 1px inset ring at .85
- * Keyboard focus-visible keeps --focus-border / --focus-halo above.
- *
- * Declared on every scope that can redefine --hsl-ring or the ladder, as the
- * focus rule is, because a custom property is resolved where it is declared. */
 :root,
 .dark,
 .light,
 [data-sandbox-ui],
 [data-sandbox-theme],
 [data-theme] {
-  --hsl-raised: var(--hsl-secondary);
-  --hsl-raised-2: var(--hsl-popover);
-  --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black);
-  --well-card: var(--well-page);
-  --well-raised: hsl(var(--hsl-card));
-  --well-raised-2: var(--well-raised);
-  --well: var(--well-page);
-  /* The hairline is 1.5:1 by design; a field edge is non-text UI and needs 3:1.
-   * 45% toward the ink clears 4:1 on the spine card in both modes. */
-  --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
-  --shadow-raised: var(--shadow-card);
-  /* A shadow token joins a comma list, so "none" would void the whole list. */
-  --shadow-well: 0 0 0 0 transparent;
-  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-  --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: hsl(var(--hsl-ring) / 0.18);
-  --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
+  --hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
+  --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black); --well-card: var(--well-page);
+  --well-raised: hsl(var(--hsl-card)); --well-raised-2: var(--well-raised);
+  --well: var(--well-page); --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
+  --shadow-raised: var(--shadow-card); --shadow-well: 0 0 0 0 transparent;
+  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); --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: hsl(var(--hsl-ring) / 0.18); --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
 }
-
-/* Light planes need less tint for the same step, and take their wells from the
- * opposite plane. Same scope list as the chart light rule below; dark is the
- * default. */
 [data-sandbox-theme="vault"]:where(:not(.dark)),
 [data-sandbox-theme="dawn"]:where(:not(.dark)),
 [data-theme="hospitality"]:where(:not(.dark)),
@@ -849,81 +504,32 @@
 [data-theme="light"],
 .light,
 [data-theme$="-light"] {
-  --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
-  --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
-  --well-page: hsl(var(--hsl-card));
-  --well-card: hsl(var(--hsl-background));
-  --well-raised-2: var(--well-card);
-  --edge-highlight: 0 0 0 0 transparent;
+  --ix-sel-bg: hsl(var(--hsl-ring) / 0.13); --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
+  --well-page: hsl(var(--hsl-card)); --well-card: hsl(var(--hsl-background));
+  --well-raised-2: var(--well-card); --edge-highlight: 0 0 0 0 transparent;
 }
-
-/* Named themes with their own planes keep a flat ladder until each is tuned as
- * Hospitality was: a nested card paints the card, and its field the card's well. */
-[data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"],
-[data-theme="super"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents"],
-[data-theme="agents-light"], [data-theme="website"], [data-theme="intelligence"] {
-  --hsl-raised: var(--hsl-card);
-  --hsl-raised-2: var(--hsl-card);
-  --well-raised: var(--well-card);
-  --well-raised-2: var(--well-card);
-  --edge-highlight: 0 0 0 0 transparent;
-}
-
-/* Surface context: keyed only on the Card primitive's data-slot, never on app
- * classes. :where(*) keeps it at the specificity of one attribute, so a theme
- * scope opened inside a card still wins. */
 [data-slot="card"] :where(*) {
-  --card: var(--hsl-raised);
-  --well: var(--well-card);
+  --card: var(--hsl-raised); --well: var(--well-card);
 }
 [data-slot="card"] [data-slot="card"] :where(*) {
-  --card: var(--hsl-raised-2);
-  --well: var(--well-raised);
+  --card: var(--hsl-raised-2); --well: var(--well-raised);
 }
 [data-slot="card"] [data-slot="card"] [data-slot="card"] :where(*) {
   --well: var(--well-raised-2);
 }
-
-/* Chart marks — the palette behind @tangle-network/charts.
- *
- * One accent marks the measure a reader decides on (a rate bar, a frontier
- * point, a solved attempt). One muted grey marks everything secondary. An
- * ordinal indigo ramp marks App Grade tiers C < B < A < S; F has no fill and
- * draws as a --chart-muted outline, the same mark as an unsolved attempt. No
- * categorical palette ships: identity is carried by direct labels.
- *
- * Contrast against the dark canvas (#0a0a14) and white paper, checked with the
- * dataviz palette validator and WCAG ratios:
- *   ink 14.45 / 13.70, ink-muted 7.34 / 5.56, accent 6.05 / 7.41,
- *   muted 5.54 / 4.41, grid 1.46 / 1.12 (recessive by design).
- * Tiers pass the ordinal checks in both modes: one hue, monotone lightness,
- * visible steps. They are iris ladder steps (ladders.css) except #8b87f0 dark
- * and #7c7fe3 light, which sit between two steps to keep the gaps even.
- *
- * The aliases re-resolve on every theme scope, as the focus rule above does,
- * so a named theme's ink and hairlines carry into its charts. */
 :root,
 .dark,
 .light,
 [data-sandbox-ui],
 [data-sandbox-theme],
 [data-theme] {
-  --chart-ink: var(--text-primary);
-  --chart-ink-muted: var(--text-dim);
-  --chart-muted: var(--md3-outline);
-  --chart-grid: var(--md3-surface-container-high);
-  --chart-rule: var(--md3-outline-variant);
-  --chart-shade: var(--bg-hover);
-  --chart-accent: var(--brand-cool);
-  --chart-tier-c: #4a4a95;
-  --chart-tier-b: #5b5bd6;
-  --chart-tier-a: #8b87f0;
-  --chart-tier-s: #b1a9ff;
+  --chart-ink: var(--text-primary); --chart-ink-muted: var(--text-dim);
+  --chart-muted: var(--md3-outline); --chart-grid: var(--md3-surface-container-high);
+  --chart-rule: var(--md3-outline-variant); --chart-shade: var(--bg-hover);
+  --chart-accent: var(--brand-cool); --chart-tier-c: hsl(246.1017 55.1402% 41.9608%);
+  --chart-tier-b: hsl(246.1905 54.7826% 54.902%); --chart-tier-a: hsl(245.3933 54.6012% 68.0392%);
+  --chart-tier-s: hsl(245.6604 54.6392% 80.9804%);
 }
-
-/* Light: the accent is the indigo fill (#4c3fc6, 7.41:1 on white) and the tier
- * ramp runs light to dark. `[data-theme$="-light"]` covers the named light
- * themes, which would otherwise inherit the dark ramp from :root. */
 [data-sandbox-theme="vault"]:where(:not(.dark)),
 [data-sandbox-theme="dawn"]:where(:not(.dark)),
 [data-theme="hospitality"]:where(:not(.dark)),
@@ -931,16 +537,11 @@
 [data-theme="light"],
 .light,
 [data-theme$="-light"] {
-  --chart-accent: hsl(var(--hsl-primary));
-  --chart-tier-c: #9b9ef0;
-  --chart-tier-b: #7c7fe3;
-  --chart-tier-a: #5b5bd6;
-  --chart-tier-s: #272962;
+  --chart-accent: hsl(var(--hsl-primary)); --chart-tier-c: hsl(246.2687 54.4715% 75.8824%);
+  --chart-tier-b: hsl(246.055 54.7739% 60.9804%); --chart-tier-a: hsl(246.0465 54.8936% 46.0784%);
+  --chart-tier-s: hsl(245.5172 54.717% 31.1765%);
 }
-
-
-/* Motion is opt-in at the component, but its reduced-motion preference is
- * shared. Re-declare composites at the same boundary as their durations. */
+@keyframes tangle-breathe { 50% { opacity: 0.45; } }
 @media (prefers-reduced-motion: reduce) {
   :root,
   .dark,
@@ -962,7 +563,6 @@
     --motion-arrive: var(--duration-arrive) var(--ease-expo);
   }
 }
-
 /* tone-scopes:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
 [data-tone="violet"],
 [data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
@@ -1045,3 +645,4 @@
   --tone-icon: var(--tone-lime-icon);
 }
 /* tone-scopes:end */
+/* palette:end */