@tangle-network/brand 1.31.0 → 1.31.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +3 -2
  3. package/bin/drift-baseline.json +15 -13
  4. package/dist/index.d.ts +111 -111
  5. package/dist/index.js +111 -111
  6. package/package.json +1 -1
  7. package/src/palette.generated.ts +111 -111
  8. package/src/styles/accent-on-tint.test.ts +4 -1
  9. package/src/styles/legacy-light.css +1104 -1032
  10. package/src/styles/named-themes.css +298 -597
  11. package/src/styles/surface-ladder.test.ts +9 -24
  12. package/src/styles/system.css +52 -52
  13. package/src/styles/theme-scopes.ts +12 -21
  14. package/src/styles/tokens.css +450 -939
  15. package/src/styles/tokens.test.ts +38 -17
package/src/styles/legacy-light.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* GENERATED by scripts/gen-compat.mjs. Do not edit.
2
2
  * Source: tokens.css + named-themes.css
3
- * SHA-256: 728da214076ca13bbac43529a3ba30c5349fdd796266ebe18b354598b58acc40
3
+ * SHA-256: fc22dd14d46adcb3da24a7c9c41cc61b2b1c3eadbd6490c628ea63e4cfb57621
4
4
  * Light-default compatibility; all explicit modes remain canonical.
5
5
  */
6
6
  :where(:root),
@@ -24,16 +24,16 @@
24
24
  .light,
25
25
  .dark {
26
26
  color-scheme: dark;
27
- --hsl-background: 240 33% 6%;
28
- --hsl-input: 244 29% 9%;
29
- --hsl-card: 244 23% 12%;
30
- --hsl-secondary: 249 24% 17.5%;
31
- --hsl-popover: 247 21% 23%;
27
+ --hsl-background: 246.6667 31.0345% 5.6863%;
28
+ --hsl-input: 245 26.087% 9.0196%;
29
+ --hsl-card: 244.2857 22.5806% 12.1569%;
30
+ --hsl-secondary: 243.3333 20.4545% 17.2549%;
31
+ --hsl-popover: 242.7273 18.9655% 22.7451%;
32
32
  --hsl-muted: var(--hsl-secondary);
33
33
  --hsl-accent: var(--hsl-secondary);
34
- --md3-surface-dim: #040408;
34
+ --md3-surface-dim: hsl(240 33.3333% 2.3529%);
35
35
  --md3-surface-container-lowest: var(--md3-surface-dim);
36
- --md3-surface-bright: #232238;
36
+ --md3-surface-bright: hsl(var(--hsl-popover));
37
37
  --md3-surface: hsl(var(--hsl-background));
38
38
  --md3-surface-container-low: hsl(var(--hsl-input));
39
39
  --md3-surface-container: hsl(var(--hsl-card));
@@ -44,7 +44,7 @@
44
44
  --depth-2: var(--md3-surface-container);
45
45
  --depth-3: var(--md3-surface-container-high);
46
46
  --depth-4: var(--md3-surface-container-highest);
47
- --bg-root: var(--md3-surface);
47
+ --bg-root: var(--depth-1);
48
48
  --bg-dark: var(--depth-1);
49
49
  --bg-card: var(--depth-2);
50
50
  --bg-elevated: var(--depth-4);
@@ -52,14 +52,14 @@
52
52
  --bg-input: hsl(var(--hsl-input));
53
53
  --sidebar-background: var(--hsl-input);
54
54
  --sidebar-accent: var(--hsl-secondary);
55
- --md3-inverse-surface: #fdfdfd;
56
- --md3-inverse-on-surface: #000000;
57
- --hsl-foreground: 0 0% 90.1961%;
58
- --hsl-muted-foreground: 240 5% 68%;
55
+ --md3-inverse-surface: hsl(0 0% 100%);
56
+ --md3-inverse-on-surface: hsl(0 0% 0%);
57
+ --hsl-foreground: 0 0% 84.3137%;
58
+ --hsl-muted-foreground: 0 0% 67.0588%;
59
59
  --text-primary: hsl(var(--hsl-foreground));
60
- --text-secondary: #c7c7c7;
61
- --text-muted: #b5b5b5;
62
- --text-dim: #a5a5a5;
60
+ --text-secondary: hsl(0 0% 74.1176%);
61
+ --text-muted: hsl(0 0% 67.0588%);
62
+ --text-dim: hsl(0 0% 60.3922%);
63
63
  --hsl-card-foreground: var(--hsl-foreground);
64
64
  --hsl-popover-foreground: var(--hsl-foreground);
65
65
  --hsl-secondary-foreground: var(--hsl-foreground);
@@ -68,38 +68,38 @@
68
68
  --sidebar-accent-foreground: var(--hsl-foreground);
69
69
  --md3-on-surface: var(--text-primary);
70
70
  --md3-on-surface-variant: var(--text-muted);
71
- --md3-outline: #8e8e8e;
72
- --hsl-border: 244 16% 25%;
71
+ --md3-outline: hsl(var(--hsl-muted-foreground));
72
+ --hsl-border: 245 18.4615% 25.4902%;
73
73
  --md3-outline-variant: hsl(var(--hsl-border));
74
74
  --sidebar-border: var(--hsl-border);
75
75
  --border-subtle: hsl(var(--hsl-border));
76
76
  --border-default: hsl(var(--hsl-border));
77
- --border-hover: rgba(255, 255, 255, 0.28);
78
- --hsl-primary: 246 54% 51%;
77
+ --border-hover: rgb(215 215 215 / 0.28);
78
+ --hsl-primary: 245.9504 54.2601% 56.2745%;
79
79
  --hsl-primary-foreground: 0 0% 100%;
80
- --hsl-ring: 233 100% 87%;
81
- --brand-primary: #7C6CF6;
82
- --brand-cool: #818CF8;
83
- --accent-text: #A5B4FC;
84
- --brand-purple: #C7D2FE;
85
- --brand-strong: #2E2A5E;
86
- --brand-strong-text: #ffffff;
80
+ --hsl-ring: 245.5556 93.1034% 88.6275%;
81
+ --brand-primary: hsl(245.5102 65.3333% 70.5882%);
82
+ --brand-cool: hsl(246.0465 85.4305% 70.3922%);
83
+ --accent-text: hsl(245.5556 93.1034% 88.6275%);
84
+ --brand-purple: hsl(245.1429 94.5946% 92.7451%);
85
+ --brand-strong: hsl(246 41.6667% 28.2353%);
86
+ --brand-strong-text: hsl(0 0% 100%);
87
87
  --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
88
88
  --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
89
89
  --brand-glow: var(--accent-text);
90
90
  --brand-vibrant: var(--brand-primary);
91
91
  --btn-primary-bg: hsl(var(--hsl-primary));
92
- --btn-primary-hover: #5a50d6;
93
- --btn-primary-text: #ffffff;
92
+ --btn-primary-hover: hsl(246.055 54.2289% 60.5882%);
93
+ --btn-primary-text: hsl(0 0% 100%);
94
94
  --btn-cta-bg: var(--btn-primary-bg);
95
95
  --btn-cta-text: var(--btn-primary-text);
96
96
  --sidebar-primary: var(--hsl-primary);
97
97
  --sidebar-primary-foreground: var(--hsl-primary-foreground);
98
98
  --sidebar-ring: var(--hsl-ring);
99
99
  --md3-primary: var(--accent-text);
100
- --md3-primary-dim: var(--brand-primary);
100
+ --md3-primary-dim: var(--btn-primary-bg);
101
101
  --md3-primary-container: var(--btn-primary-bg);
102
- --md3-on-primary: #ffffff;
102
+ --md3-on-primary: hsl(0 0% 100%);
103
103
  --md3-on-primary-container: var(--brand-purple);
104
104
  --md3-primary-fixed: var(--accent-text);
105
105
  --md3-primary-fixed-dim: var(--brand-cool);
@@ -112,30 +112,30 @@
112
112
  --md3-surface-tint: var(--accent-text);
113
113
  --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
114
114
  --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
115
- --bg-hover: var(--accent-surface-soft);
116
- --bg-selection: color-mix(in srgb, var(--brand-primary) 28%, transparent);
115
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
116
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
117
117
  --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
118
118
  --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
119
- --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--accent-text));
119
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
120
120
  --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text));
121
- --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--brand-primary));
122
- --hsl-success: 154.7 60.2% 60.6%;
123
- --hsl-warning: 41.5 88.2% 63.3%;
124
- --hsl-destructive: 2.8 100% 83.1%;
125
- --hsl-destructive-foreground: 0 60% 10%;
126
- --hsl-info: 199.7 100% 70.2%;
121
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
122
+ --hsl-success: 155.1429 64.8148% 78.8235%;
123
+ --hsl-warning: 38.5714 65.1163% 83.1373%;
124
+ --hsl-destructive: 0 74.4681% 90.7843%;
125
+ --hsl-destructive-foreground: 0 0% 0%;
126
+ --hsl-info: 201.7021 66.1972% 86.0784%;
127
127
  --surface-success-text: hsl(var(--hsl-success));
128
- --surface-success-bg: #2f5146;
129
- --surface-success-border: #3c7760;
128
+ --surface-success-bg: #21342c;
129
+ --surface-success-border: #496b5d;
130
130
  --surface-warning-text: hsl(var(--hsl-warning));
131
- --surface-warning-bg: #4b4232;
132
- --surface-warning-border: #7a6236;
131
+ --surface-warning-bg: #362f22;
132
+ --surface-warning-border: #6e634f;
133
133
  --surface-danger-text: hsl(var(--hsl-destructive));
134
- --surface-danger-bg: #5a3b40;
135
- --surface-danger-border: #7d4d53;
134
+ --surface-danger-bg: #412a2a;
135
+ --surface-danger-border: #785e5e;
136
136
  --surface-info-text: hsl(var(--hsl-info));
137
- --surface-info-bg: #2d4e67;
138
- --surface-info-border: #3d7292;
137
+ --surface-info-bg: #243239;
138
+ --surface-info-border: #546771;
139
139
  --status-running: var(--surface-success-text);
140
140
  --status-creating: var(--accent-text);
141
141
  --status-stopped: var(--surface-warning-text);
@@ -174,116 +174,116 @@
174
174
  --warning: var(--hsl-warning);
175
175
  --error: var(--hsl-destructive);
176
176
  --info: var(--hsl-info);
177
- --tone-violet-bg: #392751;
178
- --tone-violet-bg-hover: #432b60;
179
- --tone-violet-bg-selected: #4c306c;
180
- --tone-violet-border: #8457aa;
181
- --tone-violet-border-selected: #d19dff;
182
- --tone-violet-text: #ecd9fa;
183
- --tone-violet-icon: #d19dff;
184
- --tone-orange-bg: #432823;
185
- --tone-orange-bg-hover: #512d22;
186
- --tone-orange-bg-selected: #5e3221;
187
- --tone-orange-border: #a35829;
188
- --tone-orange-border-selected: #f76b15;
189
- --tone-orange-text: #ffe0c2;
190
- --tone-orange-icon: #f76b15;
191
- --tone-teal-bg: #18333b;
192
- --tone-teal-bg-hover: #173b42;
193
- --tone-teal-bg-selected: #174448;
194
- --tone-teal-border: #207e73;
195
- --tone-teal-border-selected: #12a594;
196
- --tone-teal-text: #adf0dd;
197
- --tone-teal-icon: #12a594;
198
- --tone-blue-bg: #143051;
199
- --tone-blue-bg-hover: #123861;
200
- --tone-blue-bg-selected: #113e6b;
201
- --tone-blue-border: #2870bd;
202
- --tone-blue-border-selected: #0090ff;
203
- --tone-blue-text: #c2e6ff;
204
- --tone-blue-icon: #0090ff;
205
- --tone-pink-bg: #462243;
206
- --tone-pink-bg-hover: #55254d;
207
- --tone-pink-bg-selected: #612754;
208
- --tone-pink-border: #a84885;
209
- --tone-pink-border-selected: #de51a8;
210
- --tone-pink-text: #fdd1ea;
211
- --tone-pink-icon: #de51a8;
212
- --tone-brown-bg: #372d30;
213
- --tone-brown-bg-hover: #413434;
214
- --tone-brown-bg-selected: #4a3a37;
215
- --tone-brown-border: #7c5f46;
216
- --tone-brown-border-selected: #ad7f58;
217
- --tone-brown-text: #f2e1ca;
218
- --tone-brown-icon: #ad7f58;
219
- --tone-cyan-bg: #143245;
220
- --tone-cyan-bg-hover: #133b4e;
221
- --tone-cyan-bg-selected: #114358;
222
- --tone-cyan-border: #11809c;
223
- --tone-cyan-border-selected: #00a2c7;
224
- --tone-cyan-text: #b6ecf7;
225
- --tone-cyan-icon: #00a2c7;
226
- --tone-lime-bg: #2b302d;
227
- --tone-lime-bg-hover: #32382f;
228
- --tone-lime-bg-selected: #384132;
229
- --tone-lime-border: #577538;
230
- --tone-lime-border-selected: #bdee63;
231
- --tone-lime-text: #e3f7ba;
232
- --tone-lime-icon: #bdee63;
233
- --surface-violet-bg: #392751;
234
- --surface-violet-border: #8457aa;
235
- --surface-violet-text: #d19dff;
236
- --surface-orange-bg: #432823;
237
- --surface-orange-border: #a35829;
238
- --surface-orange-text: #ffa057;
239
- --surface-teal-bg: #18333b;
240
- --surface-teal-border: #207e73;
241
- --surface-teal-text: #0bd8b6;
242
- --tone-violet-fill: 272 44.9% 50.2%;
243
- --tone-violet-ring: 272 100% 80.8%;
244
- --tone-violet-mark: #8e4ec6;
245
- --tone-violet-line: #8e4ec6;
246
- --tone-violet-ink: #d19dff;
247
- --tone-orange-fill: 22 93.6% 36.9%;
248
- --tone-orange-ring: 26 100% 67.1%;
249
- --tone-orange-mark: #f76b15;
250
- --tone-orange-line: #f76b15;
251
- --tone-orange-ink: #ffa057;
252
- --tone-teal-fill: 172 95% 23.7%;
253
- --tone-teal-ring: 170 90.3% 44.5%;
254
- --tone-teal-mark: #12a594;
255
- --tone-teal-line: #12a594;
256
- --tone-teal-ink: #0bd8b6;
257
- --tone-blue-fill: 209 86.3% 40%;
258
- --tone-blue-ring: 210 100% 72%;
259
- --tone-blue-mark: #0090ff;
260
- --tone-blue-line: #0090ff;
261
- --tone-blue-ink: #70b8ff;
262
- --tone-pink-fill: 322 65.1% 46.1%;
263
- --tone-pink-ring: 327 100% 77.6%;
264
- --tone-pink-mark: #d6409f;
265
- --tone-pink-line: #d6409f;
266
- --tone-pink-ink: #ff8dcc;
267
- --tone-brown-fill: 24 29.6% 39%;
268
- --tone-brown-ring: 28 49.7% 72%;
269
- --tone-brown-mark: #ad7f58;
270
- --tone-brown-line: #ad7f58;
271
- --tone-brown-ink: #dbb594;
272
- --tone-cyan-fill: 192 80.4% 30%;
273
- --tone-cyan-ring: 190 75.5% 60%;
274
- --tone-cyan-mark: #00a2c7;
275
- --tone-cyan-line: #00a2c7;
276
- --tone-cyan-ink: #4ccce6;
277
- --tone-lime-fill: 84 44.2% 30.2%;
278
- --tone-lime-ring: 80 69.9% 66.1%;
279
- --tone-lime-mark: #bdee63;
280
- --tone-lime-line: #bdee63;
281
- --tone-lime-ink: #bde56c;
282
- --run-mix-succeeded: #76edb9;
283
- --run-mix-waiting: #e9b642;
284
- --run-mix-failed: #e1918e;
285
- --run-mix-in-flight: #2d9bca;
286
- --run-mix-cancelled: #767d90;
177
+ --tone-violet-bg: hsl(270.8108 31.6239% 22.9412%);
178
+ --tone-violet-bg-hover: hsl(271.4286 31.3433% 26.2745%);
179
+ --tone-violet-bg-selected: hsl(271.9149 31.5436% 29.2157%);
180
+ --tone-violet-border: hsl(272.1739 27.49% 49.2157%);
181
+ --tone-violet-border-selected: hsl(272.4 79.3651% 75.2941%);
182
+ --tone-violet-text: hsl(272 81.0811% 85.4902%);
183
+ --tone-violet-icon: hsl(272.4 79.3651% 75.2941%);
184
+ --tone-violet-fill: 272.1081 80.0866% 54.7059%;
185
+ --tone-violet-ring: 272.5424 80.8219% 85.6863%;
186
+ --tone-violet-mark: hsl(272.4 79.3651% 75.2941%);
187
+ --tone-violet-line: hsl(272.4 79.3651% 75.2941%);
188
+ --tone-violet-ink: hsl(272.5424 80.8219% 85.6863%);
189
+ --tone-orange-bg: hsl(23.2258 32.6316% 18.6275%);
190
+ --tone-orange-bg-hover: hsl(21.6667 32.7273% 21.5686%);
191
+ --tone-orange-bg-selected: hsl(22.5 32.7869% 23.9216%);
192
+ --tone-orange-border: hsl(22.4176 43.5407% 40.9804%);
193
+ --tone-orange-border-selected: hsl(22.2517 79.8942% 62.9412%);
194
+ --tone-orange-text: hsl(22.5 80% 78.4314%);
195
+ --tone-orange-icon: hsl(22.2517 79.8942% 62.9412%);
196
+ --tone-orange-fill: 22 79.7872% 36.8627%;
197
+ --tone-orange-ring: 22.1429 80.7692% 79.6078%;
198
+ --tone-orange-mark: hsl(22.2517 79.8942% 62.9412%);
199
+ --tone-orange-line: hsl(22.2517 79.8942% 62.9412%);
200
+ --tone-orange-ink: hsl(22.1429 80.7692% 79.6078%);
201
+ --tone-teal-bg: hsl(170.7692 32.5% 15.6863%);
202
+ --tone-teal-bg-hover: hsl(172 32.6087% 18.0392%);
203
+ --tone-teal-bg-selected: hsl(172.5 31.3725% 20%);
204
+ --tone-teal-border: hsl(171.7895 66.4336% 28.0392%);
205
+ --tone-teal-border-selected: hsl(171.9512 79.6117% 40.3922%);
206
+ --tone-teal-text: hsl(171.9 80% 49.0196%);
207
+ --tone-teal-icon: hsl(171.9512 79.6117% 40.3922%);
208
+ --tone-teal-fill: 172.2772 79.5276% 24.902%;
209
+ --tone-teal-ring: 171.7647 80.315% 49.8039%;
210
+ --tone-teal-mark: hsl(171.9512 79.6117% 40.3922%);
211
+ --tone-teal-line: hsl(171.9512 79.6117% 40.3922%);
212
+ --tone-teal-ink: hsl(171.7647 80.315% 49.8039%);
213
+ --tone-blue-bg: hsl(208.125 32.6531% 19.2157%);
214
+ --tone-blue-bg-hover: hsl(208.3333 32.1429% 21.9608%);
215
+ --tone-blue-bg-selected: hsl(208.5 31.746% 24.7059%);
216
+ --tone-blue-border: hsl(209.3023 39.4495% 42.7451%);
217
+ --tone-blue-border-selected: hsl(209.1429 80.4598% 65.8824%);
218
+ --tone-blue-text: hsl(208.9157 80.5825% 79.8039%);
219
+ --tone-blue-icon: hsl(209.1429 80.4598% 65.8824%);
220
+ --tone-blue-fill: 209.0683 80.0995% 39.4118%;
221
+ --tone-blue-ring: 208.4211 79.1667% 81.1765%;
222
+ --tone-blue-mark: hsl(209.1429 80.4598% 65.8824%);
223
+ --tone-blue-line: hsl(209.1429 80.4598% 65.8824%);
224
+ --tone-blue-ink: hsl(208.4211 79.1667% 81.1765%);
225
+ --tone-pink-bg: hsl(322.9412 31.4815% 21.1765%);
226
+ --tone-pink-bg-hover: hsl(322.5 32.2581% 24.3137%);
227
+ --tone-pink-bg-selected: hsl(323.1818 31.8841% 27.0588%);
228
+ --tone-pink-border: hsl(322.7027 31.0924% 46.6667%);
229
+ --tone-pink-border-selected: hsl(322.4348 80.4196% 71.9608%);
230
+ --tone-pink-text: hsl(322.7273 80.4878% 83.9216%);
231
+ --tone-pink-icon: hsl(322.4348 80.4196% 71.9608%);
232
+ --tone-pink-fill: 322 80.3571% 43.9216%;
233
+ --tone-pink-ring: 322.7273 80.4878% 83.9216%;
234
+ --tone-pink-mark: hsl(322.4348 80.4196% 71.9608%);
235
+ --tone-pink-line: hsl(322.4348 80.4196% 71.9608%);
236
+ --tone-pink-ink: hsl(322.7273 80.4878% 83.9216%);
237
+ --tone-brown-bg: hsl(24 31.9149% 18.4314%);
238
+ --tone-brown-bg-hover: hsl(24.7059 31.4815% 21.1765%);
239
+ --tone-brown-bg-selected: hsl(24.6154 32.2314% 23.7255%);
240
+ --tone-brown-border: hsl(24.2553 22.2749% 41.3725%);
241
+ --tone-brown-border-selected: hsl(24 35.5191% 64.1176%);
242
+ --tone-brown-text: hsl(24.6154 35.1351% 78.2353%);
243
+ --tone-brown-icon: hsl(24 35.5191% 64.1176%);
244
+ --tone-brown-fill: 23.662 36.0406% 38.6275%;
245
+ --tone-brown-ring: 25 35.2941% 80%;
246
+ --tone-brown-mark: hsl(24 35.5191% 64.1176%);
247
+ --tone-brown-line: hsl(24 35.5191% 64.1176%);
248
+ --tone-brown-ink: hsl(25 35.2941% 80%);
249
+ --tone-cyan-bg: hsl(192.8571 32.5581% 16.8627%);
250
+ --tone-cyan-bg-hover: hsl(191.25 32.6531% 19.2157%);
251
+ --tone-cyan-bg-selected: hsl(191.6667 32.7273% 21.5686%);
252
+ --tone-cyan-border: hsl(192.3214 68.2927% 32.1569%);
253
+ --tone-cyan-border-selected: hsl(192.0619 80.1653% 47.451%);
254
+ --tone-cyan-text: hsl(191.7188 80% 68.6275%);
255
+ --tone-cyan-icon: hsl(192.0619 80.1653% 47.451%);
256
+ --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
257
+ --tone-cyan-ring: 191.8966 79.4521% 71.3725%;
258
+ --tone-cyan-mark: hsl(192.0619 80.1653% 47.451%);
259
+ --tone-cyan-line: hsl(192.0619 80.1653% 47.451%);
260
+ --tone-cyan-ink: hsl(191.8966 79.4521% 71.3725%);
261
+ --tone-lime-bg: hsl(82.5 30.7692% 15.2941%);
262
+ --tone-lime-bg-hover: hsl(84.8276 32.5843% 17.451%);
263
+ --tone-lime-bg-selected: hsl(84.375 32% 19.6078%);
264
+ --tone-lime-border: hsl(84 52.6316% 29.8039%);
265
+ --tone-lime-border-selected: hsl(84.2647 60.177% 44.3137%);
266
+ --tone-lime-text: hsl(83.6975 59.799% 60.9804%);
267
+ --tone-lime-icon: hsl(84.2647 60.177% 44.3137%);
268
+ --tone-lime-fill: 84.5783 59.7122% 27.2549%;
269
+ --tone-lime-ring: 84 60.4396% 64.3137%;
270
+ --tone-lime-mark: hsl(84.2647 60.177% 44.3137%);
271
+ --tone-lime-line: hsl(84.2647 60.177% 44.3137%);
272
+ --tone-lime-ink: hsl(84 60.4396% 64.3137%);
273
+ --surface-violet-bg: var(--tone-violet-bg);
274
+ --surface-violet-border: var(--tone-violet-border);
275
+ --surface-violet-text: var(--tone-violet-text);
276
+ --surface-orange-bg: var(--tone-orange-bg);
277
+ --surface-orange-border: var(--tone-orange-border);
278
+ --surface-orange-text: var(--tone-orange-text);
279
+ --surface-teal-bg: var(--tone-teal-bg);
280
+ --surface-teal-border: var(--tone-teal-border);
281
+ --surface-teal-text: var(--tone-teal-text);
282
+ --run-mix-succeeded: hsl(154.9315 59.8361% 47.8431%);
283
+ --run-mix-waiting: hsl(37.7483 60.1594% 49.2157%);
284
+ --run-mix-failed: hsl(0 60.4278% 63.3333%);
285
+ --run-mix-in-flight: hsl(200.8889 60% 44.1176%);
286
+ --run-mix-cancelled: hsl(229.2857 11.7647% 46.6667%);
287
287
  --surface-neutral-bg: var(--depth-3);
288
288
  --surface-neutral-border: var(--border-subtle);
289
289
  --surface-neutral-text: var(--text-muted);
@@ -299,7 +299,7 @@
299
299
  --syntax-foreground: var(--text-primary);
300
300
  --syntax-variable: var(--text-secondary);
301
301
  --syntax-comment: var(--text-dim);
302
- --syntax-keyword: var(--tone-violet-icon);
302
+ --syntax-keyword: var(--tone-violet-text);
303
303
  --syntax-meta: var(--accent-text);
304
304
  --syntax-function: var(--surface-info-text);
305
305
  --syntax-string: var(--surface-success-text);
@@ -450,172 +450,172 @@
450
450
  .light,
451
451
  :where(:root) {
452
452
  color-scheme: light;
453
- --hsl-background: 223 23% 94%;
454
- --hsl-input: 225 29% 97%;
453
+ --hsl-background: 225 26.6667% 94.1176%;
454
+ --hsl-input: 231.4286 46.6667% 97.0588%;
455
455
  --hsl-card: 0 0% 100%;
456
- --hsl-secondary: 228 25% 94.5%;
457
- --hsl-popover: var(--hsl-card);
458
- --md3-surface-dim: #dcdee6;
456
+ --hsl-secondary: 225 28.5714% 94.5098%;
457
+ --hsl-popover: 0 0% 100%;
458
+ --md3-surface-dim: hsl(231.4286 11.4754% 88.0392%);
459
459
  --md3-surface-container-lowest: hsl(var(--hsl-card));
460
- --md3-surface-bright: #ffffff;
460
+ --md3-surface-bright: hsl(var(--hsl-popover));
461
461
  --sidebar-background: var(--hsl-card);
462
- --md3-inverse-surface: #2e2e3e;
463
- --md3-inverse-on-surface: #f0f1f4;
464
- --hsl-foreground: 0 0% 17.6471%;
465
- --hsl-muted-foreground: 0 0% 29.8039%;
466
- --text-secondary: #3f3f3f;
467
- --text-muted: #4c4c4c;
468
- --text-dim: #686868;
469
- --md3-outline: #787878;
470
- --hsl-border: 244 16% 81%;
471
- --border-hover: rgba(0, 0, 0, 0.24);
472
- --hsl-ring: var(--hsl-primary);
473
- --brand-primary: #6366F1;
474
- --brand-purple: var(--brand-primary);
475
- --accent-text: #3c32e9;
462
+ --md3-inverse-surface: hsl(0 0% 18.0392%);
463
+ --md3-inverse-on-surface: hsl(0 0% 100%);
464
+ --hsl-foreground: 0 0% 24.7059%;
465
+ --hsl-muted-foreground: 0 0% 36.4706%;
466
+ --text-secondary: hsl(0 0% 31.3725%);
467
+ --text-muted: hsl(0 0% 36.4706%);
468
+ --text-dim: hsl(0 0% 41.9608%);
469
+ --md3-outline: hsl(var(--hsl-muted-foreground));
470
+ --hsl-border: 222.8571 6.6667% 79.4118%;
471
+ --border-hover: rgb(63 63 63 / 0.28);
472
+ --hsl-ring: 245.9504 54.2601% 56.2745%;
473
+ --brand-primary: hsl(245.9091 64.7059% 60%);
474
+ --brand-purple: hsl(246.5217 92% 70.5882%);
475
+ --accent-text: hsl(246.2264 92.1739% 54.902%);
476
476
  --md3-primary: var(--accent-text);
477
477
  --md3-primary-dim: var(--btn-primary-bg);
478
- --md3-on-primary-container: #ffffff;
479
- --md3-primary-fixed: #E8E5FF;
478
+ --md3-on-primary-container: hsl(0 0% 100%);
479
+ --md3-primary-fixed: hsl(246.9231 92.8571% 94.5098%);
480
480
  --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
481
481
  --md3-secondary: var(--accent-text);
482
482
  --md3-secondary-dim: var(--btn-primary-bg);
483
483
  --md3-secondary-container: var(--md3-primary-fixed);
484
- --md3-on-secondary: #ffffff;
484
+ --md3-on-secondary: hsl(0 0% 100%);
485
485
  --md3-on-secondary-container: var(--accent-text);
486
- --md3-inverse-primary: #A5B4FC;
487
- --md3-surface-tint: var(--brand-primary);
488
- --accent-surface-soft: color-mix(in srgb, var(--btn-primary-bg) 5%, transparent);
486
+ --md3-inverse-primary: hsl(246.0759 64.2276% 75.8824%);
487
+ --md3-surface-tint: var(--accent-text);
488
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
489
489
  --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
490
490
  --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
491
- --border-accent: color-mix(in srgb, var(--btn-primary-hover) 18%, transparent);
492
- --border-accent-hover: color-mix(in srgb, var(--btn-primary-hover) 35%, transparent);
491
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
492
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
493
493
  --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
494
494
  --tangle-gradient-text: var(--tangle-gradient);
495
- --accent-gradient-strong: var(--tangle-gradient);
496
- --hsl-success: 162.9 93.5% 24.3%;
497
- --hsl-warning: 25.9 90% 35.3%;
498
- --hsl-destructive: 0 73.7% 41.8%;
495
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
496
+ --hsl-success: 154.8148 64.8% 24.5098%;
497
+ --hsl-warning: 38.2979 65.2778% 28.2353%;
498
+ --hsl-destructive: 0 75.1244% 39.4118%;
499
499
  --hsl-destructive-foreground: 0 0% 100%;
500
- --hsl-info: 201.3 96.3% 32.2%;
501
- --surface-success-bg: #ecfdf5;
502
- --surface-success-border: #a7f3d0;
503
- --surface-warning-bg: #fffbeb;
504
- --surface-warning-border: #fde68a;
505
- --surface-danger-bg: #fff1f2;
506
- --surface-danger-border: #fecdd3;
507
- --surface-info-bg: #f0f9ff;
508
- --surface-info-border: #bae6fd;
509
- --tone-violet-bg: #f7edfe;
510
- --tone-violet-bg-hover: #f2e2fc;
511
- --tone-violet-bg-selected: #ead5f9;
512
- --tone-violet-border: #e0c4f4;
513
- --tone-violet-border-selected: #8e4ec6;
514
- --tone-violet-text: #402060;
515
- --tone-violet-icon: #8e4ec6;
516
- --tone-orange-bg: #ffefd6;
517
- --tone-orange-bg-hover: #ffdfb5;
518
- --tone-orange-bg-selected: #ffd19a;
519
- --tone-orange-border: #ffc182;
520
- --tone-orange-border-selected: #cc4e00;
521
- --tone-orange-text: #582d1d;
522
- --tone-orange-icon: #cc4e00;
523
- --tone-teal-bg: #e0f8f3;
524
- --tone-teal-bg-hover: #ccf3ea;
525
- --tone-teal-bg-selected: #b8eae0;
526
- --tone-teal-border: #a1ded2;
527
- --tone-teal-border-selected: #008573;
528
- --tone-teal-text: #0d3d38;
529
- --tone-teal-icon: #008573;
530
- --tone-blue-bg: #e6f4fe;
531
- --tone-blue-bg-hover: #d5efff;
532
- --tone-blue-bg-selected: #c2e5ff;
533
- --tone-blue-border: #acd8fc;
534
- --tone-blue-border-selected: #0d74ce;
535
- --tone-blue-text: #113264;
536
- --tone-blue-icon: #0d74ce;
537
- --tone-pink-bg: #fee9f5;
538
- --tone-pink-bg-hover: #fbdcef;
539
- --tone-pink-bg-selected: #f6cee7;
540
- --tone-pink-border: #efbfdd;
541
- --tone-pink-border-selected: #cf3897;
542
- --tone-pink-text: #651249;
543
- --tone-pink-icon: #cf3897;
544
- --tone-brown-bg: #f6eee7;
545
- --tone-brown-bg-hover: #f0e4d9;
546
- --tone-brown-bg-selected: #ebdaca;
547
- --tone-brown-border: #e4cdb7;
548
- --tone-brown-border-selected: #815e46;
549
- --tone-brown-text: #3e332e;
550
- --tone-brown-icon: #815e46;
551
- --tone-cyan-bg: #def7f9;
552
- --tone-cyan-bg-hover: #caf1f6;
553
- --tone-cyan-bg-selected: #b5e9f0;
554
- --tone-cyan-border: #9ddde7;
555
- --tone-cyan-border-selected: #107d98;
556
- --tone-cyan-text: #0d3c48;
557
- --tone-cyan-icon: #107d98;
558
- --tone-lime-bg: #eef6d6;
559
- --tone-lime-bg-hover: #e2f0bd;
560
- --tone-lime-bg-selected: #d3e7a6;
561
- --tone-lime-border: #c2da91;
562
- --tone-lime-border-selected: #5c7c2f;
563
- --tone-lime-text: #37401c;
564
- --tone-lime-icon: #5c7c2f;
565
- --surface-violet-bg: #f7edfe;
566
- --surface-violet-border: #e0c4f4;
567
- --surface-violet-text: #8145b5;
568
- --surface-orange-bg: #ffefd6;
569
- --surface-orange-border: #ffc182;
570
- --surface-orange-text: #bc4904;
571
- --surface-teal-bg: #e0f8f3;
572
- --surface-teal-border: #a1ded2;
573
- --surface-teal-text: #017d6d;
574
- --tone-violet-fill: 272 44.9% 50.2%;
575
- --tone-violet-ring: 272 44.9% 50.2%;
576
- --tone-violet-mark: #8e4ec6;
577
- --tone-violet-line: #8e4ec6;
578
- --tone-violet-ink: #753ea6;
579
- --tone-orange-fill: 22 93.6% 36.9%;
580
- --tone-orange-ring: 22 93.6% 36.9%;
581
- --tone-orange-mark: #f76b15;
582
- --tone-orange-line: #cc4e00;
583
- --tone-orange-ink: #953d0e;
584
- --tone-teal-fill: 172 95% 23.7%;
585
- --tone-teal-ring: 172 95% 23.7%;
586
- --tone-teal-mark: #12a594;
587
- --tone-teal-line: #008573;
588
- --tone-teal-ink: #066558;
589
- --tone-blue-fill: 209 86.3% 40%;
590
- --tone-blue-ring: 209 86.3% 40%;
591
- --tone-blue-mark: #0090ff;
592
- --tone-blue-line: #0588f0;
593
- --tone-blue-ink: #0f59a3;
594
- --tone-pink-fill: 322 65.1% 46.1%;
595
- --tone-pink-ring: 322 65.1% 46.1%;
596
- --tone-pink-mark: #d6409f;
597
- --tone-pink-line: #d6409f;
598
- --tone-pink-ink: #a02071;
599
- --tone-brown-fill: 24 29.6% 39%;
600
- --tone-brown-ring: 24 29.6% 39%;
601
- --tone-brown-mark: #ad7f58;
602
- --tone-brown-line: #ad7f58;
603
- --tone-brown-ink: #725440;
604
- --tone-cyan-fill: 192 80.4% 30%;
605
- --tone-cyan-ring: 192 80.4% 30%;
606
- --tone-cyan-mark: #00a2c7;
607
- --tone-cyan-line: #107d98;
608
- --tone-cyan-ink: #0f6277;
609
- --tone-lime-fill: 84 44.2% 30.2%;
610
- --tone-lime-ring: 84 44.2% 30.2%;
611
- --tone-lime-mark: #bdee63;
612
- --tone-lime-line: #5c7c2f;
613
- --tone-lime-ink: #4b6126;
614
- --run-mix-succeeded: #3c9b78;
615
- --run-mix-waiting: #c16227;
616
- --run-mix-failed: #cd342f;
617
- --run-mix-in-flight: #00679e;
618
- --run-mix-cancelled: #515367;
500
+ --hsl-info: 201.1429 65.2174% 31.5686%;
501
+ --surface-success-bg: #f1f6f4;
502
+ --surface-success-border: #afcbc0;
503
+ --surface-warning-bg: #f7f5f1;
504
+ --surface-warning-border: #d1c5b0;
505
+ --surface-danger-bg: #faf1f1;
506
+ --surface-danger-border: #e4b0b0;
507
+ --surface-info-bg: #f1f5f8;
508
+ --surface-info-border: #b1c8d6;
509
+ --tone-violet-bg: hsl(272.3077 86.6667% 97.0588%);
510
+ --tone-violet-bg-hover: hsl(272.7273 78.5714% 94.5098%);
511
+ --tone-violet-bg-selected: hsl(270.9091 80.4878% 91.9608%);
512
+ --tone-violet-border: hsl(272.5301 80.5825% 79.8039%);
513
+ --tone-violet-border-selected: hsl(272.1569 80.1047% 62.549%);
514
+ --tone-violet-text: hsl(272.1212 79.8387% 51.3725%);
515
+ --tone-violet-icon: hsl(272.1569 80.1047% 62.549%);
516
+ --tone-violet-fill: 272.1081 80.0866% 54.7059%;
517
+ --tone-violet-ring: 272.1081 80.0866% 54.7059%;
518
+ --tone-violet-mark: hsl(272.1569 80.1047% 62.549%);
519
+ --tone-violet-line: hsl(272.1569 80.1047% 62.549%);
520
+ --tone-violet-ink: hsl(271.8857 79.9087% 42.9412%);
521
+ --tone-orange-bg: hsl(20 42.8571% 95.8824%);
522
+ --tone-orange-bg-hover: hsl(20 47.3684% 92.549%);
523
+ --tone-orange-bg-selected: hsl(20 47.3684% 88.8235%);
524
+ --tone-orange-border: hsl(22.1053 62.9139% 70.3922%);
525
+ --tone-orange-border-selected: hsl(21.9672 79.9127% 44.902%);
526
+ --tone-orange-text: hsl(22.0833 80% 35.2941%);
527
+ --tone-orange-icon: hsl(21.9672 79.9127% 44.902%);
528
+ --tone-orange-fill: 22 79.7872% 36.8627%;
529
+ --tone-orange-ring: 22 79.7872% 36.8627%;
530
+ --tone-orange-mark: hsl(21.9672 79.9127% 44.902%);
531
+ --tone-orange-line: hsl(21.9672 79.9127% 44.902%);
532
+ --tone-orange-ink: hsl(22.314 80.1325% 29.6078%);
533
+ --tone-teal-bg: hsl(171.4286 28% 95.098%);
534
+ --tone-teal-bg-hover: hsl(175 26.087% 90.9804%);
535
+ --tone-teal-bg-selected: hsl(170.5263 27.5362% 86.4706%);
536
+ --tone-teal-border: hsl(171.8182 35.1064% 63.1373%);
537
+ --tone-teal-border-selected: hsl(172.32 79.6178% 30.7843%);
538
+ --tone-teal-text: hsl(172.1212 80.4878% 24.1176%);
539
+ --tone-teal-icon: hsl(172.32 79.6178% 30.7843%);
540
+ --tone-teal-fill: 172.2772 79.5276% 24.902%;
541
+ --tone-teal-ring: 172.2772 79.5276% 24.902%;
542
+ --tone-teal-mark: hsl(172.32 79.6178% 30.7843%);
543
+ --tone-teal-line: hsl(172.32 79.6178% 30.7843%);
544
+ --tone-teal-ink: hsl(172.0482 80.5825% 20.1961%);
545
+ --tone-blue-bg: hsl(210 50% 96.0784%);
546
+ --tone-blue-bg-hover: hsl(208.4211 51.3514% 92.7451%);
547
+ --tone-blue-bg-selected: hsl(208.9655 52.7273% 89.2157%);
548
+ --tone-blue-border: hsl(209.4231 74.2857% 72.549%);
549
+ --tone-blue-border-selected: hsl(209.0909 79.8387% 48.6275%);
550
+ --tone-blue-text: hsl(209.2308 79.5918% 38.4314%);
551
+ --tone-blue-icon: hsl(209.0909 79.8387% 48.6275%);
552
+ --tone-blue-fill: 209.0683 80.0995% 39.4118%;
553
+ --tone-blue-ring: 209.0683 80.0995% 39.4118%;
554
+ --tone-blue-mark: hsl(209.0909 79.8387% 48.6275%);
555
+ --tone-blue-line: hsl(209.0909 79.8387% 48.6275%);
556
+ --tone-blue-ink: hsl(209.0909 80.4878% 32.1569%);
557
+ --tone-pink-bg: hsl(325 66.6667% 96.4706%);
558
+ --tone-pink-bg-hover: hsl(321.8182 64.7059% 93.3333%);
559
+ --tone-pink-bg-selected: hsl(320.625 61.5385% 89.8039%);
560
+ --tone-pink-border: hsl(322.2222 79.4118% 73.3333%);
561
+ --tone-pink-border-selected: hsl(321.7647 80.315% 49.8039%);
562
+ --tone-pink-text: hsl(321.9876 80.0995% 39.4118%);
563
+ --tone-pink-icon: hsl(321.7647 80.315% 49.8039%);
564
+ --tone-pink-fill: 322 80.3571% 43.9216%;
565
+ --tone-pink-ring: 322 80.3571% 43.9216%;
566
+ --tone-pink-mark: hsl(321.7647 80.315% 49.8039%);
567
+ --tone-pink-line: hsl(321.7647 80.315% 49.8039%);
568
+ --tone-pink-ink: hsl(321.9403 79.7619% 32.9412%);
569
+ --tone-brown-bg: hsl(15 20% 96.0784%);
570
+ --tone-brown-bg-hover: hsl(22.5 21.0526% 92.549%);
571
+ --tone-brown-bg-selected: hsl(23.0769 22.807% 88.8235%);
572
+ --tone-brown-border: hsl(23.4783 32.3944% 72.1569%);
573
+ --tone-brown-border-selected: hsl(23.8636 35.7724% 48.2353%);
574
+ --tone-brown-text: hsl(24.3478 35.7513% 37.8431%);
575
+ --tone-brown-icon: hsl(23.8636 35.7724% 48.2353%);
576
+ --tone-brown-fill: 23.662 36.0406% 38.6275%;
577
+ --tone-brown-ring: 23.662 36.0406% 38.6275%;
578
+ --tone-brown-mark: hsl(23.8636 35.7724% 48.2353%);
579
+ --tone-brown-line: hsl(23.8636 35.7724% 48.2353%);
580
+ --tone-brown-ink: hsl(23.3898 36.1963% 31.9608%);
581
+ --tone-cyan-bg: hsl(187.5 33.3333% 95.2941%);
582
+ --tone-cyan-bg-hover: hsl(192 34.8837% 91.5686%);
583
+ --tone-cyan-bg-selected: hsl(193.6364 34.375% 87.451%);
584
+ --tone-cyan-border: hsl(192.3077 44.8276% 65.8824%);
585
+ --tone-cyan-border-selected: hsl(192.1622 80.4348% 36.0784%);
586
+ --tone-cyan-text: hsl(192.4138 79.4521% 28.6275%);
587
+ --tone-cyan-icon: hsl(192.1622 80.4348% 36.0784%);
588
+ --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
589
+ --tone-cyan-ring: 192.3967 80.1325% 29.6078%;
590
+ --tone-cyan-mark: hsl(192.1622 80.4348% 36.0784%);
591
+ --tone-cyan-line: hsl(192.1622 80.4348% 36.0784%);
592
+ --tone-cyan-ink: hsl(192.2449 80.3279% 23.9216%);
593
+ --tone-lime-bg: hsl(90 25% 95.2941%);
594
+ --tone-lime-bg-hover: hsl(84 22.7273% 91.3725%);
595
+ --tone-lime-bg-selected: hsl(84 22.3881% 86.8627%);
596
+ --tone-lime-border: hsl(84.4444 30% 64.7059%);
597
+ --tone-lime-border-selected: hsl(83.8835 59.5376% 33.9216%);
598
+ --tone-lime-text: hsl(83.7037 60% 26.4706%);
599
+ --tone-lime-icon: hsl(83.8835 59.5376% 33.9216%);
600
+ --tone-lime-fill: 84.5783 59.7122% 27.2549%;
601
+ --tone-lime-ring: 84.5783 59.7122% 27.2549%;
602
+ --tone-lime-mark: hsl(83.8835 59.5376% 33.9216%);
603
+ --tone-lime-line: hsl(83.8835 59.5376% 33.9216%);
604
+ --tone-lime-ink: hsl(83.8235 59.6491% 22.3529%);
605
+ --surface-violet-bg: var(--tone-violet-bg);
606
+ --surface-violet-border: var(--tone-violet-border);
607
+ --surface-violet-text: var(--tone-violet-text);
608
+ --surface-orange-bg: var(--tone-orange-bg);
609
+ --surface-orange-border: var(--tone-orange-border);
610
+ --surface-orange-text: var(--tone-orange-text);
611
+ --surface-teal-bg: var(--tone-teal-bg);
612
+ --surface-teal-border: var(--tone-teal-border);
613
+ --surface-teal-text: var(--tone-teal-text);
614
+ --run-mix-succeeded: hsl(154.8718 60% 38.2353%);
615
+ --run-mix-waiting: hsl(38.3193 60.4061% 38.6275%);
616
+ --run-mix-failed: hsl(0 59.6838% 49.6078%);
617
+ --run-mix-in-flight: hsl(200.7692 60.4651% 33.7255%);
618
+ --run-mix-cancelled: hsl(228.5714 11.8644% 34.7059%);
619
619
  --glass-bg-strong: var(--depth-1);
620
620
  --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
621
621
  --shadow-color: 220 40% 8%;
@@ -675,13 +675,6 @@
675
675
  --well-raised-2: var(--well-card);
676
676
  --edge-highlight: 0 0 0 0 transparent;
677
677
  }
678
- [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], [data-theme="intelligence"] {
679
- --hsl-raised: var(--hsl-card);
680
- --hsl-raised-2: var(--hsl-card);
681
- --well-raised: var(--well-card);
682
- --well-raised-2: var(--well-card);
683
- --edge-highlight: 0 0 0 0 transparent;
684
- }
685
678
  [data-slot="card"] :where(*) {
686
679
  --card: var(--hsl-raised);
687
680
  --well: var(--well-card);
@@ -706,10 +699,10 @@
706
699
  --chart-rule: var(--md3-outline-variant);
707
700
  --chart-shade: var(--bg-hover);
708
701
  --chart-accent: var(--brand-cool);
709
- --chart-tier-c: #4a4a95;
710
- --chart-tier-b: #5b5bd6;
711
- --chart-tier-a: #8b87f0;
712
- --chart-tier-s: #b1a9ff;
702
+ --chart-tier-c: hsl(246.1017 55.1402% 41.9608%);
703
+ --chart-tier-b: hsl(246.1905 54.7826% 54.902%);
704
+ --chart-tier-a: hsl(245.3933 54.6012% 68.0392%);
705
+ --chart-tier-s: hsl(245.6604 54.6392% 80.9804%);
713
706
  }
714
707
  [data-sandbox-theme="vault"]:where(:not(.dark)),
715
708
  [data-sandbox-theme="dawn"]:where(:not(.dark)),
@@ -720,10 +713,10 @@
720
713
  [data-theme$="-light"],
721
714
  :where(:root) {
722
715
  --chart-accent: hsl(var(--hsl-primary));
723
- --chart-tier-c: #9b9ef0;
724
- --chart-tier-b: #7c7fe3;
725
- --chart-tier-a: #5b5bd6;
726
- --chart-tier-s: #272962;
716
+ --chart-tier-c: hsl(246.2687 54.4715% 75.8824%);
717
+ --chart-tier-b: hsl(246.055 54.7739% 60.9804%);
718
+ --chart-tier-a: hsl(246.0465 54.8936% 46.0784%);
719
+ --chart-tier-s: hsl(245.5172 54.717% 31.1765%);
727
720
  }
728
721
  @keyframes tangle-breathe {
729
722
  50% {
@@ -900,793 +893,872 @@
900
893
  [data-theme="super-light"],
901
894
  [data-theme="tangle-light"],
902
895
  [data-theme="agents-light"] {
903
- --hsl-secondary-foreground: 0 0% 10%;
904
- --surface-neutral-text: #4b5563;
896
+ --hsl-secondary-foreground: var(--hsl-foreground);
897
+ --surface-neutral-text: var(--text-muted);
905
898
  }
906
899
  [data-theme="aubergine"] {
907
- --hsl-background: 258 44% 12%;
908
- --hsl-foreground: 258 50% 97%;
909
- --hsl-card: 258 40% 20%;
910
- --hsl-card-foreground: 258 50% 97%;
911
- --hsl-popover: 258 40% 24%;
912
- --hsl-popover-foreground: 258 50% 97%;
913
- --hsl-primary: 250 100% 76%;
914
- --hsl-primary-foreground: 258 45% 10%;
915
- --hsl-secondary: 258 38% 17%;
916
- --hsl-muted: 258 38% 17%;
917
- --hsl-muted-foreground: 258 26% 70%;
918
- --hsl-accent: 258 40% 24%;
919
- --hsl-border: 258 32% 30%;
920
- --hsl-input: 258 38% 17%;
921
- --hsl-ring: 250 100% 76%;
922
- --depth-1: #1a1230;
923
- --depth-2: #241a42;
924
- --depth-3: #2f2253;
925
- --depth-4: #3d2d68;
926
- --bg-root: #1a1230;
927
- --bg-card: var(--depth-3);
928
- --bg-input: var(--depth-2);
929
- --md3-surface-container-lowest: #150e28;
930
- --md3-surface-container-low: #241a42;
931
- --md3-surface-container: #2a1f4c;
932
- --md3-surface-container-high: #2f2253;
933
- --md3-surface-container-highest: #3d2d68;
934
- --md3-outline-variant: #463571;
935
- --border-subtle: rgba(183,157,255,0.12);
936
- --border-default: rgba(183,157,255,0.22);
937
- --border-hover: rgba(183,157,255,0.40);
938
- --accent-text: #c4b0ff;
939
- --brand-primary: #8f8bff;
940
- --brand-glow: #c4b0ff;
941
- --text-primary: #f4f1fd;
942
- --text-secondary: #cec4e8;
943
- --text-muted: #b7afd1;
944
- --text-dim: #a59ebb;
900
+ --hsl-background: 257.7778 44.2623% 11.9608%;
901
+ --hsl-foreground: 0 0% 96.0784%;
902
+ --hsl-card: 258.1395 37.3913% 22.549%;
903
+ --hsl-card-foreground: var(--hsl-foreground);
904
+ --hsl-popover: 257.2881 34.104% 33.9216%;
905
+ --hsl-popover-foreground: var(--hsl-foreground);
906
+ --hsl-primary: 257.76 54.1126% 54.7059%;
907
+ --hsl-primary-foreground: 0 0% 100%;
908
+ --hsl-secondary: 257.6471 35.6643% 28.0392%;
909
+ --hsl-muted: var(--hsl-secondary);
910
+ --hsl-muted-foreground: 0 0% 76.8627%;
911
+ --hsl-accent: var(--hsl-secondary);
912
+ --hsl-border: 257.5385 34.0314% 37.451%;
913
+ --hsl-input: 257.6471 38.6364% 17.2549%;
914
+ --hsl-ring: 257.3684 92.6829% 83.9216%;
915
+ --depth-1: var(--md3-surface);
916
+ --depth-2: var(--md3-surface-container);
917
+ --depth-3: var(--md3-surface-container-high);
918
+ --depth-4: var(--md3-surface-container-highest);
919
+ --bg-root: hsl(var(--hsl-background));
920
+ --bg-card: var(--depth-2);
921
+ --bg-input: hsl(var(--hsl-input));
922
+ --md3-surface-container-lowest: var(--md3-surface-dim);
923
+ --md3-surface-container-low: hsl(var(--sidebar-background));
924
+ --md3-surface-container: hsl(var(--hsl-card));
925
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
926
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
927
+ --md3-outline-variant: hsl(var(--hsl-border));
928
+ --border-subtle: hsl(var(--hsl-border));
929
+ --border-default: hsl(var(--hsl-border));
930
+ --border-hover: rgb(245 245 245 / 0.28);
931
+ --accent-text: hsl(257.3684 92.6829% 83.9216%);
932
+ --brand-primary: hsl(258.5185 64.8% 75.4902%);
933
+ --brand-glow: var(--accent-text);
934
+ --text-primary: hsl(var(--hsl-foreground));
935
+ --text-secondary: hsl(0 0% 84.3137%);
936
+ --text-muted: hsl(0 0% 76.8627%);
937
+ --text-dim: hsl(0 0% 69.4118%);
945
938
  --md3-surface: var(--bg-root);
946
- --md3-surface-dim: var(--md3-surface-container-lowest);
947
- --md3-surface-bright: var(--md3-surface-container-highest);
939
+ --md3-surface-dim: hsl(255.7895 51.3514% 7.2549%);
940
+ --md3-surface-bright: hsl(var(--hsl-popover));
948
941
  --md3-surface-variant: var(--md3-surface-container-high);
949
942
  --md3-on-surface: var(--text-primary);
950
943
  --md3-on-surface-variant: var(--text-muted);
944
+ --hsl-raised: var(--hsl-secondary);
945
+ --hsl-raised-2: var(--hsl-popover);
946
+ --well-page: #0e091c;
947
+ --well-card: #0e091c;
948
+ --well-raised: #31244f;
949
+ --well-raised-2: #31244f;
950
+ --sidebar-background: 257.6471 38.6364% 17.2549%;
951
951
  }
952
952
  [data-theme="aubergine-light"] {
953
- --hsl-background: 258 60% 96%;
954
- --hsl-foreground: 258 45% 11%;
953
+ --hsl-background: 255 54.5455% 95.6863%;
954
+ --hsl-foreground: 0 0% 24.7059%;
955
955
  --hsl-card: 0 0% 100%;
956
- --hsl-card-foreground: 258 45% 11%;
956
+ --hsl-card-foreground: var(--hsl-foreground);
957
957
  --hsl-popover: 0 0% 100%;
958
- --hsl-popover-foreground: 258 45% 11%;
959
- --hsl-primary: 258 70% 50%;
958
+ --hsl-popover-foreground: var(--hsl-foreground);
959
+ --hsl-primary: 257.76 54.1126% 54.7059%;
960
960
  --hsl-primary-foreground: 0 0% 100%;
961
- --hsl-secondary: 258 45% 92%;
962
- --hsl-muted: 258 45% 92%;
963
- --hsl-muted-foreground: 258 18% 42%;
964
- --hsl-accent: 258 45% 92%;
965
- --hsl-border: 258 30% 88%;
966
- --hsl-input: 258 30% 88%;
967
- --hsl-ring: 258 70% 50%;
968
- --depth-1: #f4f1fc;
969
- --depth-2: #ece6f8;
970
- --depth-3: #ffffff;
971
- --depth-4: #ffffff;
972
- --bg-root: #f4f1fc;
973
- --bg-card: #ffffff;
974
- --bg-input: #ece6f8;
975
- --md3-surface-container-lowest: #ffffff;
976
- --md3-surface-container-low: #faf8fe;
977
- --md3-surface-container: #f4f1fc;
978
- --md3-surface-container-high: #ece6f8;
979
- --md3-surface-container-highest: #e4dcf4;
980
- --md3-outline-variant: #e0d8f0;
981
- --border-subtle: rgba(60,32,110,0.10);
982
- --border-default: rgba(60,32,110,0.16);
983
- --border-hover: rgba(60,32,110,0.30);
984
- --accent-text: #6423c8;
985
- --brand-primary: #6d28d9;
986
- --brand-glow: #8b5cf6;
987
- --text-primary: #160f22;
988
- --text-secondary: #3f3460;
989
- --text-muted: #585070;
990
- --text-dim: #655d82;
961
+ --hsl-secondary: 255 50% 95.2941%;
962
+ --hsl-muted: var(--hsl-secondary);
963
+ --hsl-muted-foreground: 0 0% 36.4706%;
964
+ --hsl-accent: var(--hsl-secondary);
965
+ --hsl-border: 255 14.2857% 83.5294%;
966
+ --hsl-input: 266.6667 100% 98.2353%;
967
+ --hsl-ring: 257.76 54.1126% 54.7059%;
968
+ --depth-1: var(--md3-surface);
969
+ --depth-2: var(--md3-surface-container);
970
+ --depth-3: var(--md3-surface-container-high);
971
+ --depth-4: var(--md3-surface-container-highest);
972
+ --bg-root: hsl(var(--hsl-background));
973
+ --bg-card: var(--depth-2);
974
+ --bg-input: hsl(var(--hsl-input));
975
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
976
+ --md3-surface-container-low: hsl(var(--sidebar-background));
977
+ --md3-surface-container: hsl(var(--hsl-card));
978
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
979
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
980
+ --md3-outline-variant: hsl(var(--hsl-border));
981
+ --border-subtle: hsl(var(--hsl-border));
982
+ --border-default: hsl(var(--hsl-border));
983
+ --border-hover: rgb(63 63 63 / 0.28);
984
+ --accent-text: hsl(257.9724 92.3404% 53.9216%);
985
+ --brand-primary: hsl(258.1295 65.2582% 58.2353%);
986
+ --brand-glow: var(--accent-text);
987
+ --text-primary: hsl(var(--hsl-foreground));
988
+ --text-secondary: hsl(0 0% 31.7647%);
989
+ --text-muted: hsl(0 0% 36.4706%);
990
+ --text-dim: hsl(0 0% 41.9608%);
991
991
  --md3-surface: var(--bg-root);
992
- --md3-surface-dim: var(--depth-2);
993
- --md3-surface-bright: #ffffff;
992
+ --md3-surface-dim: hsl(258.4615 23.6364% 89.2157%);
993
+ --md3-surface-bright: hsl(var(--hsl-popover));
994
994
  --md3-surface-variant: var(--md3-surface-container-high);
995
995
  --md3-on-surface: var(--text-primary);
996
996
  --md3-on-surface-variant: var(--text-muted);
997
+ --hsl-raised: var(--hsl-secondary);
998
+ --hsl-raised-2: var(--hsl-popover);
999
+ --well-page: #ffffff;
1000
+ --well-card: #f1eefa;
1001
+ --well-raised: #ffffff;
1002
+ --well-raised-2: #f1eefa;
1003
+ --sidebar-background: 266.6667 100% 98.2353%;
997
1004
  }
998
1005
  [data-theme="arena"] {
999
- --hsl-background: 160 16% 6%;
1000
- --hsl-foreground: 150 20% 96%;
1001
- --hsl-card: 158 14% 12%;
1002
- --hsl-card-foreground: 150 20% 96%;
1003
- --hsl-popover: 158 13% 16%;
1004
- --hsl-popover-foreground: 150 20% 96%;
1005
- --hsl-primary: 160 84% 39%;
1006
- --hsl-primary-foreground: 160 60% 8%;
1007
- --hsl-secondary: 158 12% 12%;
1008
- --hsl-muted: 158 12% 12%;
1009
- --hsl-muted-foreground: 152 12% 62%;
1010
- --hsl-accent: 158 14% 14%;
1011
- --hsl-border: 158 14% 18%;
1012
- --hsl-input: 158 12% 12%;
1013
- --hsl-ring: 160 84% 45%;
1014
- --depth-1: #0a0f0c;
1015
- --depth-2: #131b16;
1016
- --depth-3: #1b261f;
1017
- --depth-4: #233328;
1018
- --bg-root: #0a0f0c;
1019
- --bg-card: var(--depth-3);
1020
- --bg-input: var(--depth-2);
1021
- --md3-surface-container-lowest: #070b08;
1022
- --md3-surface-container-low: #131b16;
1023
- --md3-surface-container: #182019;
1024
- --md3-surface-container-high: #1b261f;
1025
- --md3-surface-container-highest: #233328;
1026
- --md3-outline-variant: #2a3a31;
1027
- --border-subtle: rgba(52,211,153,0.10);
1028
- --border-default: rgba(52,211,153,0.18);
1029
- --border-hover: rgba(52,211,153,0.32);
1030
- --accent-text: #34d399;
1031
- --brand-primary: #10b981;
1032
- --brand-glow: #34d399;
1033
- --text-primary: #ecfdf5;
1034
- --text-secondary: #c2e8d6;
1035
- --text-muted: #8fb6a3;
1036
- --text-dim: #7ba08e;
1006
+ --hsl-background: 160 20% 5.8824%;
1007
+ --hsl-foreground: 0 0% 92.549%;
1008
+ --hsl-card: 156 13.8889% 14.1176%;
1009
+ --hsl-card-foreground: var(--hsl-foreground);
1010
+ --hsl-popover: 156.9231 11.1111% 22.9412%;
1011
+ --hsl-popover-foreground: var(--hsl-foreground);
1012
+ --hsl-primary: 160.5 54.0541% 29.0196%;
1013
+ --hsl-primary-foreground: 0 0% 100%;
1014
+ --hsl-secondary: 160 12.766% 18.4314%;
1015
+ --hsl-muted: var(--hsl-secondary);
1016
+ --hsl-muted-foreground: 0 0% 73.7255%;
1017
+ --hsl-accent: var(--hsl-secondary);
1018
+ --hsl-border: 156 11.4504% 25.6863%;
1019
+ --hsl-input: 157.5 16% 9.8039%;
1020
+ --hsl-ring: 160 91.6667% 42.3529%;
1021
+ --depth-1: var(--md3-surface);
1022
+ --depth-2: var(--md3-surface-container);
1023
+ --depth-3: var(--md3-surface-container-high);
1024
+ --depth-4: var(--md3-surface-container-highest);
1025
+ --bg-root: hsl(var(--hsl-background));
1026
+ --bg-card: var(--depth-2);
1027
+ --bg-input: hsl(var(--hsl-input));
1028
+ --md3-surface-container-lowest: var(--md3-surface-dim);
1029
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1030
+ --md3-surface-container: hsl(var(--hsl-card));
1031
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1032
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1033
+ --md3-outline-variant: hsl(var(--hsl-border));
1034
+ --border-subtle: hsl(var(--hsl-border));
1035
+ --border-default: hsl(var(--hsl-border));
1036
+ --border-hover: rgb(236 236 236 / 0.28);
1037
+ --accent-text: hsl(160 91.6667% 42.3529%);
1038
+ --brand-primary: hsl(159.7183 65.1376% 42.7451%);
1039
+ --brand-glow: var(--accent-text);
1040
+ --text-primary: hsl(var(--hsl-foreground));
1041
+ --text-secondary: hsl(0 0% 81.1765%);
1042
+ --text-muted: hsl(0 0% 73.7255%);
1043
+ --text-dim: hsl(0 0% 66.6667%);
1037
1044
  --md3-surface: var(--bg-root);
1038
- --md3-surface-dim: var(--md3-surface-container-lowest);
1039
- --md3-surface-bright: var(--md3-surface-container-highest);
1045
+ --md3-surface-dim: hsl(160 23.0769% 2.549%);
1046
+ --md3-surface-bright: hsl(var(--hsl-popover));
1040
1047
  --md3-surface-variant: var(--md3-surface-container-high);
1041
1048
  --md3-on-surface: var(--text-primary);
1042
1049
  --md3-on-surface-variant: var(--text-muted);
1050
+ --hsl-raised: var(--hsl-secondary);
1051
+ --hsl-raised-2: var(--hsl-popover);
1052
+ --well-page: #050807;
1053
+ --well-card: #050807;
1054
+ --well-raised: #1f2925;
1055
+ --well-raised-2: #1f2925;
1056
+ --sidebar-background: 157.5 16% 9.8039%;
1043
1057
  }
1044
1058
  [data-theme="arena-light"] {
1045
- --hsl-background: 150 30% 96%;
1046
- --hsl-foreground: 158 30% 10%;
1059
+ --hsl-background: 150 29.4118% 93.3333%;
1060
+ --hsl-foreground: 0 0% 25.098%;
1047
1061
  --hsl-card: 0 0% 100%;
1048
- --hsl-card-foreground: 158 30% 10%;
1062
+ --hsl-card-foreground: var(--hsl-foreground);
1049
1063
  --hsl-popover: 0 0% 100%;
1050
- --hsl-popover-foreground: 158 30% 10%;
1051
- --hsl-primary: 160 84% 27%;
1064
+ --hsl-popover-foreground: var(--hsl-foreground);
1065
+ --hsl-primary: 160.5 54.0541% 29.0196%;
1052
1066
  --hsl-primary-foreground: 0 0% 100%;
1053
- --hsl-secondary: 150 25% 92%;
1054
- --hsl-muted: 150 25% 92%;
1055
- --hsl-muted-foreground: 158 14% 40%;
1056
- --hsl-accent: 150 25% 92%;
1057
- --hsl-border: 150 20% 86%;
1058
- --hsl-input: 150 20% 86%;
1059
- --hsl-ring: 160 84% 30%;
1060
- --depth-1: #f0f6f2;
1061
- --depth-2: #e6f0ea;
1062
- --depth-3: #ffffff;
1063
- --depth-4: #ffffff;
1064
- --bg-root: #f0f6f2;
1065
- --bg-card: #ffffff;
1066
- --bg-input: #e6f0ea;
1067
- --md3-surface-container-lowest: #ffffff;
1068
- --md3-surface-container-low: #f6fbf8;
1069
- --md3-surface-container: #f0f6f2;
1070
- --md3-surface-container-high: #e6f0ea;
1071
- --md3-surface-container-highest: #dcebe2;
1072
- --md3-outline-variant: #d7e8de;
1073
- --border-subtle: rgba(6,95,70,0.10);
1074
- --border-default: rgba(6,95,70,0.16);
1075
- --border-hover: rgba(6,95,70,0.30);
1076
- --accent-text: #03674b;
1077
- --brand-primary: #059669;
1078
- --brand-glow: #10b981;
1079
- --text-primary: #06231a;
1080
- --text-secondary: #285048;
1081
- --text-muted: #455f52;
1082
- --text-dim: #4e6d62;
1067
+ --hsl-secondary: 150 27.7778% 92.9412%;
1068
+ --hsl-muted: var(--hsl-secondary);
1069
+ --hsl-muted-foreground: 0 0% 36.8627%;
1070
+ --hsl-accent: var(--hsl-secondary);
1071
+ --hsl-border: 150 10.4167% 81.1765%;
1072
+ --hsl-input: 150 55.5556% 96.4706%;
1073
+ --hsl-ring: 160.5 54.0541% 29.0196%;
1074
+ --depth-1: var(--md3-surface);
1075
+ --depth-2: var(--md3-surface-container);
1076
+ --depth-3: var(--md3-surface-container-high);
1077
+ --depth-4: var(--md3-surface-container-highest);
1078
+ --bg-root: hsl(var(--hsl-background));
1079
+ --bg-card: var(--depth-2);
1080
+ --bg-input: hsl(var(--hsl-input));
1081
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
1082
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1083
+ --md3-surface-container: hsl(var(--hsl-card));
1084
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1085
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1086
+ --md3-outline-variant: hsl(var(--hsl-border));
1087
+ --border-subtle: hsl(var(--hsl-border));
1088
+ --border-default: hsl(var(--hsl-border));
1089
+ --border-hover: rgb(64 64 64 / 0.28);
1090
+ --accent-text: hsl(160.4082 92.4528% 20.7843%);
1091
+ --brand-primary: hsl(160 64.8649% 29.0196%);
1092
+ --brand-glow: var(--accent-text);
1093
+ --text-primary: hsl(var(--hsl-foreground));
1094
+ --text-secondary: hsl(0 0% 31.7647%);
1095
+ --text-muted: hsl(0 0% 36.8627%);
1096
+ --text-dim: hsl(0 0% 42.3529%);
1083
1097
  --md3-surface: var(--bg-root);
1084
- --md3-surface-dim: var(--depth-2);
1085
- --md3-surface-bright: #ffffff;
1098
+ --md3-surface-dim: hsl(153.3333 13.4328% 86.8627%);
1099
+ --md3-surface-bright: hsl(var(--hsl-popover));
1086
1100
  --md3-surface-variant: var(--md3-surface-container-high);
1087
1101
  --md3-on-surface: var(--text-primary);
1088
1102
  --md3-on-surface-variant: var(--text-muted);
1103
+ --hsl-raised: var(--hsl-secondary);
1104
+ --hsl-raised-2: var(--hsl-popover);
1105
+ --well-page: #ffffff;
1106
+ --well-card: #e9f3ee;
1107
+ --well-raised: #ffffff;
1108
+ --well-raised-2: #e9f3ee;
1109
+ --sidebar-background: 150 55.5556% 96.4706%;
1089
1110
  }
1090
1111
  [data-theme="super"] {
1091
- --hsl-background: 120 12% 8%;
1092
- --hsl-foreground: 86 20% 93%;
1093
- --hsl-card: 120 11% 12%;
1094
- --hsl-card-foreground: 86 20% 93%;
1095
- --hsl-popover: 120 10% 15%;
1096
- --hsl-popover-foreground: 86 20% 93%;
1097
- --hsl-primary: 139 31% 61%;
1098
- --hsl-primary-foreground: 140 35% 8%;
1099
- --hsl-secondary: 120 9% 17%;
1100
- --hsl-secondary-foreground: 86 20% 93%;
1101
- --hsl-muted: 120 9% 17%;
1102
- --hsl-muted-foreground: 95 10% 67%;
1103
- --hsl-accent: 120 10% 18%;
1104
- --hsl-accent-foreground: 86 20% 93%;
1105
- --hsl-border: 120 9% 25%;
1106
- --hsl-input: 120 9% 17%;
1107
- --hsl-ring: 139 31% 61%;
1108
- --depth-1: #121712;
1109
- --depth-2: #1c231c;
1110
- --depth-3: #232b23;
1111
- --depth-4: #2b342b;
1112
- --bg-root: #121712;
1112
+ --hsl-background: 120 12.1951% 8.0392%;
1113
+ --hsl-foreground: 0 0% 96.4706%;
1114
+ --hsl-card: 120 9.5238% 16.4706%;
1115
+ --hsl-card-foreground: var(--hsl-foreground);
1116
+ --hsl-popover: 120 8.3969% 25.6863%;
1117
+ --hsl-popover-foreground: var(--hsl-foreground);
1118
+ --hsl-primary: 148.1481 54.3624% 29.2157%;
1119
+ --hsl-primary-foreground: 0 0% 100%;
1120
+ --hsl-secondary: 120 9.2593% 21.1765%;
1121
+ --hsl-secondary-foreground: var(--hsl-foreground);
1122
+ --hsl-muted: var(--hsl-secondary);
1123
+ --hsl-muted-foreground: 0 0% 77.2549%;
1124
+ --hsl-accent: var(--hsl-secondary);
1125
+ --hsl-accent-foreground: var(--hsl-foreground);
1126
+ --hsl-border: 120 8.3333% 28.2353%;
1127
+ --hsl-input: 120 9.6774% 12.1569%;
1128
+ --hsl-ring: 147.9808 92.0354% 44.3137%;
1129
+ --depth-1: var(--md3-surface);
1130
+ --depth-2: var(--md3-surface-container);
1131
+ --depth-3: var(--md3-surface-container-high);
1132
+ --depth-4: var(--md3-surface-container-highest);
1133
+ --bg-root: hsl(var(--hsl-background));
1113
1134
  --bg-card: var(--depth-2);
1114
- --bg-input: var(--depth-3);
1115
- --md3-surface-container-lowest: #0d110d;
1116
- --md3-surface-container-low: #171d17;
1117
- --md3-surface-container: #1c231c;
1118
- --md3-surface-container-high: #232b23;
1119
- --md3-surface-container-highest: #2b342b;
1120
- --md3-outline-variant: #3a453a;
1121
- --border-subtle: rgba(190,210,180,0.12);
1122
- --border-default: rgba(190,210,180,0.20);
1123
- --border-hover: rgba(190,210,180,0.34);
1124
- --accent-text: #8fd0a4;
1125
- --brand-primary: #7dbb91;
1126
- --brand-glow: #8fd0a4;
1127
- --text-primary: #eef1ea;
1128
- --text-secondary: #cbd3c5;
1129
- --text-muted: #a9b3a2;
1130
- --text-dim: #959f8f;
1131
- --md3-primary: #8fd0a4;
1132
- --bg-hover: rgba(190,210,180,0.06);
1133
- --bg-selection: rgba(125,187,145,0.28);
1134
- --accent-surface-soft: rgba(125,187,145,0.08);
1135
- --accent-surface-strong: rgba(125,187,145,0.24);
1136
- --border-accent: rgba(125,187,145,0.38);
1137
- --border-accent-hover: rgba(125,187,145,0.56);
1138
- --btn-primary-bg: #7dbb91;
1139
- --btn-primary-hover: #8fcaa1;
1140
- --btn-primary-text: #0e1d13;
1141
- --btn-cta-bg: #7dbb91;
1142
- --btn-cta-text: #0e1d13;
1135
+ --bg-input: hsl(var(--hsl-input));
1136
+ --md3-surface-container-lowest: var(--md3-surface-dim);
1137
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1138
+ --md3-surface-container: hsl(var(--hsl-card));
1139
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1140
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1141
+ --md3-outline-variant: hsl(var(--hsl-border));
1142
+ --border-subtle: hsl(var(--hsl-border));
1143
+ --border-default: hsl(var(--hsl-border));
1144
+ --border-hover: rgb(246 246 246 / 0.28);
1145
+ --accent-text: hsl(147.9808 92.0354% 44.3137%);
1146
+ --brand-primary: hsl(148 65.2174% 45.098%);
1147
+ --brand-glow: var(--accent-text);
1148
+ --text-primary: hsl(var(--hsl-foreground));
1149
+ --text-secondary: hsl(0 0% 85.098%);
1150
+ --text-muted: hsl(0 0% 77.2549%);
1151
+ --text-dim: hsl(0 0% 69.8039%);
1152
+ --md3-primary: var(--accent-text);
1153
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
1154
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
1155
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
1156
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
1157
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
1158
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
1159
+ --btn-primary-bg: hsl(var(--hsl-primary));
1160
+ --btn-primary-hover: hsl(147.9452 39.4595% 36.2745%);
1161
+ --btn-primary-text: hsl(0 0% 100%);
1162
+ --btn-cta-bg: var(--btn-primary-bg);
1163
+ --btn-cta-text: var(--btn-primary-text);
1143
1164
  --md3-surface: var(--bg-root);
1144
- --md3-surface-dim: var(--md3-surface-container-lowest);
1145
- --md3-surface-bright: var(--md3-surface-container-highest);
1165
+ --md3-surface-dim: hsl(120 14.2857% 4.1176%);
1166
+ --md3-surface-bright: hsl(var(--hsl-popover));
1146
1167
  --md3-surface-variant: var(--md3-surface-container-high);
1147
1168
  --md3-on-surface: var(--text-primary);
1148
1169
  --md3-on-surface-variant: var(--text-muted);
1170
+ --hsl-raised: var(--hsl-secondary);
1171
+ --hsl-raised-2: var(--hsl-popover);
1172
+ --well-page: #090c09;
1173
+ --well-card: #090c09;
1174
+ --well-raised: #262e26;
1175
+ --well-raised-2: #262e26;
1176
+ --sidebar-background: 120 9.6774% 12.1569%;
1149
1177
  }
1150
1178
  [data-theme="super-light"] {
1151
- --hsl-background: 75 22% 96%;
1152
- --hsl-foreground: 114 13% 15%;
1179
+ --hsl-background: 80 17.6471% 93.3333%;
1180
+ --hsl-foreground: 0 0% 25.098%;
1153
1181
  --hsl-card: 0 0% 100%;
1154
- --hsl-card-foreground: 114 13% 15%;
1182
+ --hsl-card-foreground: var(--hsl-foreground);
1155
1183
  --hsl-popover: 0 0% 100%;
1156
- --hsl-popover-foreground: 114 13% 15%;
1157
- --hsl-primary: 148 40% 25%;
1184
+ --hsl-popover-foreground: var(--hsl-foreground);
1185
+ --hsl-primary: 148.1481 54.3624% 29.2157%;
1158
1186
  --hsl-primary-foreground: 0 0% 100%;
1159
- --hsl-secondary: 80 18% 93%;
1160
- --hsl-muted: 80 18% 93%;
1161
- --hsl-muted-foreground: 99 9% 37%;
1162
- --hsl-accent: 80 18% 93%;
1163
- --hsl-border: 87 17% 87%;
1164
- --hsl-input: 92 14% 78%;
1165
- --hsl-ring: 144 31% 34%;
1166
- --depth-1: #f7f8f4;
1167
- --depth-2: #eff1eb;
1168
- --depth-3: #ffffff;
1169
- --depth-4: #ffffff;
1170
- --bg-root: #f7f8f4;
1171
- --bg-card: #ffffff;
1172
- --bg-input: #eff1eb;
1173
- --md3-surface-container-lowest: #ffffff;
1174
- --md3-surface-container-low: #fcfcf9;
1175
- --md3-surface-container: #f7f8f4;
1176
- --md3-surface-container-high: #eff1eb;
1177
- --md3-surface-container-highest: #e6eae1;
1178
- --md3-outline-variant: #dfe4d9;
1179
- --border-subtle: rgba(34,43,33,0.10);
1180
- --border-default: rgba(34,43,33,0.16);
1181
- --border-hover: rgba(34,43,33,0.30);
1182
- --accent-text: #275a3f;
1183
- --brand-primary: #275a3f;
1184
- --brand-glow: #3b7050;
1185
- --text-primary: #222b21;
1186
- --text-secondary: #46523f;
1187
- --text-muted: #5d6857;
1188
- --text-dim: #616c5a;
1189
- --md3-primary: #275a3f;
1190
- --bg-hover: rgba(34,43,33,0.04);
1191
- --bg-selection: rgba(39,90,63,0.16);
1192
- --accent-surface-soft: rgba(39,90,63,0.06);
1193
- --accent-surface-strong: rgba(39,90,63,0.14);
1194
- --border-accent: rgba(39,90,63,0.30);
1195
- --border-accent-hover: rgba(39,90,63,0.45);
1196
- --btn-primary-bg: #275a3f;
1197
- --btn-primary-hover: #1e4832;
1198
- --btn-primary-text: #ffffff;
1199
- --btn-cta-bg: #275a3f;
1200
- --btn-cta-text: #ffffff;
1187
+ --hsl-secondary: 80 16.6667% 92.9412%;
1188
+ --hsl-muted: var(--hsl-secondary);
1189
+ --hsl-muted-foreground: 0 0% 36.4706%;
1190
+ --hsl-accent: var(--hsl-secondary);
1191
+ --hsl-border: 80 6.25% 81.1765%;
1192
+ --hsl-input: 80 33.3333% 96.4706%;
1193
+ --hsl-ring: 148.1481 54.3624% 29.2157%;
1194
+ --depth-1: var(--md3-surface);
1195
+ --depth-2: var(--md3-surface-container);
1196
+ --depth-3: var(--md3-surface-container-high);
1197
+ --depth-4: var(--md3-surface-container-highest);
1198
+ --bg-root: hsl(var(--hsl-background));
1199
+ --bg-card: var(--depth-2);
1200
+ --bg-input: hsl(var(--hsl-input));
1201
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
1202
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1203
+ --md3-surface-container: hsl(var(--hsl-card));
1204
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1205
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1206
+ --md3-outline-variant: hsl(var(--hsl-border));
1207
+ --border-subtle: hsl(var(--hsl-border));
1208
+ --border-default: hsl(var(--hsl-border));
1209
+ --border-hover: rgb(64 64 64 / 0.28);
1210
+ --accent-text: hsl(148.4848 92.5234% 20.9804%);
1211
+ --brand-primary: hsl(148.4536 65.1007% 29.2157%);
1212
+ --brand-glow: var(--accent-text);
1213
+ --text-primary: hsl(var(--hsl-foreground));
1214
+ --text-secondary: hsl(0 0% 31.7647%);
1215
+ --text-muted: hsl(0 0% 36.4706%);
1216
+ --text-dim: hsl(0 0% 41.9608%);
1217
+ --md3-primary: var(--accent-text);
1218
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
1219
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
1220
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
1221
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
1222
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
1223
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
1224
+ --btn-primary-bg: hsl(var(--hsl-primary));
1225
+ --btn-primary-hover: hsl(147.9452 39.4595% 36.2745%);
1226
+ --btn-primary-text: hsl(0 0% 100%);
1227
+ --btn-cta-bg: var(--btn-primary-bg);
1228
+ --btn-cta-text: var(--btn-primary-text);
1201
1229
  --md3-surface: var(--bg-root);
1202
- --md3-surface-dim: var(--depth-2);
1203
- --md3-surface-bright: #ffffff;
1230
+ --md3-surface-dim: hsl(85.7143 10.4478% 86.8627%);
1231
+ --md3-surface-bright: hsl(var(--hsl-popover));
1204
1232
  --md3-surface-variant: var(--md3-surface-container-high);
1205
1233
  --md3-on-surface: var(--text-primary);
1206
1234
  --md3-on-surface-variant: var(--text-muted);
1235
+ --hsl-raised: var(--hsl-secondary);
1236
+ --hsl-raised-2: var(--hsl-popover);
1237
+ --well-page: #ffffff;
1238
+ --well-card: #eff1eb;
1239
+ --well-raised: #ffffff;
1240
+ --well-raised-2: #eff1eb;
1241
+ --sidebar-background: 80 33.3333% 96.4706%;
1207
1242
  }
1208
1243
  [data-theme="tangle-dark"] {}
1209
1244
  [data-theme="tangle-light"] {
1210
- --hsl-background: 240 33% 98%;
1211
- --hsl-foreground: 245 32% 14%;
1245
+ --hsl-background: 240 33.3333% 95.2941%;
1246
+ --hsl-foreground: 0 0% 24.7059%;
1212
1247
  --hsl-card: 0 0% 100%;
1213
- --hsl-card-foreground: 245 32% 14%;
1248
+ --hsl-card-foreground: var(--hsl-foreground);
1214
1249
  --hsl-popover: 0 0% 100%;
1215
- --hsl-popover-foreground: 245 32% 14%;
1216
- --hsl-primary: 239 84% 60%;
1250
+ --hsl-popover-foreground: var(--hsl-foreground);
1251
+ --hsl-primary: 245.9504 54.2601% 56.2745%;
1217
1252
  --hsl-primary-foreground: 0 0% 100%;
1218
- --hsl-secondary: 240 30% 95%;
1219
- --hsl-muted: 240 28% 95%;
1220
- --hsl-muted-foreground: 240 8% 42%;
1221
- --hsl-accent: 240 30% 95%;
1222
- --hsl-border: 240 20% 90%;
1223
- --hsl-input: 240 20% 90%;
1224
- --hsl-ring: 239 84% 60%;
1225
- --depth-1: #f4f4f9;
1226
- --depth-2: #edecf4;
1227
- --depth-3: #ffffff;
1228
- --depth-4: #ffffff;
1229
- --bg-root: #f4f4f9;
1230
- --bg-card: #ffffff;
1231
- --bg-input: #edecf4;
1232
- --md3-surface-container-lowest: #ffffff;
1233
- --md3-surface-container-low: #f8f8fc;
1234
- --md3-surface-container: #f4f4f9;
1235
- --md3-surface-container-high: #edecf4;
1236
- --md3-surface-container-highest: #e5e4ee;
1237
- --md3-outline-variant: #e2e1ec;
1238
- --border-subtle: rgba(20,20,40,0.08);
1239
- --border-default: rgba(20,20,40,0.14);
1240
- --border-hover: rgba(20,20,40,0.26);
1241
- --accent-text: #453be3;
1242
- --brand-primary: #6366f1;
1243
- --brand-glow: #818cf8;
1244
- --text-primary: #15131f;
1245
- --text-secondary: #3f3a52;
1246
- --text-muted: #59556b;
1247
- --text-dim: #67627b;
1253
+ --hsl-secondary: 240 30.7692% 94.902%;
1254
+ --hsl-muted: var(--hsl-secondary);
1255
+ --hsl-muted-foreground: 0 0% 36.4706%;
1256
+ --hsl-accent: var(--hsl-secondary);
1257
+ --hsl-border: 240 8.046% 82.9412%;
1258
+ --hsl-input: 240 100% 98.6275%;
1259
+ --hsl-ring: 245.9504 54.2601% 56.2745%;
1260
+ --depth-1: var(--md3-surface);
1261
+ --depth-2: var(--md3-surface-container);
1262
+ --depth-3: var(--md3-surface-container-high);
1263
+ --depth-4: var(--md3-surface-container-highest);
1264
+ --bg-root: hsl(var(--hsl-background));
1265
+ --bg-card: var(--depth-2);
1266
+ --bg-input: hsl(var(--hsl-input));
1267
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
1268
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1269
+ --md3-surface-container: hsl(var(--hsl-card));
1270
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1271
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1272
+ --md3-outline-variant: hsl(var(--hsl-border));
1273
+ --border-subtle: hsl(var(--hsl-border));
1274
+ --border-default: hsl(var(--hsl-border));
1275
+ --border-hover: rgb(63 63 63 / 0.28);
1276
+ --accent-text: hsl(246.0302 91.7051% 57.451%);
1277
+ --brand-primary: hsl(246.3636 64.7059% 60%);
1278
+ --brand-glow: var(--accent-text);
1279
+ --text-primary: hsl(var(--hsl-foreground));
1280
+ --text-secondary: hsl(0 0% 31.7647%);
1281
+ --text-muted: hsl(0 0% 36.4706%);
1282
+ --text-dim: hsl(0 0% 41.9608%);
1283
+ --hsl-raised: var(--hsl-secondary);
1284
+ --hsl-raised-2: var(--hsl-popover);
1285
+ --well-page: #ffffff;
1286
+ --well-card: #efeff7;
1287
+ --well-raised: #ffffff;
1288
+ --well-raised-2: #efeff7;
1289
+ --sidebar-background: 240 100% 98.6275%;
1248
1290
  }
1249
1291
  .dark[data-theme="intelligence"] {
1250
- --md3-surface: #0d0a10;
1251
- --md3-surface-dim: #0a080d;
1252
- --md3-surface-bright: #2e2936;
1253
- --md3-surface-container-lowest: #070509;
1254
- --md3-surface-container-low: #100d15;
1255
- --md3-surface-container: #14111a;
1256
- --md3-surface-container-high: #1b1821;
1257
- --md3-surface-container-highest: #24202b;
1258
- --md3-surface-variant: #24202b;
1259
- --md3-on-surface-variant: #aaa6bb;
1260
- --hsl-background: 262 24% 5%;
1261
- --hsl-card: 262 19% 11%;
1262
- --hsl-popover: 260 16% 13%;
1263
- --hsl-secondary: 262 15% 18%;
1264
- --hsl-muted: 262 17% 15%;
1265
- --hsl-muted-foreground: 255 12% 62%;
1266
- --hsl-accent: 262 15% 20%;
1267
- --hsl-border: 262 12% 28%;
1268
- --hsl-input: 260 14% 16%;
1269
- --sidebar-background: 264 26% 4%;
1270
- --sidebar-accent: 262 16% 16%;
1271
- --sidebar-border: 262 12% 13%;
1272
- --depth-1: #0e0b13;
1273
- --depth-2: #16131c;
1274
- --depth-3: #201c28;
1275
- --depth-4: #2a2533;
1276
- --bg-elevated: hsl(262 17% 15%);
1277
- --bg-section: hsl(262 22% 7%);
1278
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent),
1279
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
1280
- linear-gradient(180deg, var(--depth-1), #0d0a12 100%);
1281
- --border-subtle: rgba(120, 108, 158, 0.1);
1282
- --border-default: rgba(120, 108, 158, 0.18);
1283
- --border-hover: rgba(120, 108, 158, 0.28);
1292
+ --md3-surface: var(--bg-root);
1293
+ --md3-surface-dim: hsl(260 33.3333% 1.7647%);
1294
+ --md3-surface-bright: hsl(var(--hsl-popover));
1295
+ --md3-surface-container-lowest: var(--md3-surface-dim);
1296
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1297
+ --md3-surface-container: hsl(var(--hsl-card));
1298
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1299
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1300
+ --md3-surface-variant: var(--md3-surface-container-high);
1301
+ --md3-on-surface-variant: var(--text-muted);
1302
+ --hsl-background: 260 23.0769% 5.098%;
1303
+ --hsl-card: 260 16.6667% 14.1176%;
1304
+ --hsl-popover: 260 14.7541% 23.9216%;
1305
+ --hsl-secondary: 264 15.7895% 18.6275%;
1306
+ --hsl-muted: var(--hsl-secondary);
1307
+ --hsl-muted-foreground: 0 0% 70.1961%;
1308
+ --hsl-accent: var(--hsl-secondary);
1309
+ --hsl-border: 261 14.2857% 27.451%;
1310
+ --hsl-input: 264 20.8333% 9.4118%;
1311
+ --sidebar-background: 264 20.8333% 9.4118%;
1312
+ --sidebar-accent: var(--hsl-secondary);
1313
+ --sidebar-border: var(--hsl-border);
1314
+ --depth-1: var(--md3-surface);
1315
+ --depth-2: var(--md3-surface-container);
1316
+ --depth-3: var(--md3-surface-container-high);
1317
+ --depth-4: var(--md3-surface-container-highest);
1318
+ --bg-elevated: var(--depth-4);
1319
+ --bg-section: var(--depth-1);
1320
+ --bg-root: hsl(var(--hsl-background));
1321
+ --border-subtle: hsl(var(--hsl-border));
1322
+ --border-default: hsl(var(--hsl-border));
1323
+ --border-hover: rgb(224 224 224 / 0.28);
1324
+ --hsl-raised: var(--hsl-secondary);
1325
+ --hsl-raised-2: var(--hsl-popover);
1326
+ --well-page: #040306;
1327
+ --well-card: #040306;
1328
+ --well-raised: #221e2a;
1329
+ --well-raised-2: #221e2a;
1284
1330
  }
1285
1331
  [data-theme="hospitality"]:where(:not(.dark)) {
1286
- --hsl-background: 108 16.7% 88.2%;
1287
- --hsl-foreground: 143 25% 12%;
1332
+ --hsl-background: 108 16.6667% 88.2353%;
1333
+ --hsl-foreground: 0 0% 22.3529%;
1288
1334
  --hsl-card: 0 0% 100%;
1289
- --hsl-card-foreground: 143 25% 12%;
1335
+ --hsl-card-foreground: var(--hsl-foreground);
1290
1336
  --hsl-popover: 0 0% 100%;
1291
- --hsl-popover-foreground: 143 25% 12%;
1292
- --hsl-primary: 153 38% 25%;
1337
+ --hsl-popover-foreground: var(--hsl-foreground);
1338
+ --hsl-primary: 153 54.0541% 29.0196%;
1293
1339
  --hsl-primary-foreground: 0 0% 100%;
1294
- --hsl-secondary: 110 18.7% 93.7%;
1295
- --hsl-secondary-foreground: 143 25% 12%;
1296
- --hsl-muted: 110 18.7% 93.7%;
1297
- --hsl-muted-foreground: 138 7.3% 35.5%;
1298
- --hsl-accent: 133 38.4% 88%;
1299
- --hsl-accent-foreground: 143 25% 12%;
1300
- --hsl-border: 107 8.7% 79.8%;
1340
+ --hsl-secondary: 108 29.4118% 93.3333%;
1341
+ --hsl-secondary-foreground: var(--hsl-foreground);
1342
+ --hsl-muted: var(--hsl-secondary);
1343
+ --hsl-muted-foreground: 0 0% 34.1176%;
1344
+ --hsl-accent: var(--hsl-secondary);
1345
+ --hsl-accent-foreground: var(--hsl-foreground);
1346
+ --hsl-border: 113.3333 8.7379% 79.8039%;
1301
1347
  --hsl-input: 0 0% 100%;
1302
- --hsl-ring: 148 28% 43%;
1303
- --hsl-destructive: 0 73.7% 41.8%;
1304
- --hsl-raised: 110 18.7% 93.7%;
1348
+ --hsl-ring: 153 54.0541% 29.0196%;
1349
+ --hsl-destructive: 0 75.1244% 39.4118%;
1350
+ --hsl-raised: var(--hsl-secondary);
1305
1351
  --hsl-raised-2: 0 0% 100%;
1306
- --sidebar-background: 108 21.7% 95.5%;
1307
- --sidebar-foreground: 143 25% 12%;
1308
- --sidebar-primary: 153 38% 25%;
1309
- --sidebar-primary-foreground: 0 0% 100%;
1310
- --sidebar-accent: 133 38.4% 88%;
1311
- --sidebar-accent-foreground: 143 25% 12%;
1312
- --sidebar-border: 107 8.7% 79.8%;
1313
- --sidebar-ring: 148 28% 43%;
1314
- --md3-surface: #dee6dc;
1315
- --md3-surface-dim: #d3dcd1;
1316
- --md3-surface-bright: #ffffff;
1317
- --md3-surface-container-lowest: #ffffff;
1318
- --md3-surface-container-low: #f2f6f1;
1319
- --md3-surface-container: #ffffff;
1320
- --md3-surface-container-high: #edf2ec;
1321
- --md3-surface-container-highest: #ffffff;
1322
- --md3-surface-variant: #edf2ec;
1323
- --md3-on-surface: #17261d;
1324
- --md3-on-surface-variant: #546158;
1325
- --md3-outline: #6d8376;
1326
- --md3-outline-variant: #c9d0c7;
1327
- --md3-primary: #285842;
1328
- --md3-primary-dim: #1f4735;
1329
- --md3-primary-container: #1f4735;
1330
- --md3-on-primary: #ffffff;
1331
- --md3-surface-tint: #285842;
1332
- --depth-1: #dee6dc;
1333
- --depth-2: #ffffff;
1334
- --depth-3: #edf2ec;
1335
- --depth-4: #ffffff;
1336
- --bg-root: #dee6dc;
1337
- --bg-dark: #dee6dc;
1338
- --bg-section: #dee6dc;
1339
- --bg-card: #ffffff;
1340
- --bg-elevated: #ffffff;
1341
- --bg-input: #ffffff;
1352
+ --sidebar-background: 109.0909 44% 95.098%;
1353
+ --sidebar-foreground: var(--hsl-foreground);
1354
+ --sidebar-primary: var(--hsl-primary);
1355
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
1356
+ --sidebar-accent: var(--hsl-secondary);
1357
+ --sidebar-accent-foreground: var(--hsl-foreground);
1358
+ --sidebar-border: var(--hsl-border);
1359
+ --sidebar-ring: var(--hsl-ring);
1360
+ --md3-surface: var(--bg-root);
1361
+ --md3-surface-dim: hsl(108 11.9048% 83.5294%);
1362
+ --md3-surface-bright: hsl(var(--hsl-popover));
1363
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
1364
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1365
+ --md3-surface-container: hsl(var(--hsl-card));
1366
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1367
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1368
+ --md3-surface-variant: var(--md3-surface-container-high);
1369
+ --md3-on-surface: var(--text-primary);
1370
+ --md3-on-surface-variant: var(--text-muted);
1371
+ --md3-outline: hsl(var(--hsl-muted-foreground));
1372
+ --md3-outline-variant: hsl(var(--hsl-border));
1373
+ --md3-primary: var(--accent-text);
1374
+ --md3-primary-dim: var(--btn-primary-bg);
1375
+ --md3-primary-container: var(--btn-primary-bg);
1376
+ --md3-on-primary: hsl(0 0% 100%);
1377
+ --md3-surface-tint: var(--accent-text);
1378
+ --depth-1: var(--md3-surface);
1379
+ --depth-2: var(--md3-surface-container);
1380
+ --depth-3: var(--md3-surface-container-high);
1381
+ --depth-4: var(--md3-surface-container-highest);
1382
+ --bg-root: hsl(var(--hsl-background));
1383
+ --bg-dark: var(--depth-1);
1384
+ --bg-section: var(--depth-1);
1385
+ --bg-card: var(--depth-2);
1386
+ --bg-elevated: var(--depth-4);
1387
+ --bg-input: hsl(var(--hsl-input));
1342
1388
  --well-page: #ffffff;
1343
- --well-card: #ebf0e9;
1389
+ --well-card: #e9f1e7;
1344
1390
  --well-raised: #ffffff;
1345
- --well-raised-2: #ebf0e9;
1346
- --bg-hover: rgba(40, 88, 66, 0.05);
1347
- --bg-selection: rgba(40, 88, 66, 0.16);
1348
- --border-subtle: rgba(23, 38, 29, 0.11);
1349
- --border-default: rgba(23, 38, 29, 0.16);
1350
- --border-hover: rgba(23, 38, 29, 0.28);
1351
- --border-strong: #798479;
1352
- --field-border: #798479;
1353
- --border-accent: rgba(40, 88, 66, 0.20);
1354
- --border-accent-hover: rgba(40, 88, 66, 0.36);
1391
+ --well-raised-2: #e9f1e7;
1392
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
1393
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
1394
+ --border-subtle: hsl(var(--hsl-border));
1395
+ --border-default: hsl(var(--hsl-border));
1396
+ --border-hover: rgb(57 57 57 / 0.28);
1397
+ --border-strong: #7b837a;
1398
+ --field-border: #7b837a;
1399
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
1400
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
1355
1401
  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.07), 0 4px 14px -4px hsl(var(--shadow-color) / 0.1);
1356
1402
  --shadow-raised: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 2px 6px -2px hsl(var(--shadow-color) / 0.07);
1357
1403
  --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.06);
1358
1404
  --edge-highlight: 0 0 0 0 transparent;
1359
- --accent-text: #285842;
1360
- --accent-surface-soft: rgba(40, 88, 66, 0.05);
1361
- --accent-surface-strong: rgba(40, 88, 66, 0.13);
1362
- --accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
1363
- --brand-primary: #3d7b5f;
1364
- --brand-cool: #4f8c6c;
1365
- --brand-glow: #6cac8a;
1366
- --brand-vibrant: #3d7b5f;
1367
- --btn-primary-bg: #285842;
1368
- --btn-primary-hover: #336c52;
1369
- --btn-primary-text: #ffffff;
1370
- --text-primary: #17261d;
1371
- --text-secondary: #36493e;
1372
- --text-muted: #546158;
1373
- --text-dim: #546158;
1374
- --surface-success-bg: #c5edce;
1375
- --surface-success-text: #1e5b34;
1376
- --surface-success-border: #91c79e;
1377
- --surface-warning-bg: #f4e3bf;
1378
- --surface-warning-text: #804d0c;
1379
- --surface-warning-border: #dcb87a;
1380
- --surface-danger-bg: #fadad8;
1381
- --surface-danger-text: #a5292b;
1382
- --surface-danger-border: #e8acaa;
1383
- --surface-neutral-bg: #e5e9e4;
1384
- --surface-neutral-text: #576157;
1385
- --surface-neutral-border: #c0c6bf;
1405
+ --accent-text: hsl(153.2609 92% 19.6078%);
1406
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
1407
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
1408
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
1409
+ --brand-primary: hsl(153.3333 65.2174% 27.0588%);
1410
+ --brand-cool: hsl(153.12 85.034% 28.8235%);
1411
+ --brand-glow: var(--accent-text);
1412
+ --brand-vibrant: var(--brand-primary);
1413
+ --btn-primary-bg: hsl(var(--hsl-primary));
1414
+ --btn-primary-hover: hsl(153.3333 39.1304% 36.0784%);
1415
+ --btn-primary-text: hsl(0 0% 100%);
1416
+ --text-primary: hsl(var(--hsl-foreground));
1417
+ --text-secondary: hsl(0 0% 29.0196%);
1418
+ --text-muted: hsl(0 0% 34.1176%);
1419
+ --text-dim: hsl(0 0% 34.1176%);
1420
+ --surface-success-bg: #d1edd9;
1421
+ --surface-success-text: #1b6c4b;
1422
+ --surface-success-border: #9ac6ae;
1423
+ --surface-warning-bg: #f3e2c7;
1424
+ --surface-warning-text: #79581e;
1425
+ --surface-warning-border: #ceb994;
1426
+ --surface-danger-bg: #fedbd7;
1427
+ --surface-danger-text: #ae2c2c;
1428
+ --surface-danger-border: #e6a6a4;
1429
+ --surface-neutral-bg: #e1e6e0;
1430
+ --surface-neutral-text: #59605c;
1431
+ --surface-neutral-border: #b8beb8;
1386
1432
  }
1387
1433
  .dark[data-theme="hospitality"] {
1388
- --hsl-background: 140 10.3% 5.7%;
1389
- --hsl-foreground: 140 12% 90.2%;
1390
- --hsl-card: 132 5.3% 18.6%;
1391
- --hsl-card-foreground: 140 12% 90.2%;
1392
- --hsl-popover: 130 3.9% 29.8%;
1393
- --hsl-popover-foreground: 140 12% 90.2%;
1394
- --hsl-primary: 145 31% 59%;
1395
- --hsl-primary-foreground: 153 35% 10%;
1396
- --hsl-secondary: 130 4.6% 25.5%;
1397
- --hsl-secondary-foreground: 140 12% 90.2%;
1398
- --hsl-muted: 130 4.6% 25.5%;
1399
- --hsl-muted-foreground: 128 5.6% 73.9%;
1400
- --hsl-accent: 140 18% 20%;
1401
- --hsl-accent-foreground: 140 12% 90.2%;
1402
- --hsl-border: 130 3.9% 29.8%;
1403
- --hsl-input: 120 16.7% 2.4%;
1404
- --hsl-ring: 145 31% 59%;
1405
- --hsl-destructive: 0 80% 88%;
1406
- --hsl-raised: 130 4.6% 25.5%;
1407
- --hsl-raised-2: 130 3.7% 31.8%;
1408
- --sidebar-background: 120 8% 9.8%;
1409
- --sidebar-foreground: 140 12% 90.2%;
1410
- --sidebar-primary: 145 31% 59%;
1411
- --sidebar-primary-foreground: 153 35% 10%;
1412
- --sidebar-accent: 140 18% 20%;
1413
- --sidebar-accent-foreground: 140 12% 90.2%;
1414
- --sidebar-border: 130 3.9% 29.8%;
1415
- --sidebar-ring: 145 31% 59%;
1416
- --md3-surface: #0d100e;
1417
- --md3-surface-dim: #050705;
1418
- --md3-surface-bright: #494f4a;
1419
- --md3-surface-container-lowest: #050705;
1420
- --md3-surface-container-low: #171b17;
1421
- --md3-surface-container: #2d322e;
1422
- --md3-surface-container-high: #3e443f;
1423
- --md3-surface-container-highest: #494f4a;
1424
- --md3-surface-variant: #3e443f;
1425
- --md3-on-surface: #e3e9e5;
1426
- --md3-on-surface-variant: #b9c0ba;
1427
- --md3-outline: #8a938e;
1428
- --md3-outline-variant: #494f4a;
1429
- --md3-primary: #99caad;
1430
- --md3-primary-dim: #396a52;
1431
- --md3-primary-container: #396a52;
1432
- --md3-on-primary: #11221a;
1433
- --md3-surface-tint: #76b791;
1434
- --depth-1: #0d100e;
1435
- --depth-2: #2d322e;
1436
- --depth-3: #3e443f;
1437
- --depth-4: #494f4a;
1438
- --bg-root: #0d100e;
1439
- --bg-dark: #0d100e;
1440
- --bg-section: #0d100e;
1441
- --bg-card: #2d322e;
1442
- --bg-elevated: #494f4a;
1443
- --bg-input: #050705;
1444
- --well-page: #050705;
1445
- --well-card: #050705;
1446
- --well-raised: #181c18;
1447
- --well-raised-2: #181c18;
1448
- --bg-hover: rgba(118, 183, 145, 0.07);
1449
- --bg-selection: rgba(118, 183, 145, 0.28);
1450
- --border-subtle: rgba(227, 233, 229, 0.10);
1451
- --border-default: rgba(227, 233, 229, 0.16);
1452
- --border-hover: rgba(227, 233, 229, 0.28);
1453
- --border-strong: #939c94;
1454
- --field-border: #939c94;
1455
- --border-accent: rgba(118, 183, 145, 0.35);
1456
- --border-accent-hover: rgba(118, 183, 145, 0.50);
1434
+ --hsl-background: 120 6.6667% 5.8824%;
1435
+ --hsl-foreground: 0 0% 99.2157%;
1436
+ --hsl-card: 132 5.2632% 18.6275%;
1437
+ --hsl-card-foreground: var(--hsl-foreground);
1438
+ --hsl-popover: 137.1429 4.6358% 29.6078%;
1439
+ --hsl-popover-foreground: var(--hsl-foreground);
1440
+ --hsl-primary: 153 54.0541% 29.0196%;
1441
+ --hsl-primary-foreground: 0 0% 100%;
1442
+ --hsl-secondary: 130 4.6154% 25.4902%;
1443
+ --hsl-secondary-foreground: var(--hsl-foreground);
1444
+ --hsl-muted: var(--hsl-secondary);
1445
+ --hsl-muted-foreground: 0 0% 85.8824%;
1446
+ --hsl-accent: var(--hsl-secondary);
1447
+ --hsl-accent-foreground: var(--hsl-foreground);
1448
+ --hsl-border: 137.1429 4.6358% 29.6078%;
1449
+ --hsl-input: 120 9.0909% 2.1569%;
1450
+ --hsl-ring: 152.9464 91.8033% 47.8431%;
1451
+ --hsl-destructive: 0 74.4681% 90.7843%;
1452
+ --hsl-raised: var(--hsl-secondary);
1453
+ --hsl-raised-2: 137.1429 4.3478% 31.5686%;
1454
+ --sidebar-background: 120 5.8824% 10%;
1455
+ --sidebar-foreground: var(--hsl-foreground);
1456
+ --sidebar-primary: var(--hsl-primary);
1457
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
1458
+ --sidebar-accent: var(--hsl-secondary);
1459
+ --sidebar-accent-foreground: var(--hsl-foreground);
1460
+ --sidebar-border: var(--hsl-border);
1461
+ --sidebar-ring: var(--hsl-ring);
1462
+ --md3-surface: var(--bg-root);
1463
+ --md3-surface-dim: hsl(120 9.0909% 2.1569%);
1464
+ --md3-surface-bright: hsl(var(--hsl-popover));
1465
+ --md3-surface-container-lowest: var(--md3-surface-dim);
1466
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1467
+ --md3-surface-container: hsl(var(--hsl-card));
1468
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1469
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1470
+ --md3-surface-variant: var(--md3-surface-container-high);
1471
+ --md3-on-surface: var(--text-primary);
1472
+ --md3-on-surface-variant: var(--text-muted);
1473
+ --md3-outline: hsl(var(--hsl-muted-foreground));
1474
+ --md3-outline-variant: hsl(var(--hsl-border));
1475
+ --md3-primary: var(--accent-text);
1476
+ --md3-primary-dim: var(--btn-primary-bg);
1477
+ --md3-primary-container: var(--btn-primary-bg);
1478
+ --md3-on-primary: hsl(0 0% 100%);
1479
+ --md3-surface-tint: var(--accent-text);
1480
+ --depth-1: var(--md3-surface);
1481
+ --depth-2: var(--md3-surface-container);
1482
+ --depth-3: var(--md3-surface-container-high);
1483
+ --depth-4: var(--md3-surface-container-highest);
1484
+ --bg-root: hsl(var(--hsl-background));
1485
+ --bg-dark: var(--depth-1);
1486
+ --bg-section: var(--depth-1);
1487
+ --bg-card: var(--depth-2);
1488
+ --bg-elevated: var(--depth-4);
1489
+ --bg-input: hsl(var(--hsl-input));
1490
+ --well-page: #050605;
1491
+ --well-card: #050605;
1492
+ --well-raised: #191c19;
1493
+ --well-raised-2: #191c19;
1494
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
1495
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
1496
+ --border-subtle: hsl(var(--hsl-border));
1497
+ --border-default: hsl(var(--hsl-border));
1498
+ --border-hover: rgb(253 253 253 / 0.28);
1499
+ --border-strong: #919d93;
1500
+ --field-border: #919d93;
1501
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
1502
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
1457
1503
  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.45), 0 10px 24px -14px hsl(var(--shadow-color) / 0.6);
1458
1504
  --shadow-raised: 0 1px 2px hsl(var(--shadow-color) / 0.35);
1459
1505
  --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.5);
1460
1506
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
1461
- --accent-text: #b2dbc2;
1462
- --accent-surface-soft: rgba(118, 183, 145, 0.07);
1463
- --accent-surface-strong: rgba(57, 106, 82, 0.40);
1464
- --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
1465
- --brand-primary: #529873;
1466
- --brand-cool: #76b791;
1467
- --brand-glow: #94c7a9;
1468
- --brand-vibrant: #529873;
1469
- --btn-primary-bg: #76b791;
1470
- --btn-primary-hover: #8dc3a4;
1471
- --btn-primary-text: #11221a;
1472
- --text-primary: #e3e9e5;
1473
- --text-secondary: #c5cec9;
1474
- --text-muted: #b9c0ba;
1475
- --text-dim: #b9c0ba;
1476
- --surface-success-bg: #254930;
1477
- --surface-success-text: #9ce9b1;
1478
- --surface-success-border: #437652;
1479
- --surface-warning-bg: #513d21;
1480
- --surface-warning-text: #fed081;
1481
- --surface-warning-border: #8d6b39;
1482
- --surface-danger-bg: #5c3231;
1483
- --surface-danger-text: #f7b3b0;
1484
- --surface-danger-border: #a45857;
1485
- --surface-neutral-bg: #3e443f;
1486
- --surface-neutral-text: #b9c0ba;
1487
- --surface-neutral-border: #5f6560;
1507
+ --accent-text: hsl(152.9464 91.8033% 47.8431%);
1508
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
1509
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
1510
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
1511
+ --brand-primary: hsl(152.7273 65.2174% 50.3922%);
1512
+ --brand-cool: hsl(152.7869 85.1163% 42.1569%);
1513
+ --brand-glow: var(--accent-text);
1514
+ --brand-vibrant: var(--brand-primary);
1515
+ --btn-primary-bg: hsl(var(--hsl-primary));
1516
+ --btn-primary-hover: hsl(153.3333 39.1304% 36.0784%);
1517
+ --btn-primary-text: hsl(0 0% 100%);
1518
+ --text-primary: hsl(var(--hsl-foreground));
1519
+ --text-secondary: hsl(0 0% 94.5098%);
1520
+ --text-muted: hsl(0 0% 85.8824%);
1521
+ --text-dim: hsl(0 0% 85.8824%);
1522
+ --surface-success-bg: #304838;
1523
+ --surface-success-text: #45d196;
1524
+ --surface-success-border: #367154;
1525
+ --surface-warning-bg: #4d3f29;
1526
+ --surface-warning-text: #dab26b;
1527
+ --surface-warning-border: #77623d;
1528
+ --surface-danger-bg: #553937;
1529
+ --surface-danger-text: #e8a5a5;
1530
+ --surface-danger-border: #815958;
1531
+ --surface-neutral-bg: #3f433e;
1532
+ --surface-neutral-text: #b4bab6;
1533
+ --surface-neutral-border: #626762;
1488
1534
  }
1489
1535
  [data-theme="agents"] {
1490
- --bg-card: #1a191b;
1491
- --hsl-background: 270 5.6% 7.1%;
1492
- --hsl-foreground: 240 6.2% 93.7%;
1493
- --hsl-card: 270 3.8% 10.2%;
1494
- --hsl-card-foreground: 240 6.2% 93.7%;
1495
- --hsl-popover: 260 4.2% 13.9%;
1496
- --hsl-popover-foreground: 240 6.2% 93.7%;
1497
- --hsl-secondary: 260 4.2% 13.9%;
1498
- --hsl-secondary-foreground: 240 6.2% 93.7%;
1499
- --hsl-muted: 260 4.2% 13.9%;
1500
- --hsl-muted-foreground: 258 6.9% 71.8%;
1501
- --hsl-accent: 270 4.7% 16.9%;
1502
- --hsl-accent-foreground: 240 6.2% 93.7%;
1503
- --hsl-border: 270 5% 23.5%;
1504
- --hsl-input: 251 4.8% 44.9%;
1505
- --sidebar-background: 270 3.8% 10.2%;
1506
- --sidebar-foreground: 240 6.2% 93.7%;
1507
- --sidebar-accent: 270 4.7% 16.9%;
1508
- --sidebar-accent-foreground: 240 6.2% 93.7%;
1509
- --sidebar-border: 270 5% 23.5%;
1510
- --md3-surface: #121113;
1511
- --md3-surface-dim: #121113;
1512
- --md3-surface-bright: #323035;
1513
- --md3-surface-container-lowest: #121113;
1514
- --md3-surface-container-low: #1a191b;
1515
- --md3-surface-container: #1a191b;
1516
- --md3-surface-container-high: #232225;
1517
- --md3-surface-container-highest: #2b292d;
1518
- --md3-surface-variant: #232225;
1519
- --md3-on-surface: #eeeef0;
1520
- --md3-on-surface-variant: #b5b2bc;
1521
- --md3-outline: #6f6d78;
1522
- --md3-outline-variant: #3c393f;
1523
- --depth-1: #121113;
1524
- --depth-2: #1a191b;
1525
- --depth-3: #232225;
1526
- --depth-4: #2b292d;
1527
- --bg-root: #121113;
1528
- --bg-dark: #121113;
1529
- --bg-elevated: #232225;
1530
- --bg-section: #121113;
1531
- --bg-input: #1a191b;
1532
- --bg-hover: #232225;
1533
- --text-primary: #eeeef0;
1534
- --text-secondary: #eeeef0;
1535
- --text-muted: #b5b2bc;
1536
- --text-dim: #b5b2bc;
1537
- --border-subtle: #3c393f;
1538
- --border-default: #49474e;
1539
- --border-hover: #625f69;
1536
+ --bg-card: var(--depth-2);
1537
+ --hsl-background: 270 5.5556% 7.0588%;
1538
+ --hsl-foreground: 0 0% 92.9412%;
1539
+ --hsl-card: 260 3.7037% 15.8824%;
1540
+ --hsl-card-foreground: var(--hsl-foreground);
1541
+ --hsl-popover: 264 3.876% 25.2941%;
1542
+ --hsl-popover-foreground: var(--hsl-foreground);
1543
+ --hsl-secondary: 270 3.8462% 20.3922%;
1544
+ --hsl-secondary-foreground: var(--hsl-foreground);
1545
+ --hsl-muted: var(--hsl-secondary);
1546
+ --hsl-muted-foreground: 0 0% 74.1176%;
1547
+ --hsl-accent: var(--hsl-secondary);
1548
+ --hsl-accent-foreground: var(--hsl-foreground);
1549
+ --hsl-border: 276 3.4483% 28.4314%;
1550
+ --hsl-input: 270 3.4483% 11.3725%;
1551
+ --sidebar-background: 270 3.4483% 11.3725%;
1552
+ --sidebar-foreground: var(--hsl-foreground);
1553
+ --sidebar-accent: var(--hsl-secondary);
1554
+ --sidebar-accent-foreground: var(--hsl-foreground);
1555
+ --sidebar-border: var(--hsl-border);
1556
+ --md3-surface: var(--bg-root);
1557
+ --md3-surface-dim: hsl(240 5.8824% 3.3333%);
1558
+ --md3-surface-bright: hsl(var(--hsl-popover));
1559
+ --md3-surface-container-lowest: var(--md3-surface-dim);
1560
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1561
+ --md3-surface-container: hsl(var(--hsl-card));
1562
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1563
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1564
+ --md3-surface-variant: var(--md3-surface-container-high);
1565
+ --md3-on-surface: var(--text-primary);
1566
+ --md3-on-surface-variant: var(--text-muted);
1567
+ --md3-outline: hsl(var(--hsl-muted-foreground));
1568
+ --md3-outline-variant: hsl(var(--hsl-border));
1569
+ --depth-1: var(--md3-surface);
1570
+ --depth-2: var(--md3-surface-container);
1571
+ --depth-3: var(--md3-surface-container-high);
1572
+ --depth-4: var(--md3-surface-container-highest);
1573
+ --bg-root: hsl(var(--hsl-background));
1574
+ --bg-dark: var(--depth-1);
1575
+ --bg-elevated: var(--depth-4);
1576
+ --bg-section: var(--depth-1);
1577
+ --bg-input: hsl(var(--hsl-input));
1578
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
1579
+ --text-primary: hsl(var(--hsl-foreground));
1580
+ --text-secondary: hsl(0 0% 81.9608%);
1581
+ --text-muted: hsl(0 0% 74.1176%);
1582
+ --text-dim: hsl(0 0% 67.0588%);
1583
+ --border-subtle: hsl(var(--hsl-border));
1584
+ --border-default: hsl(var(--hsl-border));
1585
+ --border-hover: rgb(237 237 237 / 0.28);
1540
1586
  --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
1541
1587
  --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
1542
1588
  --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px hsl(var(--shadow-color) / 0.6);
1589
+ --hsl-raised: var(--hsl-secondary);
1590
+ --hsl-raised-2: var(--hsl-popover);
1591
+ --well-page: #080809;
1592
+ --well-card: #080809;
1593
+ --well-raised: #28272a;
1594
+ --well-raised-2: #28272a;
1543
1595
  }
1544
1596
  [data-theme="agents-light"] {
1545
- --bg-card: #ffffff;
1597
+ --bg-card: var(--depth-2);
1546
1598
  --hsl-background: 0 0% 100%;
1547
- --hsl-foreground: 257 10.1% 13.5%;
1599
+ --hsl-foreground: 0 0% 25.098%;
1548
1600
  --hsl-card: 0 0% 100%;
1549
- --hsl-card-foreground: 257 10.1% 13.5%;
1601
+ --hsl-card-foreground: var(--hsl-foreground);
1550
1602
  --hsl-popover: 0 0% 100%;
1551
- --hsl-popover-foreground: 257 10.1% 13.5%;
1552
- --hsl-secondary: 285 14.3% 94.5%;
1553
- --hsl-secondary-foreground: 257 10.1% 13.5%;
1554
- --hsl-muted: 285 14.3% 94.5%;
1555
- --hsl-muted-foreground: 252 4.8% 40.8%;
1556
- --hsl-accent: 276 11.6% 91.6%;
1557
- --hsl-accent-foreground: 257 10.1% 13.5%;
1558
- --hsl-border: 262 11.4% 86.3%;
1559
- --hsl-input: 249 6% 57.5%;
1560
- --sidebar-background: 270 20% 98%;
1561
- --sidebar-foreground: 257 10.1% 13.5%;
1562
- --sidebar-accent: 276 11.6% 91.6%;
1563
- --sidebar-accent-foreground: 257 10.1% 13.5%;
1564
- --sidebar-border: 262 11.4% 86.3%;
1565
- --md3-surface: #ffffff;
1566
- --md3-surface-dim: #faf9fb;
1567
- --md3-surface-bright: #ffffff;
1568
- --md3-surface-container-lowest: #ffffff;
1569
- --md3-surface-container-low: #faf9fb;
1570
- --md3-surface-container: #ffffff;
1571
- --md3-surface-container-high: #f2eff3;
1572
- --md3-surface-container-highest: #ffffff;
1573
- --md3-surface-variant: #f2eff3;
1574
- --md3-on-surface: #211f26;
1575
- --md3-on-surface-variant: #65636d;
1576
- --md3-outline: #8e8c99;
1577
- --md3-outline-variant: #dbd8e0;
1578
- --depth-1: #ffffff;
1579
- --depth-2: #ffffff;
1580
- --depth-3: #faf9fb;
1581
- --depth-4: #ffffff;
1582
- --bg-root: #ffffff;
1583
- --bg-dark: #faf9fb;
1584
- --bg-elevated: #ffffff;
1585
- --bg-section: #faf9fb;
1586
- --bg-input: #ffffff;
1587
- --bg-hover: #f2eff3;
1588
- --text-primary: #211f26;
1589
- --text-secondary: #211f26;
1590
- --text-muted: #65636d;
1591
- --text-dim: #65636d;
1592
- --border-subtle: #dbd8e0;
1593
- --border-default: #d0cdd7;
1594
- --border-hover: #bcbac7;
1603
+ --hsl-popover-foreground: var(--hsl-foreground);
1604
+ --hsl-secondary: 285 13.3333% 94.1176%;
1605
+ --hsl-secondary-foreground: var(--hsl-foreground);
1606
+ --hsl-muted: var(--hsl-secondary);
1607
+ --hsl-muted-foreground: 0 0% 36.4706%;
1608
+ --hsl-accent: var(--hsl-secondary);
1609
+ --hsl-accent-foreground: var(--hsl-foreground);
1610
+ --hsl-border: 300 3.2967% 82.1569%;
1611
+ --hsl-input: 285 33.3333% 97.6471%;
1612
+ --sidebar-background: 285 33.3333% 97.6471%;
1613
+ --sidebar-foreground: var(--hsl-foreground);
1614
+ --sidebar-accent: var(--hsl-secondary);
1615
+ --sidebar-accent-foreground: var(--hsl-foreground);
1616
+ --sidebar-border: var(--hsl-border);
1617
+ --md3-surface: var(--bg-root);
1618
+ --md3-surface-dim: hsl(285 6.4516% 87.8431%);
1619
+ --md3-surface-bright: hsl(var(--hsl-popover));
1620
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
1621
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1622
+ --md3-surface-container: hsl(var(--hsl-card));
1623
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1624
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1625
+ --md3-surface-variant: var(--md3-surface-container-high);
1626
+ --md3-on-surface: var(--text-primary);
1627
+ --md3-on-surface-variant: var(--text-muted);
1628
+ --md3-outline: hsl(var(--hsl-muted-foreground));
1629
+ --md3-outline-variant: hsl(var(--hsl-border));
1630
+ --depth-1: var(--md3-surface);
1631
+ --depth-2: var(--md3-surface-container);
1632
+ --depth-3: var(--md3-surface-container-high);
1633
+ --depth-4: var(--md3-surface-container-highest);
1634
+ --bg-root: hsl(var(--hsl-background));
1635
+ --bg-dark: var(--depth-1);
1636
+ --bg-elevated: var(--depth-4);
1637
+ --bg-section: var(--depth-1);
1638
+ --bg-input: hsl(var(--hsl-input));
1639
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
1640
+ --text-primary: hsl(var(--hsl-foreground));
1641
+ --text-secondary: hsl(0 0% 31.7647%);
1642
+ --text-muted: hsl(0 0% 36.4706%);
1643
+ --text-dim: hsl(0 0% 41.9608%);
1644
+ --border-subtle: hsl(var(--hsl-border));
1645
+ --border-default: hsl(var(--hsl-border));
1646
+ --border-hover: rgb(64 64 64 / 0.28);
1595
1647
  --shadow-card: 0 0 0 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px hsl(var(--shadow-color) / 0.05), 0 4px 8px hsl(var(--shadow-color) / 0.08);
1596
1648
  --shadow-dropdown: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
1597
1649
  --shadow-overlay: 0 8px 28px hsl(var(--shadow-color) / 0.28);
1650
+ --hsl-raised: var(--hsl-secondary);
1651
+ --hsl-raised-2: var(--hsl-popover);
1652
+ --well-page: #ffffff;
1653
+ --well-card: #ffffff;
1654
+ --well-raised: #ffffff;
1655
+ --well-raised-2: #ffffff;
1598
1656
  }
1599
1657
  [data-theme="website"]:where(:not(.dark)) {
1600
- --hsl-background: 240 42.9% 97.3%;
1601
- --hsl-foreground: 224 18% 12%;
1658
+ --hsl-background: 240 39.1304% 95.4902%;
1659
+ --hsl-foreground: 0 0% 24.7059%;
1602
1660
  --hsl-card: 0 0% 100%;
1603
- --hsl-card-foreground: 224 18% 12%;
1661
+ --hsl-card-foreground: var(--hsl-foreground);
1604
1662
  --hsl-popover: 0 0% 100%;
1605
- --hsl-popover-foreground: 224 18% 12%;
1606
- --hsl-secondary: 240 35.7% 94.5%;
1607
- --hsl-secondary-foreground: 224 18% 12%;
1608
- --hsl-muted: 240 35.7% 94.5%;
1609
- --hsl-muted-foreground: 240 13% 42.4%;
1610
- --hsl-accent: 240 23.1% 92.4%;
1611
- --hsl-accent-foreground: 224 18% 12%;
1612
- --hsl-border: 240 26.3% 88.8%;
1613
- --hsl-input: 240 42.9% 97.3%;
1614
- --md3-surface: #f5f5fb;
1615
- --md3-surface-dim: #e7e7f0;
1616
- --md3-surface-bright: #ffffff;
1617
- --md3-surface-container-lowest: #ffffff;
1618
- --md3-surface-container-low: #fafafd;
1619
- --md3-surface-container: #ffffff;
1620
- --md3-surface-container-high: #ececf6;
1621
- --md3-surface-container-highest: #ffffff;
1622
- --md3-surface-variant: #ececf6;
1623
- --md3-on-surface: #191c24;
1624
- --md3-on-surface-variant: #5e5e7a;
1625
- --md3-outline: #5e5e7a;
1626
- --md3-outline-variant: #dbdbea;
1627
- --depth-1: #f5f5fb;
1628
- --depth-2: #ffffff;
1629
- --depth-3: #ececf6;
1630
- --depth-4: #ffffff;
1631
- --bg-root: #f5f5fb;
1632
- --bg-dark: #f5f5fb;
1633
- --bg-section: #ececf6;
1634
- --bg-card: #ffffff;
1635
- --bg-elevated: #ffffff;
1636
- --bg-input: #f5f5fb;
1637
- --border-subtle: rgba(25, 28, 36, 0.08);
1638
- --border-default: rgba(25, 28, 36, 0.12);
1639
- --border-hover: rgba(25, 28, 36, 0.24);
1640
- --text-primary: #191c24;
1641
- --text-secondary: #3a3a50;
1642
- --text-muted: #5e5e7a;
1643
- --text-dim: #5e5e7a;
1663
+ --hsl-popover-foreground: var(--hsl-foreground);
1664
+ --hsl-secondary: 240 36% 95.098%;
1665
+ --hsl-secondary-foreground: var(--hsl-foreground);
1666
+ --hsl-muted: var(--hsl-secondary);
1667
+ --hsl-muted-foreground: 0 0% 36.4706%;
1668
+ --hsl-accent: var(--hsl-secondary);
1669
+ --hsl-accent-foreground: var(--hsl-foreground);
1670
+ --hsl-border: 240 10.5882% 83.3333%;
1671
+ --hsl-input: 240 100% 98.4314%;
1672
+ --md3-surface: var(--bg-root);
1673
+ --md3-surface-dim: hsl(240 14.2857% 89.0196%);
1674
+ --md3-surface-bright: hsl(var(--hsl-popover));
1675
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
1676
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1677
+ --md3-surface-container: hsl(var(--hsl-card));
1678
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1679
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1680
+ --md3-surface-variant: var(--md3-surface-container-high);
1681
+ --md3-on-surface: var(--text-primary);
1682
+ --md3-on-surface-variant: var(--text-muted);
1683
+ --md3-outline: hsl(var(--hsl-muted-foreground));
1684
+ --md3-outline-variant: hsl(var(--hsl-border));
1685
+ --depth-1: var(--md3-surface);
1686
+ --depth-2: var(--md3-surface-container);
1687
+ --depth-3: var(--md3-surface-container-high);
1688
+ --depth-4: var(--md3-surface-container-highest);
1689
+ --bg-root: hsl(var(--hsl-background));
1690
+ --bg-dark: var(--depth-1);
1691
+ --bg-section: var(--depth-1);
1692
+ --bg-card: var(--depth-2);
1693
+ --bg-elevated: var(--depth-4);
1694
+ --bg-input: hsl(var(--hsl-input));
1695
+ --border-subtle: hsl(var(--hsl-border));
1696
+ --border-default: hsl(var(--hsl-border));
1697
+ --border-hover: rgb(63 63 63 / 0.28);
1698
+ --text-primary: hsl(var(--hsl-foreground));
1699
+ --text-secondary: hsl(0 0% 31.7647%);
1700
+ --text-muted: hsl(0 0% 36.4706%);
1701
+ --text-dim: hsl(0 0% 41.9608%);
1702
+ --hsl-raised: var(--hsl-secondary);
1703
+ --hsl-raised-2: var(--hsl-popover);
1704
+ --well-page: #ffffff;
1705
+ --well-card: #efeff8;
1706
+ --well-raised: #ffffff;
1707
+ --well-raised-2: #efeff8;
1708
+ --sidebar-background: 240 100% 98.4314%;
1644
1709
  }
1645
1710
  .dark[data-theme="website"] {
1646
- --hsl-background: 243 45% 7.8%;
1647
- --hsl-foreground: 0 0% 99.2%;
1648
- --hsl-card: 244 34.9% 16.3%;
1649
- --hsl-card-foreground: 0 0% 99.2%;
1650
- --hsl-popover: 243 33.3% 21.2%;
1651
- --hsl-popover-foreground: 0 0% 99.2%;
1652
- --hsl-secondary: 244 34% 19%;
1653
- --hsl-secondary-foreground: 0 0% 99.2%;
1654
- --hsl-muted: 244 34% 19%;
1655
- --hsl-muted-foreground: 237 23% 65.9%;
1656
- --hsl-accent: 243 33.3% 21.2%;
1657
- --hsl-accent-foreground: 0 0% 99.2%;
1658
- --hsl-border: 243 31.9% 28.2%;
1659
- --hsl-input: 243 41.2% 10%;
1660
- --md3-surface: #0c0b1d;
1661
- --md3-surface-dim: #080814;
1662
- --md3-surface-bright: #2e2c56;
1663
- --md3-surface-container-lowest: #080814;
1664
- --md3-surface-container-low: #141328;
1665
- --md3-surface-container: #1d1b38;
1666
- --md3-surface-container-high: #222041;
1667
- --md3-surface-container-highest: #262448;
1668
- --md3-surface-variant: #222041;
1669
- --md3-on-surface: #fdfdfd;
1670
- --md3-on-surface-variant: #aaa8b8;
1671
- --md3-outline: #9496bc;
1672
- --md3-outline-variant: #33315f;
1673
- --depth-1: #0c0b1d;
1674
- --depth-2: #1d1b38;
1675
- --depth-3: #222041;
1676
- --depth-4: #262448;
1677
- --bg-root: #0c0b1d;
1678
- --bg-dark: #0c0b1d;
1679
- --bg-section: #141328;
1680
- --bg-card: #1d1b38;
1681
- --bg-elevated: #262448;
1682
- --bg-input: #100f24;
1683
- --border-subtle: rgba(255, 255, 255, 0.08);
1684
- --border-default: rgba(255, 255, 255, 0.15);
1685
- --border-hover: rgba(255, 255, 255, 0.28);
1686
- --text-primary: #fdfdfd;
1687
- --text-secondary: #aaa8b8;
1688
- --text-muted: #9496bc;
1689
- --text-dim: #9496bc;
1711
+ --hsl-background: 243.3333 45% 7.8431%;
1712
+ --hsl-foreground: 0 0% 89.4118%;
1713
+ --hsl-card: 243.75 34.7826% 18.0392%;
1714
+ --hsl-card-foreground: var(--hsl-foreground);
1715
+ --hsl-popover: 242.6087 30.6667% 29.4118%;
1716
+ --hsl-popover-foreground: var(--hsl-foreground);
1717
+ --hsl-secondary: 243.1579 31.6667% 23.5294%;
1718
+ --hsl-secondary-foreground: var(--hsl-foreground);
1719
+ --hsl-muted: var(--hsl-secondary);
1720
+ --hsl-muted-foreground: 0 0% 71.3725%;
1721
+ --hsl-accent: var(--hsl-secondary);
1722
+ --hsl-accent-foreground: var(--hsl-foreground);
1723
+ --hsl-border: 243.3962 30.2857% 34.3137%;
1724
+ --hsl-input: 244.8 38.4615% 12.7451%;
1725
+ --md3-surface: var(--bg-root);
1726
+ --md3-surface-dim: hsl(240 55.5556% 3.5294%);
1727
+ --md3-surface-bright: hsl(var(--hsl-popover));
1728
+ --md3-surface-container-lowest: var(--md3-surface-dim);
1729
+ --md3-surface-container-low: hsl(var(--sidebar-background));
1730
+ --md3-surface-container: hsl(var(--hsl-card));
1731
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
1732
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
1733
+ --md3-surface-variant: var(--md3-surface-container-high);
1734
+ --md3-on-surface: var(--text-primary);
1735
+ --md3-on-surface-variant: var(--text-muted);
1736
+ --md3-outline: hsl(var(--hsl-muted-foreground));
1737
+ --md3-outline-variant: hsl(var(--hsl-border));
1738
+ --depth-1: var(--md3-surface);
1739
+ --depth-2: var(--md3-surface-container);
1740
+ --depth-3: var(--md3-surface-container-high);
1741
+ --depth-4: var(--md3-surface-container-highest);
1742
+ --bg-root: hsl(var(--hsl-background));
1743
+ --bg-dark: var(--depth-1);
1744
+ --bg-section: var(--depth-1);
1745
+ --bg-card: var(--depth-2);
1746
+ --bg-elevated: var(--depth-4);
1747
+ --bg-input: hsl(var(--hsl-input));
1748
+ --border-subtle: hsl(var(--hsl-border));
1749
+ --border-default: hsl(var(--hsl-border));
1750
+ --border-hover: rgb(228 228 228 / 0.28);
1751
+ --text-primary: hsl(var(--hsl-foreground));
1752
+ --text-secondary: hsl(0 0% 78.4314%);
1753
+ --text-muted: hsl(0 0% 71.3725%);
1754
+ --text-dim: hsl(0 0% 64.3137%);
1755
+ --hsl-raised: var(--hsl-secondary);
1756
+ --hsl-raised-2: var(--hsl-popover);
1757
+ --well-page: #04040e;
1758
+ --well-card: #04040e;
1759
+ --well-raised: #201e3e;
1760
+ --well-raised-2: #201e3e;
1761
+ --sidebar-background: 244.8 38.4615% 12.7451%;
1690
1762
  }
1691
1763
  [data-accent="violet"],
1692
1764
  [data-accent="violet"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
@@ -1762,7 +1834,7 @@
1762
1834
  }
1763
1835
  :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]), :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]):is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]) :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1764
1836
  --btn-primary-hover: color-mix(in srgb, hsl(var(--hsl-primary)), white 10%);
1765
- --brand-purple: light-dark(var(--brand-primary), color-mix(in srgb, var(--accent-text), white 35%));
1837
+ --brand-purple: color-mix(in srgb, var(--accent-text), white 35%);
1766
1838
  --brand-strong: color-mix(in srgb, hsl(var(--hsl-primary)), black 50%);
1767
1839
  --md3-primary-fixed: light-dark(color-mix(in srgb, var(--accent-text) 12%, white), var(--accent-text));
1768
1840
  --md3-inverse-primary: light-dark(color-mix(in srgb, var(--brand-primary), white 40%), var(--btn-primary-bg));
@@ -1778,25 +1850,25 @@
1778
1850
  --sidebar-primary-foreground: var(--hsl-primary-foreground);
1779
1851
  --sidebar-ring: var(--hsl-ring);
1780
1852
  --md3-primary: var(--accent-text);
1781
- --md3-primary-dim: light-dark(var(--btn-primary-bg), var(--brand-primary));
1853
+ --md3-primary-dim: var(--btn-primary-bg);
1782
1854
  --md3-primary-container: var(--btn-primary-bg);
1783
- --md3-on-primary-container: light-dark(#ffffff, var(--brand-purple));
1855
+ --md3-on-primary-container: light-dark(hsl(0 0% 100%), var(--brand-purple));
1784
1856
  --md3-primary-fixed-dim: light-dark(color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)), var(--brand-cool));
1785
1857
  --md3-secondary: light-dark(var(--accent-text), var(--brand-purple));
1786
1858
  --md3-secondary-dim: light-dark(var(--btn-primary-bg), var(--accent-text));
1787
1859
  --md3-secondary-container: light-dark(var(--md3-primary-fixed), var(--brand-strong));
1788
- --md3-on-secondary: light-dark(#ffffff, var(--brand-purple));
1860
+ --md3-on-secondary: light-dark(hsl(0 0% 100%), var(--brand-purple));
1789
1861
  --md3-on-secondary-container: light-dark(var(--accent-text), var(--brand-purple));
1790
- --md3-surface-tint: light-dark(var(--brand-primary), var(--accent-text));
1791
- --accent-surface-soft: light-dark(color-mix(in srgb, var(--btn-primary-bg) 5%, transparent), color-mix(in srgb, var(--accent-text) 7%, transparent));
1862
+ --md3-surface-tint: var(--accent-text);
1863
+ --accent-surface-soft: light-dark(color-mix(in srgb, var(--accent-text) 5%, transparent), color-mix(in srgb, var(--accent-text) 7%, transparent));
1792
1864
  --accent-surface-strong: light-dark(color-mix(in srgb, var(--btn-primary-bg) 13%, transparent), color-mix(in srgb, var(--btn-primary-bg) 30%, transparent));
1793
- --bg-hover: var(--accent-surface-soft);
1794
- --bg-selection: light-dark(color-mix(in srgb, var(--btn-primary-bg) 16%, transparent), color-mix(in srgb, var(--brand-primary) 28%, transparent));
1795
- --border-accent: light-dark(color-mix(in srgb, var(--btn-primary-hover) 18%, transparent), color-mix(in srgb, var(--brand-cool) 35%, transparent));
1796
- --border-accent-hover: light-dark(color-mix(in srgb, var(--btn-primary-hover) 35%, transparent), color-mix(in srgb, var(--brand-cool) 50%, transparent));
1797
- --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), light-dark(var(--btn-primary-hover), var(--accent-text)));
1865
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
1866
+ --bg-selection: light-dark(color-mix(in srgb, var(--btn-primary-bg) 16%, transparent), color-mix(in srgb, var(--btn-primary-bg) 28%, transparent));
1867
+ --border-accent: light-dark(color-mix(in srgb, var(--brand-cool) 20%, transparent), color-mix(in srgb, var(--brand-cool) 35%, transparent));
1868
+ --border-accent-hover: light-dark(color-mix(in srgb, var(--brand-cool) 36%, transparent), color-mix(in srgb, var(--brand-cool) 50%, transparent));
1869
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
1798
1870
  --tangle-gradient-text: linear-gradient(135deg, light-dark(var(--btn-primary-bg), var(--brand-purple)), light-dark(var(--btn-primary-hover), var(--accent-text)));
1799
- --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), light-dark(var(--btn-primary-hover), var(--brand-primary)));
1871
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
1800
1872
  --status-creating: var(--accent-text);
1801
1873
  --primary: var(--hsl-primary);
1802
1874
  --primary-foreground: var(--hsl-primary-foreground);