@tangle-network/sandbox-ui 0.77.0 → 0.79.0

package/dist/globals.css

@@ -5333,15 +5333,15 @@
 [data-sandbox-ui],
 [data-theme="dark"],
 .dark {
-  --md3-surface: #16161f;
-  --md3-surface-dim: #111119;
-  --md3-surface-bright: #2a2940;
-  --md3-surface-container-lowest: #101017;
-  --md3-surface-container-low: #16161f;
-  --md3-surface-container: #1c1b27;
-  --md3-surface-container-high: #232231;
-  --md3-surface-container-highest: #2c2b3d;
-  --md3-surface-variant: #2c2b3d;
+  --md3-surface: #0a0a14;
+  --md3-surface-dim: #060610;
+  --md3-surface-bright: #232238;
+  --md3-surface-container-lowest: #050509;
+  --md3-surface-container-low: #12111f;
+  --md3-surface-container: #191826;
+  --md3-surface-container-high: #221f33;
+  --md3-surface-container-highest: #2c2942;
+  --md3-surface-variant: #2c2942;
   --md3-on-surface: #fdfdfd;
   --md3-on-surface-variant: #aaa8b8;
   --md3-primary: #818CF8;
@@ -5358,7 +5358,7 @@
   --md3-on-secondary-container: #E8E5FF;
   --md3-tertiary: #10B981;
   --md3-outline: #4a4965;
-  --md3-outline-variant: #34324a;
+  --md3-outline-variant: #2a293d;
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
   --md3-error-container: #82042b;
@@ -5368,24 +5368,24 @@
   --md3-inverse-primary: #4F46E5;
   --md3-inverse-on-surface: #000000;
   --md3-surface-tint: #818CF8;
-  --hsl-background: 240 7% 9%;
+  --hsl-background: 240 33% 6%;
   --hsl-foreground: 240 6% 93%;
-  --hsl-card: 240 5% 13%;
+  --hsl-card: 244 23% 12%;
   --hsl-card-foreground: 240 6% 93%;
-  --hsl-popover: 240 5% 17%;
+  --hsl-popover: 247 23% 21%;
   --hsl-popover-foreground: 240 6% 93%;
   --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 5% 15%;
+  --hsl-secondary: 249 24% 16%;
   --hsl-secondary-foreground: 240 6% 93%;
-  --hsl-muted: 240 5% 15%;
-  --hsl-muted-foreground: 240 4% 64%;
-  --hsl-accent: 240 5% 15%;
+  --hsl-muted: 249 24% 16%;
+  --hsl-muted-foreground: 240 5% 68%;
+  --hsl-accent: 249 24% 16%;
   --hsl-accent-foreground: 240 6% 93%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 5% 16%;
-  --hsl-input: 240 5% 15%;
+  --hsl-border: 243 19.6% 20%;
+  --hsl-input: 244 29% 9%;
   --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -5413,18 +5413,18 @@
   --warning: var(--hsl-warning);
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
-  --sidebar-background: 240 6% 11%;
+  --sidebar-background: 244 29% 9%;
   --sidebar-foreground: 240 6% 93%;
   --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 5% 15%;
+  --sidebar-accent: 249 24% 16%;
   --sidebar-accent-foreground: 240 6% 93%;
-  --sidebar-border: 240 5% 16%;
+  --sidebar-border: 243 19.6% 20%;
   --sidebar-ring: 239 84% 67%;
-  --depth-1: #15151a;
-  --depth-2: #1f1f23;
-  --depth-3: #26262b;
-  --depth-4: #2e2e34;
+  --depth-1: #0a0a14;
+  --depth-2: #191826;
+  --depth-3: #221f33;
+  --depth-4: #2c2942;
   --status-running: #10B981;
   --status-creating: #9B93F0;
   --status-stopped: #FFB800;
@@ -5470,12 +5470,12 @@
   --accent-surface-soft: rgba(255, 255, 255, 0.04);
   --accent-surface-strong: rgba(129, 140, 248, 0.14);
   --accent-text: #b9bffb;
-  --bg-root: #15151a;
+  --bg-root: #0a0a14;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
   --bg-section: var(--depth-1);
-  --bg-input: var(--depth-3);
+  --bg-input: hsl(var(--hsl-input));
   --bg-hover: rgba(255, 255, 255, 0.04);
   --bg-selection: rgba(129, 140, 248, 0.14);
   --text-primary: #ececee;
@@ -5578,15 +5578,15 @@
 [data-sandbox-theme="vault"],
 [data-theme="light"],
 .light {
-  --md3-surface: #f8f9fb;
-  --md3-surface-dim: #d9dae0;
-  --md3-surface-bright: #f8f9fb;
+  --md3-surface: #eceef3;
+  --md3-surface-dim: #dcdee6;
+  --md3-surface-bright: #ffffff;
   --md3-surface-container-lowest: #ffffff;
-  --md3-surface-container-low: #f3f4f7;
-  --md3-surface-container: #edeef2;
-  --md3-surface-container-high: #e7e8ed;
-  --md3-surface-container-highest: #e1e2e8;
-  --md3-surface-variant: #e1e2e8;
+  --md3-surface-container-low: #f6f7fa;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #f1f2f7;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #f1f2f7;
   --md3-on-surface: #191c24;
   --md3-on-surface-variant: #464858;
   --md3-primary: #3E349E;
@@ -5614,32 +5614,32 @@
   --md3-inverse-primary: #A5AAFC;
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
-  --hsl-background: 0 0% 100%;
+  --hsl-background: 223 23% 94%;
   --hsl-foreground: 0 0% 5%;
-  --hsl-card: 240 7% 97%;
+  --hsl-card: 0 0% 100%;
   --hsl-card-foreground: 0 0% 5%;
   --hsl-popover: 0 0% 100%;
   --hsl-popover-foreground: 0 0% 5%;
   --hsl-primary: 245 62% 57%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 6% 93%;
+  --hsl-secondary: 230 27% 96%;
   --hsl-secondary-foreground: 0 0% 10%;
-  --hsl-muted: 240 6% 93%;
+  --hsl-muted: 230 27% 96%;
   --hsl-muted-foreground: 240 5% 38%;
-  --hsl-accent: 240 6% 93%;
+  --hsl-accent: 230 27% 96%;
   --hsl-accent-foreground: 0 0% 10%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 6% 89%;
-  --hsl-input: 240 6% 89%;
+  --hsl-border: 244 16.3% 80.8%;
+  --hsl-input: 225 29% 97%;
   --hsl-ring: 245 62% 57%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
-  --depth-1: #ffffff;
-  --depth-2: #f7f7f8;
-  --depth-3: #ececee;
-  --depth-4: #e3e3e6;
+  --depth-1: #eceef3;
+  --depth-2: #ffffff;
+  --depth-3: #f1f2f7;
+  --depth-4: #ffffff;
   --status-running: #059669;
   --status-creating: #3E349E;
   --status-stopped: #B45309;
@@ -5675,23 +5675,23 @@
   --surface-neutral-bg: var(--depth-3);
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
-  --sidebar-background: 240 7% 97%;
+  --sidebar-background: 0 0% 100%;
   --sidebar-foreground: 0 0% 5%;
   --sidebar-primary: 245 62% 57%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 6% 93%;
+  --sidebar-accent: 230 27% 96%;
   --sidebar-accent-foreground: 0 0% 10%;
-  --sidebar-border: 240 6% 89%;
+  --sidebar-border: 244 16.3% 80.8%;
   --sidebar-ring: 245 62% 57%;
   --mesh-teal: transparent;
   --mesh-violet: transparent;
   --mesh-blue: transparent;
-  --bg-root: #ffffff;
-  --bg-dark: #f7f7f8;
-  --bg-card: #f7f7f8;
-  --bg-elevated: #ffffff;
-  --bg-section: #f7f7f8;
-  --bg-input: #ececee;
+  --bg-root: #eceef3;
+  --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));
   --bg-hover: rgba(0, 0, 0, 0.04);
   --bg-selection: rgba(91, 78, 212, 0.10);
   --text-primary: #0d0d0d;
@@ -5747,6 +5747,305 @@
   --radius-full: 999px;
   --radius-composer: 26px;
 }
+[data-theme] {
+  --color-background: hsl(var(--hsl-background));
+  --color-foreground: hsl(var(--hsl-foreground));
+  --color-card: hsl(var(--hsl-card));
+  --color-card-foreground: hsl(var(--hsl-card-foreground));
+  --color-popover: hsl(var(--hsl-popover));
+  --color-popover-foreground: hsl(var(--hsl-popover-foreground));
+  --color-primary: hsl(var(--hsl-primary));
+  --color-primary-foreground: hsl(var(--hsl-primary-foreground));
+  --color-secondary: hsl(var(--hsl-secondary));
+  --color-secondary-foreground: hsl(var(--hsl-secondary-foreground));
+  --color-muted: hsl(var(--hsl-muted));
+  --color-muted-foreground: hsl(var(--hsl-muted-foreground));
+  --color-accent: hsl(var(--hsl-accent));
+  --color-accent-foreground: hsl(var(--hsl-accent-foreground));
+  --color-destructive: hsl(var(--hsl-destructive));
+  --color-destructive-foreground: hsl(var(--hsl-destructive-foreground));
+  --color-border: hsl(var(--hsl-border));
+  --color-input: hsl(var(--hsl-muted-foreground));
+  --color-ring: hsl(var(--hsl-ring));
+  --color-surface-container-lowest: var(--md3-surface-container-lowest);
+  --color-surface-container-low: var(--md3-surface-container-low);
+  --color-surface-container: var(--md3-surface-container);
+  --color-surface-container-high: var(--md3-surface-container-high);
+  --color-surface-container-highest: var(--md3-surface-container-highest);
+  --color-fg: var(--text-primary);
+  --color-fg-muted: var(--text-muted);
+  --color-fg-dim: var(--text-dim);
+}
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"] {
+  --surface-success-bg: #ecfdf5;
+  --surface-success-border: #a7f3d0;
+  --surface-success-text: #047857;
+  --surface-warning-bg: #fffbeb;
+  --surface-warning-border: #fde68a;
+  --surface-warning-text: #b45309;
+  --surface-danger-bg: #fff1f2;
+  --surface-danger-border: #fecdd3;
+  --surface-danger-text: #b91c1c;
+  --surface-info-bg: #f0f9ff;
+  --surface-info-border: #bae6fd;
+  --surface-info-text: #0369a1;
+  --hsl-destructive: 0 72% 41%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-secondary-foreground: 0 0% 10%;
+  --surface-neutral-text: #4b5563;
+}
+[data-theme="light"],
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"] {
+  --syntax-foreground: #24292f;
+  --syntax-comment: #57606a;
+  --syntax-keyword: #6d28d9;
+  --syntax-string: #047857;
+  --syntax-function: #1d4ed8;
+  --syntax-number: #92400e;
+  --syntax-meta: #7c3aed;
+  --syntax-variable: #24292f;
+  --syntax-error: #b91c1c;
+}
+[data-theme="aubergine"] {
+  --hsl-background: 258 44% 12%;
+  --hsl-foreground: 258 50% 97%;
+  --hsl-card: 258 40% 20%;
+  --hsl-card-foreground: 258 50% 97%;
+  --hsl-popover: 258 40% 24%;
+  --hsl-popover-foreground: 258 50% 97%;
+  --hsl-primary: 250 100% 76%;
+  --hsl-primary-foreground: 258 45% 10%;
+  --hsl-secondary: 258 38% 17%;
+  --hsl-muted: 258 38% 17%;
+  --hsl-muted-foreground: 258 26% 70%;
+  --hsl-accent: 258 40% 24%;
+  --hsl-border: 258 32% 30%;
+  --hsl-input: 258 38% 17%;
+  --hsl-ring: 250 100% 76%;
+  --depth-1: #1a1230;
+  --depth-2: #241a42;
+  --depth-3: #2f2253;
+  --depth-4: #3d2d68;
+  --bg-root: #1a1230;
+  --bg-card: var(--depth-3);
+  --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #150e28;
+  --md3-surface-container-low: #241a42;
+  --md3-surface-container: #2a1f4c;
+  --md3-surface-container-high: #2f2253;
+  --md3-surface-container-highest: #3d2d68;
+  --md3-outline-variant: #463571;
+  --border-subtle: rgba(183,157,255,0.12);
+  --border-default: rgba(183,157,255,0.22);
+  --border-hover: rgba(183,157,255,0.40);
+  --accent-text: #c4b0ff;
+  --brand-primary: #8f8bff;
+  --brand-glow: #c4b0ff;
+  --text-primary: #f4f1fd;
+  --text-secondary: #cec4e8;
+  --text-muted: #a99fc8;
+  --text-dim: #786d99;
+}
+[data-theme="aubergine-light"] {
+  --hsl-background: 258 60% 96%;
+  --hsl-foreground: 258 45% 11%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 258 45% 11%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 258 45% 11%;
+  --hsl-primary: 258 70% 50%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 258 45% 92%;
+  --hsl-muted: 258 45% 92%;
+  --hsl-muted-foreground: 258 18% 42%;
+  --hsl-accent: 258 45% 92%;
+  --hsl-border: 258 30% 88%;
+  --hsl-input: 258 30% 88%;
+  --hsl-ring: 258 70% 50%;
+  --depth-1: #f4f1fc;
+  --depth-2: #ece6f8;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f4f1fc;
+  --bg-card: #ffffff;
+  --bg-input: #ece6f8;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #faf8fe;
+  --md3-surface-container: #f4f1fc;
+  --md3-surface-container-high: #ece6f8;
+  --md3-surface-container-highest: #e4dcf4;
+  --md3-outline-variant: #e0d8f0;
+  --border-subtle: rgba(60,32,110,0.10);
+  --border-default: rgba(60,32,110,0.16);
+  --border-hover: rgba(60,32,110,0.30);
+  --accent-text: #6d28d9;
+  --brand-primary: #6d28d9;
+  --brand-glow: #8b5cf6;
+  --text-primary: #160f22;
+  --text-secondary: #3f3460;
+  --text-muted: #6c6289;
+  --text-dim: #8a82a6;
+}
+[data-theme="arena"] {
+  --hsl-background: 160 16% 6%;
+  --hsl-foreground: 150 20% 96%;
+  --hsl-card: 158 14% 12%;
+  --hsl-card-foreground: 150 20% 96%;
+  --hsl-popover: 158 13% 16%;
+  --hsl-popover-foreground: 150 20% 96%;
+  --hsl-primary: 160 84% 39%;
+  --hsl-primary-foreground: 160 60% 8%;
+  --hsl-secondary: 158 12% 12%;
+  --hsl-muted: 158 12% 12%;
+  --hsl-muted-foreground: 152 12% 62%;
+  --hsl-accent: 158 14% 14%;
+  --hsl-border: 158 14% 18%;
+  --hsl-input: 158 12% 12%;
+  --hsl-ring: 160 84% 45%;
+  --depth-1: #0a0f0c;
+  --depth-2: #131b16;
+  --depth-3: #1b261f;
+  --depth-4: #233328;
+  --bg-root: #0a0f0c;
+  --bg-card: var(--depth-3);
+  --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #070b08;
+  --md3-surface-container-low: #131b16;
+  --md3-surface-container: #182019;
+  --md3-surface-container-high: #1b261f;
+  --md3-surface-container-highest: #233328;
+  --md3-outline-variant: #2a3a31;
+  --border-subtle: rgba(52,211,153,0.10);
+  --border-default: rgba(52,211,153,0.18);
+  --border-hover: rgba(52,211,153,0.32);
+  --accent-text: #34d399;
+  --brand-primary: #10b981;
+  --brand-glow: #34d399;
+  --text-primary: #ecfdf5;
+  --text-secondary: #c2e8d6;
+  --text-muted: #8fb6a3;
+  --text-dim: #5f8472;
+}
+[data-theme="arena-light"] {
+  --hsl-background: 150 30% 96%;
+  --hsl-foreground: 158 30% 10%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 158 30% 10%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 158 30% 10%;
+  --hsl-primary: 160 84% 27%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 150 25% 92%;
+  --hsl-muted: 150 25% 92%;
+  --hsl-muted-foreground: 158 14% 40%;
+  --hsl-accent: 150 25% 92%;
+  --hsl-border: 150 20% 86%;
+  --hsl-input: 150 20% 86%;
+  --hsl-ring: 160 84% 30%;
+  --depth-1: #f0f6f2;
+  --depth-2: #e6f0ea;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f0f6f2;
+  --bg-card: #ffffff;
+  --bg-input: #e6f0ea;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f6fbf8;
+  --md3-surface-container: #f0f6f2;
+  --md3-surface-container-high: #e6f0ea;
+  --md3-surface-container-highest: #dcebe2;
+  --md3-outline-variant: #d7e8de;
+  --border-subtle: rgba(6,95,70,0.10);
+  --border-default: rgba(6,95,70,0.16);
+  --border-hover: rgba(6,95,70,0.30);
+  --accent-text: #047857;
+  --brand-primary: #059669;
+  --brand-glow: #10b981;
+  --text-primary: #06231a;
+  --text-secondary: #285048;
+  --text-muted: #5f8472;
+  --text-dim: #82a699;
+}
+[data-theme="tangle-light"] {
+  --hsl-background: 240 33% 98%;
+  --hsl-foreground: 245 32% 14%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 245 32% 14%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 245 32% 14%;
+  --hsl-primary: 239 84% 60%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 240 30% 95%;
+  --hsl-muted: 240 28% 95%;
+  --hsl-muted-foreground: 240 8% 42%;
+  --hsl-accent: 240 30% 95%;
+  --hsl-border: 240 20% 90%;
+  --hsl-input: 240 20% 90%;
+  --hsl-ring: 239 84% 60%;
+  --depth-1: #f4f4f9;
+  --depth-2: #edecf4;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f4f4f9;
+  --bg-card: #ffffff;
+  --bg-input: #edecf4;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f8f8fc;
+  --md3-surface-container: #f4f4f9;
+  --md3-surface-container-high: #edecf4;
+  --md3-surface-container-highest: #e5e4ee;
+  --md3-outline-variant: #e2e1ec;
+  --border-subtle: rgba(20,20,40,0.08);
+  --border-default: rgba(20,20,40,0.14);
+  --border-hover: rgba(20,20,40,0.26);
+  --accent-text: #4f46e5;
+  --brand-primary: #6366f1;
+  --brand-glow: #818cf8;
+  --text-primary: #15131f;
+  --text-secondary: #3f3a52;
+  --text-muted: #6a6680;
+  --text-dim: #9490a6;
+}
+.dark[data-theme="intelligence"] {
+  --md3-surface: #0d0a10;
+  --md3-surface-dim: #0a080d;
+  --md3-surface-bright: #2e2936;
+  --md3-surface-container-lowest: #070509;
+  --md3-surface-container-low: #100d15;
+  --md3-surface-container: #14111a;
+  --md3-surface-container-high: #1b1821;
+  --md3-surface-container-highest: #24202b;
+  --md3-surface-variant: #24202b;
+  --md3-on-surface-variant: #aaa6bb;
+  --hsl-background: 262 24% 5%;
+  --hsl-card: 262 19% 11%;
+  --hsl-popover: 260 16% 13%;
+  --hsl-secondary: 262 15% 18%;
+  --hsl-muted: 262 17% 15%;
+  --hsl-muted-foreground: 255 12% 62%;
+  --hsl-accent: 262 15% 20%;
+  --hsl-border: 262 12% 28%;
+  --hsl-input: 260 14% 16%;
+  --sidebar-background: 264 26% 4%;
+  --sidebar-accent: 262 16% 16%;
+  --sidebar-border: 262 12% 13%;
+  --depth-1: #0e0b13;
+  --depth-2: #16131c;
+  --depth-3: #201c28;
+  --depth-4: #2a2533;
+  --bg-elevated: hsl(262 17% 15%);
+  --bg-section: hsl(262 22% 7%);
+  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent),
+    radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
+    linear-gradient(180deg, var(--depth-1), #0d0a12 100%);
+  --border-subtle: rgba(120, 108, 158, 0.1);
+  --border-default: rgba(120, 108, 158, 0.18);
+  --border-hover: rgba(120, 108, 158, 0.28);
+}
 .sandbox-tree-surface {
   --trees-bg-override: var(--md3-surface-container-lowest);
   --trees-bg-muted-override: var(--md3-surface-container-low);

package/dist/styles.css

@@ -5333,15 +5333,15 @@
 [data-sandbox-ui],
 [data-theme="dark"],
 .dark {
-  --md3-surface: #16161f;
-  --md3-surface-dim: #111119;
-  --md3-surface-bright: #2a2940;
-  --md3-surface-container-lowest: #101017;
-  --md3-surface-container-low: #16161f;
-  --md3-surface-container: #1c1b27;
-  --md3-surface-container-high: #232231;
-  --md3-surface-container-highest: #2c2b3d;
-  --md3-surface-variant: #2c2b3d;
+  --md3-surface: #0a0a14;
+  --md3-surface-dim: #060610;
+  --md3-surface-bright: #232238;
+  --md3-surface-container-lowest: #050509;
+  --md3-surface-container-low: #12111f;
+  --md3-surface-container: #191826;
+  --md3-surface-container-high: #221f33;
+  --md3-surface-container-highest: #2c2942;
+  --md3-surface-variant: #2c2942;
   --md3-on-surface: #fdfdfd;
   --md3-on-surface-variant: #aaa8b8;
   --md3-primary: #818CF8;
@@ -5358,7 +5358,7 @@
   --md3-on-secondary-container: #E8E5FF;
   --md3-tertiary: #10B981;
   --md3-outline: #4a4965;
-  --md3-outline-variant: #34324a;
+  --md3-outline-variant: #2a293d;
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
   --md3-error-container: #82042b;
@@ -5368,24 +5368,24 @@
   --md3-inverse-primary: #4F46E5;
   --md3-inverse-on-surface: #000000;
   --md3-surface-tint: #818CF8;
-  --hsl-background: 240 7% 9%;
+  --hsl-background: 240 33% 6%;
   --hsl-foreground: 240 6% 93%;
-  --hsl-card: 240 5% 13%;
+  --hsl-card: 244 23% 12%;
   --hsl-card-foreground: 240 6% 93%;
-  --hsl-popover: 240 5% 17%;
+  --hsl-popover: 247 23% 21%;
   --hsl-popover-foreground: 240 6% 93%;
   --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 5% 15%;
+  --hsl-secondary: 249 24% 16%;
   --hsl-secondary-foreground: 240 6% 93%;
-  --hsl-muted: 240 5% 15%;
-  --hsl-muted-foreground: 240 4% 64%;
-  --hsl-accent: 240 5% 15%;
+  --hsl-muted: 249 24% 16%;
+  --hsl-muted-foreground: 240 5% 68%;
+  --hsl-accent: 249 24% 16%;
   --hsl-accent-foreground: 240 6% 93%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 5% 16%;
-  --hsl-input: 240 5% 15%;
+  --hsl-border: 243 19.6% 20%;
+  --hsl-input: 244 29% 9%;
   --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -5413,18 +5413,18 @@
   --warning: var(--hsl-warning);
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
-  --sidebar-background: 240 6% 11%;
+  --sidebar-background: 244 29% 9%;
   --sidebar-foreground: 240 6% 93%;
   --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 5% 15%;
+  --sidebar-accent: 249 24% 16%;
   --sidebar-accent-foreground: 240 6% 93%;
-  --sidebar-border: 240 5% 16%;
+  --sidebar-border: 243 19.6% 20%;
   --sidebar-ring: 239 84% 67%;
-  --depth-1: #15151a;
-  --depth-2: #1f1f23;
-  --depth-3: #26262b;
-  --depth-4: #2e2e34;
+  --depth-1: #0a0a14;
+  --depth-2: #191826;
+  --depth-3: #221f33;
+  --depth-4: #2c2942;
   --status-running: #10B981;
   --status-creating: #9B93F0;
   --status-stopped: #FFB800;
@@ -5470,12 +5470,12 @@
   --accent-surface-soft: rgba(255, 255, 255, 0.04);
   --accent-surface-strong: rgba(129, 140, 248, 0.14);
   --accent-text: #b9bffb;
-  --bg-root: #15151a;
+  --bg-root: #0a0a14;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
   --bg-section: var(--depth-1);
-  --bg-input: var(--depth-3);
+  --bg-input: hsl(var(--hsl-input));
   --bg-hover: rgba(255, 255, 255, 0.04);
   --bg-selection: rgba(129, 140, 248, 0.14);
   --text-primary: #ececee;
@@ -5578,15 +5578,15 @@
 [data-sandbox-theme="vault"],
 [data-theme="light"],
 .light {
-  --md3-surface: #f8f9fb;
-  --md3-surface-dim: #d9dae0;
-  --md3-surface-bright: #f8f9fb;
+  --md3-surface: #eceef3;
+  --md3-surface-dim: #dcdee6;
+  --md3-surface-bright: #ffffff;
   --md3-surface-container-lowest: #ffffff;
-  --md3-surface-container-low: #f3f4f7;
-  --md3-surface-container: #edeef2;
-  --md3-surface-container-high: #e7e8ed;
-  --md3-surface-container-highest: #e1e2e8;
-  --md3-surface-variant: #e1e2e8;
+  --md3-surface-container-low: #f6f7fa;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #f1f2f7;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #f1f2f7;
   --md3-on-surface: #191c24;
   --md3-on-surface-variant: #464858;
   --md3-primary: #3E349E;
@@ -5614,32 +5614,32 @@
   --md3-inverse-primary: #A5AAFC;
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
-  --hsl-background: 0 0% 100%;
+  --hsl-background: 223 23% 94%;
   --hsl-foreground: 0 0% 5%;
-  --hsl-card: 240 7% 97%;
+  --hsl-card: 0 0% 100%;
   --hsl-card-foreground: 0 0% 5%;
   --hsl-popover: 0 0% 100%;
   --hsl-popover-foreground: 0 0% 5%;
   --hsl-primary: 245 62% 57%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 6% 93%;
+  --hsl-secondary: 230 27% 96%;
   --hsl-secondary-foreground: 0 0% 10%;
-  --hsl-muted: 240 6% 93%;
+  --hsl-muted: 230 27% 96%;
   --hsl-muted-foreground: 240 5% 38%;
-  --hsl-accent: 240 6% 93%;
+  --hsl-accent: 230 27% 96%;
   --hsl-accent-foreground: 0 0% 10%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 6% 89%;
-  --hsl-input: 240 6% 89%;
+  --hsl-border: 244 16.3% 80.8%;
+  --hsl-input: 225 29% 97%;
   --hsl-ring: 245 62% 57%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
-  --depth-1: #ffffff;
-  --depth-2: #f7f7f8;
-  --depth-3: #ececee;
-  --depth-4: #e3e3e6;
+  --depth-1: #eceef3;
+  --depth-2: #ffffff;
+  --depth-3: #f1f2f7;
+  --depth-4: #ffffff;
   --status-running: #059669;
   --status-creating: #3E349E;
   --status-stopped: #B45309;
@@ -5675,23 +5675,23 @@
   --surface-neutral-bg: var(--depth-3);
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
-  --sidebar-background: 240 7% 97%;
+  --sidebar-background: 0 0% 100%;
   --sidebar-foreground: 0 0% 5%;
   --sidebar-primary: 245 62% 57%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 6% 93%;
+  --sidebar-accent: 230 27% 96%;
   --sidebar-accent-foreground: 0 0% 10%;
-  --sidebar-border: 240 6% 89%;
+  --sidebar-border: 244 16.3% 80.8%;
   --sidebar-ring: 245 62% 57%;
   --mesh-teal: transparent;
   --mesh-violet: transparent;
   --mesh-blue: transparent;
-  --bg-root: #ffffff;
-  --bg-dark: #f7f7f8;
-  --bg-card: #f7f7f8;
-  --bg-elevated: #ffffff;
-  --bg-section: #f7f7f8;
-  --bg-input: #ececee;
+  --bg-root: #eceef3;
+  --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));
   --bg-hover: rgba(0, 0, 0, 0.04);
   --bg-selection: rgba(91, 78, 212, 0.10);
   --text-primary: #0d0d0d;
@@ -5747,6 +5747,305 @@
   --radius-full: 999px;
   --radius-composer: 26px;
 }
+[data-theme] {
+  --color-background: hsl(var(--hsl-background));
+  --color-foreground: hsl(var(--hsl-foreground));
+  --color-card: hsl(var(--hsl-card));
+  --color-card-foreground: hsl(var(--hsl-card-foreground));
+  --color-popover: hsl(var(--hsl-popover));
+  --color-popover-foreground: hsl(var(--hsl-popover-foreground));
+  --color-primary: hsl(var(--hsl-primary));
+  --color-primary-foreground: hsl(var(--hsl-primary-foreground));
+  --color-secondary: hsl(var(--hsl-secondary));
+  --color-secondary-foreground: hsl(var(--hsl-secondary-foreground));
+  --color-muted: hsl(var(--hsl-muted));
+  --color-muted-foreground: hsl(var(--hsl-muted-foreground));
+  --color-accent: hsl(var(--hsl-accent));
+  --color-accent-foreground: hsl(var(--hsl-accent-foreground));
+  --color-destructive: hsl(var(--hsl-destructive));
+  --color-destructive-foreground: hsl(var(--hsl-destructive-foreground));
+  --color-border: hsl(var(--hsl-border));
+  --color-input: hsl(var(--hsl-muted-foreground));
+  --color-ring: hsl(var(--hsl-ring));
+  --color-surface-container-lowest: var(--md3-surface-container-lowest);
+  --color-surface-container-low: var(--md3-surface-container-low);
+  --color-surface-container: var(--md3-surface-container);
+  --color-surface-container-high: var(--md3-surface-container-high);
+  --color-surface-container-highest: var(--md3-surface-container-highest);
+  --color-fg: var(--text-primary);
+  --color-fg-muted: var(--text-muted);
+  --color-fg-dim: var(--text-dim);
+}
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"] {
+  --surface-success-bg: #ecfdf5;
+  --surface-success-border: #a7f3d0;
+  --surface-success-text: #047857;
+  --surface-warning-bg: #fffbeb;
+  --surface-warning-border: #fde68a;
+  --surface-warning-text: #b45309;
+  --surface-danger-bg: #fff1f2;
+  --surface-danger-border: #fecdd3;
+  --surface-danger-text: #b91c1c;
+  --surface-info-bg: #f0f9ff;
+  --surface-info-border: #bae6fd;
+  --surface-info-text: #0369a1;
+  --hsl-destructive: 0 72% 41%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-secondary-foreground: 0 0% 10%;
+  --surface-neutral-text: #4b5563;
+}
+[data-theme="light"],
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"] {
+  --syntax-foreground: #24292f;
+  --syntax-comment: #57606a;
+  --syntax-keyword: #6d28d9;
+  --syntax-string: #047857;
+  --syntax-function: #1d4ed8;
+  --syntax-number: #92400e;
+  --syntax-meta: #7c3aed;
+  --syntax-variable: #24292f;
+  --syntax-error: #b91c1c;
+}
+[data-theme="aubergine"] {
+  --hsl-background: 258 44% 12%;
+  --hsl-foreground: 258 50% 97%;
+  --hsl-card: 258 40% 20%;
+  --hsl-card-foreground: 258 50% 97%;
+  --hsl-popover: 258 40% 24%;
+  --hsl-popover-foreground: 258 50% 97%;
+  --hsl-primary: 250 100% 76%;
+  --hsl-primary-foreground: 258 45% 10%;
+  --hsl-secondary: 258 38% 17%;
+  --hsl-muted: 258 38% 17%;
+  --hsl-muted-foreground: 258 26% 70%;
+  --hsl-accent: 258 40% 24%;
+  --hsl-border: 258 32% 30%;
+  --hsl-input: 258 38% 17%;
+  --hsl-ring: 250 100% 76%;
+  --depth-1: #1a1230;
+  --depth-2: #241a42;
+  --depth-3: #2f2253;
+  --depth-4: #3d2d68;
+  --bg-root: #1a1230;
+  --bg-card: var(--depth-3);
+  --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #150e28;
+  --md3-surface-container-low: #241a42;
+  --md3-surface-container: #2a1f4c;
+  --md3-surface-container-high: #2f2253;
+  --md3-surface-container-highest: #3d2d68;
+  --md3-outline-variant: #463571;
+  --border-subtle: rgba(183,157,255,0.12);
+  --border-default: rgba(183,157,255,0.22);
+  --border-hover: rgba(183,157,255,0.40);
+  --accent-text: #c4b0ff;
+  --brand-primary: #8f8bff;
+  --brand-glow: #c4b0ff;
+  --text-primary: #f4f1fd;
+  --text-secondary: #cec4e8;
+  --text-muted: #a99fc8;
+  --text-dim: #786d99;
+}
+[data-theme="aubergine-light"] {
+  --hsl-background: 258 60% 96%;
+  --hsl-foreground: 258 45% 11%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 258 45% 11%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 258 45% 11%;
+  --hsl-primary: 258 70% 50%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 258 45% 92%;
+  --hsl-muted: 258 45% 92%;
+  --hsl-muted-foreground: 258 18% 42%;
+  --hsl-accent: 258 45% 92%;
+  --hsl-border: 258 30% 88%;
+  --hsl-input: 258 30% 88%;
+  --hsl-ring: 258 70% 50%;
+  --depth-1: #f4f1fc;
+  --depth-2: #ece6f8;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f4f1fc;
+  --bg-card: #ffffff;
+  --bg-input: #ece6f8;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #faf8fe;
+  --md3-surface-container: #f4f1fc;
+  --md3-surface-container-high: #ece6f8;
+  --md3-surface-container-highest: #e4dcf4;
+  --md3-outline-variant: #e0d8f0;
+  --border-subtle: rgba(60,32,110,0.10);
+  --border-default: rgba(60,32,110,0.16);
+  --border-hover: rgba(60,32,110,0.30);
+  --accent-text: #6d28d9;
+  --brand-primary: #6d28d9;
+  --brand-glow: #8b5cf6;
+  --text-primary: #160f22;
+  --text-secondary: #3f3460;
+  --text-muted: #6c6289;
+  --text-dim: #8a82a6;
+}
+[data-theme="arena"] {
+  --hsl-background: 160 16% 6%;
+  --hsl-foreground: 150 20% 96%;
+  --hsl-card: 158 14% 12%;
+  --hsl-card-foreground: 150 20% 96%;
+  --hsl-popover: 158 13% 16%;
+  --hsl-popover-foreground: 150 20% 96%;
+  --hsl-primary: 160 84% 39%;
+  --hsl-primary-foreground: 160 60% 8%;
+  --hsl-secondary: 158 12% 12%;
+  --hsl-muted: 158 12% 12%;
+  --hsl-muted-foreground: 152 12% 62%;
+  --hsl-accent: 158 14% 14%;
+  --hsl-border: 158 14% 18%;
+  --hsl-input: 158 12% 12%;
+  --hsl-ring: 160 84% 45%;
+  --depth-1: #0a0f0c;
+  --depth-2: #131b16;
+  --depth-3: #1b261f;
+  --depth-4: #233328;
+  --bg-root: #0a0f0c;
+  --bg-card: var(--depth-3);
+  --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #070b08;
+  --md3-surface-container-low: #131b16;
+  --md3-surface-container: #182019;
+  --md3-surface-container-high: #1b261f;
+  --md3-surface-container-highest: #233328;
+  --md3-outline-variant: #2a3a31;
+  --border-subtle: rgba(52,211,153,0.10);
+  --border-default: rgba(52,211,153,0.18);
+  --border-hover: rgba(52,211,153,0.32);
+  --accent-text: #34d399;
+  --brand-primary: #10b981;
+  --brand-glow: #34d399;
+  --text-primary: #ecfdf5;
+  --text-secondary: #c2e8d6;
+  --text-muted: #8fb6a3;
+  --text-dim: #5f8472;
+}
+[data-theme="arena-light"] {
+  --hsl-background: 150 30% 96%;
+  --hsl-foreground: 158 30% 10%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 158 30% 10%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 158 30% 10%;
+  --hsl-primary: 160 84% 27%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 150 25% 92%;
+  --hsl-muted: 150 25% 92%;
+  --hsl-muted-foreground: 158 14% 40%;
+  --hsl-accent: 150 25% 92%;
+  --hsl-border: 150 20% 86%;
+  --hsl-input: 150 20% 86%;
+  --hsl-ring: 160 84% 30%;
+  --depth-1: #f0f6f2;
+  --depth-2: #e6f0ea;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f0f6f2;
+  --bg-card: #ffffff;
+  --bg-input: #e6f0ea;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f6fbf8;
+  --md3-surface-container: #f0f6f2;
+  --md3-surface-container-high: #e6f0ea;
+  --md3-surface-container-highest: #dcebe2;
+  --md3-outline-variant: #d7e8de;
+  --border-subtle: rgba(6,95,70,0.10);
+  --border-default: rgba(6,95,70,0.16);
+  --border-hover: rgba(6,95,70,0.30);
+  --accent-text: #047857;
+  --brand-primary: #059669;
+  --brand-glow: #10b981;
+  --text-primary: #06231a;
+  --text-secondary: #285048;
+  --text-muted: #5f8472;
+  --text-dim: #82a699;
+}
+[data-theme="tangle-light"] {
+  --hsl-background: 240 33% 98%;
+  --hsl-foreground: 245 32% 14%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 245 32% 14%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 245 32% 14%;
+  --hsl-primary: 239 84% 60%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 240 30% 95%;
+  --hsl-muted: 240 28% 95%;
+  --hsl-muted-foreground: 240 8% 42%;
+  --hsl-accent: 240 30% 95%;
+  --hsl-border: 240 20% 90%;
+  --hsl-input: 240 20% 90%;
+  --hsl-ring: 239 84% 60%;
+  --depth-1: #f4f4f9;
+  --depth-2: #edecf4;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f4f4f9;
+  --bg-card: #ffffff;
+  --bg-input: #edecf4;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f8f8fc;
+  --md3-surface-container: #f4f4f9;
+  --md3-surface-container-high: #edecf4;
+  --md3-surface-container-highest: #e5e4ee;
+  --md3-outline-variant: #e2e1ec;
+  --border-subtle: rgba(20,20,40,0.08);
+  --border-default: rgba(20,20,40,0.14);
+  --border-hover: rgba(20,20,40,0.26);
+  --accent-text: #4f46e5;
+  --brand-primary: #6366f1;
+  --brand-glow: #818cf8;
+  --text-primary: #15131f;
+  --text-secondary: #3f3a52;
+  --text-muted: #6a6680;
+  --text-dim: #9490a6;
+}
+.dark[data-theme="intelligence"] {
+  --md3-surface: #0d0a10;
+  --md3-surface-dim: #0a080d;
+  --md3-surface-bright: #2e2936;
+  --md3-surface-container-lowest: #070509;
+  --md3-surface-container-low: #100d15;
+  --md3-surface-container: #14111a;
+  --md3-surface-container-high: #1b1821;
+  --md3-surface-container-highest: #24202b;
+  --md3-surface-variant: #24202b;
+  --md3-on-surface-variant: #aaa6bb;
+  --hsl-background: 262 24% 5%;
+  --hsl-card: 262 19% 11%;
+  --hsl-popover: 260 16% 13%;
+  --hsl-secondary: 262 15% 18%;
+  --hsl-muted: 262 17% 15%;
+  --hsl-muted-foreground: 255 12% 62%;
+  --hsl-accent: 262 15% 20%;
+  --hsl-border: 262 12% 28%;
+  --hsl-input: 260 14% 16%;
+  --sidebar-background: 264 26% 4%;
+  --sidebar-accent: 262 16% 16%;
+  --sidebar-border: 262 12% 13%;
+  --depth-1: #0e0b13;
+  --depth-2: #16131c;
+  --depth-3: #201c28;
+  --depth-4: #2a2533;
+  --bg-elevated: hsl(262 17% 15%);
+  --bg-section: hsl(262 22% 7%);
+  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent),
+    radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
+    linear-gradient(180deg, var(--depth-1), #0d0a12 100%);
+  --border-subtle: rgba(120, 108, 158, 0.1);
+  --border-default: rgba(120, 108, 158, 0.18);
+  --border-hover: rgba(120, 108, 158, 0.28);
+}
 .sandbox-tree-surface {
   --trees-bg-override: var(--md3-surface-container-lowest);
   --trees-bg-muted-override: var(--md3-surface-container-low);

package/dist/tokens.css

@@ -1,5 +1,14 @@
-/* Tangle Sandbox UI design tokens */
-/* Brand: warm purple palette, #5B4ED4 primary */
+/* Tangle design tokens — the single palette every Tangle surface renders from.
+ *
+ * The surface ladder carries an indigo cast and steps in even ~4-5% lightness
+ * increments, so a card, a nested panel and an overlay each read as a distinct
+ * plane by their own fill. A flat, desaturated ladder forces separation onto
+ * borders instead, which is what makes an app read as grey and washed out.
+ * Light mirrors it: white paper on a tinted canvas, never white-on-white.
+ *
+ * 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. */
 
 /* MD3 surface hierarchy */
 /* Dark is the default theme (`:root`/`[data-sandbox-ui]`). It also responds to
@@ -9,15 +18,15 @@
 [data-sandbox-ui],
 [data-theme="dark"],
 .dark {
-  --md3-surface: #16161f;
-  --md3-surface-dim: #111119;
-  --md3-surface-bright: #2a2940;
-  --md3-surface-container-lowest: #101017;
-  --md3-surface-container-low: #16161f;
-  --md3-surface-container: #1c1b27;
-  --md3-surface-container-high: #232231;
-  --md3-surface-container-highest: #2c2b3d;
-  --md3-surface-variant: #2c2b3d;
+  --md3-surface: #0a0a14;                   /* L0 page canvas */
+  --md3-surface-dim: #060610;               /* recessed page */
+  --md3-surface-bright: #232238;
+  --md3-surface-container-lowest: #050509;  /* L-1 terminal/code well */
+  --md3-surface-container-low: #12111f;     /* L1 chrome, field wells */
+  --md3-surface-container: #191826;         /* L2 resting card */
+  --md3-surface-container-high: #221f33;    /* L3 nested / hover */
+  --md3-surface-container-highest: #2c2942; /* L4 overlay */
+  --md3-surface-variant: #2c2942;
   --md3-on-surface: #fdfdfd;
   --md3-on-surface-variant: #aaa8b8;
 
@@ -37,7 +46,7 @@
 
   --md3-tertiary: #10B981;
   --md3-outline: #4a4965;
-  --md3-outline-variant: #34324a;
+  --md3-outline-variant: #2a293d;
 
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
@@ -50,25 +59,27 @@
   --md3-inverse-on-surface: #000000;
   --md3-surface-tint: #818CF8;
 
-  /* Semantic HSL bridge — flat neutral spine (Tangle Quiet) */
-  --hsl-background: 240 7% 9%;     /* #15151a canvas — lifted off pure black */
+  /* Semantic HSL bridge — the indigo-cast surface ladder */
+  --hsl-background: 240 33% 6%;     /* L0 canvas #0a0a14 */
   --hsl-foreground: 240 6% 93%;    /* #ececee */
-  --hsl-card: 240 5% 13%;          /* #1f1f23 surface, clearly above canvas */
+  --hsl-card: 244 23% 12%;          /* L2 card #191826 */
   --hsl-card-foreground: 240 6% 93%;
-  --hsl-popover: 240 5% 17%;       /* #28282d elevated */
+  --hsl-popover: 247 23% 21%;       /* L4 overlay #2c2942 */
   --hsl-popover-foreground: 240 6% 93%;
   --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 5% 15%;     /* #242428 surface-2 */
+  --hsl-secondary: 249 24% 16%;     /* L3 #221f33 */
   --hsl-secondary-foreground: 240 6% 93%;
-  --hsl-muted: 240 5% 15%;         /* #242428 — neutral hover well */
-  --hsl-muted-foreground: 240 4% 64%;  /* #9c9ca6 text-muted */
-  --hsl-accent: 240 5% 15%;        /* neutral hover (indigo lives in accent-surface-strong) */
+  --hsl-muted: 249 24% 16%;         /* L3 hover well */
+  --hsl-muted-foreground: 240 5% 68%;  /* #a9a9b1 — high enough that the
+     reduced-opacity caption derivatives (/70, /60) still clear the large-text
+     contrast floor against the L2 card. */
+  --hsl-accent: 249 24% 16%;        /* neutral hover (indigo lives in accent-surface-strong) */
   --hsl-accent-foreground: 240 6% 93%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 5% 16%;        /* soft edge — fill carries separation, not the line */
-  --hsl-input: 240 5% 15%;
+  --hsl-border: 243 19.6% 20%;      /* #2a293d = --md3-outline-variant */
+  --hsl-input: 244 29% 9%;          /* recessed field well #12111f */
   --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -92,6 +103,11 @@
   --destructive: var(--hsl-destructive);
   --destructive-foreground: var(--hsl-destructive-foreground);
   --border: var(--hsl-border);
+  /* shadcn's `--input` is the input BORDER and the Switch's off-track — a
+   * mid-tone that has to stay visible AGAINST a surface. It is deliberately NOT
+   * the field fill: pointing it at the recessed well would tint a border and a
+   * track the same color as the plane behind them, and both would vanish. The
+   * field fill is --hsl-input / --bg-input below. */
   --input: var(--hsl-muted-foreground);
   --ring: var(--hsl-ring);
   --success: var(--hsl-success);
@@ -99,21 +115,22 @@
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
 
-  /* Sidebar tokens — flat surface + hairline */
-  --sidebar-background: 240 6% 11%;  /* #1a1a1f surface */
+  /* Sidebar tokens — L1 chrome: one step ABOVE the canvas in lightness, so the
+   * panel reads as its own plane rather than a hole in the page. */
+  --sidebar-background: 244 29% 9%;  /* L1 chrome #12111f */
   --sidebar-foreground: 240 6% 93%;
   --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 5% 15%;      /* neutral hover */
+  --sidebar-accent: 249 24% 16%;     /* L3 hover well */
   --sidebar-accent-foreground: 240 6% 93%;
-  --sidebar-border: 240 5% 16%;      /* soft edge */
+  --sidebar-border: 243 19.6% 20%;   /* = --md3-outline-variant */
   --sidebar-ring: 239 84% 67%;
 
-  /* Depth scale — flat neutral spine (Tangle Quiet) */
-  --depth-1: #15151a;
-  --depth-2: #1f1f23;
-  --depth-3: #26262b;
-  --depth-4: #2e2e34;
+  /* Depth scale — tracks the MD3 ladder (canvas / card / nested / overlay) */
+  --depth-1: #0a0a14;
+  --depth-2: #191826;
+  --depth-3: #221f33;
+  --depth-4: #2c2942;
 
   /* Status colors */
   --status-running: #10B981;
@@ -157,7 +174,7 @@
   --glass-border-hover: var(--border-default);
   --glass-blur: 0px;
 
-  /* Mesh glows — quieted to off; chrome is flat in Tangle Quiet */
+  /* Mesh glows — off; depth comes from the ladder, not from glow */
   --mesh-teal: transparent;
   --mesh-violet: transparent;
   --mesh-blue: transparent;
@@ -171,13 +188,13 @@
   --accent-surface-strong: rgba(129, 140, 248, 0.14);
   --accent-text: #b9bffb;
 
-  /* Surfaces — flat single-neutral (no radial mesh) */
-  --bg-root: #15151a;
+  /* Surfaces — solid fills off the ladder (no radial mesh) */
+  --bg-root: #0a0a14;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
   --bg-section: var(--depth-1);
-  --bg-input: var(--depth-3);
+  --bg-input: hsl(var(--hsl-input));  /* the field well — same color, hex-free */
   --bg-hover: rgba(255, 255, 255, 0.04);
   --bg-selection: rgba(129, 140, 248, 0.14);
 
@@ -319,15 +336,21 @@
   /* Light theme — clean professional, warm purple accents */
 
   /* MD3 surface hierarchy */
-  --md3-surface: #f8f9fb;
-  --md3-surface-dim: #d9dae0;
-  --md3-surface-bright: #f8f9fb;
-  --md3-surface-container-lowest: #ffffff;
-  --md3-surface-container-low: #f3f4f7;
-  --md3-surface-container: #edeef2;
-  --md3-surface-container-high: #e7e8ed;
-  --md3-surface-container-highest: #e1e2e8;
-  --md3-surface-variant: #e1e2e8;
+  /* The light ladder ALTERNATES; it is not monotonic, and that is deliberate.
+   * On a tinted canvas, a raised plane is PAPER (white) and a recessed one is a
+   * tinted WELL. So card and overlay are both white and separate from each other
+   * by shadow and ring, not by fill — which is how light-mode elevation actually
+   * reads. Forcing a strictly-darkening ladder here is what produced the
+   * white-on-white flatness this palette replaced. Pinned in tokens.test.ts. */
+  --md3-surface: #eceef3;                   /* L0 page canvas — tinted */
+  --md3-surface-dim: #dcdee6;
+  --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff;  /* insets read as paper */
+  --md3-surface-container-low: #f6f7fa;     /* L1 chrome, field wells — well */
+  --md3-surface-container: #ffffff;         /* L2 resting card — paper */
+  --md3-surface-container-high: #f1f2f7;    /* L3 nested / hover — well */
+  --md3-surface-container-highest: #ffffff; /* L4 overlay — paper + shadow */
+  --md3-surface-variant: #f1f2f7;
   --md3-on-surface: #191c24;
   --md3-on-surface-variant: #464858;
 
@@ -361,34 +384,37 @@
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
 
-  /* Semantic HSL bridge — flat neutral light (Tangle Quiet) */
-  --hsl-background: 0 0% 100%;      /* #ffffff */
+  /* Semantic HSL bridge — white paper on a tinted canvas */
+  --hsl-background: 223 23% 94%;    /* L0 canvas #eceef3 */
   --hsl-foreground: 0 0% 5%;        /* #0d0d0d */
-  --hsl-card: 240 7% 97%;           /* #f7f7f8 surface */
+  --hsl-card: 0 0% 100%;            /* L2 card = white paper */
   --hsl-card-foreground: 0 0% 5%;
   --hsl-popover: 0 0% 100%;
   --hsl-popover-foreground: 0 0% 5%;
   --hsl-primary: 245 62% 57%;       /* #5B4ED4 light accent */
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 6% 93%;      /* #ececee surface-2 */
+  --hsl-secondary: 230 27% 96%;     /* L3 #f1f2f7 */
   --hsl-secondary-foreground: 0 0% 10%;
-  --hsl-muted: 240 6% 93%;          /* #ececee neutral hover */
+  --hsl-muted: 230 27% 96%;         /* L3 hover well */
   --hsl-muted-foreground: 240 5% 38%;  /* #5d5d66 text-muted */
-  --hsl-accent: 240 6% 93%;         /* neutral hover */
+  --hsl-accent: 230 27% 96%;        /* neutral hover */
   --hsl-accent-foreground: 0 0% 10%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 6% 89%;         /* hairline ≈ rgba(0,0,0,0.08) */
-  --hsl-input: 240 6% 89%;
+  --hsl-border: 244 16.3% 80.8%;    /* #c7c6d6 = --md3-outline-variant */
+  --hsl-input: 225 29% 97%;         /* field well #f6f7fa */
   --hsl-ring: 245 62% 57%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
 
-  --depth-1: #ffffff;
-  --depth-2: #f7f7f8;
-  --depth-3: #ececee;
-  --depth-4: #e3e3e6;
+  /* depth-2 (card) and depth-4 (elevated) are BOTH paper, on purpose: in light,
+   * a popover does not out-lighten a white card — it lifts by shadow. See the
+   * ladder note above. */
+  --depth-1: #eceef3;  /* canvas */
+  --depth-2: #ffffff;  /* card — paper */
+  --depth-3: #f1f2f7;  /* nested well */
+  --depth-4: #ffffff;  /* elevated — paper, separated by shadow */
 
   --status-running: #059669;
   --status-creating: #3E349E;
@@ -430,13 +456,13 @@
   --surface-neutral-text: var(--text-muted);
 
   /* Sidebar — light, flat surface + hairline */
-  --sidebar-background: 240 7% 97%;   /* #f7f7f8 surface */
+  --sidebar-background: 0 0% 100%;     /* white paper */
   --sidebar-foreground: 0 0% 5%;
   --sidebar-primary: 245 62% 57%;     /* #5B4ED4 */
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 6% 93%;       /* neutral hover */
+  --sidebar-accent: 230 27% 96%;       /* L3 hover well */
   --sidebar-accent-foreground: 0 0% 10%;
-  --sidebar-border: 240 6% 89%;       /* hairline */
+  --sidebar-border: 244 16.3% 80.8%;   /* = --md3-outline-variant */
   --sidebar-ring: 245 62% 57%;
 
   --mesh-teal: transparent;
@@ -444,12 +470,17 @@
   --mesh-blue: transparent;
 
   /* Surfaces — flat single-neutral light */
-  --bg-root: #ffffff;
-  --bg-dark: #f7f7f8;
-  --bg-card: #f7f7f8;
-  --bg-elevated: #ffffff;
-  --bg-section: #f7f7f8;
-  --bg-input: #ececee;
+  --bg-root: #eceef3;
+  --bg-dark: var(--depth-1);
+  --bg-card: var(--depth-2);
+  /* Paper, exactly like --bg-card: in light you cannot raise a plane by making it
+   * lighter than white, so an overlay lifts by SHADOW. A consumer that fills with
+   * --bg-elevated and applies no shadow gets no separation from a card — that is
+   * the contract, not an oversight (--hsl-popover is white for the same reason).
+   * Pair it with --shadow-dropdown. */
+  --bg-elevated: var(--depth-4);
+  --bg-section: var(--depth-1);
+  --bg-input: hsl(var(--hsl-input));  /* the field well — same color, hex-free */
   --bg-hover: rgba(0, 0, 0, 0.04);
   --bg-selection: rgba(91, 78, 212, 0.10);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.77.0",
+  "version": "0.79.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -123,7 +123,7 @@
   },
   "peerDependencies": {
     "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
-    "@tangle-network/brand": "^1.0.0",
+    "@tangle-network/brand": "^1.1.0",
     "@tangle-network/ui": "^11.0.0",
     "@xyflow/react": "^12.0.0",
     "react": "^18 || ^19",
@@ -178,7 +178,7 @@
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
     "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
-    "@tangle-network/brand": "^1.0.0",
+    "@tangle-network/brand": "^1.1.0",
     "@tangle-network/ui": "^11.0.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",