@tangle-network/sandbox-ui 0.125.0 → 0.125.2

package/dist/globals.css

@@ -2564,9 +2564,6 @@
   .bg-\[var\(--surface-success-text\)\] {
     background-color: var(--surface-success-text);
   }
-  .bg-\[var\(--surface-violet-bg\)\] {
-    background-color: var(--surface-violet-bg);
-  }
   .bg-\[var\(--surface-warning-bg\)\] {
     background-color: var(--surface-warning-bg);
   }
@@ -2888,12 +2885,6 @@
       background-color: color-mix(in oklab, var(--color-violet-500) 8%, transparent);
     }
   }
-  .bg-violet-500\/20 {
-    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
-    }
-  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -5751,7 +5742,7 @@
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
 }
-:root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], .light, .dark {
+:root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
   color-scheme: dark;
   --md3-surface: #161616;
   --md3-surface-dim: #101010;
@@ -6079,7 +6070,7 @@
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="tangle-light"], .light {
+[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"], .light {
   color-scheme: light;
   --code-header-bg: hsl(var(--hsl-muted));
   @supports (color: color-mix(in lab, red, red)) {
@@ -6351,7 +6342,7 @@
   --chart-tier-a: #8b87f0;
   --chart-tier-s: #b1a9ff;
 }
-[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
+[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
   --chart-accent: hsl(var(--hsl-primary));
   --chart-tier-c: #9b9ef0;
   --chart-tier-b: #7c7fe3;
@@ -6374,6 +6365,78 @@
     --motion-arrive: var(--duration-arrive) var(--ease-expo);
   }
 }
+[data-tone="violet"], [data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-violet-bg);
+  --tone-bg-hover: var(--tone-violet-bg-hover);
+  --tone-bg-selected: var(--tone-violet-bg-selected);
+  --tone-border: var(--tone-violet-border);
+  --tone-border-selected: var(--tone-violet-border-selected);
+  --tone-text: var(--tone-violet-text);
+  --tone-icon: var(--tone-violet-icon);
+}
+[data-tone="orange"], [data-tone="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-orange-bg);
+  --tone-bg-hover: var(--tone-orange-bg-hover);
+  --tone-bg-selected: var(--tone-orange-bg-selected);
+  --tone-border: var(--tone-orange-border);
+  --tone-border-selected: var(--tone-orange-border-selected);
+  --tone-text: var(--tone-orange-text);
+  --tone-icon: var(--tone-orange-icon);
+}
+[data-tone="teal"], [data-tone="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-teal-bg);
+  --tone-bg-hover: var(--tone-teal-bg-hover);
+  --tone-bg-selected: var(--tone-teal-bg-selected);
+  --tone-border: var(--tone-teal-border);
+  --tone-border-selected: var(--tone-teal-border-selected);
+  --tone-text: var(--tone-teal-text);
+  --tone-icon: var(--tone-teal-icon);
+}
+[data-tone="blue"], [data-tone="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-blue-bg);
+  --tone-bg-hover: var(--tone-blue-bg-hover);
+  --tone-bg-selected: var(--tone-blue-bg-selected);
+  --tone-border: var(--tone-blue-border);
+  --tone-border-selected: var(--tone-blue-border-selected);
+  --tone-text: var(--tone-blue-text);
+  --tone-icon: var(--tone-blue-icon);
+}
+[data-tone="pink"], [data-tone="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-pink-bg);
+  --tone-bg-hover: var(--tone-pink-bg-hover);
+  --tone-bg-selected: var(--tone-pink-bg-selected);
+  --tone-border: var(--tone-pink-border);
+  --tone-border-selected: var(--tone-pink-border-selected);
+  --tone-text: var(--tone-pink-text);
+  --tone-icon: var(--tone-pink-icon);
+}
+[data-tone="brown"], [data-tone="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-brown-bg);
+  --tone-bg-hover: var(--tone-brown-bg-hover);
+  --tone-bg-selected: var(--tone-brown-bg-selected);
+  --tone-border: var(--tone-brown-border);
+  --tone-border-selected: var(--tone-brown-border-selected);
+  --tone-text: var(--tone-brown-text);
+  --tone-icon: var(--tone-brown-icon);
+}
+[data-tone="cyan"], [data-tone="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-cyan-bg);
+  --tone-bg-hover: var(--tone-cyan-bg-hover);
+  --tone-bg-selected: var(--tone-cyan-bg-selected);
+  --tone-border: var(--tone-cyan-border);
+  --tone-border-selected: var(--tone-cyan-border-selected);
+  --tone-text: var(--tone-cyan-text);
+  --tone-icon: var(--tone-cyan-icon);
+}
+[data-tone="lime"], [data-tone="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-lime-bg);
+  --tone-bg-hover: var(--tone-lime-bg-hover);
+  --tone-bg-selected: var(--tone-lime-bg-selected);
+  --tone-border: var(--tone-lime-border);
+  --tone-border-selected: var(--tone-lime-border-selected);
+  --tone-text: var(--tone-lime-text);
+  --tone-icon: var(--tone-lime-icon);
+}
 :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
   --text-display: var(--font-size-display);
   --text-hero: var(--font-size-hero);
@@ -6412,7 +6475,7 @@
   --color-fg-muted: var(--text-muted);
   --color-fg-dim: var(--text-dim);
 }
-[data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="tangle-light"] {
+[data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"] {
   --hsl-secondary-foreground: 0 0% 10%;
   --surface-neutral-text: #4b5563;
 }
@@ -6453,8 +6516,14 @@
   --brand-glow: #c4b0ff;
   --text-primary: #f4f1fd;
   --text-secondary: #cec4e8;
-  --text-muted: #a99fc8;
-  --text-dim: #786d99;
+  --text-muted: #b7afd1;
+  --text-dim: #a59ebb;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest);
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="aubergine-light"] {
   --hsl-background: 258 60% 96%;
@@ -6493,8 +6562,14 @@
   --brand-glow: #8b5cf6;
   --text-primary: #160f22;
   --text-secondary: #3f3460;
-  --text-muted: #6c6289;
-  --text-dim: #8a82a6;
+  --text-muted: #585070;
+  --text-dim: #655d82;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff;
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="arena"] {
   --hsl-background: 160 16% 6%;
@@ -6534,7 +6609,13 @@
   --text-primary: #ecfdf5;
   --text-secondary: #c2e8d6;
   --text-muted: #8fb6a3;
-  --text-dim: #5f8472;
+  --text-dim: #7ba08e;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest);
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="arena-light"] {
   --hsl-background: 150 30% 96%;
@@ -6573,8 +6654,132 @@
   --brand-glow: #10b981;
   --text-primary: #06231a;
   --text-secondary: #285048;
-  --text-muted: #5f8472;
-  --text-dim: #82a699;
+  --text-muted: #455f52;
+  --text-dim: #4e6d62;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff;
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
+}
+[data-theme="super"] {
+  --hsl-background: 120 12% 8%;
+  --hsl-foreground: 86 20% 93%;
+  --hsl-card: 120 11% 12%;
+  --hsl-card-foreground: 86 20% 93%;
+  --hsl-popover: 120 10% 15%;
+  --hsl-popover-foreground: 86 20% 93%;
+  --hsl-primary: 139 31% 61%;
+  --hsl-primary-foreground: 140 35% 8%;
+  --hsl-secondary: 120 9% 17%;
+  --hsl-secondary-foreground: 86 20% 93%;
+  --hsl-muted: 120 9% 17%;
+  --hsl-muted-foreground: 95 10% 67%;
+  --hsl-accent: 120 10% 18%;
+  --hsl-accent-foreground: 86 20% 93%;
+  --hsl-border: 120 9% 25%;
+  --hsl-input: 120 9% 17%;
+  --hsl-ring: 139 31% 61%;
+  --depth-1: #121712;
+  --depth-2: #1c231c;
+  --depth-3: #232b23;
+  --depth-4: #2b342b;
+  --bg-root: #121712;
+  --bg-card: var(--depth-2);
+  --bg-input: var(--depth-3);
+  --md3-surface-container-lowest: #0d110d;
+  --md3-surface-container-low: #171d17;
+  --md3-surface-container: #1c231c;
+  --md3-surface-container-high: #232b23;
+  --md3-surface-container-highest: #2b342b;
+  --md3-outline-variant: #3a453a;
+  --border-subtle: rgba(190,210,180,0.12);
+  --border-default: rgba(190,210,180,0.20);
+  --border-hover: rgba(190,210,180,0.34);
+  --accent-text: #8fd0a4;
+  --brand-primary: #7dbb91;
+  --brand-glow: #8fd0a4;
+  --text-primary: #eef1ea;
+  --text-secondary: #cbd3c5;
+  --text-muted: #a9b3a2;
+  --text-dim: #959f8f;
+  --md3-primary: #8fd0a4;
+  --bg-hover: rgba(190,210,180,0.06);
+  --bg-selection: rgba(125,187,145,0.28);
+  --accent-surface-soft: rgba(125,187,145,0.08);
+  --accent-surface-strong: rgba(125,187,145,0.24);
+  --border-accent: rgba(125,187,145,0.38);
+  --border-accent-hover: rgba(125,187,145,0.56);
+  --btn-primary-bg: #7dbb91;
+  --btn-primary-hover: #8fcaa1;
+  --btn-primary-text: #0e1d13;
+  --btn-cta-bg: #7dbb91;
+  --btn-cta-text: #0e1d13;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest);
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
+}
+[data-theme="super-light"] {
+  --hsl-background: 75 22% 96%;
+  --hsl-foreground: 114 13% 15%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 114 13% 15%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 114 13% 15%;
+  --hsl-primary: 148 40% 25%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 80 18% 93%;
+  --hsl-muted: 80 18% 93%;
+  --hsl-muted-foreground: 99 9% 37%;
+  --hsl-accent: 80 18% 93%;
+  --hsl-border: 87 17% 87%;
+  --hsl-input: 92 14% 78%;
+  --hsl-ring: 144 31% 34%;
+  --depth-1: #f7f8f4;
+  --depth-2: #eff1eb;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f7f8f4;
+  --bg-card: #ffffff;
+  --bg-input: #eff1eb;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #fcfcf9;
+  --md3-surface-container: #f7f8f4;
+  --md3-surface-container-high: #eff1eb;
+  --md3-surface-container-highest: #e6eae1;
+  --md3-outline-variant: #dfe4d9;
+  --border-subtle: rgba(34,43,33,0.10);
+  --border-default: rgba(34,43,33,0.16);
+  --border-hover: rgba(34,43,33,0.30);
+  --accent-text: #275a3f;
+  --brand-primary: #275a3f;
+  --brand-glow: #3b7050;
+  --text-primary: #222b21;
+  --text-secondary: #46523f;
+  --text-muted: #5d6857;
+  --text-dim: #616c5a;
+  --md3-primary: #275a3f;
+  --bg-hover: rgba(34,43,33,0.04);
+  --bg-selection: rgba(39,90,63,0.16);
+  --accent-surface-soft: rgba(39,90,63,0.06);
+  --accent-surface-strong: rgba(39,90,63,0.14);
+  --border-accent: rgba(39,90,63,0.30);
+  --border-accent-hover: rgba(39,90,63,0.45);
+  --btn-primary-bg: #275a3f;
+  --btn-primary-hover: #1e4832;
+  --btn-primary-text: #ffffff;
+  --btn-cta-bg: #275a3f;
+  --btn-cta-text: #ffffff;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff;
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="tangle-dark"] {
   --hsl-background: 0 0% 8.6275%;
@@ -6657,8 +6862,8 @@
   --brand-glow: #818cf8;
   --text-primary: #15131f;
   --text-secondary: #3f3a52;
-  --text-muted: #6a6680;
-  --text-dim: #9490a6;
+  --text-muted: #59556b;
+  --text-dim: #67627b;
 }
 .dark[data-theme="intelligence"] {
   --md3-surface: #0d0a10;
@@ -6696,6 +6901,362 @@
   --border-default: rgba(120, 108, 158, 0.18);
   --border-hover: rgba(120, 108, 158, 0.28);
 }
+[data-theme="hospitality"]:where(:not(.dark)) {
+  --hsl-background: 102 18% 92%;
+  --hsl-foreground: 143 25% 12%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 143 25% 12%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 143 25% 12%;
+  --hsl-primary: 153 38% 25%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 126 17% 94%;
+  --hsl-secondary-foreground: 143 25% 12%;
+  --hsl-muted: 126 17% 94%;
+  --hsl-muted-foreground: 146 9% 39%;
+  --hsl-accent: 131 20% 91%;
+  --hsl-accent-foreground: 143 25% 12%;
+  --hsl-border: 130 15% 84%;
+  --hsl-input: 105 22% 97.5%;
+  --hsl-ring: 148 28% 43%;
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 143 25% 12%;
+  --sidebar-primary: 153 38% 25%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 126 17% 94%;
+  --sidebar-accent-foreground: 143 25% 12%;
+  --sidebar-border: 130 15% 84%;
+  --sidebar-ring: 148 28% 43%;
+  --md3-surface: #e9eee7;
+  --md3-surface-dim: #d5ded3;
+  --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f8faf7;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #edf2ee;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #edf2ee;
+  --md3-on-surface: #17261d;
+  --md3-on-surface-variant: #5a6c62;
+  --md3-outline: #6d8376;
+  --md3-outline-variant: #d0dcd2;
+  --md3-primary: #285842;
+  --md3-primary-dim: #1f4735;
+  --md3-primary-container: #1f4735;
+  --md3-on-primary: #ffffff;
+  --md3-surface-tint: #285842;
+  --depth-1: #e9eee7;
+  --depth-2: #ffffff;
+  --depth-3: #edf2ee;
+  --depth-4: #ffffff;
+  --bg-root: #e9eee7;
+  --bg-dark: #e9eee7;
+  --bg-section: #e9eee7;
+  --bg-card: #ffffff;
+  --bg-elevated: #ffffff;
+  --bg-input: #f8faf7;
+  --bg-hover: rgba(40, 88, 66, 0.05);
+  --bg-selection: rgba(40, 88, 66, 0.16);
+  --border-subtle: rgba(23, 38, 29, 0.10);
+  --border-default: rgba(23, 38, 29, 0.14);
+  --border-hover: rgba(23, 38, 29, 0.24);
+  --border-accent: rgba(40, 88, 66, 0.20);
+  --border-accent-hover: rgba(40, 88, 66, 0.36);
+  --accent-text: #285842;
+  --accent-surface-soft: rgba(40, 88, 66, 0.05);
+  --accent-surface-strong: rgba(40, 88, 66, 0.13);
+  --accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
+  --brand-primary: #3d7b5f;
+  --brand-cool: #4f8c6c;
+  --brand-glow: #6cac8a;
+  --brand-vibrant: #3d7b5f;
+  --btn-primary-bg: #285842;
+  --btn-primary-hover: #336c52;
+  --btn-primary-text: #ffffff;
+  --text-primary: #17261d;
+  --text-secondary: #36493e;
+  --text-muted: #5a6c62;
+  --text-dim: #5f6d65;
+}
+.dark[data-theme="hospitality"] {
+  --hsl-background: 150 8% 8.6%;
+  --hsl-foreground: 140 12% 90.2%;
+  --hsl-card: 150 6% 18.8%;
+  --hsl-card-foreground: 140 12% 90.2%;
+  --hsl-popover: 150 6% 20.8%;
+  --hsl-popover-foreground: 140 12% 90.2%;
+  --hsl-primary: 145 31% 59%;
+  --hsl-primary-foreground: 153 35% 10%;
+  --hsl-secondary: 150 6% 20.8%;
+  --hsl-secondary-foreground: 140 12% 90.2%;
+  --hsl-muted: 150 6% 20.8%;
+  --hsl-muted-foreground: 145 8% 71%;
+  --hsl-accent: 150 6% 20.8%;
+  --hsl-accent-foreground: 140 12% 90.2%;
+  --hsl-border: 150 5% 29.8%;
+  --hsl-input: 150 8% 12.2%;
+  --hsl-ring: 145 31% 59%;
+  --sidebar-background: 150 9% 6.3%;
+  --sidebar-foreground: 140 12% 90.2%;
+  --sidebar-primary: 145 31% 59%;
+  --sidebar-primary-foreground: 153 35% 10%;
+  --sidebar-accent: 150 6% 20.8%;
+  --sidebar-accent-foreground: 140 12% 90.2%;
+  --sidebar-border: 150 5% 29.8%;
+  --sidebar-ring: 145 31% 59%;
+  --md3-surface: #141816;
+  --md3-surface-dim: #0f1210;
+  --md3-surface-bright: #383e3b;
+  --md3-surface-container-lowest: #0f1210;
+  --md3-surface-container-low: #212624;
+  --md3-surface-container: #2d3330;
+  --md3-surface-container-high: #323835;
+  --md3-surface-container-highest: #383e3b;
+  --md3-surface-variant: #323835;
+  --md3-on-surface: #e3e9e5;
+  --md3-on-surface-variant: #afbbb4;
+  --md3-outline: #8a938e;
+  --md3-outline-variant: #48504c;
+  --md3-primary: #76b791;
+  --md3-primary-dim: #396a52;
+  --md3-primary-container: #396a52;
+  --md3-on-primary: #11221a;
+  --md3-surface-tint: #76b791;
+  --depth-1: #141816;
+  --depth-2: #2d3330;
+  --depth-3: #323835;
+  --depth-4: #383e3b;
+  --bg-root: #141816;
+  --bg-dark: #141816;
+  --bg-section: #141816;
+  --bg-card: #2d3330;
+  --bg-elevated: #383e3b;
+  --bg-input: #1d221f;
+  --bg-hover: rgba(118, 183, 145, 0.07);
+  --bg-selection: rgba(118, 183, 145, 0.28);
+  --border-subtle: rgba(227, 233, 229, 0.10);
+  --border-default: rgba(227, 233, 229, 0.16);
+  --border-hover: rgba(227, 233, 229, 0.28);
+  --border-accent: rgba(118, 183, 145, 0.35);
+  --border-accent-hover: rgba(118, 183, 145, 0.50);
+  --accent-text: #76b791;
+  --accent-surface-soft: rgba(118, 183, 145, 0.07);
+  --accent-surface-strong: rgba(57, 106, 82, 0.40);
+  --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
+  --brand-primary: #529873;
+  --brand-cool: #76b791;
+  --brand-glow: #94c7a9;
+  --brand-vibrant: #529873;
+  --btn-primary-bg: #76b791;
+  --btn-primary-hover: #8dc3a4;
+  --btn-primary-text: #11221a;
+  --text-primary: #e3e9e5;
+  --text-secondary: #c5cec9;
+  --text-muted: #afbbb4;
+  --text-dim: #9ea9a2;
+}
+[data-theme="agents"] {
+  --bg-card: #1a191b;
+  --hsl-background: 270 5.6% 7.1%;
+  --hsl-foreground: 240 6.2% 93.7%;
+  --hsl-card: 270 3.8% 10.2%;
+  --hsl-card-foreground: 240 6.2% 93.7%;
+  --hsl-popover: 260 4.2% 13.9%;
+  --hsl-popover-foreground: 240 6.2% 93.7%;
+  --hsl-secondary: 260 4.2% 13.9%;
+  --hsl-secondary-foreground: 240 6.2% 93.7%;
+  --hsl-muted: 260 4.2% 13.9%;
+  --hsl-muted-foreground: 258 6.9% 71.8%;
+  --hsl-accent: 270 4.7% 16.9%;
+  --hsl-accent-foreground: 240 6.2% 93.7%;
+  --hsl-border: 270 5% 23.5%;
+  --hsl-input: 251 4.8% 44.9%;
+  --sidebar-background: 270 3.8% 10.2%;
+  --sidebar-foreground: 240 6.2% 93.7%;
+  --sidebar-accent: 270 4.7% 16.9%;
+  --sidebar-accent-foreground: 240 6.2% 93.7%;
+  --sidebar-border: 270 5% 23.5%;
+  --md3-surface: #121113;
+  --md3-surface-dim: #121113;
+  --md3-surface-bright: #323035;
+  --md3-surface-container-lowest: #121113;
+  --md3-surface-container-low: #1a191b;
+  --md3-surface-container: #1a191b;
+  --md3-surface-container-high: #232225;
+  --md3-surface-container-highest: #2b292d;
+  --md3-surface-variant: #232225;
+  --md3-on-surface: #eeeef0;
+  --md3-on-surface-variant: #b5b2bc;
+  --md3-outline: #6f6d78;
+  --md3-outline-variant: #3c393f;
+  --depth-1: #121113;
+  --depth-2: #1a191b;
+  --depth-3: #232225;
+  --depth-4: #2b292d;
+  --bg-root: #121113;
+  --bg-dark: #121113;
+  --bg-elevated: #232225;
+  --bg-section: #121113;
+  --bg-input: #1a191b;
+  --bg-hover: #232225;
+  --text-primary: #eeeef0;
+  --text-secondary: #eeeef0;
+  --text-muted: #b5b2bc;
+  --text-dim: #b5b2bc;
+  --border-subtle: #3c393f;
+  --border-default: #49474e;
+  --border-hover: #625f69;
+  --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
+  --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
+  --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
+}
+[data-theme="agents-light"] {
+  --bg-card: #ffffff;
+  --hsl-background: 0 0% 100%;
+  --hsl-foreground: 257 10.1% 13.5%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 257 10.1% 13.5%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 257 10.1% 13.5%;
+  --hsl-secondary: 285 14.3% 94.5%;
+  --hsl-secondary-foreground: 257 10.1% 13.5%;
+  --hsl-muted: 285 14.3% 94.5%;
+  --hsl-muted-foreground: 252 4.8% 40.8%;
+  --hsl-accent: 276 11.6% 91.6%;
+  --hsl-accent-foreground: 257 10.1% 13.5%;
+  --hsl-border: 262 11.4% 86.3%;
+  --hsl-input: 249 6% 57.5%;
+  --sidebar-background: 270 20% 98%;
+  --sidebar-foreground: 257 10.1% 13.5%;
+  --sidebar-accent: 276 11.6% 91.6%;
+  --sidebar-accent-foreground: 257 10.1% 13.5%;
+  --sidebar-border: 262 11.4% 86.3%;
+  --md3-surface: #ffffff;
+  --md3-surface-dim: #faf9fb;
+  --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #faf9fb;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #f2eff3;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #f2eff3;
+  --md3-on-surface: #211f26;
+  --md3-on-surface-variant: #65636d;
+  --md3-outline: #8e8c99;
+  --md3-outline-variant: #dbd8e0;
+  --depth-1: #ffffff;
+  --depth-2: #ffffff;
+  --depth-3: #faf9fb;
+  --depth-4: #ffffff;
+  --bg-root: #ffffff;
+  --bg-dark: #faf9fb;
+  --bg-elevated: #ffffff;
+  --bg-section: #faf9fb;
+  --bg-input: #ffffff;
+  --bg-hover: #f2eff3;
+  --text-primary: #211f26;
+  --text-secondary: #211f26;
+  --text-muted: #65636d;
+  --text-dim: #65636d;
+  --border-subtle: #dbd8e0;
+  --border-default: #d0cdd7;
+  --border-hover: #bcbac7;
+  --shadow-card: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
+  --shadow-dropdown: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
+  --shadow-overlay: 0 8px 28px rgb(33 31 38 / 0.28);
+}
+[data-theme="website"]:where(:not(.dark)) {
+  --hsl-background: 240 42.9% 97.3%;
+  --hsl-foreground: 224 18% 12%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 224 18% 12%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 224 18% 12%;
+  --hsl-secondary: 240 35.7% 94.5%;
+  --hsl-secondary-foreground: 224 18% 12%;
+  --hsl-muted: 240 35.7% 94.5%;
+  --hsl-muted-foreground: 240 13% 42.4%;
+  --hsl-accent: 240 23.1% 92.4%;
+  --hsl-accent-foreground: 224 18% 12%;
+  --hsl-border: 240 26.3% 88.8%;
+  --hsl-input: 240 42.9% 97.3%;
+  --md3-surface: #f5f5fb;
+  --md3-surface-dim: #e7e7f0;
+  --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #fafafd;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #ececf6;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #ececf6;
+  --md3-on-surface: #191c24;
+  --md3-on-surface-variant: #5e5e7a;
+  --md3-outline: #5e5e7a;
+  --md3-outline-variant: #dbdbea;
+  --depth-1: #f5f5fb;
+  --depth-2: #ffffff;
+  --depth-3: #ececf6;
+  --depth-4: #ffffff;
+  --bg-root: #f5f5fb;
+  --bg-dark: #f5f5fb;
+  --bg-section: #ececf6;
+  --bg-card: #ffffff;
+  --bg-elevated: #ffffff;
+  --bg-input: #f5f5fb;
+  --border-subtle: rgba(25, 28, 36, 0.08);
+  --border-default: rgba(25, 28, 36, 0.12);
+  --border-hover: rgba(25, 28, 36, 0.24);
+  --text-primary: #191c24;
+  --text-secondary: #3a3a50;
+  --text-muted: #5e5e7a;
+  --text-dim: #5e5e7a;
+}
+.dark[data-theme="website"] {
+  --hsl-background: 243 45% 7.8%;
+  --hsl-foreground: 0 0% 99.2%;
+  --hsl-card: 244 34.9% 16.3%;
+  --hsl-card-foreground: 0 0% 99.2%;
+  --hsl-popover: 243 33.3% 21.2%;
+  --hsl-popover-foreground: 0 0% 99.2%;
+  --hsl-secondary: 244 34% 19%;
+  --hsl-secondary-foreground: 0 0% 99.2%;
+  --hsl-muted: 244 34% 19%;
+  --hsl-muted-foreground: 237 23% 65.9%;
+  --hsl-accent: 243 33.3% 21.2%;
+  --hsl-accent-foreground: 0 0% 99.2%;
+  --hsl-border: 243 31.9% 28.2%;
+  --hsl-input: 243 41.2% 10%;
+  --md3-surface: #0c0b1d;
+  --md3-surface-dim: #080814;
+  --md3-surface-bright: #2e2c56;
+  --md3-surface-container-lowest: #080814;
+  --md3-surface-container-low: #141328;
+  --md3-surface-container: #1d1b38;
+  --md3-surface-container-high: #222041;
+  --md3-surface-container-highest: #262448;
+  --md3-surface-variant: #222041;
+  --md3-on-surface: #fdfdfd;
+  --md3-on-surface-variant: #aaa8b8;
+  --md3-outline: #9496bc;
+  --md3-outline-variant: #33315f;
+  --depth-1: #0c0b1d;
+  --depth-2: #1d1b38;
+  --depth-3: #222041;
+  --depth-4: #262448;
+  --bg-root: #0c0b1d;
+  --bg-dark: #0c0b1d;
+  --bg-section: #141328;
+  --bg-card: #1d1b38;
+  --bg-elevated: #262448;
+  --bg-input: #100f24;
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-default: rgba(255, 255, 255, 0.15);
+  --border-hover: rgba(255, 255, 255, 0.28);
+  --text-primary: #fdfdfd;
+  --text-secondary: #aaa8b8;
+  --text-muted: #9496bc;
+  --text-dim: #9496bc;
+}
 :is(.dark, .light, [data-theme], [data-sandbox-theme="vault"]) {
   --foreground: var(--hsl-foreground);
   --muted-foreground: var(--hsl-muted-foreground);