@tangle-network/brand 1.30.0 → 1.31.1

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 (16) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +4 -2
  3. package/bin/tangle-drift.mjs +4 -3
  4. package/dist/index.d.ts +111 -111
  5. package/dist/index.js +111 -111
  6. package/package.json +1 -1
  7. package/src/accent-scopes.stories.tsx +54 -0
  8. package/src/palette.generated.ts +111 -111
  9. package/src/styles/accent-on-tint.test.ts +4 -1
  10. package/src/styles/legacy-light.css +1228 -940
  11. package/src/styles/named-themes.css +431 -584
  12. package/src/styles/surface-ladder.test.ts +9 -24
  13. package/src/styles/system.css +52 -52
  14. package/src/styles/theme-scopes.ts +15 -16
  15. package/src/styles/tokens.css +450 -859
  16. package/src/styles/tokens.test.ts +74 -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: 83dde77644ce502513ced146ea7ed7dad93fc736195530c0c2bef82849bf1f21
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,76 +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
- --run-mix-succeeded: #76edb9;
243
- --run-mix-waiting: #e9b642;
244
- --run-mix-failed: #e1918e;
245
- --run-mix-in-flight: #2d9bca;
246
- --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%);
247
287
  --surface-neutral-bg: var(--depth-3);
248
288
  --surface-neutral-border: var(--border-subtle);
249
289
  --surface-neutral-text: var(--text-muted);
@@ -259,7 +299,7 @@
259
299
  --syntax-foreground: var(--text-primary);
260
300
  --syntax-variable: var(--text-secondary);
261
301
  --syntax-comment: var(--text-dim);
262
- --syntax-keyword: var(--tone-violet-icon);
302
+ --syntax-keyword: var(--tone-violet-text);
263
303
  --syntax-meta: var(--accent-text);
264
304
  --syntax-function: var(--surface-info-text);
265
305
  --syntax-string: var(--surface-success-text);
@@ -410,132 +450,172 @@
410
450
  .light,
411
451
  :where(:root) {
412
452
  color-scheme: light;
413
- --hsl-background: 223 23% 94%;
414
- --hsl-input: 225 29% 97%;
453
+ --hsl-background: 225 26.6667% 94.1176%;
454
+ --hsl-input: 231.4286 46.6667% 97.0588%;
415
455
  --hsl-card: 0 0% 100%;
416
- --hsl-secondary: 228 25% 94.5%;
417
- --hsl-popover: var(--hsl-card);
418
- --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%);
419
459
  --md3-surface-container-lowest: hsl(var(--hsl-card));
420
- --md3-surface-bright: #ffffff;
460
+ --md3-surface-bright: hsl(var(--hsl-popover));
421
461
  --sidebar-background: var(--hsl-card);
422
- --md3-inverse-surface: #2e2e3e;
423
- --md3-inverse-on-surface: #f0f1f4;
424
- --hsl-foreground: 0 0% 17.6471%;
425
- --hsl-muted-foreground: 0 0% 29.8039%;
426
- --text-secondary: #3f3f3f;
427
- --text-muted: #4c4c4c;
428
- --text-dim: #686868;
429
- --md3-outline: #787878;
430
- --hsl-border: 244 16% 81%;
431
- --border-hover: rgba(0, 0, 0, 0.24);
432
- --hsl-ring: var(--hsl-primary);
433
- --brand-primary: #6366F1;
434
- --brand-purple: var(--brand-primary);
435
- --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%);
436
476
  --md3-primary: var(--accent-text);
437
477
  --md3-primary-dim: var(--btn-primary-bg);
438
- --md3-on-primary-container: #ffffff;
439
- --md3-primary-fixed: #E8E5FF;
478
+ --md3-on-primary-container: hsl(0 0% 100%);
479
+ --md3-primary-fixed: hsl(246.9231 92.8571% 94.5098%);
440
480
  --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
441
481
  --md3-secondary: var(--accent-text);
442
482
  --md3-secondary-dim: var(--btn-primary-bg);
443
483
  --md3-secondary-container: var(--md3-primary-fixed);
444
- --md3-on-secondary: #ffffff;
484
+ --md3-on-secondary: hsl(0 0% 100%);
445
485
  --md3-on-secondary-container: var(--accent-text);
446
- --md3-inverse-primary: #A5B4FC;
447
- --md3-surface-tint: var(--brand-primary);
448
- --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);
449
489
  --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
450
490
  --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
451
- --border-accent: color-mix(in srgb, var(--btn-primary-hover) 18%, transparent);
452
- --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);
453
493
  --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
454
494
  --tangle-gradient-text: var(--tangle-gradient);
455
- --accent-gradient-strong: var(--tangle-gradient);
456
- --hsl-success: 162.9 93.5% 24.3%;
457
- --hsl-warning: 25.9 90% 35.3%;
458
- --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%;
459
499
  --hsl-destructive-foreground: 0 0% 100%;
460
- --hsl-info: 201.3 96.3% 32.2%;
461
- --surface-success-bg: #ecfdf5;
462
- --surface-success-border: #a7f3d0;
463
- --surface-warning-bg: #fffbeb;
464
- --surface-warning-border: #fde68a;
465
- --surface-danger-bg: #fff1f2;
466
- --surface-danger-border: #fecdd3;
467
- --surface-info-bg: #f0f9ff;
468
- --surface-info-border: #bae6fd;
469
- --tone-violet-bg: #f7edfe;
470
- --tone-violet-bg-hover: #f2e2fc;
471
- --tone-violet-bg-selected: #ead5f9;
472
- --tone-violet-border: #e0c4f4;
473
- --tone-violet-border-selected: #8e4ec6;
474
- --tone-violet-text: #402060;
475
- --tone-violet-icon: #8e4ec6;
476
- --tone-orange-bg: #ffefd6;
477
- --tone-orange-bg-hover: #ffdfb5;
478
- --tone-orange-bg-selected: #ffd19a;
479
- --tone-orange-border: #ffc182;
480
- --tone-orange-border-selected: #cc4e00;
481
- --tone-orange-text: #582d1d;
482
- --tone-orange-icon: #cc4e00;
483
- --tone-teal-bg: #e0f8f3;
484
- --tone-teal-bg-hover: #ccf3ea;
485
- --tone-teal-bg-selected: #b8eae0;
486
- --tone-teal-border: #a1ded2;
487
- --tone-teal-border-selected: #008573;
488
- --tone-teal-text: #0d3d38;
489
- --tone-teal-icon: #008573;
490
- --tone-blue-bg: #e6f4fe;
491
- --tone-blue-bg-hover: #d5efff;
492
- --tone-blue-bg-selected: #c2e5ff;
493
- --tone-blue-border: #acd8fc;
494
- --tone-blue-border-selected: #0d74ce;
495
- --tone-blue-text: #113264;
496
- --tone-blue-icon: #0d74ce;
497
- --tone-pink-bg: #fee9f5;
498
- --tone-pink-bg-hover: #fbdcef;
499
- --tone-pink-bg-selected: #f6cee7;
500
- --tone-pink-border: #efbfdd;
501
- --tone-pink-border-selected: #cf3897;
502
- --tone-pink-text: #651249;
503
- --tone-pink-icon: #cf3897;
504
- --tone-brown-bg: #f6eee7;
505
- --tone-brown-bg-hover: #f0e4d9;
506
- --tone-brown-bg-selected: #ebdaca;
507
- --tone-brown-border: #e4cdb7;
508
- --tone-brown-border-selected: #815e46;
509
- --tone-brown-text: #3e332e;
510
- --tone-brown-icon: #815e46;
511
- --tone-cyan-bg: #def7f9;
512
- --tone-cyan-bg-hover: #caf1f6;
513
- --tone-cyan-bg-selected: #b5e9f0;
514
- --tone-cyan-border: #9ddde7;
515
- --tone-cyan-border-selected: #107d98;
516
- --tone-cyan-text: #0d3c48;
517
- --tone-cyan-icon: #107d98;
518
- --tone-lime-bg: #eef6d6;
519
- --tone-lime-bg-hover: #e2f0bd;
520
- --tone-lime-bg-selected: #d3e7a6;
521
- --tone-lime-border: #c2da91;
522
- --tone-lime-border-selected: #5c7c2f;
523
- --tone-lime-text: #37401c;
524
- --tone-lime-icon: #5c7c2f;
525
- --surface-violet-bg: #f7edfe;
526
- --surface-violet-border: #e0c4f4;
527
- --surface-violet-text: #8145b5;
528
- --surface-orange-bg: #ffefd6;
529
- --surface-orange-border: #ffc182;
530
- --surface-orange-text: #bc4904;
531
- --surface-teal-bg: #e0f8f3;
532
- --surface-teal-border: #a1ded2;
533
- --surface-teal-text: #017d6d;
534
- --run-mix-succeeded: #3c9b78;
535
- --run-mix-waiting: #c16227;
536
- --run-mix-failed: #cd342f;
537
- --run-mix-in-flight: #00679e;
538
- --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%);
539
619
  --glass-bg-strong: var(--depth-1);
540
620
  --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
541
621
  --shadow-color: 220 40% 8%;
@@ -595,13 +675,6 @@
595
675
  --well-raised-2: var(--well-card);
596
676
  --edge-highlight: 0 0 0 0 transparent;
597
677
  }
598
- [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"] {
599
- --hsl-raised: var(--hsl-card);
600
- --hsl-raised-2: var(--hsl-card);
601
- --well-raised: var(--well-card);
602
- --well-raised-2: var(--well-card);
603
- --edge-highlight: 0 0 0 0 transparent;
604
- }
605
678
  [data-slot="card"] :where(*) {
606
679
  --card: var(--hsl-raised);
607
680
  --well: var(--well-card);
@@ -626,10 +699,10 @@
626
699
  --chart-rule: var(--md3-outline-variant);
627
700
  --chart-shade: var(--bg-hover);
628
701
  --chart-accent: var(--brand-cool);
629
- --chart-tier-c: #4a4a95;
630
- --chart-tier-b: #5b5bd6;
631
- --chart-tier-a: #8b87f0;
632
- --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%);
633
706
  }
634
707
  [data-sandbox-theme="vault"]:where(:not(.dark)),
635
708
  [data-sandbox-theme="dawn"]:where(:not(.dark)),
@@ -640,10 +713,10 @@
640
713
  [data-theme$="-light"],
641
714
  :where(:root) {
642
715
  --chart-accent: hsl(var(--hsl-primary));
643
- --chart-tier-c: #9b9ef0;
644
- --chart-tier-b: #7c7fe3;
645
- --chart-tier-a: #5b5bd6;
646
- --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%);
647
720
  }
648
721
  @keyframes tangle-breathe {
649
722
  50% {
@@ -820,791 +893,1006 @@
820
893
  [data-theme="super-light"],
821
894
  [data-theme="tangle-light"],
822
895
  [data-theme="agents-light"] {
823
- --hsl-secondary-foreground: 0 0% 10%;
824
- --surface-neutral-text: #4b5563;
896
+ --hsl-secondary-foreground: var(--hsl-foreground);
897
+ --surface-neutral-text: var(--text-muted);
825
898
  }
826
899
  [data-theme="aubergine"] {
827
- --hsl-background: 258 44% 12%;
828
- --hsl-foreground: 258 50% 97%;
829
- --hsl-card: 258 40% 20%;
830
- --hsl-card-foreground: 258 50% 97%;
831
- --hsl-popover: 258 40% 24%;
832
- --hsl-popover-foreground: 258 50% 97%;
833
- --hsl-primary: 250 100% 76%;
834
- --hsl-primary-foreground: 258 45% 10%;
835
- --hsl-secondary: 258 38% 17%;
836
- --hsl-muted: 258 38% 17%;
837
- --hsl-muted-foreground: 258 26% 70%;
838
- --hsl-accent: 258 40% 24%;
839
- --hsl-border: 258 32% 30%;
840
- --hsl-input: 258 38% 17%;
841
- --hsl-ring: 250 100% 76%;
842
- --depth-1: #1a1230;
843
- --depth-2: #241a42;
844
- --depth-3: #2f2253;
845
- --depth-4: #3d2d68;
846
- --bg-root: #1a1230;
847
- --bg-card: var(--depth-3);
848
- --bg-input: var(--depth-2);
849
- --md3-surface-container-lowest: #150e28;
850
- --md3-surface-container-low: #241a42;
851
- --md3-surface-container: #2a1f4c;
852
- --md3-surface-container-high: #2f2253;
853
- --md3-surface-container-highest: #3d2d68;
854
- --md3-outline-variant: #463571;
855
- --border-subtle: rgba(183,157,255,0.12);
856
- --border-default: rgba(183,157,255,0.22);
857
- --border-hover: rgba(183,157,255,0.40);
858
- --accent-text: #c4b0ff;
859
- --brand-primary: #8f8bff;
860
- --brand-glow: #c4b0ff;
861
- --text-primary: #f4f1fd;
862
- --text-secondary: #cec4e8;
863
- --text-muted: #b7afd1;
864
- --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%);
865
938
  --md3-surface: var(--bg-root);
866
- --md3-surface-dim: var(--md3-surface-container-lowest);
867
- --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));
868
941
  --md3-surface-variant: var(--md3-surface-container-high);
869
942
  --md3-on-surface: var(--text-primary);
870
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%;
871
951
  }
872
952
  [data-theme="aubergine-light"] {
873
- --hsl-background: 258 60% 96%;
874
- --hsl-foreground: 258 45% 11%;
953
+ --hsl-background: 255 54.5455% 95.6863%;
954
+ --hsl-foreground: 0 0% 24.7059%;
875
955
  --hsl-card: 0 0% 100%;
876
- --hsl-card-foreground: 258 45% 11%;
956
+ --hsl-card-foreground: var(--hsl-foreground);
877
957
  --hsl-popover: 0 0% 100%;
878
- --hsl-popover-foreground: 258 45% 11%;
879
- --hsl-primary: 258 70% 50%;
958
+ --hsl-popover-foreground: var(--hsl-foreground);
959
+ --hsl-primary: 257.76 54.1126% 54.7059%;
880
960
  --hsl-primary-foreground: 0 0% 100%;
881
- --hsl-secondary: 258 45% 92%;
882
- --hsl-muted: 258 45% 92%;
883
- --hsl-muted-foreground: 258 18% 42%;
884
- --hsl-accent: 258 45% 92%;
885
- --hsl-border: 258 30% 88%;
886
- --hsl-input: 258 30% 88%;
887
- --hsl-ring: 258 70% 50%;
888
- --depth-1: #f4f1fc;
889
- --depth-2: #ece6f8;
890
- --depth-3: #ffffff;
891
- --depth-4: #ffffff;
892
- --bg-root: #f4f1fc;
893
- --bg-card: #ffffff;
894
- --bg-input: #ece6f8;
895
- --md3-surface-container-lowest: #ffffff;
896
- --md3-surface-container-low: #faf8fe;
897
- --md3-surface-container: #f4f1fc;
898
- --md3-surface-container-high: #ece6f8;
899
- --md3-surface-container-highest: #e4dcf4;
900
- --md3-outline-variant: #e0d8f0;
901
- --border-subtle: rgba(60,32,110,0.10);
902
- --border-default: rgba(60,32,110,0.16);
903
- --border-hover: rgba(60,32,110,0.30);
904
- --accent-text: #6423c8;
905
- --brand-primary: #6d28d9;
906
- --brand-glow: #8b5cf6;
907
- --text-primary: #160f22;
908
- --text-secondary: #3f3460;
909
- --text-muted: #585070;
910
- --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%);
911
991
  --md3-surface: var(--bg-root);
912
- --md3-surface-dim: var(--depth-2);
913
- --md3-surface-bright: #ffffff;
992
+ --md3-surface-dim: hsl(258.4615 23.6364% 89.2157%);
993
+ --md3-surface-bright: hsl(var(--hsl-popover));
914
994
  --md3-surface-variant: var(--md3-surface-container-high);
915
995
  --md3-on-surface: var(--text-primary);
916
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%;
917
1004
  }
918
1005
  [data-theme="arena"] {
919
- --hsl-background: 160 16% 6%;
920
- --hsl-foreground: 150 20% 96%;
921
- --hsl-card: 158 14% 12%;
922
- --hsl-card-foreground: 150 20% 96%;
923
- --hsl-popover: 158 13% 16%;
924
- --hsl-popover-foreground: 150 20% 96%;
925
- --hsl-primary: 160 84% 39%;
926
- --hsl-primary-foreground: 160 60% 8%;
927
- --hsl-secondary: 158 12% 12%;
928
- --hsl-muted: 158 12% 12%;
929
- --hsl-muted-foreground: 152 12% 62%;
930
- --hsl-accent: 158 14% 14%;
931
- --hsl-border: 158 14% 18%;
932
- --hsl-input: 158 12% 12%;
933
- --hsl-ring: 160 84% 45%;
934
- --depth-1: #0a0f0c;
935
- --depth-2: #131b16;
936
- --depth-3: #1b261f;
937
- --depth-4: #233328;
938
- --bg-root: #0a0f0c;
939
- --bg-card: var(--depth-3);
940
- --bg-input: var(--depth-2);
941
- --md3-surface-container-lowest: #070b08;
942
- --md3-surface-container-low: #131b16;
943
- --md3-surface-container: #182019;
944
- --md3-surface-container-high: #1b261f;
945
- --md3-surface-container-highest: #233328;
946
- --md3-outline-variant: #2a3a31;
947
- --border-subtle: rgba(52,211,153,0.10);
948
- --border-default: rgba(52,211,153,0.18);
949
- --border-hover: rgba(52,211,153,0.32);
950
- --accent-text: #34d399;
951
- --brand-primary: #10b981;
952
- --brand-glow: #34d399;
953
- --text-primary: #ecfdf5;
954
- --text-secondary: #c2e8d6;
955
- --text-muted: #8fb6a3;
956
- --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%);
957
1044
  --md3-surface: var(--bg-root);
958
- --md3-surface-dim: var(--md3-surface-container-lowest);
959
- --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));
960
1047
  --md3-surface-variant: var(--md3-surface-container-high);
961
1048
  --md3-on-surface: var(--text-primary);
962
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%;
963
1057
  }
964
1058
  [data-theme="arena-light"] {
965
- --hsl-background: 150 30% 96%;
966
- --hsl-foreground: 158 30% 10%;
1059
+ --hsl-background: 150 29.4118% 93.3333%;
1060
+ --hsl-foreground: 0 0% 25.098%;
967
1061
  --hsl-card: 0 0% 100%;
968
- --hsl-card-foreground: 158 30% 10%;
1062
+ --hsl-card-foreground: var(--hsl-foreground);
969
1063
  --hsl-popover: 0 0% 100%;
970
- --hsl-popover-foreground: 158 30% 10%;
971
- --hsl-primary: 160 84% 27%;
1064
+ --hsl-popover-foreground: var(--hsl-foreground);
1065
+ --hsl-primary: 160.5 54.0541% 29.0196%;
972
1066
  --hsl-primary-foreground: 0 0% 100%;
973
- --hsl-secondary: 150 25% 92%;
974
- --hsl-muted: 150 25% 92%;
975
- --hsl-muted-foreground: 158 14% 40%;
976
- --hsl-accent: 150 25% 92%;
977
- --hsl-border: 150 20% 86%;
978
- --hsl-input: 150 20% 86%;
979
- --hsl-ring: 160 84% 30%;
980
- --depth-1: #f0f6f2;
981
- --depth-2: #e6f0ea;
982
- --depth-3: #ffffff;
983
- --depth-4: #ffffff;
984
- --bg-root: #f0f6f2;
985
- --bg-card: #ffffff;
986
- --bg-input: #e6f0ea;
987
- --md3-surface-container-lowest: #ffffff;
988
- --md3-surface-container-low: #f6fbf8;
989
- --md3-surface-container: #f0f6f2;
990
- --md3-surface-container-high: #e6f0ea;
991
- --md3-surface-container-highest: #dcebe2;
992
- --md3-outline-variant: #d7e8de;
993
- --border-subtle: rgba(6,95,70,0.10);
994
- --border-default: rgba(6,95,70,0.16);
995
- --border-hover: rgba(6,95,70,0.30);
996
- --accent-text: #03674b;
997
- --brand-primary: #059669;
998
- --brand-glow: #10b981;
999
- --text-primary: #06231a;
1000
- --text-secondary: #285048;
1001
- --text-muted: #455f52;
1002
- --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%);
1003
1097
  --md3-surface: var(--bg-root);
1004
- --md3-surface-dim: var(--depth-2);
1005
- --md3-surface-bright: #ffffff;
1098
+ --md3-surface-dim: hsl(153.3333 13.4328% 86.8627%);
1099
+ --md3-surface-bright: hsl(var(--hsl-popover));
1006
1100
  --md3-surface-variant: var(--md3-surface-container-high);
1007
1101
  --md3-on-surface: var(--text-primary);
1008
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%;
1009
1110
  }
1010
1111
  [data-theme="super"] {
1011
- --hsl-background: 120 12% 8%;
1012
- --hsl-foreground: 86 20% 93%;
1013
- --hsl-card: 120 11% 12%;
1014
- --hsl-card-foreground: 86 20% 93%;
1015
- --hsl-popover: 120 10% 15%;
1016
- --hsl-popover-foreground: 86 20% 93%;
1017
- --hsl-primary: 139 31% 61%;
1018
- --hsl-primary-foreground: 140 35% 8%;
1019
- --hsl-secondary: 120 9% 17%;
1020
- --hsl-secondary-foreground: 86 20% 93%;
1021
- --hsl-muted: 120 9% 17%;
1022
- --hsl-muted-foreground: 95 10% 67%;
1023
- --hsl-accent: 120 10% 18%;
1024
- --hsl-accent-foreground: 86 20% 93%;
1025
- --hsl-border: 120 9% 25%;
1026
- --hsl-input: 120 9% 17%;
1027
- --hsl-ring: 139 31% 61%;
1028
- --depth-1: #121712;
1029
- --depth-2: #1c231c;
1030
- --depth-3: #232b23;
1031
- --depth-4: #2b342b;
1032
- --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));
1033
1134
  --bg-card: var(--depth-2);
1034
- --bg-input: var(--depth-3);
1035
- --md3-surface-container-lowest: #0d110d;
1036
- --md3-surface-container-low: #171d17;
1037
- --md3-surface-container: #1c231c;
1038
- --md3-surface-container-high: #232b23;
1039
- --md3-surface-container-highest: #2b342b;
1040
- --md3-outline-variant: #3a453a;
1041
- --border-subtle: rgba(190,210,180,0.12);
1042
- --border-default: rgba(190,210,180,0.20);
1043
- --border-hover: rgba(190,210,180,0.34);
1044
- --accent-text: #8fd0a4;
1045
- --brand-primary: #7dbb91;
1046
- --brand-glow: #8fd0a4;
1047
- --text-primary: #eef1ea;
1048
- --text-secondary: #cbd3c5;
1049
- --text-muted: #a9b3a2;
1050
- --text-dim: #959f8f;
1051
- --md3-primary: #8fd0a4;
1052
- --bg-hover: rgba(190,210,180,0.06);
1053
- --bg-selection: rgba(125,187,145,0.28);
1054
- --accent-surface-soft: rgba(125,187,145,0.08);
1055
- --accent-surface-strong: rgba(125,187,145,0.24);
1056
- --border-accent: rgba(125,187,145,0.38);
1057
- --border-accent-hover: rgba(125,187,145,0.56);
1058
- --btn-primary-bg: #7dbb91;
1059
- --btn-primary-hover: #8fcaa1;
1060
- --btn-primary-text: #0e1d13;
1061
- --btn-cta-bg: #7dbb91;
1062
- --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);
1063
1164
  --md3-surface: var(--bg-root);
1064
- --md3-surface-dim: var(--md3-surface-container-lowest);
1065
- --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));
1066
1167
  --md3-surface-variant: var(--md3-surface-container-high);
1067
1168
  --md3-on-surface: var(--text-primary);
1068
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%;
1069
1177
  }
1070
1178
  [data-theme="super-light"] {
1071
- --hsl-background: 75 22% 96%;
1072
- --hsl-foreground: 114 13% 15%;
1179
+ --hsl-background: 80 17.6471% 93.3333%;
1180
+ --hsl-foreground: 0 0% 25.098%;
1073
1181
  --hsl-card: 0 0% 100%;
1074
- --hsl-card-foreground: 114 13% 15%;
1182
+ --hsl-card-foreground: var(--hsl-foreground);
1075
1183
  --hsl-popover: 0 0% 100%;
1076
- --hsl-popover-foreground: 114 13% 15%;
1077
- --hsl-primary: 148 40% 25%;
1184
+ --hsl-popover-foreground: var(--hsl-foreground);
1185
+ --hsl-primary: 148.1481 54.3624% 29.2157%;
1078
1186
  --hsl-primary-foreground: 0 0% 100%;
1079
- --hsl-secondary: 80 18% 93%;
1080
- --hsl-muted: 80 18% 93%;
1081
- --hsl-muted-foreground: 99 9% 37%;
1082
- --hsl-accent: 80 18% 93%;
1083
- --hsl-border: 87 17% 87%;
1084
- --hsl-input: 92 14% 78%;
1085
- --hsl-ring: 144 31% 34%;
1086
- --depth-1: #f7f8f4;
1087
- --depth-2: #eff1eb;
1088
- --depth-3: #ffffff;
1089
- --depth-4: #ffffff;
1090
- --bg-root: #f7f8f4;
1091
- --bg-card: #ffffff;
1092
- --bg-input: #eff1eb;
1093
- --md3-surface-container-lowest: #ffffff;
1094
- --md3-surface-container-low: #fcfcf9;
1095
- --md3-surface-container: #f7f8f4;
1096
- --md3-surface-container-high: #eff1eb;
1097
- --md3-surface-container-highest: #e6eae1;
1098
- --md3-outline-variant: #dfe4d9;
1099
- --border-subtle: rgba(34,43,33,0.10);
1100
- --border-default: rgba(34,43,33,0.16);
1101
- --border-hover: rgba(34,43,33,0.30);
1102
- --accent-text: #275a3f;
1103
- --brand-primary: #275a3f;
1104
- --brand-glow: #3b7050;
1105
- --text-primary: #222b21;
1106
- --text-secondary: #46523f;
1107
- --text-muted: #5d6857;
1108
- --text-dim: #616c5a;
1109
- --md3-primary: #275a3f;
1110
- --bg-hover: rgba(34,43,33,0.04);
1111
- --bg-selection: rgba(39,90,63,0.16);
1112
- --accent-surface-soft: rgba(39,90,63,0.06);
1113
- --accent-surface-strong: rgba(39,90,63,0.14);
1114
- --border-accent: rgba(39,90,63,0.30);
1115
- --border-accent-hover: rgba(39,90,63,0.45);
1116
- --btn-primary-bg: #275a3f;
1117
- --btn-primary-hover: #1e4832;
1118
- --btn-primary-text: #ffffff;
1119
- --btn-cta-bg: #275a3f;
1120
- --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);
1121
1229
  --md3-surface: var(--bg-root);
1122
- --md3-surface-dim: var(--depth-2);
1123
- --md3-surface-bright: #ffffff;
1230
+ --md3-surface-dim: hsl(85.7143 10.4478% 86.8627%);
1231
+ --md3-surface-bright: hsl(var(--hsl-popover));
1124
1232
  --md3-surface-variant: var(--md3-surface-container-high);
1125
1233
  --md3-on-surface: var(--text-primary);
1126
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%;
1127
1242
  }
1128
1243
  [data-theme="tangle-dark"] {}
1129
1244
  [data-theme="tangle-light"] {
1130
- --hsl-background: 240 33% 98%;
1131
- --hsl-foreground: 245 32% 14%;
1245
+ --hsl-background: 240 33.3333% 95.2941%;
1246
+ --hsl-foreground: 0 0% 24.7059%;
1132
1247
  --hsl-card: 0 0% 100%;
1133
- --hsl-card-foreground: 245 32% 14%;
1248
+ --hsl-card-foreground: var(--hsl-foreground);
1134
1249
  --hsl-popover: 0 0% 100%;
1135
- --hsl-popover-foreground: 245 32% 14%;
1136
- --hsl-primary: 239 84% 60%;
1250
+ --hsl-popover-foreground: var(--hsl-foreground);
1251
+ --hsl-primary: 245.9504 54.2601% 56.2745%;
1137
1252
  --hsl-primary-foreground: 0 0% 100%;
1138
- --hsl-secondary: 240 30% 95%;
1139
- --hsl-muted: 240 28% 95%;
1140
- --hsl-muted-foreground: 240 8% 42%;
1141
- --hsl-accent: 240 30% 95%;
1142
- --hsl-border: 240 20% 90%;
1143
- --hsl-input: 240 20% 90%;
1144
- --hsl-ring: 239 84% 60%;
1145
- --depth-1: #f4f4f9;
1146
- --depth-2: #edecf4;
1147
- --depth-3: #ffffff;
1148
- --depth-4: #ffffff;
1149
- --bg-root: #f4f4f9;
1150
- --bg-card: #ffffff;
1151
- --bg-input: #edecf4;
1152
- --md3-surface-container-lowest: #ffffff;
1153
- --md3-surface-container-low: #f8f8fc;
1154
- --md3-surface-container: #f4f4f9;
1155
- --md3-surface-container-high: #edecf4;
1156
- --md3-surface-container-highest: #e5e4ee;
1157
- --md3-outline-variant: #e2e1ec;
1158
- --border-subtle: rgba(20,20,40,0.08);
1159
- --border-default: rgba(20,20,40,0.14);
1160
- --border-hover: rgba(20,20,40,0.26);
1161
- --accent-text: #453be3;
1162
- --brand-primary: #6366f1;
1163
- --brand-glow: #818cf8;
1164
- --text-primary: #15131f;
1165
- --text-secondary: #3f3a52;
1166
- --text-muted: #59556b;
1167
- --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%;
1168
1290
  }
1169
1291
  .dark[data-theme="intelligence"] {
1170
- --md3-surface: #0d0a10;
1171
- --md3-surface-dim: #0a080d;
1172
- --md3-surface-bright: #2e2936;
1173
- --md3-surface-container-lowest: #070509;
1174
- --md3-surface-container-low: #100d15;
1175
- --md3-surface-container: #14111a;
1176
- --md3-surface-container-high: #1b1821;
1177
- --md3-surface-container-highest: #24202b;
1178
- --md3-surface-variant: #24202b;
1179
- --md3-on-surface-variant: #aaa6bb;
1180
- --hsl-background: 262 24% 5%;
1181
- --hsl-card: 262 19% 11%;
1182
- --hsl-popover: 260 16% 13%;
1183
- --hsl-secondary: 262 15% 18%;
1184
- --hsl-muted: 262 17% 15%;
1185
- --hsl-muted-foreground: 255 12% 62%;
1186
- --hsl-accent: 262 15% 20%;
1187
- --hsl-border: 262 12% 28%;
1188
- --hsl-input: 260 14% 16%;
1189
- --sidebar-background: 264 26% 4%;
1190
- --sidebar-accent: 262 16% 16%;
1191
- --sidebar-border: 262 12% 13%;
1192
- --depth-1: #0e0b13;
1193
- --depth-2: #16131c;
1194
- --depth-3: #201c28;
1195
- --depth-4: #2a2533;
1196
- --bg-elevated: hsl(262 17% 15%);
1197
- --bg-section: hsl(262 22% 7%);
1198
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent),
1199
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
1200
- linear-gradient(180deg, var(--depth-1), #0d0a12 100%);
1201
- --border-subtle: rgba(120, 108, 158, 0.1);
1202
- --border-default: rgba(120, 108, 158, 0.18);
1203
- --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;
1204
1330
  }
1205
1331
  [data-theme="hospitality"]:where(:not(.dark)) {
1206
- --hsl-background: 108 16.7% 88.2%;
1207
- --hsl-foreground: 143 25% 12%;
1332
+ --hsl-background: 108 16.6667% 88.2353%;
1333
+ --hsl-foreground: 0 0% 22.3529%;
1208
1334
  --hsl-card: 0 0% 100%;
1209
- --hsl-card-foreground: 143 25% 12%;
1335
+ --hsl-card-foreground: var(--hsl-foreground);
1210
1336
  --hsl-popover: 0 0% 100%;
1211
- --hsl-popover-foreground: 143 25% 12%;
1212
- --hsl-primary: 153 38% 25%;
1337
+ --hsl-popover-foreground: var(--hsl-foreground);
1338
+ --hsl-primary: 153 54.0541% 29.0196%;
1213
1339
  --hsl-primary-foreground: 0 0% 100%;
1214
- --hsl-secondary: 110 18.7% 93.7%;
1215
- --hsl-secondary-foreground: 143 25% 12%;
1216
- --hsl-muted: 110 18.7% 93.7%;
1217
- --hsl-muted-foreground: 138 7.3% 35.5%;
1218
- --hsl-accent: 133 38.4% 88%;
1219
- --hsl-accent-foreground: 143 25% 12%;
1220
- --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%;
1221
1347
  --hsl-input: 0 0% 100%;
1222
- --hsl-ring: 148 28% 43%;
1223
- --hsl-destructive: 0 73.7% 41.8%;
1224
- --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);
1225
1351
  --hsl-raised-2: 0 0% 100%;
1226
- --sidebar-background: 108 21.7% 95.5%;
1227
- --sidebar-foreground: 143 25% 12%;
1228
- --sidebar-primary: 153 38% 25%;
1229
- --sidebar-primary-foreground: 0 0% 100%;
1230
- --sidebar-accent: 133 38.4% 88%;
1231
- --sidebar-accent-foreground: 143 25% 12%;
1232
- --sidebar-border: 107 8.7% 79.8%;
1233
- --sidebar-ring: 148 28% 43%;
1234
- --md3-surface: #dee6dc;
1235
- --md3-surface-dim: #d3dcd1;
1236
- --md3-surface-bright: #ffffff;
1237
- --md3-surface-container-lowest: #ffffff;
1238
- --md3-surface-container-low: #f2f6f1;
1239
- --md3-surface-container: #ffffff;
1240
- --md3-surface-container-high: #edf2ec;
1241
- --md3-surface-container-highest: #ffffff;
1242
- --md3-surface-variant: #edf2ec;
1243
- --md3-on-surface: #17261d;
1244
- --md3-on-surface-variant: #546158;
1245
- --md3-outline: #6d8376;
1246
- --md3-outline-variant: #c9d0c7;
1247
- --md3-primary: #285842;
1248
- --md3-primary-dim: #1f4735;
1249
- --md3-primary-container: #1f4735;
1250
- --md3-on-primary: #ffffff;
1251
- --md3-surface-tint: #285842;
1252
- --depth-1: #dee6dc;
1253
- --depth-2: #ffffff;
1254
- --depth-3: #edf2ec;
1255
- --depth-4: #ffffff;
1256
- --bg-root: #dee6dc;
1257
- --bg-dark: #dee6dc;
1258
- --bg-section: #dee6dc;
1259
- --bg-card: #ffffff;
1260
- --bg-elevated: #ffffff;
1261
- --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));
1262
1388
  --well-page: #ffffff;
1263
- --well-card: #ebf0e9;
1389
+ --well-card: #e9f1e7;
1264
1390
  --well-raised: #ffffff;
1265
- --well-raised-2: #ebf0e9;
1266
- --bg-hover: rgba(40, 88, 66, 0.05);
1267
- --bg-selection: rgba(40, 88, 66, 0.16);
1268
- --border-subtle: rgba(23, 38, 29, 0.11);
1269
- --border-default: rgba(23, 38, 29, 0.16);
1270
- --border-hover: rgba(23, 38, 29, 0.28);
1271
- --border-strong: #798479;
1272
- --field-border: #798479;
1273
- --border-accent: rgba(40, 88, 66, 0.20);
1274
- --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);
1275
1401
  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.07), 0 4px 14px -4px hsl(var(--shadow-color) / 0.1);
1276
1402
  --shadow-raised: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 2px 6px -2px hsl(var(--shadow-color) / 0.07);
1277
1403
  --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.06);
1278
1404
  --edge-highlight: 0 0 0 0 transparent;
1279
- --accent-text: #285842;
1280
- --accent-surface-soft: rgba(40, 88, 66, 0.05);
1281
- --accent-surface-strong: rgba(40, 88, 66, 0.13);
1282
- --accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
1283
- --brand-primary: #3d7b5f;
1284
- --brand-cool: #4f8c6c;
1285
- --brand-glow: #6cac8a;
1286
- --brand-vibrant: #3d7b5f;
1287
- --btn-primary-bg: #285842;
1288
- --btn-primary-hover: #336c52;
1289
- --btn-primary-text: #ffffff;
1290
- --text-primary: #17261d;
1291
- --text-secondary: #36493e;
1292
- --text-muted: #546158;
1293
- --text-dim: #546158;
1294
- --surface-success-bg: #c5edce;
1295
- --surface-success-text: #1e5b34;
1296
- --surface-success-border: #91c79e;
1297
- --surface-warning-bg: #f4e3bf;
1298
- --surface-warning-text: #804d0c;
1299
- --surface-warning-border: #dcb87a;
1300
- --surface-danger-bg: #fadad8;
1301
- --surface-danger-text: #a5292b;
1302
- --surface-danger-border: #e8acaa;
1303
- --surface-neutral-bg: #e5e9e4;
1304
- --surface-neutral-text: #576157;
1305
- --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;
1306
1432
  }
1307
1433
  .dark[data-theme="hospitality"] {
1308
- --hsl-background: 140 10.3% 5.7%;
1309
- --hsl-foreground: 140 12% 90.2%;
1310
- --hsl-card: 132 5.3% 18.6%;
1311
- --hsl-card-foreground: 140 12% 90.2%;
1312
- --hsl-popover: 130 3.9% 29.8%;
1313
- --hsl-popover-foreground: 140 12% 90.2%;
1314
- --hsl-primary: 145 31% 59%;
1315
- --hsl-primary-foreground: 153 35% 10%;
1316
- --hsl-secondary: 130 4.6% 25.5%;
1317
- --hsl-secondary-foreground: 140 12% 90.2%;
1318
- --hsl-muted: 130 4.6% 25.5%;
1319
- --hsl-muted-foreground: 128 5.6% 73.9%;
1320
- --hsl-accent: 140 18% 20%;
1321
- --hsl-accent-foreground: 140 12% 90.2%;
1322
- --hsl-border: 130 3.9% 29.8%;
1323
- --hsl-input: 120 16.7% 2.4%;
1324
- --hsl-ring: 145 31% 59%;
1325
- --hsl-destructive: 0 80% 88%;
1326
- --hsl-raised: 130 4.6% 25.5%;
1327
- --hsl-raised-2: 130 3.7% 31.8%;
1328
- --sidebar-background: 120 8% 9.8%;
1329
- --sidebar-foreground: 140 12% 90.2%;
1330
- --sidebar-primary: 145 31% 59%;
1331
- --sidebar-primary-foreground: 153 35% 10%;
1332
- --sidebar-accent: 140 18% 20%;
1333
- --sidebar-accent-foreground: 140 12% 90.2%;
1334
- --sidebar-border: 130 3.9% 29.8%;
1335
- --sidebar-ring: 145 31% 59%;
1336
- --md3-surface: #0d100e;
1337
- --md3-surface-dim: #050705;
1338
- --md3-surface-bright: #494f4a;
1339
- --md3-surface-container-lowest: #050705;
1340
- --md3-surface-container-low: #171b17;
1341
- --md3-surface-container: #2d322e;
1342
- --md3-surface-container-high: #3e443f;
1343
- --md3-surface-container-highest: #494f4a;
1344
- --md3-surface-variant: #3e443f;
1345
- --md3-on-surface: #e3e9e5;
1346
- --md3-on-surface-variant: #b9c0ba;
1347
- --md3-outline: #8a938e;
1348
- --md3-outline-variant: #494f4a;
1349
- --md3-primary: #99caad;
1350
- --md3-primary-dim: #396a52;
1351
- --md3-primary-container: #396a52;
1352
- --md3-on-primary: #11221a;
1353
- --md3-surface-tint: #76b791;
1354
- --depth-1: #0d100e;
1355
- --depth-2: #2d322e;
1356
- --depth-3: #3e443f;
1357
- --depth-4: #494f4a;
1358
- --bg-root: #0d100e;
1359
- --bg-dark: #0d100e;
1360
- --bg-section: #0d100e;
1361
- --bg-card: #2d322e;
1362
- --bg-elevated: #494f4a;
1363
- --bg-input: #050705;
1364
- --well-page: #050705;
1365
- --well-card: #050705;
1366
- --well-raised: #181c18;
1367
- --well-raised-2: #181c18;
1368
- --bg-hover: rgba(118, 183, 145, 0.07);
1369
- --bg-selection: rgba(118, 183, 145, 0.28);
1370
- --border-subtle: rgba(227, 233, 229, 0.10);
1371
- --border-default: rgba(227, 233, 229, 0.16);
1372
- --border-hover: rgba(227, 233, 229, 0.28);
1373
- --border-strong: #939c94;
1374
- --field-border: #939c94;
1375
- --border-accent: rgba(118, 183, 145, 0.35);
1376
- --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);
1377
1503
  --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.45), 0 10px 24px -14px hsl(var(--shadow-color) / 0.6);
1378
1504
  --shadow-raised: 0 1px 2px hsl(var(--shadow-color) / 0.35);
1379
1505
  --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.5);
1380
1506
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
1381
- --accent-text: #b2dbc2;
1382
- --accent-surface-soft: rgba(118, 183, 145, 0.07);
1383
- --accent-surface-strong: rgba(57, 106, 82, 0.40);
1384
- --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
1385
- --brand-primary: #529873;
1386
- --brand-cool: #76b791;
1387
- --brand-glow: #94c7a9;
1388
- --brand-vibrant: #529873;
1389
- --btn-primary-bg: #76b791;
1390
- --btn-primary-hover: #8dc3a4;
1391
- --btn-primary-text: #11221a;
1392
- --text-primary: #e3e9e5;
1393
- --text-secondary: #c5cec9;
1394
- --text-muted: #b9c0ba;
1395
- --text-dim: #b9c0ba;
1396
- --surface-success-bg: #254930;
1397
- --surface-success-text: #9ce9b1;
1398
- --surface-success-border: #437652;
1399
- --surface-warning-bg: #513d21;
1400
- --surface-warning-text: #fed081;
1401
- --surface-warning-border: #8d6b39;
1402
- --surface-danger-bg: #5c3231;
1403
- --surface-danger-text: #f7b3b0;
1404
- --surface-danger-border: #a45857;
1405
- --surface-neutral-bg: #3e443f;
1406
- --surface-neutral-text: #b9c0ba;
1407
- --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;
1408
1534
  }
1409
1535
  [data-theme="agents"] {
1410
- --bg-card: #1a191b;
1411
- --hsl-background: 270 5.6% 7.1%;
1412
- --hsl-foreground: 240 6.2% 93.7%;
1413
- --hsl-card: 270 3.8% 10.2%;
1414
- --hsl-card-foreground: 240 6.2% 93.7%;
1415
- --hsl-popover: 260 4.2% 13.9%;
1416
- --hsl-popover-foreground: 240 6.2% 93.7%;
1417
- --hsl-secondary: 260 4.2% 13.9%;
1418
- --hsl-secondary-foreground: 240 6.2% 93.7%;
1419
- --hsl-muted: 260 4.2% 13.9%;
1420
- --hsl-muted-foreground: 258 6.9% 71.8%;
1421
- --hsl-accent: 270 4.7% 16.9%;
1422
- --hsl-accent-foreground: 240 6.2% 93.7%;
1423
- --hsl-border: 270 5% 23.5%;
1424
- --hsl-input: 251 4.8% 44.9%;
1425
- --sidebar-background: 270 3.8% 10.2%;
1426
- --sidebar-foreground: 240 6.2% 93.7%;
1427
- --sidebar-accent: 270 4.7% 16.9%;
1428
- --sidebar-accent-foreground: 240 6.2% 93.7%;
1429
- --sidebar-border: 270 5% 23.5%;
1430
- --md3-surface: #121113;
1431
- --md3-surface-dim: #121113;
1432
- --md3-surface-bright: #323035;
1433
- --md3-surface-container-lowest: #121113;
1434
- --md3-surface-container-low: #1a191b;
1435
- --md3-surface-container: #1a191b;
1436
- --md3-surface-container-high: #232225;
1437
- --md3-surface-container-highest: #2b292d;
1438
- --md3-surface-variant: #232225;
1439
- --md3-on-surface: #eeeef0;
1440
- --md3-on-surface-variant: #b5b2bc;
1441
- --md3-outline: #6f6d78;
1442
- --md3-outline-variant: #3c393f;
1443
- --depth-1: #121113;
1444
- --depth-2: #1a191b;
1445
- --depth-3: #232225;
1446
- --depth-4: #2b292d;
1447
- --bg-root: #121113;
1448
- --bg-dark: #121113;
1449
- --bg-elevated: #232225;
1450
- --bg-section: #121113;
1451
- --bg-input: #1a191b;
1452
- --bg-hover: #232225;
1453
- --text-primary: #eeeef0;
1454
- --text-secondary: #eeeef0;
1455
- --text-muted: #b5b2bc;
1456
- --text-dim: #b5b2bc;
1457
- --border-subtle: #3c393f;
1458
- --border-default: #49474e;
1459
- --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);
1460
1586
  --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
1461
1587
  --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
1462
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;
1463
1595
  }
1464
1596
  [data-theme="agents-light"] {
1465
- --bg-card: #ffffff;
1597
+ --bg-card: var(--depth-2);
1466
1598
  --hsl-background: 0 0% 100%;
1467
- --hsl-foreground: 257 10.1% 13.5%;
1599
+ --hsl-foreground: 0 0% 25.098%;
1468
1600
  --hsl-card: 0 0% 100%;
1469
- --hsl-card-foreground: 257 10.1% 13.5%;
1601
+ --hsl-card-foreground: var(--hsl-foreground);
1470
1602
  --hsl-popover: 0 0% 100%;
1471
- --hsl-popover-foreground: 257 10.1% 13.5%;
1472
- --hsl-secondary: 285 14.3% 94.5%;
1473
- --hsl-secondary-foreground: 257 10.1% 13.5%;
1474
- --hsl-muted: 285 14.3% 94.5%;
1475
- --hsl-muted-foreground: 252 4.8% 40.8%;
1476
- --hsl-accent: 276 11.6% 91.6%;
1477
- --hsl-accent-foreground: 257 10.1% 13.5%;
1478
- --hsl-border: 262 11.4% 86.3%;
1479
- --hsl-input: 249 6% 57.5%;
1480
- --sidebar-background: 270 20% 98%;
1481
- --sidebar-foreground: 257 10.1% 13.5%;
1482
- --sidebar-accent: 276 11.6% 91.6%;
1483
- --sidebar-accent-foreground: 257 10.1% 13.5%;
1484
- --sidebar-border: 262 11.4% 86.3%;
1485
- --md3-surface: #ffffff;
1486
- --md3-surface-dim: #faf9fb;
1487
- --md3-surface-bright: #ffffff;
1488
- --md3-surface-container-lowest: #ffffff;
1489
- --md3-surface-container-low: #faf9fb;
1490
- --md3-surface-container: #ffffff;
1491
- --md3-surface-container-high: #f2eff3;
1492
- --md3-surface-container-highest: #ffffff;
1493
- --md3-surface-variant: #f2eff3;
1494
- --md3-on-surface: #211f26;
1495
- --md3-on-surface-variant: #65636d;
1496
- --md3-outline: #8e8c99;
1497
- --md3-outline-variant: #dbd8e0;
1498
- --depth-1: #ffffff;
1499
- --depth-2: #ffffff;
1500
- --depth-3: #faf9fb;
1501
- --depth-4: #ffffff;
1502
- --bg-root: #ffffff;
1503
- --bg-dark: #faf9fb;
1504
- --bg-elevated: #ffffff;
1505
- --bg-section: #faf9fb;
1506
- --bg-input: #ffffff;
1507
- --bg-hover: #f2eff3;
1508
- --text-primary: #211f26;
1509
- --text-secondary: #211f26;
1510
- --text-muted: #65636d;
1511
- --text-dim: #65636d;
1512
- --border-subtle: #dbd8e0;
1513
- --border-default: #d0cdd7;
1514
- --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);
1515
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);
1516
1648
  --shadow-dropdown: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
1517
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;
1518
1656
  }
1519
1657
  [data-theme="website"]:where(:not(.dark)) {
1520
- --hsl-background: 240 42.9% 97.3%;
1521
- --hsl-foreground: 224 18% 12%;
1658
+ --hsl-background: 240 39.1304% 95.4902%;
1659
+ --hsl-foreground: 0 0% 24.7059%;
1522
1660
  --hsl-card: 0 0% 100%;
1523
- --hsl-card-foreground: 224 18% 12%;
1661
+ --hsl-card-foreground: var(--hsl-foreground);
1524
1662
  --hsl-popover: 0 0% 100%;
1525
- --hsl-popover-foreground: 224 18% 12%;
1526
- --hsl-secondary: 240 35.7% 94.5%;
1527
- --hsl-secondary-foreground: 224 18% 12%;
1528
- --hsl-muted: 240 35.7% 94.5%;
1529
- --hsl-muted-foreground: 240 13% 42.4%;
1530
- --hsl-accent: 240 23.1% 92.4%;
1531
- --hsl-accent-foreground: 224 18% 12%;
1532
- --hsl-border: 240 26.3% 88.8%;
1533
- --hsl-input: 240 42.9% 97.3%;
1534
- --md3-surface: #f5f5fb;
1535
- --md3-surface-dim: #e7e7f0;
1536
- --md3-surface-bright: #ffffff;
1537
- --md3-surface-container-lowest: #ffffff;
1538
- --md3-surface-container-low: #fafafd;
1539
- --md3-surface-container: #ffffff;
1540
- --md3-surface-container-high: #ececf6;
1541
- --md3-surface-container-highest: #ffffff;
1542
- --md3-surface-variant: #ececf6;
1543
- --md3-on-surface: #191c24;
1544
- --md3-on-surface-variant: #5e5e7a;
1545
- --md3-outline: #5e5e7a;
1546
- --md3-outline-variant: #dbdbea;
1547
- --depth-1: #f5f5fb;
1548
- --depth-2: #ffffff;
1549
- --depth-3: #ececf6;
1550
- --depth-4: #ffffff;
1551
- --bg-root: #f5f5fb;
1552
- --bg-dark: #f5f5fb;
1553
- --bg-section: #ececf6;
1554
- --bg-card: #ffffff;
1555
- --bg-elevated: #ffffff;
1556
- --bg-input: #f5f5fb;
1557
- --border-subtle: rgba(25, 28, 36, 0.08);
1558
- --border-default: rgba(25, 28, 36, 0.12);
1559
- --border-hover: rgba(25, 28, 36, 0.24);
1560
- --text-primary: #191c24;
1561
- --text-secondary: #3a3a50;
1562
- --text-muted: #5e5e7a;
1563
- --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%;
1564
1709
  }
1565
1710
  .dark[data-theme="website"] {
1566
- --hsl-background: 243 45% 7.8%;
1567
- --hsl-foreground: 0 0% 99.2%;
1568
- --hsl-card: 244 34.9% 16.3%;
1569
- --hsl-card-foreground: 0 0% 99.2%;
1570
- --hsl-popover: 243 33.3% 21.2%;
1571
- --hsl-popover-foreground: 0 0% 99.2%;
1572
- --hsl-secondary: 244 34% 19%;
1573
- --hsl-secondary-foreground: 0 0% 99.2%;
1574
- --hsl-muted: 244 34% 19%;
1575
- --hsl-muted-foreground: 237 23% 65.9%;
1576
- --hsl-accent: 243 33.3% 21.2%;
1577
- --hsl-accent-foreground: 0 0% 99.2%;
1578
- --hsl-border: 243 31.9% 28.2%;
1579
- --hsl-input: 243 41.2% 10%;
1580
- --md3-surface: #0c0b1d;
1581
- --md3-surface-dim: #080814;
1582
- --md3-surface-bright: #2e2c56;
1583
- --md3-surface-container-lowest: #080814;
1584
- --md3-surface-container-low: #141328;
1585
- --md3-surface-container: #1d1b38;
1586
- --md3-surface-container-high: #222041;
1587
- --md3-surface-container-highest: #262448;
1588
- --md3-surface-variant: #222041;
1589
- --md3-on-surface: #fdfdfd;
1590
- --md3-on-surface-variant: #aaa8b8;
1591
- --md3-outline: #9496bc;
1592
- --md3-outline-variant: #33315f;
1593
- --depth-1: #0c0b1d;
1594
- --depth-2: #1d1b38;
1595
- --depth-3: #222041;
1596
- --depth-4: #262448;
1597
- --bg-root: #0c0b1d;
1598
- --bg-dark: #0c0b1d;
1599
- --bg-section: #141328;
1600
- --bg-card: #1d1b38;
1601
- --bg-elevated: #262448;
1602
- --bg-input: #100f24;
1603
- --border-subtle: rgba(255, 255, 255, 0.08);
1604
- --border-default: rgba(255, 255, 255, 0.15);
1605
- --border-hover: rgba(255, 255, 255, 0.28);
1606
- --text-primary: #fdfdfd;
1607
- --text-secondary: #aaa8b8;
1608
- --text-muted: #9496bc;
1609
- --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%;
1762
+ }
1763
+ [data-accent="violet"],
1764
+ [data-accent="violet"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
1765
+ [data-accent="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1766
+ --hsl-primary: var(--tone-violet-fill);
1767
+ --hsl-ring: var(--tone-violet-ring);
1768
+ --brand-primary: var(--tone-violet-mark);
1769
+ --brand-cool: var(--tone-violet-line);
1770
+ --accent-text: var(--tone-violet-ink);
1771
+ }
1772
+ [data-accent="orange"],
1773
+ [data-accent="orange"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
1774
+ [data-accent="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1775
+ --hsl-primary: var(--tone-orange-fill);
1776
+ --hsl-ring: var(--tone-orange-ring);
1777
+ --brand-primary: var(--tone-orange-mark);
1778
+ --brand-cool: var(--tone-orange-line);
1779
+ --accent-text: var(--tone-orange-ink);
1780
+ }
1781
+ [data-accent="teal"],
1782
+ [data-accent="teal"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
1783
+ [data-accent="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1784
+ --hsl-primary: var(--tone-teal-fill);
1785
+ --hsl-ring: var(--tone-teal-ring);
1786
+ --brand-primary: var(--tone-teal-mark);
1787
+ --brand-cool: var(--tone-teal-line);
1788
+ --accent-text: var(--tone-teal-ink);
1789
+ }
1790
+ [data-accent="blue"],
1791
+ [data-accent="blue"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
1792
+ [data-accent="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1793
+ --hsl-primary: var(--tone-blue-fill);
1794
+ --hsl-ring: var(--tone-blue-ring);
1795
+ --brand-primary: var(--tone-blue-mark);
1796
+ --brand-cool: var(--tone-blue-line);
1797
+ --accent-text: var(--tone-blue-ink);
1798
+ }
1799
+ [data-accent="pink"],
1800
+ [data-accent="pink"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
1801
+ [data-accent="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1802
+ --hsl-primary: var(--tone-pink-fill);
1803
+ --hsl-ring: var(--tone-pink-ring);
1804
+ --brand-primary: var(--tone-pink-mark);
1805
+ --brand-cool: var(--tone-pink-line);
1806
+ --accent-text: var(--tone-pink-ink);
1807
+ }
1808
+ [data-accent="brown"],
1809
+ [data-accent="brown"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
1810
+ [data-accent="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1811
+ --hsl-primary: var(--tone-brown-fill);
1812
+ --hsl-ring: var(--tone-brown-ring);
1813
+ --brand-primary: var(--tone-brown-mark);
1814
+ --brand-cool: var(--tone-brown-line);
1815
+ --accent-text: var(--tone-brown-ink);
1816
+ }
1817
+ [data-accent="cyan"],
1818
+ [data-accent="cyan"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
1819
+ [data-accent="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1820
+ --hsl-primary: var(--tone-cyan-fill);
1821
+ --hsl-ring: var(--tone-cyan-ring);
1822
+ --brand-primary: var(--tone-cyan-mark);
1823
+ --brand-cool: var(--tone-cyan-line);
1824
+ --accent-text: var(--tone-cyan-ink);
1825
+ }
1826
+ [data-accent="lime"],
1827
+ [data-accent="lime"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
1828
+ [data-accent="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
1829
+ --hsl-primary: var(--tone-lime-fill);
1830
+ --hsl-ring: var(--tone-lime-ring);
1831
+ --brand-primary: var(--tone-lime-mark);
1832
+ --brand-cool: var(--tone-lime-line);
1833
+ --accent-text: var(--tone-lime-ink);
1834
+ }
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]) {
1836
+ --btn-primary-hover: color-mix(in srgb, hsl(var(--hsl-primary)), white 10%);
1837
+ --brand-purple: color-mix(in srgb, var(--accent-text), white 35%);
1838
+ --brand-strong: color-mix(in srgb, hsl(var(--hsl-primary)), black 50%);
1839
+ --md3-primary-fixed: light-dark(color-mix(in srgb, var(--accent-text) 12%, white), var(--accent-text));
1840
+ --md3-inverse-primary: light-dark(color-mix(in srgb, var(--brand-primary), white 40%), var(--btn-primary-bg));
1841
+ --hsl-primary-foreground: 0 0% 100%;
1842
+ --btn-primary-text: #ffffff;
1843
+ --md3-on-primary: #ffffff;
1844
+ --brand-glow: var(--accent-text);
1845
+ --brand-vibrant: var(--brand-primary);
1846
+ --btn-primary-bg: hsl(var(--hsl-primary));
1847
+ --btn-cta-bg: var(--btn-primary-bg);
1848
+ --btn-cta-text: var(--btn-primary-text);
1849
+ --sidebar-primary: var(--hsl-primary);
1850
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
1851
+ --sidebar-ring: var(--hsl-ring);
1852
+ --md3-primary: var(--accent-text);
1853
+ --md3-primary-dim: var(--btn-primary-bg);
1854
+ --md3-primary-container: var(--btn-primary-bg);
1855
+ --md3-on-primary-container: light-dark(hsl(0 0% 100%), var(--brand-purple));
1856
+ --md3-primary-fixed-dim: light-dark(color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)), var(--brand-cool));
1857
+ --md3-secondary: light-dark(var(--accent-text), var(--brand-purple));
1858
+ --md3-secondary-dim: light-dark(var(--btn-primary-bg), var(--accent-text));
1859
+ --md3-secondary-container: light-dark(var(--md3-primary-fixed), var(--brand-strong));
1860
+ --md3-on-secondary: light-dark(hsl(0 0% 100%), var(--brand-purple));
1861
+ --md3-on-secondary-container: light-dark(var(--accent-text), var(--brand-purple));
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));
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));
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));
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)));
1871
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
1872
+ --status-creating: var(--accent-text);
1873
+ --primary: var(--hsl-primary);
1874
+ --primary-foreground: var(--hsl-primary-foreground);
1875
+ --ring: var(--hsl-ring);
1876
+ --syntax-meta: var(--accent-text);
1877
+ --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
1878
+ --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
1879
+ --focus-border: hsl(var(--hsl-ring) / 0.8);
1880
+ --focus-halo: hsl(var(--hsl-ring) / 0.18);
1881
+ --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
1882
+ --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
1883
+ --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
1884
+ --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
1885
+ --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
1886
+ --ix-sel-bg: light-dark(hsl(var(--hsl-ring) / 0.13), hsl(var(--hsl-ring) / 0.18));
1887
+ --ix-hover-bg: light-dark(hsl(var(--hsl-ring) / 0.07), hsl(var(--hsl-ring) / 0.08));
1888
+ --chart-shade: var(--bg-hover);
1889
+ --chart-accent: light-dark(hsl(var(--hsl-primary)), var(--brand-cool));
1890
+ --color-brand: var(--brand-primary);
1891
+ --color-brand-dim: var(--btn-primary-bg);
1892
+ --color-brand-cool: var(--brand-cool);
1893
+ --color-brand-glow: var(--brand-glow);
1894
+ --color-status-creating: var(--status-creating);
1895
+ --color-primary: hsl(var(--primary));
1896
+ --color-primary-foreground: hsl(var(--primary-foreground));
1897
+ --color-ring: hsl(var(--ring));
1610
1898
  }