@tangle-network/brand 1.11.0 → 1.13.0

package/src/styles/legacy-light.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-compat.mjs. Do not edit.
  * Source: tokens.css + named-themes.css
- * SHA-256: b64dbb9e556b1004d80e40b70ac487da2695bd6f4d59a0d91c39278261570d62
+ * SHA-256: 4c1924fc1546f474d5006dc2ea3670fb9c74c7ee0ccebc058b310fbed7a9757e
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -13,8 +13,14 @@
 [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;
@@ -345,10 +351,14 @@
 }
 [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,
 :where(:root) {
     color-scheme: light;
@@ -623,6 +633,8 @@
 }
 [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"],
@@ -654,6 +666,86 @@
         --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);
+}
 :where(:root),
 .dark,
 .light,
@@ -699,7 +791,9 @@
 }
 [data-theme="aubergine-light"],
 [data-theme="arena-light"],
-[data-theme="tangle-light"] {
+[data-theme="super-light"],
+[data-theme="tangle-light"],
+[data-theme="agents-light"] {
     --hsl-secondary-foreground: 0 0% 10%;
     --surface-neutral-text: #4b5563;
 }
@@ -740,8 +834,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%;
@@ -780,8 +880,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%;
@@ -821,7 +927,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%;
@@ -860,8 +972,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%;
@@ -944,8 +1180,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;
@@ -983,3 +1219,359 @@
     --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;
+}