@icen.ai/ui 0.1.0

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 (22) hide show
  1. package/README.md +58 -0
  2. package/dist/base.css +55 -0
  3. package/dist/behaviors/copy.mjs +62 -0
  4. package/dist/behaviors/tabs.mjs +63 -0
  5. package/dist/behaviors/theme.mjs +80 -0
  6. package/dist/behaviors/toast.mjs +35 -0
  7. package/dist/components/btn.css +23 -0
  8. package/dist/components/form.css +31 -0
  9. package/dist/components/panel.css +19 -0
  10. package/dist/components/pill.css +28 -0
  11. package/dist/components/stat.css +18 -0
  12. package/dist/components/table.css +19 -0
  13. package/dist/components/tabs.css +26 -0
  14. package/dist/components/toast.css +27 -0
  15. package/dist/index.mjs +280 -0
  16. package/dist/registry.json +26 -0
  17. package/dist/tokens/colors.css +1318 -0
  18. package/dist/tokens/style-profiles.css +540 -0
  19. package/dist/tokens/typography.css +49 -0
  20. package/dist/tokens.css +1917 -0
  21. package/dist/ui.css +2190 -0
  22. package/package.json +37 -0
package/dist/ui.css ADDED
@@ -0,0 +1,2190 @@
1
+ /* @icen.ai/ui — tokens（colors + style-profiles + typography） */
2
+
3
+ /* ── tokens/colors.css ── */
4
+ /*
5
+ * Icen Design System — 色彩 Tokens
6
+ *
7
+ * 5 体系 × 2 模式 = 10 套完整配色
8
+ * 每套: 12 base + 4 glow + 8 derived + 8 semantic + 8 fill + 4 border + 2 shadow + n bridge
9
+ *
10
+ * 用法: import "./colors.css";
11
+ */
12
+
13
+ /* ══════════════════════════════════════════════════════════════
14
+ CLAY — 温暖纸感 · 陶土橙 + 牛皮纸白
15
+ Warm Paper · Clay-Dust Orange × Parchment Cream
16
+ ══════════════════════════════════════════════════════════════ */
17
+
18
+ :root {
19
+ /* ── 12 Base Tokens ── */
20
+ --token-bg: #faf9f5;
21
+ --token-bg-soft: #f5f3ec;
22
+ --token-surface: #ffffff;
23
+ --token-surface-strong: #f5f3ec;
24
+ --token-line-soft: rgba(43, 41, 38, 0.12);
25
+ --token-line: rgba(43, 41, 38, 0.22);
26
+ --token-line-strong: rgba(43, 41, 38, 0.38);
27
+ --token-text: #1f1e1c;
28
+ --token-text-muted: #5e5d58;
29
+ --token-text-faint: #9d9b93;
30
+ --token-accent: #d97757;
31
+ --token-accent-cold: #7a9cb0;
32
+ --token-accent-deep: #c6613f;
33
+
34
+ /* ── Glow (background radial accents) ── */
35
+ --token-glow: rgba(217,119,87,.12);
36
+ --token-glow-cold: rgba(122,156,176,.06);
37
+
38
+ /* ── Derived ── */
39
+ --token-surface-hover: color-mix(in srgb, var(--token-surface) 92%, var(--token-accent) 8%);
40
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 14%, transparent);
41
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 10%, transparent);
42
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 55%, transparent);
43
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 92%, transparent);
44
+ --token-on-accent: #ffffff;
45
+
46
+ /* ── Shadow ── */
47
+ --token-shadow-elevated: 0 12px 32px rgba(31, 30, 29, 0.05);
48
+ --token-shadow-overlay: 0 18px 44px rgba(31, 30, 29, 0.08);
49
+
50
+ /* ── Semantic ── */
51
+ --token-success: #3d8a5a;
52
+ --token-success-muted: color-mix(in srgb, var(--token-success) 12%, transparent);
53
+ --token-warning: #b8860b;
54
+ --token-warning-muted: rgba(184,134,11,.12);
55
+ --token-error: #c0392b;
56
+ --token-error-muted: color-mix(in srgb, var(--token-error) 12%, transparent);
57
+ --token-info: #6a8ea0;
58
+ --token-info-muted: rgba(106,142,160,.12);
59
+
60
+ /* ── Fill Scale (overlay textures) ── */
61
+ --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
62
+ --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
63
+ --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
64
+ --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
65
+
66
+ /* ── Surface Glass ── */
67
+ --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 88%, transparent);
68
+
69
+ /* ═══════════════════════════════════════════
70
+ BRIDGE — legacy component token names
71
+ ═══════════════════════════════════════════ */
72
+
73
+ /* ── 主色 ── */
74
+ --accent-clay: var(--token-accent);
75
+ --accent-clay-dark: #c6613f;
76
+ --accent-clay-light: #e8a087;
77
+ --accent-cold: var(--token-accent-cold);
78
+
79
+ /* ── 背景 ── */
80
+ --bg-primary: var(--token-bg);
81
+ --bg-secondary: var(--token-bg-soft);
82
+ --bg-tertiary: var(--token-surface);
83
+ --bg-card: #fffdfa;
84
+ --bg-card-muted: #f7f0e4;
85
+ --bg-panel: var(--token-surface-strong);
86
+ --bg-hover: var(--token-surface-hover);
87
+
88
+ /* ── 文字 ── */
89
+ --text-primary: var(--token-text);
90
+ --text-secondary: #383834;
91
+ --text-tertiary: var(--token-text-muted);
92
+ --text-muted: #87867f;
93
+ --text-subtle: var(--token-text-faint);
94
+
95
+ /* ── 边框 ── */
96
+ --border-subtle: var(--token-line-soft);
97
+ --border-default: var(--token-line);
98
+ --border-strong: var(--token-line-strong);
99
+
100
+ /* ── 阴影 ── */
101
+ --shadow-sm: var(--token-shadow-elevated);
102
+ --shadow-md: var(--token-shadow-overlay);
103
+
104
+ /* ── 语义色 ── */
105
+ --color-success: var(--token-success);
106
+ --color-success-bg: var(--token-success-muted);
107
+ --color-warning: var(--token-warning);
108
+ --color-warning-bg: var(--token-warning-muted);
109
+ --color-error: var(--token-error);
110
+ --color-error-bg: var(--token-error-muted);
111
+ --color-info: var(--token-info);
112
+ --color-info-bg: var(--token-info-muted);
113
+ --color-pending: #87867f;
114
+ --color-pending-bg: #f9f9f8;
115
+
116
+ /* ── 装饰色 ── */
117
+ --accent-clay-bg: color-mix(in srgb, var(--token-accent) 8%, transparent);
118
+ --accent-clay-bg-strong: var(--token-accent-subtle);
119
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
120
+ }
121
+
122
+ /* ── CLAY DARK ── */
123
+ .dark {
124
+ /* ── 12 Base Tokens ── */
125
+ --token-bg: #171410;
126
+ --token-bg-soft: #211d19;
127
+ --token-surface: #2a2520;
128
+ --token-surface-strong: #302b25;
129
+ --token-line-soft: #3b352f;
130
+ --token-line: #4c433b;
131
+ --token-line-strong: #5e5349;
132
+ --token-text: #f5f4f0;
133
+ --token-text-muted: #a8a6a0;
134
+ --token-text-faint: #6a6863;
135
+ --token-accent: #e08a68;
136
+ --token-accent-cold: #7aa0b8;
137
+
138
+ /* ── Glow ── */
139
+ --token-glow: rgba(224,138,104,.10);
140
+ --token-glow-cold: rgba(122,160,184,.05);
141
+
142
+ /* ── Derived ── */
143
+ --token-surface-hover: color-mix(in srgb, var(--token-surface) 90%, var(--token-accent) 10%);
144
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 12%, transparent);
145
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 8%, transparent);
146
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 55%, transparent);
147
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 94%, transparent);
148
+ --token-on-accent: #ffffff;
149
+
150
+ /* ── Shadow ── */
151
+ --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.16);
152
+ --token-shadow-overlay: 0 2px 4px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.26);
153
+
154
+ /* ── Semantic ── */
155
+ --token-success: #8fbfaa;
156
+ --token-success-muted: rgba(143,191,170,.15);
157
+ --token-warning: #d4a520;
158
+ --token-warning-muted: rgba(212,165,32,.15);
159
+ --token-error: #d46a45;
160
+ --token-error-muted: rgba(212,106,69,.15);
161
+ --token-info: #6a9ab8;
162
+ --token-info-muted: rgba(106,154,184,.15);
163
+
164
+ /* ── Fill ── */
165
+ --token-fill-1: color-mix(in srgb, var(--token-text) 5%, transparent);
166
+ --token-fill-2: color-mix(in srgb, var(--token-text) 10%, transparent);
167
+ --token-fill-3: color-mix(in srgb, var(--token-text) 16%, transparent);
168
+ --token-fill-4: color-mix(in srgb, var(--token-text) 24%, transparent);
169
+
170
+ /* ── Surface Glass ── */
171
+ --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
172
+
173
+ /* ── BRIDGE ── */
174
+ --accent-clay: var(--token-accent);
175
+ --accent-clay-dark: #d47a57;
176
+ --accent-clay-light: #eba38a;
177
+ --accent-cold: var(--token-accent-cold);
178
+ --bg-primary: var(--token-bg);
179
+ --bg-secondary: var(--token-bg-soft);
180
+ --bg-tertiary: var(--token-surface);
181
+ --bg-card: #221f1b;
182
+ --bg-card-muted: #26221d;
183
+ --bg-panel: var(--token-surface-strong);
184
+ --bg-hover: var(--token-surface-hover);
185
+ --text-primary: var(--token-text);
186
+ --text-secondary: #d4d3ce;
187
+ --text-tertiary: var(--token-text-muted);
188
+ --text-muted: #7a7872;
189
+ --text-subtle: var(--token-text-faint);
190
+ --border-subtle: var(--token-line-soft);
191
+ --border-default: var(--token-line);
192
+ --border-strong: var(--token-line-strong);
193
+ --shadow-sm: var(--token-shadow-elevated);
194
+ --shadow-md: var(--token-shadow-overlay);
195
+ --color-success: var(--token-success);
196
+ --color-success-bg: var(--token-success-muted);
197
+ --color-warning: var(--token-warning);
198
+ --color-warning-bg: var(--token-warning-muted);
199
+ --color-error: var(--token-error);
200
+ --color-error-bg: var(--token-error-muted);
201
+ --color-info: var(--token-info);
202
+ --color-info-bg: var(--token-info-muted);
203
+ --color-pending: #7a7872;
204
+ --color-pending-bg: #222120;
205
+ --accent-clay-bg: color-mix(in srgb, var(--token-accent) 8%, transparent);
206
+ --accent-clay-bg-strong: var(--token-accent-subtle);
207
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
208
+ }
209
+
210
+ /* ══════════════════════════════════════════════════════════════
211
+ PIANO — 象牙琴键 · 乌木黑键 · 大漆光泽
212
+ Piano Keys · Ivory × Ebony Lacquer · Brass Nameplate
213
+ ══════════════════════════════════════════════════════════════ */
214
+
215
+ .piano {
216
+ /* ── 12 Base Tokens ── */
217
+ --token-bg: #f1eee6;
218
+ --token-bg-soft: #e5dfd2;
219
+ --token-surface: #faf8f2;
220
+ --token-surface-strong: #eee8db;
221
+ --token-line-soft: #d2cab9;
222
+ --token-line: #b8ad9a;
223
+ --token-line-strong: #8f8578;
224
+ --token-text: #11100e;
225
+ --token-text-muted: #4e4b45;
226
+ --token-text-faint: #8b857b;
227
+ --token-accent: #b89145;
228
+ --token-accent-cold: #566370;
229
+
230
+ /* ── Glow ── */
231
+ --token-glow: rgba(184,145,69,.12);
232
+ --token-glow-cold: rgba(22,24,26,.05);
233
+
234
+ /* ── Derived ── */
235
+ --token-surface-hover: color-mix(in srgb, var(--token-surface-strong) 88%, var(--token-accent) 12%);
236
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 14%, transparent);
237
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 10%, transparent);
238
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 55%, transparent);
239
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 92%, transparent);
240
+ --token-on-accent: #12100b;
241
+
242
+ /* ── Shadow · 漆面冷反光 ── */
243
+ --token-shadow-elevated: 0 1px 2px rgba(17,16,14,.06), 0 7px 20px rgba(17,16,14,.08);
244
+ --token-shadow-overlay: 0 2px 5px rgba(17,16,14,.10), 0 16px 42px rgba(17,16,14,.16);
245
+
246
+ /* ── Semantic ── */
247
+ --token-success: #5a9e7a;
248
+ --token-success-muted: rgba(90,158,122,.10);
249
+ --token-warning: #b89145;
250
+ --token-warning-muted: rgba(184,145,69,.12);
251
+ --token-error: #a84a42;
252
+ --token-error-muted: rgba(168,74,66,.10);
253
+ --token-info: #5a7488;
254
+ --token-info-muted: rgba(90,116,136,.10);
255
+
256
+ /* ── Fill ── */
257
+ --token-fill-1: color-mix(in srgb, var(--token-text) 3%, transparent);
258
+ --token-fill-2: color-mix(in srgb, var(--token-text) 6%, transparent);
259
+ --token-fill-3: color-mix(in srgb, var(--token-text) 10%, transparent);
260
+ --token-fill-4: color-mix(in srgb, var(--token-text) 16%, transparent);
261
+
262
+ /* ── Surface Glass ── */
263
+ --token-surface-glass: color-mix(in srgb, var(--token-surface) 86%, transparent);
264
+
265
+ /* ── BRIDGE ── */
266
+ --accent-clay: var(--token-accent);
267
+ --accent-clay-dark: #967333;
268
+ --accent-clay-light: #d2b36f;
269
+ --accent-cold: var(--token-accent-cold);
270
+ --bg-primary: var(--token-bg);
271
+ --bg-secondary: var(--token-bg-soft);
272
+ --bg-tertiary: var(--token-surface);
273
+ --bg-card: var(--token-surface);
274
+ --bg-card-muted: var(--token-bg-soft);
275
+ --bg-panel: var(--token-surface-strong);
276
+ --bg-hover: var(--token-surface-hover);
277
+ --text-primary: var(--token-text);
278
+ --text-secondary: #2e2b27;
279
+ --text-tertiary: var(--token-text-muted);
280
+ --text-muted: #8b857b;
281
+ --text-subtle: var(--token-text-faint);
282
+ --border-subtle: var(--token-line-soft);
283
+ --border-default: var(--token-line);
284
+ --border-strong: var(--token-line-strong);
285
+ --shadow-sm: var(--token-shadow-elevated);
286
+ --shadow-md: var(--token-shadow-overlay);
287
+ --color-success: var(--token-success);
288
+ --color-success-bg: var(--token-success-muted);
289
+ --color-warning: var(--token-warning);
290
+ --color-warning-bg: var(--token-warning-muted);
291
+ --color-error: var(--token-error);
292
+ --color-error-bg: var(--token-error-muted);
293
+ --color-info: var(--token-info);
294
+ --color-info-bg: var(--token-info-muted);
295
+ --color-pending: #8b857b;
296
+ --color-pending-bg: var(--token-bg-soft);
297
+ --accent-clay-bg: var(--token-accent-subtle);
298
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 20%, transparent);
299
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
300
+ }
301
+
302
+ /* ── PIANO DARK ── */
303
+ .piano.dark {
304
+ /* ── 12 Base Tokens ── */
305
+ --token-bg: #090909;
306
+ --token-bg-soft: #11100f;
307
+ --token-surface: #1a1917;
308
+ --token-surface-strong: #24221f;
309
+ --token-line-soft: #2f2c27;
310
+ --token-line: #463f34;
311
+ --token-line-strong: #685b45;
312
+ --token-text: #f6f1e7;
313
+ --token-text-muted: #b7afa2;
314
+ --token-text-faint: #736b60;
315
+ --token-accent: #d6b567;
316
+ --token-accent-cold: #7c8a94;
317
+
318
+ /* ── Glow ── */
319
+ --token-glow: rgba(214,181,103,.14);
320
+ --token-glow-cold: rgba(210,220,225,.04);
321
+
322
+ /* ── Derived ── */
323
+ --token-surface-hover: color-mix(in srgb, var(--token-surface-strong) 88%, var(--token-accent) 12%);
324
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 12%, transparent);
325
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 8%, transparent);
326
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 60%, transparent);
327
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 95%, transparent);
328
+ --token-on-accent: #0a0a0a;
329
+
330
+ /* ── Shadow ── */
331
+ --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.34);
332
+ --token-shadow-overlay: 0 2px 5px rgba(0,0,0,.34), 0 18px 46px rgba(0,0,0,.46);
333
+
334
+ /* ── Semantic ── */
335
+ --token-success: #7ac09a;
336
+ --token-success-muted: rgba(122,192,154,.12);
337
+ --token-warning: #d6b567;
338
+ --token-warning-muted: rgba(214,181,103,.13);
339
+ --token-error: #d07668;
340
+ --token-error-muted: rgba(208,118,104,.12);
341
+ --token-info: #7293aa;
342
+ --token-info-muted: rgba(114,147,170,.12);
343
+
344
+ /* ── Fill ── */
345
+ --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
346
+ --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
347
+ --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
348
+ --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
349
+
350
+ /* ── Surface Glass ── */
351
+ --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
352
+
353
+ /* ── BRIDGE ── */
354
+ --accent-clay: var(--token-accent);
355
+ --accent-clay-dark: #b8954b;
356
+ --accent-clay-light: #e7cf8b;
357
+ --accent-cold: var(--token-accent-cold);
358
+ --bg-primary: var(--token-bg);
359
+ --bg-secondary: var(--token-bg-soft);
360
+ --bg-tertiary: var(--token-surface);
361
+ --bg-card: var(--token-bg-soft);
362
+ --bg-card-muted: var(--token-surface);
363
+ --bg-panel: var(--token-surface-strong);
364
+ --bg-hover: var(--token-surface-hover);
365
+ --text-primary: var(--token-text);
366
+ --text-secondary: #d8d0c2;
367
+ --text-tertiary: var(--token-text-muted);
368
+ --text-muted: var(--token-text-faint);
369
+ --text-subtle: var(--token-text-faint);
370
+ --border-subtle: var(--token-line-soft);
371
+ --border-default: var(--token-line);
372
+ --border-strong: var(--token-line-strong);
373
+ --shadow-sm: var(--token-shadow-elevated);
374
+ --shadow-md: var(--token-shadow-overlay);
375
+ --color-success: var(--token-success);
376
+ --color-success-bg: var(--token-success-muted);
377
+ --color-warning: var(--token-warning);
378
+ --color-warning-bg: var(--token-warning-muted);
379
+ --color-error: var(--token-error);
380
+ --color-error-bg: var(--token-error-muted);
381
+ --color-info: var(--token-info);
382
+ --color-info-bg: var(--token-info-muted);
383
+ --color-pending: var(--token-text-faint);
384
+ --color-pending-bg: var(--token-bg-soft);
385
+ --accent-clay-bg: var(--token-accent-subtle);
386
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 16%, transparent);
387
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
388
+ }
389
+
390
+ /* ══════════════════════════════════════════════════════════════
391
+ ART — 莫奈 · 日出印象 + 睡莲
392
+ Monet · Impression, Sunrise × Water Lilies
393
+ ══════════════════════════════════════════════════════════════ */
394
+
395
+ /* ── ART LIGHT · 日出印象 (Claude Monet, 1872) ── */
396
+ .art {
397
+ /* 勒阿弗尔晨雾 · 日出橙红 · 港湾青灰 */
398
+ --token-bg: #dce8e3;
399
+ --token-bg-soft: #ccdcd6;
400
+ --token-surface: #edf3ee;
401
+ --token-surface-strong: #d8e6df;
402
+ --token-line-soft: #b7c9c1;
403
+ --token-line: #96aaa2;
404
+ --token-line-strong: #718980;
405
+ --token-text: #172226;
406
+ --token-text-muted: #445553;
407
+ --token-text-faint: #768985;
408
+ --token-accent: #d66f4f;
409
+ --token-accent-cold: #4f8f90;
410
+
411
+ /* ── Glow · 雾霭橙光 ── */
412
+ --token-glow: rgba(214,111,79,.12);
413
+ --token-glow-cold: rgba(79,143,144,.07);
414
+
415
+ /* ── Derived ── */
416
+ --token-surface-hover: color-mix(in srgb, var(--token-surface-strong) 88%, var(--token-accent) 12%);
417
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 12%, transparent);
418
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 8%, transparent);
419
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 55%, transparent);
420
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 94%, transparent);
421
+ --token-on-accent: #ffffff;
422
+
423
+ --token-shadow-elevated: 0 1px 2px rgba(23,34,38,.05), 0 6px 18px rgba(23,34,38,.08);
424
+ --token-shadow-overlay: 0 2px 5px rgba(23,34,38,.08), 0 12px 32px rgba(23,34,38,.12);
425
+
426
+ --token-success: #5a8c6e;
427
+ --token-success-muted: rgba(90,140,110,.10);
428
+ --token-warning: #b67933;
429
+ --token-warning-muted: rgba(182,121,51,.11);
430
+ --token-error: #b95e52;
431
+ --token-error-muted: rgba(185,94,82,.11);
432
+ --token-info: #568aa0;
433
+ --token-info-muted: rgba(86,138,160,.11);
434
+
435
+ --token-fill-1: color-mix(in srgb, var(--token-text) 3%, transparent);
436
+ --token-fill-2: color-mix(in srgb, var(--token-text) 6%, transparent);
437
+ --token-fill-3: color-mix(in srgb, var(--token-text) 10%, transparent);
438
+ --token-fill-4: color-mix(in srgb, var(--token-text) 16%, transparent);
439
+
440
+ --token-surface-glass: color-mix(in srgb, var(--token-bg) 84%, transparent);
441
+
442
+ /* ── BRIDGE ── */
443
+ --accent-clay: var(--token-accent);
444
+ --accent-clay-dark: #b95a3c;
445
+ --accent-clay-light: #e69a82;
446
+ --accent-cold: var(--token-accent-cold);
447
+ --bg-primary: var(--token-bg);
448
+ --bg-secondary: var(--token-bg-soft);
449
+ --bg-tertiary: var(--token-surface);
450
+ --bg-card: var(--token-surface);
451
+ --bg-card-muted: var(--token-bg-soft);
452
+ --bg-panel: var(--token-surface-strong);
453
+ --bg-hover: var(--token-surface-hover);
454
+ --text-primary: var(--token-text);
455
+ --text-secondary: var(--token-text-muted);
456
+ --text-tertiary: #556864;
457
+ --text-muted: var(--token-text-faint);
458
+ --text-subtle: var(--token-line-strong);
459
+ --border-subtle: var(--token-line-soft);
460
+ --border-default: var(--token-line);
461
+ --border-strong: var(--token-line-strong);
462
+ --shadow-sm: var(--token-shadow-elevated);
463
+ --shadow-md: var(--token-shadow-overlay);
464
+ --color-success: var(--token-success);
465
+ --color-success-bg: var(--token-success-muted);
466
+ --color-warning: var(--token-warning);
467
+ --color-warning-bg: var(--token-warning-muted);
468
+ --color-error: var(--token-error);
469
+ --color-error-bg: var(--token-error-muted);
470
+ --color-info: var(--token-info);
471
+ --color-info-bg: var(--token-info-muted);
472
+ --color-pending: var(--token-text-faint);
473
+ --color-pending-bg: var(--token-fill-1);
474
+ --accent-clay-bg: var(--token-accent-subtle);
475
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
476
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 20%, transparent);
477
+ }
478
+
479
+ /* ── ART DARK · 莫奈睡莲 (Water Lilies) ── */
480
+ .art.dark {
481
+ /* 睡莲池水 · 暮色蓝绿 · 莲粉紫影 */
482
+ --token-bg: #172521;
483
+ --token-bg-soft: #1d312c;
484
+ --token-surface: #263d37;
485
+ --token-surface-strong: #304a42;
486
+ --token-line-soft: #35554c;
487
+ --token-line: #4c7167;
488
+ --token-line-strong: #659082;
489
+ --token-text: #edf1e8;
490
+ --token-text-muted: #c1cabd;
491
+ --token-text-faint: #7f9188;
492
+ --token-accent: #d59ab1;
493
+ --token-accent-cold: #78aaa2;
494
+
495
+ /* ── Glow · 池面粉紫和水光 ── */
496
+ --token-glow: rgba(213,154,177,.10);
497
+ --token-glow-cold: rgba(120,170,162,.10);
498
+
499
+ /* ── Derived ── */
500
+ --token-surface-hover: color-mix(in srgb, var(--token-surface) 86%, var(--token-accent-cold) 14%);
501
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 12%, transparent);
502
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 8%, transparent);
503
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 60%, transparent);
504
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 92%, transparent);
505
+
506
+ --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.24);
507
+ --token-shadow-overlay: 0 2px 5px rgba(0,0,0,.24), 0 14px 36px rgba(0,0,0,.32);
508
+
509
+ --token-success: #5ab88a;
510
+ --token-success-muted: rgba(90,184,138,.12);
511
+ --token-warning: #c5aa68;
512
+ --token-warning-muted: rgba(197,170,104,.12);
513
+ --token-error: #d1847e;
514
+ --token-error-muted: rgba(209,132,126,.12);
515
+ --token-info: #78aaa2;
516
+ --token-info-muted: rgba(120,170,162,.12);
517
+
518
+ --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
519
+ --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
520
+ --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
521
+ --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
522
+
523
+ --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
524
+
525
+ /* ── BRIDGE ── */
526
+ --accent-clay: var(--token-accent);
527
+ --accent-clay-dark: #bc7f9a;
528
+ --accent-clay-light: #e4b7ca;
529
+ --accent-cold: var(--token-accent-cold);
530
+ --bg-primary: var(--token-bg);
531
+ --bg-secondary: var(--token-bg-soft);
532
+ --bg-tertiary: var(--token-surface);
533
+ --bg-card: var(--token-bg-soft);
534
+ --bg-card-muted: var(--token-surface);
535
+ --bg-panel: var(--token-surface-strong);
536
+ --bg-hover: var(--token-surface-hover);
537
+ --text-primary: var(--token-text);
538
+ --text-secondary: var(--token-text-muted);
539
+ --text-tertiary: #a5b1aa;
540
+ --text-muted: var(--token-text-faint);
541
+ --text-subtle: var(--token-line-strong);
542
+ --border-subtle: var(--token-line-soft);
543
+ --border-default: var(--token-line);
544
+ --border-strong: var(--token-line-strong);
545
+ --shadow-sm: var(--token-shadow-elevated);
546
+ --shadow-md: var(--token-shadow-overlay);
547
+ --color-success: var(--token-success);
548
+ --color-success-bg: var(--token-success-muted);
549
+ --color-warning: var(--token-warning);
550
+ --color-warning-bg: var(--token-warning-muted);
551
+ --color-error: var(--token-error);
552
+ --color-error-bg: var(--token-error-muted);
553
+ --color-info: var(--token-info);
554
+ --color-info-bg: var(--token-info-muted);
555
+ --color-pending: var(--token-text-faint);
556
+ --color-pending-bg: var(--token-fill-1);
557
+ --accent-clay-bg: var(--token-accent-subtle);
558
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
559
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
560
+ }
561
+
562
+ /* ══════════════════════════════════════════════════════════════
563
+ VANGOGH — 麦田鸦群 + 星空
564
+ Van Gogh · Wheatfield × Starry Night
565
+ ══════════════════════════════════════════════════════════════ */
566
+
567
+ /* ── VANGOGH LIGHT · 麦田鸦群 ── */
568
+ .vangogh {
569
+ /* 干麦秆画布 · 麦浪金 · 普鲁士蓝阴影 */
570
+ --token-bg: #e8ddb2;
571
+ --token-bg-soft: #d5c58f;
572
+ --token-surface: #f2e8bd;
573
+ --token-surface-strong: #decb85;
574
+ --token-line-soft: #c0ad6e;
575
+ --token-line: #9f8b53;
576
+ --token-line-strong: #70623f;
577
+ --token-text: #1f241b;
578
+ --token-text-muted: #4a5138;
579
+ --token-text-faint: #767b57;
580
+ --token-accent: #1f527c;
581
+ --token-accent-cold: #476f45;
582
+
583
+ --token-glow: rgba(31,82,124,.09);
584
+ --token-glow-cold: rgba(71,111,69,.07);
585
+
586
+ --token-surface-hover: color-mix(in srgb, var(--token-surface-strong) 90%, var(--token-accent) 10%);
587
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 10%, transparent);
588
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 7%, transparent);
589
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 60%, transparent);
590
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 94%, transparent);
591
+ --token-on-accent: #fff3c5;
592
+
593
+ --token-shadow-elevated: 0 1px 2px rgba(31,36,27,.06), 0 7px 20px rgba(31,36,27,.10);
594
+ --token-shadow-overlay: 0 2px 5px rgba(31,36,27,.09), 0 16px 40px rgba(31,36,27,.15);
595
+
596
+ --token-success: #3f7d50;
597
+ --token-success-muted: rgba(63,125,80,.12);
598
+ --token-warning: #a97824;
599
+ --token-warning-muted: rgba(169,120,36,.12);
600
+ --token-error: #9c513a;
601
+ --token-error-muted: rgba(156,81,58,.11);
602
+ --token-info: #2d638e;
603
+ --token-info-muted: rgba(45,99,142,.11);
604
+
605
+ --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
606
+ --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
607
+ --token-fill-3: color-mix(in srgb, var(--token-text) 13%, transparent);
608
+ --token-fill-4: color-mix(in srgb, var(--token-text) 20%, transparent);
609
+
610
+ --token-surface-glass: color-mix(in srgb, var(--token-surface) 82%, transparent);
611
+
612
+ /* ── BRIDGE ── */
613
+ --accent-clay: var(--token-accent);
614
+ --accent-clay-dark: #173f64;
615
+ --accent-clay-light: #5b82a6;
616
+ --accent-cold: var(--token-accent-cold);
617
+ --bg-primary: var(--token-bg);
618
+ --bg-secondary: var(--token-bg-soft);
619
+ --bg-tertiary: var(--token-surface);
620
+ --bg-card: var(--token-surface);
621
+ --bg-card-muted: var(--token-bg-soft);
622
+ --bg-panel: var(--token-surface-strong);
623
+ --bg-hover: var(--token-surface-hover);
624
+ --text-primary: var(--token-text);
625
+ --text-secondary: var(--token-text-muted);
626
+ --text-tertiary: #606847;
627
+ --text-muted: var(--token-text-faint);
628
+ --text-subtle: var(--token-line-strong);
629
+ --border-subtle: var(--token-line-soft);
630
+ --border-default: var(--token-line);
631
+ --border-strong: var(--token-line-strong);
632
+ --shadow-sm: var(--token-shadow-elevated);
633
+ --shadow-md: var(--token-shadow-overlay);
634
+ --color-success: var(--token-success);
635
+ --color-success-bg: var(--token-success-muted);
636
+ --color-warning: var(--token-warning);
637
+ --color-warning-bg: var(--token-warning-muted);
638
+ --color-error: var(--token-error);
639
+ --color-error-bg: var(--token-error-muted);
640
+ --color-info: var(--token-info);
641
+ --color-info-bg: var(--token-info-muted);
642
+ --color-pending: var(--token-text-faint);
643
+ --color-pending-bg: var(--token-fill-1);
644
+ --accent-clay-bg: var(--token-accent-subtle);
645
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 16%, transparent);
646
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
647
+ }
648
+
649
+ /* ── VANGOGH DARK · 星空 ── */
650
+ .vangogh.dark {
651
+ /* 钴蓝夜空 · 漩涡青蓝 · 星点暖黄 */
652
+ --token-bg: #0f1b2e;
653
+ --token-bg-soft: #142440;
654
+ --token-surface: #1a3050;
655
+ --token-surface-strong: #223a60;
656
+ --token-line-soft: #1c3455;
657
+ --token-line: #2a4a75;
658
+ --token-line-strong: #3a5a8a;
659
+ --token-text: #f0ece0;
660
+ --token-text-muted: #c0bcb0;
661
+ --token-text-faint: #77728b;
662
+ --token-accent: #e8c840;
663
+ --token-accent-cold: #4a98b8;
664
+
665
+ --token-glow: rgba(232,200,64,.12);
666
+ --token-glow-cold: rgba(74,152,184,.08);
667
+
668
+ --token-surface-hover: color-mix(in srgb, var(--token-surface) 88%, var(--token-accent) 12%);
669
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 10%, transparent);
670
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 6%, transparent);
671
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 60%, transparent);
672
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 92%, transparent);
673
+ --token-on-accent: #101824;
674
+
675
+ --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.20);
676
+ --token-shadow-overlay: 0 2px 4px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.28);
677
+
678
+ --token-success: #5ab88a;
679
+ --token-success-muted: rgba(90,184,138,.12);
680
+ --token-warning: #d4a028;
681
+ --token-warning-muted: rgba(212,160,40,.12);
682
+ --token-error: #d06060;
683
+ --token-error-muted: rgba(208,96,96,.12);
684
+ --token-info: #6090c0;
685
+ --token-info-muted: rgba(96,144,192,.12);
686
+
687
+ --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
688
+ --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
689
+ --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
690
+ --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
691
+
692
+ --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
693
+
694
+ /* ── BRIDGE ── */
695
+ --accent-clay: var(--token-accent);
696
+ --accent-clay-dark: #c8a830;
697
+ --accent-clay-light: #f0e070;
698
+ --accent-cold: var(--token-accent-cold);
699
+ --bg-primary: var(--token-bg);
700
+ --bg-secondary: var(--token-bg-soft);
701
+ --bg-tertiary: var(--token-surface);
702
+ --bg-card: var(--token-bg-soft);
703
+ --bg-card-muted: var(--token-surface);
704
+ --bg-panel: var(--token-surface-strong);
705
+ --bg-hover: var(--token-surface-hover);
706
+ --text-primary: var(--token-text);
707
+ --text-secondary: var(--token-text-muted);
708
+ --text-tertiary: #a0a098;
709
+ --text-muted: var(--token-text-faint);
710
+ --text-subtle: var(--token-line-strong);
711
+ --border-subtle: var(--token-line-soft);
712
+ --border-default: var(--token-line);
713
+ --border-strong: var(--token-line-strong);
714
+ --shadow-sm: var(--token-shadow-elevated);
715
+ --shadow-md: var(--token-shadow-overlay);
716
+ --color-success: var(--token-success);
717
+ --color-success-bg: var(--token-success-muted);
718
+ --color-warning: var(--token-warning);
719
+ --color-warning-bg: var(--token-warning-muted);
720
+ --color-error: var(--token-error);
721
+ --color-error-bg: var(--token-error-muted);
722
+ --color-info: var(--token-info);
723
+ --color-info-bg: var(--token-info-muted);
724
+ --color-pending: var(--token-text-faint);
725
+ --color-pending-bg: var(--token-fill-1);
726
+ --accent-clay-bg: var(--token-accent-subtle);
727
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
728
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
729
+ }
730
+
731
+ /* ══════════════════════════════════════════════════════════════
732
+ INK — 水墨纸砚 · 松烟翠
733
+ Sumi Ink · Rice Paper × Pine-Soot Green
734
+ ══════════════════════════════════════════════════════════════ */
735
+
736
+ /* ── INK LIGHT · 宣纸水墨 ── */
737
+ .ink {
738
+ /* 宣纸白底 · 墨灰 · 松烟绿 accent */
739
+ --token-bg: #F5F2ED;
740
+ --token-bg-soft: #EDE9E2;
741
+ --token-surface: #E8E4DC;
742
+ --token-surface-strong: #E0DBD2;
743
+ --token-line-soft: #D4CFC6;
744
+ --token-line: #B8B2A8;
745
+ --token-line-strong: #969088;
746
+ --token-text: #1A1816;
747
+ --token-text-muted: #5C5854;
748
+ --token-text-faint: #969088;
749
+ --token-accent: #5B7A5E;
750
+ --token-accent-cold: #6B7E8A;
751
+
752
+ --token-glow: rgba(91,122,94,.08);
753
+ --token-glow-cold: rgba(107,126,138,.04);
754
+
755
+ --token-surface-hover: color-mix(in srgb, var(--token-surface) 94%, var(--token-accent) 6%);
756
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 10%, transparent);
757
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 6%, transparent);
758
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 55%, transparent);
759
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 94%, transparent);
760
+ --token-on-accent: #ffffff;
761
+
762
+ --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
763
+ --token-shadow-overlay: 0 2px 4px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.08);
764
+
765
+ --token-success: #5A8E6A;
766
+ --token-success-muted: rgba(90,142,106,.10);
767
+ --token-warning: #9A7A3A;
768
+ --token-warning-muted: rgba(154,122,58,.10);
769
+ --token-error: #A05048;
770
+ --token-error-muted: rgba(160,80,72,.10);
771
+ --token-info: #5A7890;
772
+ --token-info-muted: rgba(90,120,144,.10);
773
+
774
+ --token-fill-1: color-mix(in srgb, var(--token-text) 3%, transparent);
775
+ --token-fill-2: color-mix(in srgb, var(--token-text) 6%, transparent);
776
+ --token-fill-3: color-mix(in srgb, var(--token-text) 10%, transparent);
777
+ --token-fill-4: color-mix(in srgb, var(--token-text) 16%, transparent);
778
+
779
+ --token-surface-glass: color-mix(in srgb, var(--token-bg) 86%, transparent);
780
+
781
+ /* ── BRIDGE ── */
782
+ --accent-clay: var(--token-accent);
783
+ --accent-clay-dark: #4A6A4E;
784
+ --accent-clay-light: #8AA88E;
785
+ --accent-cold: var(--token-accent-cold);
786
+ --bg-primary: var(--token-bg);
787
+ --bg-secondary: var(--token-bg-soft);
788
+ --bg-tertiary: var(--token-surface);
789
+ --bg-card: #FCFAF7;
790
+ --bg-card-muted: var(--token-bg-soft);
791
+ --bg-panel: var(--token-surface-strong);
792
+ --bg-hover: var(--token-surface-hover);
793
+ --text-primary: var(--token-text);
794
+ --text-secondary: var(--token-text-muted);
795
+ --text-tertiary: #7A7672;
796
+ --text-muted: var(--token-text-faint);
797
+ --text-subtle: var(--token-line-strong);
798
+ --border-subtle: var(--token-line-soft);
799
+ --border-default: var(--token-line);
800
+ --border-strong: var(--token-line-strong);
801
+ --shadow-sm: var(--token-shadow-elevated);
802
+ --shadow-md: var(--token-shadow-overlay);
803
+ --color-success: var(--token-success);
804
+ --color-success-bg: var(--token-success-muted);
805
+ --color-warning: var(--token-warning);
806
+ --color-warning-bg: var(--token-warning-muted);
807
+ --color-error: var(--token-error);
808
+ --color-error-bg: var(--token-error-muted);
809
+ --color-info: var(--token-info);
810
+ --color-info-bg: var(--token-info-muted);
811
+ --color-pending: var(--token-text-faint);
812
+ --color-pending-bg: var(--token-fill-1);
813
+ --accent-clay-bg: var(--token-accent-subtle);
814
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
815
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 20%, transparent);
816
+ }
817
+
818
+ /* ── INK DARK · 夜墨松烟 ── */
819
+ .ink.dark {
820
+ /* 墨色夜空 · 松烟暗绿 · 冷灰星点 */
821
+ --token-bg: #131815;
822
+ --token-bg-soft: #1A201D;
823
+ --token-surface: #212824;
824
+ --token-surface-strong: #28302B;
825
+ --token-line-soft: #2A322D;
826
+ --token-line: #3A423D;
827
+ --token-line-strong: #4A524D;
828
+ --token-text: #F0EEE8;
829
+ --token-text-muted: #B0AEAA;
830
+ --token-text-faint: #74726e;
831
+ --token-accent: #7AA87E;
832
+ --token-accent-cold: #6A8EA0;
833
+
834
+ --token-glow: rgba(122,168,126,.10);
835
+ --token-glow-cold: rgba(106,142,160,.05);
836
+
837
+ --token-surface-hover: color-mix(in srgb, var(--token-surface) 90%, var(--token-accent) 10%);
838
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 10%, transparent);
839
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 6%, transparent);
840
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 60%, transparent);
841
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 94%, transparent);
842
+ --token-on-accent: #ffffff;
843
+
844
+ --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.22);
845
+ --token-shadow-overlay: 0 2px 4px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.34);
846
+
847
+ --token-success: #6AB080;
848
+ --token-success-muted: rgba(106,176,128,.12);
849
+ --token-warning: #B89A45;
850
+ --token-warning-muted: rgba(184,154,69,.12);
851
+ --token-error: #C06860;
852
+ --token-error-muted: rgba(192,104,96,.12);
853
+ --token-info: #6A98B8;
854
+ --token-info-muted: rgba(106,152,184,.12);
855
+
856
+ --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
857
+ --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
858
+ --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
859
+ --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
860
+
861
+ --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
862
+
863
+ /* ── BRIDGE ── */
864
+ --accent-clay: var(--token-accent);
865
+ --accent-clay-dark: #5A8A62;
866
+ --accent-clay-light: #A0CAA4;
867
+ --accent-cold: var(--token-accent-cold);
868
+ --bg-primary: var(--token-bg);
869
+ --bg-secondary: var(--token-bg-soft);
870
+ --bg-tertiary: var(--token-surface);
871
+ --bg-card: var(--token-bg-soft);
872
+ --bg-card-muted: var(--token-surface);
873
+ --bg-panel: var(--token-surface-strong);
874
+ --bg-hover: var(--token-surface-hover);
875
+ --text-primary: var(--token-text);
876
+ --text-secondary: var(--token-text-muted);
877
+ --text-tertiary: #989692;
878
+ --text-muted: var(--token-text-faint);
879
+ --text-subtle: var(--token-line-strong);
880
+ --border-subtle: var(--token-line-soft);
881
+ --border-default: var(--token-line);
882
+ --border-strong: var(--token-line-strong);
883
+ --shadow-sm: var(--token-shadow-elevated);
884
+ --shadow-md: var(--token-shadow-overlay);
885
+ --color-success: var(--token-success);
886
+ --color-success-bg: var(--token-success-muted);
887
+ --color-warning: var(--token-warning);
888
+ --color-warning-bg: var(--token-warning-muted);
889
+ --color-error: var(--token-error);
890
+ --color-error-bg: var(--token-error-muted);
891
+ --color-info: var(--token-info);
892
+ --color-info-bg: var(--token-info-muted);
893
+ --color-pending: var(--token-text-faint);
894
+ --color-pending-bg: var(--token-fill-1);
895
+ --accent-clay-bg: var(--token-accent-subtle);
896
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
897
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
898
+ }
899
+
900
+ /* ══════════════════════════════════════════════════════════════
901
+ RETRO — 8-bit · 红白机 · 像素风
902
+ NES · Famicom · Pixel Art · CRT Glow
903
+ ══════════════════════════════════════════════════════════════ */
904
+
905
+ /* ── RETRO LIGHT · 经典像素 ── */
906
+ .retro {
907
+ /* 像素风配色：纯白底 + 经典红 + 深蓝 */
908
+ --token-bg: #f0f0e8;
909
+ --token-bg-soft: #e0e0d0;
910
+ --token-surface: #e8e8dc;
911
+ --token-surface-strong: #dcdcc8;
912
+ --token-line-soft: #c0c0a8;
913
+ --token-line: #a0a088;
914
+ --token-line-strong: #808068;
915
+ --token-text: #1a1a1a;
916
+ --token-text-muted: #4a4a3a;
917
+ --token-text-faint: #7a7a6a;
918
+ --token-accent: #d03030;
919
+ --token-accent-cold: #3030a0;
920
+
921
+ /* ── Glow ── */
922
+ --token-glow: rgba(208,48,48,.10);
923
+ --token-glow-cold: rgba(48,48,160,.08);
924
+
925
+ /* ── Derived ── */
926
+ --token-surface-hover: color-mix(in srgb, var(--token-surface) 90%, var(--token-accent) 10%);
927
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 12%, transparent);
928
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 8%, transparent);
929
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 55%, transparent);
930
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 92%, transparent);
931
+ --token-on-accent: #ffffff;
932
+
933
+ /* ── Shadow · 硬像素投影 ── */
934
+ --token-shadow-elevated: 2px 2px 0 rgba(26,26,26,.25);
935
+ --token-shadow-overlay: 3px 3px 0 rgba(26,26,26,.35);
936
+
937
+ /* ── Semantic ── */
938
+ --token-success: #30a030;
939
+ --token-success-muted: rgba(48,160,48,.14);
940
+ --token-warning: #c8a020;
941
+ --token-warning-muted: rgba(200,160,32,.14);
942
+ --token-error: #d03030;
943
+ --token-error-muted: rgba(208,48,48,.14);
944
+ --token-info: #3030a0;
945
+ --token-info-muted: rgba(48,48,160,.14);
946
+
947
+ /* ── Fill ── */
948
+ --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
949
+ --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
950
+ --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
951
+ --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
952
+
953
+ /* ── Glass ── */
954
+ --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 88%, transparent);
955
+
956
+ /* ── BRIDGE ── */
957
+ --accent-clay: var(--token-accent);
958
+ --accent-clay-dark: #a02020;
959
+ --accent-clay-light: #e06060;
960
+ --accent-cold: var(--token-accent-cold);
961
+ --bg-primary: var(--token-bg);
962
+ --bg-secondary: var(--token-bg-soft);
963
+ --bg-tertiary: var(--token-surface);
964
+ --bg-card: var(--token-surface);
965
+ --bg-card-muted: var(--token-bg-soft);
966
+ --bg-panel: var(--token-surface-strong);
967
+ --bg-hover: var(--token-surface-hover);
968
+ --text-primary: var(--token-text);
969
+ --text-secondary: var(--token-text-muted);
970
+ --text-tertiary: #5a5a4a;
971
+ --text-muted: var(--token-text-faint);
972
+ --text-subtle: var(--token-line-strong);
973
+ --border-subtle: var(--token-line-soft);
974
+ --border-default: var(--token-line);
975
+ --border-strong: var(--token-line-strong);
976
+ --shadow-sm: var(--token-shadow-elevated);
977
+ --shadow-md: var(--token-shadow-overlay);
978
+ --color-success: var(--token-success);
979
+ --color-success-bg: var(--token-success-muted);
980
+ --color-warning: var(--token-warning);
981
+ --color-warning-bg: var(--token-warning-muted);
982
+ --color-error: var(--token-error);
983
+ --color-error-bg: var(--token-error-muted);
984
+ --color-info: var(--token-info);
985
+ --color-info-bg: var(--token-info-muted);
986
+ --color-pending: var(--token-text-faint);
987
+ --color-pending-bg: var(--token-fill-1);
988
+ --accent-clay-bg: var(--token-accent-subtle);
989
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 20%, transparent);
990
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
991
+ }
992
+
993
+ /* ── RETRO DARK · 深夜像素 ── */
994
+ .retro.dark {
995
+ /* 像素暗色：深蓝灰底 + 霓虹红 + 像素蓝 */
996
+ --token-bg: #1a1a2e;
997
+ --token-bg-soft: #222240;
998
+ --token-surface: #2a2a50;
999
+ --token-surface-strong: #323260;
1000
+ --token-line-soft: #3a3a70;
1001
+ --token-line: #4a4a90;
1002
+ --token-line-strong: #5a5ab0;
1003
+ --token-text: #e8e8d8;
1004
+ --token-text-muted: #c0c0a8;
1005
+ --token-text-faint: #808070;
1006
+ --token-accent: #ff4040;
1007
+ --token-accent-cold: #5050ff;
1008
+
1009
+ /* ── Glow · 霓虹像素光 ── */
1010
+ --token-glow: rgba(255,64,64,.14);
1011
+ --token-glow-cold: rgba(80,80,255,.10);
1012
+
1013
+ /* ── Derived ── */
1014
+ --token-surface-hover: color-mix(in srgb, var(--token-surface) 88%, var(--token-accent) 12%);
1015
+ --token-accent-subtle: color-mix(in srgb, var(--token-accent) 14%, transparent);
1016
+ --token-accent-glow: color-mix(in srgb, var(--token-accent) 10%, transparent);
1017
+ --token-line-dashed: color-mix(in srgb, var(--token-line-soft) 60%, transparent);
1018
+ --token-overlay-bg: color-mix(in srgb, var(--token-bg) 94%, transparent);
1019
+ --token-on-accent: #ffffff;
1020
+
1021
+ /* ── Shadow · 硬像素投影 ── */
1022
+ --token-shadow-elevated: 2px 2px 0 rgba(0,0,0,.40);
1023
+ --token-shadow-overlay: 3px 3px 0 rgba(0,0,0,.50);
1024
+
1025
+ /* ── Semantic ── */
1026
+ --token-success: #40ff40;
1027
+ --token-success-muted: rgba(64,255,64,.16);
1028
+ --token-warning: #ffff40;
1029
+ --token-warning-muted: rgba(255,255,64,.16);
1030
+ --token-error: #ff4040;
1031
+ --token-error-muted: rgba(255,64,64,.16);
1032
+ --token-info: #5050ff;
1033
+ --token-info-muted: rgba(80,80,255,.16);
1034
+
1035
+ /* ── Fill ── */
1036
+ --token-fill-1: color-mix(in srgb, var(--token-text) 5%, transparent);
1037
+ --token-fill-2: color-mix(in srgb, var(--token-text) 10%, transparent);
1038
+ --token-fill-3: color-mix(in srgb, var(--token-text) 16%, transparent);
1039
+ --token-fill-4: color-mix(in srgb, var(--token-text) 24%, transparent);
1040
+
1041
+ /* ── Glass ── */
1042
+ --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
1043
+
1044
+ /* ── BRIDGE ── */
1045
+ --accent-clay: var(--token-accent);
1046
+ --accent-clay-dark: #d03030;
1047
+ --accent-clay-light: #ff6060;
1048
+ --accent-cold: var(--token-accent-cold);
1049
+ --bg-primary: var(--token-bg);
1050
+ --bg-secondary: var(--token-bg-soft);
1051
+ --bg-tertiary: var(--token-surface);
1052
+ --bg-card: var(--token-bg-soft);
1053
+ --bg-card-muted: var(--token-surface);
1054
+ --bg-panel: var(--token-surface-strong);
1055
+ --bg-hover: var(--token-surface-hover);
1056
+ --text-primary: var(--token-text);
1057
+ --text-secondary: var(--token-text-muted);
1058
+ --text-tertiary: #a0a090;
1059
+ --text-muted: var(--token-text-faint);
1060
+ --text-subtle: var(--token-line-strong);
1061
+ --border-subtle: var(--token-line-soft);
1062
+ --border-default: var(--token-line);
1063
+ --border-strong: var(--token-line-strong);
1064
+ --shadow-sm: var(--token-shadow-elevated);
1065
+ --shadow-md: var(--token-shadow-overlay);
1066
+ --color-success: var(--token-success);
1067
+ --color-success-bg: var(--token-success-muted);
1068
+ --color-warning: var(--token-warning);
1069
+ --color-warning-bg: var(--token-warning-muted);
1070
+ --color-error: var(--token-error);
1071
+ --color-error-bg: var(--token-error-muted);
1072
+ --color-info: var(--token-info);
1073
+ --color-info-bg: var(--token-info-muted);
1074
+ --color-pending: var(--token-text-faint);
1075
+ --color-pending-bg: var(--token-fill-1);
1076
+ --accent-clay-bg: var(--token-accent-subtle);
1077
+ --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 16%, transparent);
1078
+ --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
1079
+ }
1080
+
1081
+ /* ── RETRO Depth Tokens ── */
1082
+ .retro {
1083
+ --token-canvas: var(--token-bg);
1084
+ --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-bg) 22%);
1085
+ --token-panel: color-mix(in srgb, var(--token-bg-soft) 52%, var(--token-bg) 48%);
1086
+ --token-card: color-mix(in srgb, var(--token-bg) 80%, var(--token-surface) 20%);
1087
+ --token-card-strong: color-mix(in srgb, var(--token-bg) 66%, var(--token-surface) 34%);
1088
+ --token-control: color-mix(in srgb, var(--token-bg-soft) 62%, var(--token-bg) 38%);
1089
+ --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 52%, var(--token-bg-soft) 48%);
1090
+ --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
1091
+ --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-bg) 16%);
1092
+ --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 86%, var(--token-text) 8%);
1093
+ --token-shadow-card: 2px 2px 0 color-mix(in srgb, var(--token-text) 15%, transparent);
1094
+ --token-shadow-inset: inset 2px 2px 0 color-mix(in srgb, var(--token-surface) 42%, transparent), inset -1px -1px 0 color-mix(in srgb, var(--token-text) 4%, transparent);
1095
+ --token-top-highlight: color-mix(in srgb, var(--token-surface) 36%, transparent);
1096
+ }
1097
+
1098
+ .retro.dark {
1099
+ --token-canvas: var(--token-bg);
1100
+ --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 86%, var(--token-bg) 14%);
1101
+ --token-panel: color-mix(in srgb, var(--token-bg-soft) 72%, var(--token-bg) 28%);
1102
+ --token-card: color-mix(in srgb, var(--token-surface) 72%, var(--token-bg-soft) 28%);
1103
+ --token-card-strong: color-mix(in srgb, var(--token-surface-strong) 72%, var(--token-surface) 28%);
1104
+ --token-control: color-mix(in srgb, var(--token-bg-soft) 70%, var(--token-bg) 30%);
1105
+ --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 62%, var(--token-bg-soft) 38%);
1106
+ --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
1107
+ --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-text-faint) 8%);
1108
+ --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 86%, var(--token-text-muted) 8%);
1109
+ --token-shadow-card: 2px 2px 0 rgba(0,0,0,.30);
1110
+ --token-shadow-inset: inset 2px 2px 0 color-mix(in srgb, var(--token-text) 6%, transparent), inset -1px -1px 0 rgba(0,0,0,.22);
1111
+ --token-top-highlight: color-mix(in srgb, var(--token-surface) 18%, transparent);
1112
+ }
1113
+
1114
+
1115
+ /* ── 圆角 ── */
1116
+ :root {
1117
+ --radius-xs: 6px;
1118
+ --radius-sm: 8px;
1119
+ --radius-md: 10px;
1120
+ --radius-lg: 12px;
1121
+ --radius-xl: 16px;
1122
+ --radius-full: 999px;
1123
+ }
1124
+
1125
+ /* ── Depth Tokens ──
1126
+ Semantic surface levels used by app chrome and primitives. These are
1127
+ intentionally derived from theme tokens so every palette keeps its own voice
1128
+ while gaining clearer functional separation. */
1129
+ :root {
1130
+ --token-canvas: var(--token-bg);
1131
+ --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-bg) 22%);
1132
+ --token-panel: color-mix(in srgb, var(--token-bg-soft) 52%, var(--token-bg) 48%);
1133
+ --token-card: color-mix(in srgb, var(--token-bg) 80%, var(--token-surface) 20%);
1134
+ --token-card-strong: color-mix(in srgb, var(--token-bg) 66%, var(--token-surface) 34%);
1135
+ --token-control: color-mix(in srgb, var(--token-bg-soft) 62%, var(--token-bg) 38%);
1136
+ --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 52%, var(--token-bg-soft) 48%);
1137
+ --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
1138
+ --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-bg) 16%);
1139
+ --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 86%, var(--token-text) 8%);
1140
+ --token-shadow-card: 0 1px 2px color-mix(in srgb, var(--token-text) 5%, transparent), 0 6px 18px color-mix(in srgb, var(--token-text) 5%, transparent);
1141
+ --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-surface) 42%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--token-text) 4%, transparent);
1142
+ --token-top-highlight: color-mix(in srgb, var(--token-surface) 36%, transparent);
1143
+ }
1144
+
1145
+ .dark {
1146
+ --token-canvas: var(--token-bg);
1147
+ --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 86%, var(--token-bg) 14%);
1148
+ --token-panel: color-mix(in srgb, var(--token-bg-soft) 72%, var(--token-bg) 28%);
1149
+ --token-card: color-mix(in srgb, var(--token-surface) 72%, var(--token-bg-soft) 28%);
1150
+ --token-card-strong: color-mix(in srgb, var(--token-surface-strong) 72%, var(--token-surface) 28%);
1151
+ --token-control: color-mix(in srgb, var(--token-bg-soft) 70%, var(--token-bg) 30%);
1152
+ --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 62%, var(--token-bg-soft) 38%);
1153
+ --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
1154
+ --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-text-faint) 8%);
1155
+ --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 86%, var(--token-text-muted) 8%);
1156
+ --token-shadow-card: 0 1px 1px rgba(0,0,0,.22), 0 12px 28px rgba(0,0,0,.24);
1157
+ --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-text) 6%, transparent), inset 0 -1px 1px rgba(0,0,0,.22);
1158
+ --token-top-highlight: color-mix(in srgb, var(--token-surface) 18%, transparent);
1159
+ }
1160
+
1161
+ .piano {
1162
+ --token-canvas: var(--token-bg);
1163
+ --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 84%, var(--token-bg) 16%);
1164
+ --token-panel: color-mix(in srgb, var(--token-bg-soft) 68%, var(--token-bg) 32%);
1165
+ --token-card: color-mix(in srgb, var(--token-surface) 56%, var(--token-bg) 44%);
1166
+ --token-card-strong: color-mix(in srgb, var(--token-surface) 72%, var(--token-bg-soft) 28%);
1167
+ --token-control: color-mix(in srgb, var(--token-bg-soft) 74%, var(--token-line-soft) 26%);
1168
+ --token-control-hover: color-mix(in srgb, var(--token-surface-strong) 92%, var(--token-accent) 8%);
1169
+ --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 84%, var(--token-bg) 16%);
1170
+ --token-outline: color-mix(in srgb, var(--token-line) 94%, var(--token-text-muted) 6%);
1171
+ --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 92%, var(--token-text) 8%);
1172
+ --token-shadow-card: 0 1px 1px color-mix(in srgb, var(--token-text) 7%, transparent), 0 9px 24px color-mix(in srgb, var(--token-text) 7%, transparent);
1173
+ --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-surface) 70%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--token-text) 5%, transparent);
1174
+ --token-top-highlight: color-mix(in srgb, var(--token-surface) 52%, transparent);
1175
+ }
1176
+
1177
+ .piano.dark {
1178
+ --token-canvas: var(--token-bg);
1179
+ --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 86%, black 14%);
1180
+ --token-panel: color-mix(in srgb, var(--token-bg-soft) 74%, var(--token-bg) 26%);
1181
+ --token-card: color-mix(in srgb, var(--token-surface) 76%, var(--token-bg-soft) 24%);
1182
+ --token-card-strong: color-mix(in srgb, var(--token-surface-strong) 78%, var(--token-surface) 22%);
1183
+ --token-control: color-mix(in srgb, var(--token-bg-soft) 72%, black 28%);
1184
+ --token-control-hover: color-mix(in srgb, var(--token-surface-strong) 92%, var(--token-accent) 8%);
1185
+ --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 86%, var(--token-bg) 14%);
1186
+ --token-outline: color-mix(in srgb, var(--token-line) 92%, var(--token-accent) 8%);
1187
+ --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 88%, var(--token-accent) 12%);
1188
+ --token-shadow-card: 0 1px 1px rgba(0,0,0,.32), 0 14px 34px rgba(0,0,0,.40);
1189
+ --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-text) 8%, transparent), inset 0 -1px 1px rgba(0,0,0,.30);
1190
+ --token-top-highlight: color-mix(in srgb, var(--token-text) 8%, transparent);
1191
+ }
1192
+
1193
+ .vangogh {
1194
+ --token-canvas: color-mix(in srgb, var(--token-bg) 88%, #f6efd0 12%);
1195
+ --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-bg) 22%);
1196
+ --token-panel: color-mix(in srgb, var(--token-bg) 70%, var(--token-bg-soft) 30%);
1197
+ --token-card: color-mix(in srgb, var(--token-bg) 78%, var(--token-surface) 22%);
1198
+ --token-card-strong: color-mix(in srgb, var(--token-bg) 58%, var(--token-surface) 42%);
1199
+ --token-control: color-mix(in srgb, var(--token-bg-soft) 58%, var(--token-bg) 42%);
1200
+ --token-control-hover: color-mix(in srgb, var(--token-surface-strong) 86%, var(--token-accent) 14%);
1201
+ --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 80%, var(--token-bg) 20%);
1202
+ --token-outline: color-mix(in srgb, var(--token-line) 88%, var(--token-accent) 12%);
1203
+ --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 84%, var(--token-accent) 16%);
1204
+ --token-shadow-card: 0 1px 2px color-mix(in srgb, var(--token-text) 5%, transparent), 0 8px 22px color-mix(in srgb, var(--token-text) 7%, transparent);
1205
+ --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-surface) 48%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--token-text) 4%, transparent);
1206
+ --token-top-highlight: color-mix(in srgb, var(--token-surface) 30%, transparent);
1207
+ }
1208
+
1209
+ .vangogh.dark {
1210
+ --token-canvas: var(--token-bg);
1211
+ --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 84%, var(--token-bg) 16%);
1212
+ --token-panel: color-mix(in srgb, var(--token-bg-soft) 72%, var(--token-bg) 28%);
1213
+ --token-card: color-mix(in srgb, var(--token-surface) 72%, var(--token-bg-soft) 28%);
1214
+ --token-card-strong: color-mix(in srgb, var(--token-surface-strong) 76%, var(--token-surface) 24%);
1215
+ --token-control: color-mix(in srgb, var(--token-bg-soft) 70%, var(--token-bg) 30%);
1216
+ --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 74%, var(--token-accent) 8%);
1217
+ --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
1218
+ --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-accent-cold) 8%);
1219
+ --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 84%, var(--token-accent) 10%);
1220
+ --token-shadow-card: 0 1px 1px rgba(0,0,0,.22), 0 12px 28px rgba(0,0,0,.24);
1221
+ --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-text) 6%, transparent), inset 0 -1px 1px rgba(0,0,0,.22);
1222
+ --token-top-highlight: color-mix(in srgb, var(--token-surface) 18%, transparent);
1223
+ }
1224
+
1225
+ /* ── Workbench Chrome Tokens ──
1226
+ Shared spatial hierarchy for Studio and Creation editors. These sit on top
1227
+ of theme depth tokens so light/dark and style profiles keep their own voice
1228
+ while still exposing clear IDE-like regions. */
1229
+ :root {
1230
+ --token-workbench-canvas: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-line-soft) 22%);
1231
+ --token-workbench-sidebar: color-mix(in srgb, var(--token-bg) 76%, var(--token-surface) 24%);
1232
+ --token-workbench-editor: color-mix(in srgb, var(--token-bg) 82%, var(--token-surface) 18%);
1233
+ --token-workbench-panel: color-mix(in srgb, var(--token-card) 82%, var(--token-surface) 18%);
1234
+ --token-workbench-panel-strong: color-mix(in srgb, var(--token-card-strong) 78%, var(--token-surface) 22%);
1235
+ --token-workbench-chrome: color-mix(in srgb, var(--token-workbench-panel) 86%, var(--token-surface) 14%);
1236
+ --token-workbench-rail: color-mix(in srgb, var(--token-sidebar) 84%, var(--token-bg) 16%);
1237
+ --token-workbench-gutter: color-mix(in srgb, var(--token-line-soft) 30%, transparent);
1238
+ --token-workbench-edge: color-mix(in srgb, var(--token-text) 10%, transparent);
1239
+ --token-workbench-edge-soft: color-mix(in srgb, var(--token-text) 7%, transparent);
1240
+ --token-workbench-shadow: 0 1px 1px color-mix(in srgb, var(--token-text) 3%, transparent), 0 8px 22px color-mix(in srgb, var(--token-text) 4%, transparent);
1241
+ --token-workbench-shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--token-surface) 28%, transparent);
1242
+ --token-editor-paper: #f5efe5;
1243
+ --token-editor-paper-soft: color-mix(in srgb, var(--token-editor-paper) 88%, var(--token-bg-soft) 12%);
1244
+ --token-editor-paper-chrome: color-mix(in srgb, var(--token-editor-paper) 92%, var(--token-surface) 8%);
1245
+ --token-editor-paper-edge: color-mix(in srgb, var(--token-text) 7%, transparent);
1246
+ }
1247
+
1248
+ .dark {
1249
+ --token-workbench-canvas: color-mix(in srgb, var(--token-bg) 72%, black 28%);
1250
+ --token-workbench-sidebar: color-mix(in srgb, var(--token-bg-soft) 72%, black 28%);
1251
+ --token-workbench-editor: color-mix(in srgb, var(--token-bg) 84%, black 16%);
1252
+ --token-workbench-panel: color-mix(in srgb, var(--token-panel) 82%, black 18%);
1253
+ --token-workbench-panel-strong: color-mix(in srgb, var(--token-card-strong) 82%, black 18%);
1254
+ --token-workbench-chrome: color-mix(in srgb, var(--token-workbench-panel) 78%, black 22%);
1255
+ --token-workbench-rail: color-mix(in srgb, var(--token-sidebar) 76%, black 24%);
1256
+ --token-workbench-gutter: color-mix(in srgb, var(--token-line-soft) 44%, transparent);
1257
+ --token-workbench-edge: color-mix(in srgb, var(--token-text) 11%, transparent);
1258
+ --token-workbench-edge-soft: color-mix(in srgb, var(--token-text) 8%, transparent);
1259
+ --token-workbench-shadow: 0 1px 1px rgba(0,0,0,.16), 0 10px 26px rgba(0,0,0,.18);
1260
+ --token-workbench-shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--token-text) 4%, transparent);
1261
+ --token-editor-paper: #26211b;
1262
+ --token-editor-paper-soft: color-mix(in srgb, var(--token-editor-paper) 88%, var(--token-bg-soft) 12%);
1263
+ --token-editor-paper-chrome: color-mix(in srgb, var(--token-editor-paper) 90%, var(--token-surface-strong) 10%);
1264
+ --token-editor-paper-edge: color-mix(in srgb, var(--token-text) 8%, transparent);
1265
+ }
1266
+
1267
+ .piano {
1268
+ --token-editor-paper: #fbf8ef;
1269
+ }
1270
+
1271
+ .piano.dark {
1272
+ --token-editor-paper: #1d1b17;
1273
+ }
1274
+
1275
+ .art {
1276
+ --token-editor-paper: #e9f2ed;
1277
+ }
1278
+
1279
+ .art.dark {
1280
+ --token-editor-paper: #203a34;
1281
+ }
1282
+
1283
+ .vangogh {
1284
+ --token-editor-paper: #eee5bf;
1285
+ }
1286
+
1287
+ .vangogh.dark {
1288
+ --token-editor-paper: #172742;
1289
+ }
1290
+
1291
+ .ink {
1292
+ --token-editor-paper: #fbf8f1;
1293
+ }
1294
+
1295
+ .ink.dark {
1296
+ --token-editor-paper: #1b221e;
1297
+ }
1298
+
1299
+ .retro {
1300
+ --token-editor-paper: #f4f4ea;
1301
+ }
1302
+
1303
+ .retro.dark {
1304
+ --token-editor-paper: #24243f;
1305
+ }
1306
+
1307
+ .style-retro {
1308
+ --token-workbench-shadow: var(--token-shadow-card);
1309
+ --token-workbench-shadow-inset: var(--token-shadow-inset);
1310
+ }
1311
+
1312
+ /* ── 动画 ── */
1313
+ @keyframes blink {
1314
+ 0%, 100% { opacity: 1; }
1315
+ 50% { opacity: 0; }
1316
+ }
1317
+
1318
+ .animate-blink {
1319
+ animation: blink 1s step-end infinite;
1320
+ }
1321
+
1322
+
1323
+
1324
+ /* ── tokens/style-profiles.css ── */
1325
+ /*
1326
+ * Icen Design System — 风格配置 (Style Profiles)
1327
+ *
1328
+ * 这是颜色主题之上的第二层抽象：
1329
+ * .style-modern → 默认现代风格（不覆盖）
1330
+ * .style-retro → 8-bit / 红白机 / 像素风
1331
+ * .style-terminal → 命令行 / CRT 终端（预留）
1332
+ *
1333
+ * 规则：
1334
+ * 1. 这些类挂在 <html> 上，与 .clay/.piano/.art/.vangogh/.ink/.retro 共存。
1335
+ * 2. 只覆盖与“风格”相关的变量：字体、圆角、阴影硬度、抗锯齿、图像渲染。
1336
+ * 3. 颜色仍由 preset 决定，保持正交。
1337
+ */
1338
+
1339
+ /* ══════════════════════════════════════════════════════════════
1340
+ 字体资源
1341
+ ══════════════════════════════════════════════════════════════ */
1342
+
1343
+ /* Press Start 2P — 经典 8-bit 像素字体（西文） */
1344
+ @font-face {
1345
+ font-family: "Pixel Retro";
1346
+ src:
1347
+ local("Press Start 2P"),
1348
+ local("VT323"),
1349
+ url("https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2") format("woff2");
1350
+ font-weight: 400;
1351
+ font-style: normal;
1352
+ font-display: swap;
1353
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
1354
+ }
1355
+
1356
+ /* 中文像素风回退：无通用免费像素中文字体，使用系统等宽/宋体保持清晰 */
1357
+ @font-face {
1358
+ font-family: "Pixel CJK Fallback";
1359
+ src:
1360
+ local("Zpix"),
1361
+ local("SimSun"),
1362
+ local("Songti SC"),
1363
+ local("STSong"),
1364
+ local("Noto Serif SC"),
1365
+ local("PingFang SC"),
1366
+ local("Microsoft YaHei");
1367
+ font-weight: 400;
1368
+ font-style: normal;
1369
+ font-display: swap;
1370
+ }
1371
+
1372
+ :root {
1373
+ /* ══════════════════════════════════════════════════════════════
1374
+ 风格底层 token（兜底值）
1375
+ 由 .style-* 覆盖；保持与颜色 preset 正交。
1376
+ ══════════════════════════════════════════════════════════════ */
1377
+
1378
+ /* ── Density 密度 ── */
1379
+ --density-space-xs: 0.25rem;
1380
+ --density-space-sm: 0.5rem;
1381
+ --density-space-md: 0.75rem;
1382
+ --density-space-lg: 1rem;
1383
+ --density-input-height-sm: 28px;
1384
+ --density-input-height-md: 36px;
1385
+ --density-input-height-lg: 44px;
1386
+ --density-font-size-xs: 11px;
1387
+ --density-font-size-sm: 12px;
1388
+ --density-font-size-md: 13px;
1389
+ --density-font-size-lg: 14px;
1390
+
1391
+ /* ── Motion 动效 ── */
1392
+ --duration-instant: 0ms;
1393
+ --duration-fast: 150ms;
1394
+ --duration-normal: 200ms;
1395
+ --duration-slow: 300ms;
1396
+ --ease-linear: linear;
1397
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
1398
+ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
1399
+
1400
+ /* ── Typography 字体 ── */
1401
+ --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
1402
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1403
+ --font-mono-paper: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Courier New', monospace;
1404
+ --font-heading: var(--font-body);
1405
+ --letter-spacing-body: 0;
1406
+ --letter-spacing-heading: 0;
1407
+ --line-height-body: 1.5;
1408
+ --line-height-heading: 1.2;
1409
+ }
1410
+
1411
+ /* ══════════════════════════════════════════════════════════════
1412
+ MODERN — 默认现代风格（兜底值即为现代值，显式声明便于阅读）
1413
+ ══════════════════════════════════════════════════════════════ */
1414
+
1415
+ .style-modern {
1416
+ /* ── Density ── */
1417
+ --density-space-xs: 0.25rem;
1418
+ --density-space-sm: 0.5rem;
1419
+ --density-space-md: 0.75rem;
1420
+ --density-space-lg: 1rem;
1421
+ --density-input-height-sm: 28px;
1422
+ --density-input-height-md: 36px;
1423
+ --density-input-height-lg: 44px;
1424
+ --density-font-size-xs: 11px;
1425
+ --density-font-size-sm: 12px;
1426
+ --density-font-size-md: 13px;
1427
+ --density-font-size-lg: 14px;
1428
+
1429
+ /* ── Motion ── */
1430
+ --duration-fast: 150ms;
1431
+ --duration-normal: 200ms;
1432
+ --duration-slow: 300ms;
1433
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
1434
+
1435
+ /* ── Typography ── */
1436
+ --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
1437
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1438
+ --font-mono-paper: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Courier New', monospace;
1439
+ --font-heading: var(--font-body);
1440
+ --letter-spacing-body: 0;
1441
+ --letter-spacing-heading: 0;
1442
+ --line-height-body: 1.5;
1443
+ --line-height-heading: 1.2;
1444
+ }
1445
+
1446
+ /* ══════════════════════════════════════════════════════════════
1447
+ RETRO — 8-bit / 红白机 / 像素风
1448
+ ══════════════════════════════════════════════════════════════ */
1449
+
1450
+ .style-retro {
1451
+ /* ── Density：像素风更紧凑 ── */
1452
+ --density-space-xs: 0.125rem;
1453
+ --density-space-sm: 0.25rem;
1454
+ --density-space-md: 0.5rem;
1455
+ --density-space-lg: 0.75rem;
1456
+ --density-input-height-sm: 24px;
1457
+ --density-input-height-md: 32px;
1458
+ --density-input-height-lg: 40px;
1459
+ --density-font-size-xs: 9px;
1460
+ --density-font-size-sm: 10px;
1461
+ --density-font-size-md: 11px;
1462
+ --density-font-size-lg: 12px;
1463
+
1464
+ /* ── Motion：像素风瞬间切换 ── */
1465
+ --duration-fast: 0ms;
1466
+ --duration-normal: 0ms;
1467
+ --duration-slow: 0ms;
1468
+ --ease-out: linear;
1469
+
1470
+ /* ── Typography：像素字体 ── */
1471
+ --font-body: "Pixel Retro", "Pixel CJK Fallback", "Press Start 2P", "VT323", "SimSun", "Songti SC", "STSong", monospace;
1472
+ --font-mono: "Pixel Retro", "VT323", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1473
+ --font-mono-paper: "Pixel Retro", "JetBrains Mono", "Courier New", monospace;
1474
+ --font-heading: "Pixel Retro", "Press Start 2P", "VT323", var(--font-body);
1475
+ --letter-spacing-body: 0.02em;
1476
+ --letter-spacing-heading: 0.04em;
1477
+ --line-height-body: 1.5;
1478
+ --line-height-heading: 1.2;
1479
+
1480
+ /* ── 圆角：像素风几乎无圆角 ── */
1481
+ --radius-xs: 0px;
1482
+ --radius-sm: 0px;
1483
+ --radius-md: 2px;
1484
+ --radius-lg: 2px;
1485
+ --radius-xl: 2px;
1486
+ --radius-full: 0px;
1487
+
1488
+ /* ── 滚动条 ── */
1489
+ --token-scrollbar-size: 10px;
1490
+
1491
+ /* ── 渲染 ── */
1492
+ image-rendering: pixelated;
1493
+ -webkit-font-smoothing: none;
1494
+ -moz-osx-font-smoothing: unset;
1495
+ }
1496
+
1497
+ /* 全局排版覆盖 */
1498
+ .style-retro body {
1499
+ font-family: "Numeric Math", var(--font-body);
1500
+ line-height: var(--line-height-body);
1501
+ letter-spacing: var(--letter-spacing-body);
1502
+ }
1503
+
1504
+ /* 标题强化像素感 */
1505
+ .style-retro h1,
1506
+ .style-retro h2,
1507
+ .style-retro h3,
1508
+ .style-retro h4,
1509
+ .style-retro h5,
1510
+ .style-retro h6 {
1511
+ font-family: var(--font-heading);
1512
+ letter-spacing: var(--letter-spacing-heading);
1513
+ line-height: var(--line-height-heading);
1514
+ text-transform: uppercase;
1515
+ }
1516
+
1517
+ /* ══════════════════════════════════════════════════════════════
1518
+ 按钮 / 可点击元素 — 8-bit 像素按钮
1519
+ ══════════════════════════════════════════════════════════════ */
1520
+
1521
+ .style-retro .og-pressable,
1522
+ .style-retro button,
1523
+ .style-retro [role="button"],
1524
+ .style-retro input[type="button"],
1525
+ .style-retro input[type="submit"],
1526
+ .style-retro input[type="reset"] {
1527
+ position: relative;
1528
+ border-radius: var(--radius-md);
1529
+ border: 2px solid var(--token-line-strong);
1530
+ box-shadow:
1531
+ inset -2px -2px 0 var(--token-line-soft),
1532
+ inset 2px 2px 0 var(--token-surface-strong),
1533
+ 2px 2px 0 var(--token-line);
1534
+ transition: all var(--duration-fast) var(--ease-out);
1535
+ }
1536
+
1537
+ .style-retro .og-pressable::after,
1538
+ .style-retro button::after {
1539
+ display: none;
1540
+ }
1541
+
1542
+ /* 悬停：像素高亮 */
1543
+ .style-retro .og-pressable:hover,
1544
+ .style-retro button:hover {
1545
+ outline: 2px solid var(--token-accent);
1546
+ outline-offset: -2px;
1547
+ }
1548
+
1549
+ /* 按下：内移 + 阴影消失 */
1550
+ .style-retro .og-pressable:active,
1551
+ .style-retro button:active,
1552
+ .style-retro [role="button"]:active {
1553
+ transform: translate(2px, 2px);
1554
+ box-shadow:
1555
+ inset -2px -2px 0 var(--token-line-soft),
1556
+ inset 2px 2px 0 var(--token-surface-strong);
1557
+ }
1558
+
1559
+ /* 禁用状态 */
1560
+ .style-retro .og-pressable:where(:disabled, [aria-disabled="true"], [data-disabled]),
1561
+ .style-retro button:disabled {
1562
+ transform: none;
1563
+ box-shadow: none;
1564
+ outline: none;
1565
+ opacity: 0.5;
1566
+ }
1567
+
1568
+ /* ══════════════════════════════════════════════════════════════
1569
+ 输入框 / 表单元素 — 像素输入框
1570
+ ══════════════════════════════════════════════════════════════ */
1571
+
1572
+ .style-retro .og-control,
1573
+ .style-retro input,
1574
+ .style-retro textarea,
1575
+ .style-retro select {
1576
+ border-radius: var(--radius-md);
1577
+ border: 2px solid var(--token-line);
1578
+ background: var(--token-bg);
1579
+ box-shadow:
1580
+ inset 2px 2px 0 var(--token-line-soft),
1581
+ inset -1px -1px 0 var(--token-surface-strong);
1582
+ transition: none;
1583
+ }
1584
+
1585
+ .style-retro .og-control::after {
1586
+ display: none;
1587
+ }
1588
+
1589
+ /* 被 og-control / vn-editable-field 容器包裹的输入框：自身边框透明化，
1590
+ 完全交给外层容器承担像素边框，避免常驻/聚焦状态出现双层内框。 */
1591
+ .style-retro .og-control input:not([type="checkbox"]):not([type="radio"]),
1592
+ .style-retro .og-control textarea,
1593
+ .style-retro .og-control select,
1594
+ .style-retro .vn-editable-field input:not([type="checkbox"]):not([type="radio"]),
1595
+ .style-retro .vn-editable-field textarea,
1596
+ .style-retro .vn-editable-field [contenteditable="true"] {
1597
+ border-color: transparent !important;
1598
+ box-shadow: none !important;
1599
+ background: transparent !important;
1600
+ }
1601
+
1602
+ .style-retro input:hover,
1603
+ .style-retro textarea:hover,
1604
+ .style-retro select:hover,
1605
+ .style-retro .og-control:hover,
1606
+ .style-retro .vn-editable-field:hover {
1607
+ border-color: var(--token-accent);
1608
+ }
1609
+
1610
+ .style-retro .og-control:focus-within,
1611
+ .style-retro .vn-editable-field:focus-within {
1612
+ border-color: var(--token-accent);
1613
+ box-shadow:
1614
+ inset 2px 2px 0 var(--token-line-soft),
1615
+ inset -1px -1px 0 var(--token-surface-strong);
1616
+ outline: 2px solid var(--token-accent);
1617
+ outline-offset: -2px;
1618
+ }
1619
+
1620
+ /* 文本输入区自身无焦点环，完全交给外层容器 */
1621
+ .style-retro input:focus,
1622
+ .style-retro textarea:focus,
1623
+ .style-retro select:focus,
1624
+ .style-retro input:focus-visible,
1625
+ .style-retro textarea:focus-visible,
1626
+ .style-retro select:focus-visible,
1627
+ .style-retro [contenteditable="true"]:focus,
1628
+ .style-retro [contenteditable="true"]:focus-visible {
1629
+ outline: none !important;
1630
+ box-shadow: none !important;
1631
+ border-color: transparent !important;
1632
+ }
1633
+
1634
+ /* 占位符文字 */
1635
+ .style-retro input::placeholder,
1636
+ .style-retro textarea::placeholder {
1637
+ color: var(--token-text-faint);
1638
+ opacity: 0.7;
1639
+ }
1640
+
1641
+ /* ══════════════════════════════════════════════════════════════
1642
+ 开关 / 复选框 — 像素开关
1643
+ ══════════════════════════════════════════════════════════════ */
1644
+
1645
+ .style-retro input[type="checkbox"],
1646
+ .style-retro input[type="radio"] {
1647
+ appearance: none;
1648
+ width: 16px;
1649
+ height: 16px;
1650
+ border: 2px solid var(--token-line-strong);
1651
+ background: var(--token-bg);
1652
+ box-shadow:
1653
+ inset -2px -2px 0 var(--token-line-soft),
1654
+ inset 2px 2px 0 var(--token-surface-strong);
1655
+ cursor: pointer;
1656
+ }
1657
+
1658
+ .style-retro input[type="checkbox"]:checked,
1659
+ .style-retro input[type="radio"]:checked {
1660
+ background: var(--token-accent);
1661
+ border-color: var(--token-accent);
1662
+ box-shadow:
1663
+ inset 2px 2px 0 color-mix(in srgb, var(--token-on-accent) 50%, transparent),
1664
+ inset -2px -2px 0 color-mix(in srgb, var(--token-accent-cold) 30%, transparent);
1665
+ }
1666
+
1667
+ .style-retro input[type="checkbox"]:checked::after {
1668
+ content: "";
1669
+ display: block;
1670
+ width: 6px;
1671
+ height: 10px;
1672
+ margin: 1px 0 0 4px;
1673
+ border: solid var(--token-on-accent);
1674
+ border-width: 0 2px 2px 0;
1675
+ transform: rotate(45deg);
1676
+ }
1677
+
1678
+ .style-retro input[type="radio"] {
1679
+ border-radius: 0;
1680
+ }
1681
+
1682
+ .style-retro input[type="radio"]:checked::after {
1683
+ content: "";
1684
+ display: block;
1685
+ width: 6px;
1686
+ height: 6px;
1687
+ margin: 3px;
1688
+ background: var(--token-on-accent);
1689
+ }
1690
+
1691
+ /* ══════════════════════════════════════════════════════════════
1692
+ 卡片 / 面板 / 表面 — 硬像素边框
1693
+ ══════════════════════════════════════════════════════════════ */
1694
+
1695
+ .style-retro .surface-elevated,
1696
+ .style-retro [class*="shadow-[var(--token-shadow-card)"] {
1697
+ box-shadow:
1698
+ 2px 2px 0 var(--token-line);
1699
+ border-width: 2px;
1700
+ border-style: solid;
1701
+ border-color: var(--token-line-strong);
1702
+ }
1703
+
1704
+ /* 禁用平滑悬停提升 */
1705
+ .style-retro .og-surface-lift:hover {
1706
+ transform: none;
1707
+ box-shadow:
1708
+ 2px 2px 0 var(--token-accent);
1709
+ border-color: var(--token-accent);
1710
+ }
1711
+
1712
+ /* ══════════════════════════════════════════════════════════════
1713
+ 滚动条 — 方块像素滚动条
1714
+ ══════════════════════════════════════════════════════════════ */
1715
+
1716
+ .style-retro * {
1717
+ scrollbar-width: thin;
1718
+ scrollbar-color: var(--token-accent) var(--token-bg-soft);
1719
+ }
1720
+
1721
+ .style-retro ::-webkit-scrollbar {
1722
+ width: var(--token-scrollbar-size);
1723
+ height: var(--token-scrollbar-size);
1724
+ }
1725
+
1726
+ .style-retro ::-webkit-scrollbar-track {
1727
+ background: var(--token-bg-soft);
1728
+ border: 1px solid var(--token-line);
1729
+ }
1730
+
1731
+ .style-retro ::-webkit-scrollbar-thumb {
1732
+ background: var(--token-accent);
1733
+ border: 1px solid var(--token-line-strong);
1734
+ border-radius: 0;
1735
+ }
1736
+
1737
+ .style-retro ::-webkit-scrollbar-thumb:hover {
1738
+ background: var(--token-accent-cold);
1739
+ }
1740
+
1741
+ .style-retro ::-webkit-scrollbar-button {
1742
+ display: block;
1743
+ width: var(--token-scrollbar-size);
1744
+ height: var(--token-scrollbar-size);
1745
+ background: var(--token-bg-soft);
1746
+ border: 1px solid var(--token-line);
1747
+ }
1748
+
1749
+ .style-retro ::-webkit-scrollbar-button:hover {
1750
+ background: var(--token-accent-subtle);
1751
+ }
1752
+
1753
+ /* ══════════════════════════════════════════════════════════════
1754
+ 光标 / caret
1755
+ ══════════════════════════════════════════════════════════════ */
1756
+
1757
+ .style-retro * {
1758
+ caret-color: var(--token-accent);
1759
+ }
1760
+
1761
+ /* ══════════════════════════════════════════════════════════════
1762
+ 悬停效果 — 像素高亮
1763
+ ══════════════════════════════════════════════════════════════ */
1764
+
1765
+ .style-retro a:hover,
1766
+ .style-retro [role="link"]:hover {
1767
+ text-decoration: underline;
1768
+ text-decoration-style: dashed;
1769
+ text-underline-offset: 3px;
1770
+ }
1771
+
1772
+ /* ══════════════════════════════════════════════════════════════
1773
+ Markdown / 富文本 — 禁用圆角
1774
+ ══════════════════════════════════════════════════════════════ */
1775
+
1776
+ .style-retro .markdown-body img,
1777
+ .style-retro .markdown-body blockquote,
1778
+ .style-retro .markdown-body code,
1779
+ .style-retro .markdown-body pre {
1780
+ border-radius: 0;
1781
+ }
1782
+
1783
+ /* ══════════════════════════════════════════════════════════════
1784
+ RETRO 全局硬化 — 处理无法仅靠 token 表达的现代风残留
1785
+ ══════════════════════════════════════════════════════════════ */
1786
+
1787
+ /* 禁用现代毛玻璃，用实色面板替代 */
1788
+ .style-retro .backdrop-blur-sm,
1789
+ .style-retro .backdrop-blur-md,
1790
+ .style-retro .backdrop-blur-xl,
1791
+ .style-retro .backdrop-blur-2xl {
1792
+ backdrop-filter: none;
1793
+ -webkit-backdrop-filter: none;
1794
+ }
1795
+
1796
+ /* 兜底：覆盖仍使用固定 Tailwind 圆角工具类的组件/页面元素。
1797
+ 组件层已迁移到 radiusClass() 读取 --radius-*，但 feature 页面和
1798
+ 第三方类名可能仍残留 rounded-*，这里做最后一层保险。 */
1799
+ .style-retro .rounded-none { border-radius: 0; }
1800
+ .style-retro .rounded-sm,
1801
+ .style-retro .rounded,
1802
+ .style-retro .rounded-md,
1803
+ .style-retro .rounded-lg,
1804
+ .style-retro .rounded-xl,
1805
+ .style-retro .rounded-2xl,
1806
+ .style-retro .rounded-3xl {
1807
+ border-radius: var(--radius-md);
1808
+ }
1809
+ /* Note: we do NOT override .rounded-full globally. Components that should be
1810
+ theme-aware use radiusClass('full') which reads --radius-full; elements that
1811
+ are inherently circular (e.g. loading spinners) keep Tailwind's rounded-full. */
1812
+
1813
+ /* 兜底：现代柔和阴影在 retro 下转为硬像素投影 */
1814
+ .style-retro .shadow-sm,
1815
+ .style-retro .shadow-md,
1816
+ .style-retro .shadow-lg,
1817
+ .style-retro .shadow-xl,
1818
+ .style-retro .shadow-2xl {
1819
+ box-shadow: var(--token-shadow-card);
1820
+ }
1821
+
1822
+ /* 非文本元素的硬像素焦点环（已在 retro-effects.css 有基础，这里强化 specificity） */
1823
+ .style-retro :focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]) {
1824
+ outline: 2px solid var(--token-accent);
1825
+ outline-offset: -2px;
1826
+ box-shadow: none;
1827
+ border-radius: var(--radius-md);
1828
+ }
1829
+
1830
+ /* 非输入按钮在 retro 下禁用现代渐变高光（::after 渐变由 .og-pressable 提供） */
1831
+ .style-retro .og-pressable::after {
1832
+ display: none;
1833
+ }
1834
+
1835
+ /* ══════════════════════════════════════════════════════════════
1836
+ TERMINAL — 命令行 / CRT 终端（预留，可组合任意 dark preset）
1837
+ ══════════════════════════════════════════════════════════════ */
1838
+
1839
+ .style-terminal {
1840
+ /* ── 字体 ── */
1841
+ --font-body: ui-monospace, SFMono-Regular, "JetBrains Mono", "Courier New", "Noto Sans Mono CJK SC", "SimSun", monospace;
1842
+ --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Consolas", "Noto Sans Mono CJK SC", monospace;
1843
+ --font-mono-paper: "JetBrains Mono", "Courier New", monospace;
1844
+
1845
+ /* ── 圆角 ── */
1846
+ --radius-xs: 0px;
1847
+ --radius-sm: 0px;
1848
+ --radius-md: 0px;
1849
+ --radius-lg: 0px;
1850
+ --radius-xl: 0px;
1851
+ --radius-full: 0px;
1852
+
1853
+ /* ── 滚动条 ── */
1854
+ --token-scrollbar-size: 8px;
1855
+
1856
+ /* ── 渲染 ── */
1857
+ -webkit-font-smoothing: antialiased;
1858
+ -moz-osx-font-smoothing: grayscale;
1859
+ }
1860
+
1861
+ .style-terminal body {
1862
+ font-family: var(--font-body);
1863
+ line-height: 1.4;
1864
+ }
1865
+
1866
+
1867
+ /* ── tokens/typography.css ── */
1868
+ /*
1869
+ * @icen.ai/ui — Typography Tokens（icen canonical）
1870
+ * 美学基调：等宽数字精密感 × 衬线书卷气（宋体标题）
1871
+ * 默认（:root）即 icen 品牌形态；.style-modern 显式回退 system-ui 栈（见 style-profiles.css）
1872
+ */
1873
+
1874
+ /* ── 数学/等宽数字字体（数字密集区的精密感） ── */
1875
+ @font-face {
1876
+ font-family: "Numeric Math";
1877
+ src:
1878
+ local("Cambria Math"),
1879
+ local("STIX Two Math"),
1880
+ local("Latin Modern Math"),
1881
+ local("Asana Math");
1882
+ unicode-range: U+0025-003A, U+00A5, U+2212, U+223C;
1883
+ }
1884
+
1885
+ :root {
1886
+ /* ── icen 品牌字体栈 ──
1887
+ body/mono：IBM Plex Mono（未安装时回退系统等宽，行为与 accounts 一致，不打包 webfont）
1888
+ heading：CJK 宋体系（页面标题/品牌名的书卷气） */
1889
+ --font-body: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
1890
+ --font-mono: var(--font-body);
1891
+ --font-heading: 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC', SimSun, serif;
1892
+ --font-cjk: var(--font-heading);
1893
+ --line-height-body: 1.7;
1894
+ --line-height-heading: 1.2;
1895
+ }
1896
+
1897
+ /* ── 全局排版 ── */
1898
+ body {
1899
+ font-family: "Numeric Math", var(--font-body);
1900
+ line-height: var(--line-height-body);
1901
+ -webkit-font-smoothing: antialiased;
1902
+ -moz-osx-font-smoothing: grayscale;
1903
+ font-feature-settings: "rlig" 1, "calt" 1;
1904
+ font-variant-numeric: lining-nums tabular-nums;
1905
+ }
1906
+
1907
+ h1, h2, h3, h4, h5, h6 {
1908
+ font-family: var(--font-heading);
1909
+ line-height: var(--line-height-heading);
1910
+ }
1911
+
1912
+ /* ── 数字密集区工具类 ── */
1913
+ .font-math {
1914
+ font-family: "Numeric Math", math, var(--font-body);
1915
+ font-variant-numeric: lining-nums tabular-nums;
1916
+ }
1917
+
1918
+
1919
+ /* ── base.css ── */
1920
+ /*
1921
+ * @icen.ai/ui — Base（元素基线 + 滚动条）
1922
+ * 全部消费 --token-*；任何 preset/明暗/style profile 下自洽。
1923
+ * 在 tokens 之后、components 之前引入。
1924
+ */
1925
+
1926
+ *, *::before, *::after { box-sizing: border-box; }
1927
+
1928
+ html, body { margin: 0; padding: 0; }
1929
+
1930
+ body {
1931
+ background: var(--token-bg);
1932
+ color: var(--token-text);
1933
+ font-size: 14px;
1934
+ min-height: 100vh;
1935
+ }
1936
+
1937
+ a { color: var(--token-accent); text-decoration: none; }
1938
+ a:hover { text-decoration: underline; }
1939
+
1940
+ code, pre {
1941
+ font-family: var(--font-mono);
1942
+ background: var(--token-bg-soft);
1943
+ border-radius: var(--radius-xs);
1944
+ }
1945
+ code { padding: 1px 5px; }
1946
+ pre { padding: 12px 14px; overflow-x: auto; }
1947
+ pre code { padding: 0; background: none; }
1948
+
1949
+ button { font: inherit; }
1950
+ img { max-width: 100%; }
1951
+
1952
+ ::selection {
1953
+ background: color-mix(in srgb, var(--token-accent) 25%, transparent);
1954
+ }
1955
+
1956
+ /* ── 全局滚动条：细薄、无上下箭头、贴 token ── */
1957
+ ::-webkit-scrollbar { width: 8px; height: 8px; }
1958
+ ::-webkit-scrollbar-track { background: transparent; }
1959
+ ::-webkit-scrollbar-thumb {
1960
+ background: color-mix(in srgb, var(--token-text) 16%, transparent);
1961
+ border-radius: 999px;
1962
+ }
1963
+ ::-webkit-scrollbar-thumb:hover {
1964
+ background: color-mix(in srgb, var(--token-accent) 50%, transparent);
1965
+ }
1966
+ ::-webkit-scrollbar-button,
1967
+ ::-webkit-scrollbar-button:single-button { display: none; width: 0; height: 0; }
1968
+ ::-webkit-scrollbar-corner { background: transparent; }
1969
+ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-text) 16%, transparent) transparent; }
1970
+
1971
+ /* ── 通用工具类 ── */
1972
+ .mono { font-family: var(--font-mono); }
1973
+ .dim { color: var(--token-text-muted); }
1974
+ .faint { color: var(--token-text-faint); }
1975
+
1976
+
1977
+ /* ── components/btn.css ── */
1978
+ /*
1979
+ * @icen.ai/ui — Component: btn（按钮）
1980
+ * 用法：<button class="btn btn-primary"> / .btn-danger / .btn-sm / .btn-block
1981
+ */
1982
+
1983
+ .btn {
1984
+ display: inline-block; padding: 10px 22px;
1985
+ background: var(--token-surface); color: var(--token-text);
1986
+ border: 1px solid var(--token-line-soft); border-radius: var(--radius-sm);
1987
+ font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
1988
+ cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
1989
+ }
1990
+ .btn:hover { border-color: var(--token-accent); }
1991
+ .btn:disabled { opacity: 0.5; cursor: not-allowed; }
1992
+
1993
+ .btn-primary { background: var(--token-accent); border-color: var(--token-accent); color: var(--token-on-accent, #fff); }
1994
+ .btn-primary:hover { background: var(--token-accent-deep); border-color: var(--token-accent-deep); }
1995
+
1996
+ .btn-danger { color: var(--token-error); border-color: color-mix(in srgb, var(--token-error) 35%, transparent); }
1997
+ .btn-danger:hover { border-color: var(--token-error); }
1998
+
1999
+ .btn-block { display: block; width: 100%; text-align: center; }
2000
+ .btn-sm { padding: 6px 14px; font-size: 12px; }
2001
+
2002
+
2003
+ /* ── components/form.css ── */
2004
+ /*
2005
+ * @icen.ai/ui — Component: form（表单字段/输入/错误与成功提示）
2006
+ */
2007
+
2008
+ .form-field { margin-bottom: 18px; }
2009
+ .form-label { display: block; font-size: 12px; color: var(--token-text-muted); margin-bottom: 6px; letter-spacing: 1px; }
2010
+ .form-input {
2011
+ width: 100%; padding: 11px 14px;
2012
+ background: var(--token-bg); color: var(--token-text);
2013
+ border: 1px solid var(--token-line-soft); border-radius: var(--radius-sm);
2014
+ font-family: var(--font-mono); font-size: 14px;
2015
+ outline: none; transition: border-color var(--duration-fast) var(--ease-out);
2016
+ }
2017
+ .form-input:focus { border-color: var(--token-accent); }
2018
+ .form-input::placeholder { color: var(--token-text-faint); }
2019
+
2020
+ .form-error {
2021
+ background: color-mix(in srgb, var(--token-error) 7%, transparent); color: var(--token-error);
2022
+ border: 1px solid color-mix(in srgb, var(--token-error) 25%, transparent); border-radius: var(--radius-sm);
2023
+ padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px;
2024
+ font-family: var(--font-heading);
2025
+ }
2026
+ .form-ok {
2027
+ background: color-mix(in srgb, var(--token-success) 8%, transparent); color: var(--token-success);
2028
+ border: 1px solid color-mix(in srgb, var(--token-success) 25%, transparent); border-radius: var(--radius-sm);
2029
+ padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px;
2030
+ font-family: var(--font-heading);
2031
+ }
2032
+
2033
+ /* 页面级横幅（与表单提示同族，用于操作结果/引导提示） */
2034
+ .banner-ok, .banner-err { margin-bottom: 20px; }
2035
+
2036
+
2037
+ /* ── components/panel.css ── */
2038
+ /*
2039
+ * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏）
2040
+ * 用法：<div class="panel-block"><div class="panel-title"><span>标题</span></div> …内容… </div>
2041
+ */
2042
+
2043
+ .panel-block {
2044
+ background: var(--token-surface);
2045
+ border: 1px solid var(--token-line-soft);
2046
+ border-radius: var(--radius-lg);
2047
+ box-shadow: var(--token-shadow-elevated);
2048
+ margin-bottom: 24px;
2049
+ overflow: hidden;
2050
+ }
2051
+ .panel-title {
2052
+ display: flex; align-items: center; justify-content: space-between;
2053
+ padding: 14px 20px; border-bottom: 1px solid var(--token-line-soft);
2054
+ font-size: 12px; letter-spacing: 2px; color: var(--token-text-muted);
2055
+ text-transform: uppercase;
2056
+ }
2057
+
2058
+
2059
+ /* ── components/pill.css ── */
2060
+ /*
2061
+ * @icen.ai/ui — Component: pill（状态徽章）
2062
+ * 用法：<span class="pill ok|warn|bad|accent">文本</span>
2063
+ * 语义色纪律：仅绿/黄/红 + 品牌 accent。
2064
+ */
2065
+
2066
+ .pill {
2067
+ display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
2068
+ font-size: 11px; letter-spacing: 1px;
2069
+ background: var(--token-surface-strong); color: var(--token-text-muted);
2070
+ border: 1px solid var(--token-line-soft);
2071
+ }
2072
+ .pill.ok {
2073
+ color: var(--token-success); border-color: color-mix(in srgb, var(--token-success) 35%, transparent);
2074
+ background: color-mix(in srgb, var(--token-success) 7%, transparent);
2075
+ }
2076
+ .pill.warn {
2077
+ color: var(--token-warning); border-color: color-mix(in srgb, var(--token-warning) 35%, transparent);
2078
+ background: color-mix(in srgb, var(--token-warning) 7%, transparent);
2079
+ }
2080
+ .pill.bad {
2081
+ color: var(--token-error); border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
2082
+ background: color-mix(in srgb, var(--token-error) 7%, transparent);
2083
+ }
2084
+ .pill.accent {
2085
+ color: var(--token-accent-deep); border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
2086
+ background: color-mix(in srgb, var(--token-accent) 7%, transparent);
2087
+ }
2088
+
2089
+
2090
+ /* ── components/stat.css ── */
2091
+ /*
2092
+ * @icen.ai/ui — Component: stat（指标卡）
2093
+ * 用法：<div class="stat-grid"><div class="stat-card"><div class="stat-num">0</div><div class="stat-label">用户总数</div></div>…
2094
+ */
2095
+
2096
+ .stat-grid {
2097
+ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
2098
+ gap: 14px; margin-bottom: 24px;
2099
+ }
2100
+ .stat-card {
2101
+ background: var(--token-surface); border: 1px solid var(--token-line-soft);
2102
+ border-radius: var(--radius-lg); padding: 14px 16px;
2103
+ box-shadow: var(--token-shadow-elevated);
2104
+ }
2105
+ .stat-num { font-size: 24px; font-weight: 700; line-height: 1.25; word-break: break-all; }
2106
+ .stat-num.accent { color: var(--token-accent); }
2107
+ .stat-num.warn { color: var(--token-warning); }
2108
+ .stat-label { color: var(--token-text-faint); font-size: 11px; letter-spacing: 1px; margin-top: 2px; }
2109
+
2110
+
2111
+ /* ── components/table.css ── */
2112
+ /*
2113
+ * @icen.ai/ui — Component: table（数据表）
2114
+ * 用法：<div class="table-wrap"><table class="admin-table">…
2115
+ * .table-wrap 负责窄屏横向滚动（滚动条样式见 base.css）；行内操作列用 .ops。
2116
+ */
2117
+
2118
+ .table-wrap { overflow-x: auto; }
2119
+ .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
2120
+ .admin-table th {
2121
+ text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 1px;
2122
+ color: var(--token-text-faint); padding: 10px 14px;
2123
+ border-bottom: 1px solid var(--token-line-soft); white-space: nowrap;
2124
+ }
2125
+ .admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--token-line-soft); vertical-align: middle; }
2126
+ .admin-table tbody tr:last-child td { border-bottom: 0; }
2127
+ .admin-table tbody tr:hover { background: var(--token-surface-strong); }
2128
+ .admin-table tbody tr.row-link { cursor: pointer; }
2129
+ .admin-table .ops { white-space: nowrap; text-align: right; }
2130
+ .admin-table .ops .btn-sm { margin-left: 6px; }
2131
+
2132
+
2133
+ /* ── components/tabs.css ── */
2134
+ /*
2135
+ * @icen.ai/ui — Component: tabs（分区导航）
2136
+ * .page-tabs > .page-tab（页面内分区，active 加粗）
2137
+ * .admin-tabs > a（顶部子导航）
2138
+ * 窄屏换行不滚动（overflow 纪律：tab 条永不出现滚动条）。
2139
+ */
2140
+
2141
+ .page-tabs, .admin-tabs {
2142
+ display: flex; gap: 2px; flex-wrap: wrap;
2143
+ border-bottom: 1px solid var(--token-line-soft); margin-bottom: 26px;
2144
+ }
2145
+ .page-tab {
2146
+ background: none; border: 0; cursor: pointer;
2147
+ padding: 9px 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
2148
+ color: var(--token-text-muted); border-bottom: 2px solid transparent;
2149
+ margin-bottom: -1px; white-space: nowrap;
2150
+ }
2151
+ .page-tab:hover { color: var(--token-accent); }
2152
+ .page-tab.active { color: var(--token-accent); border-bottom-color: var(--token-accent); font-weight: 700; }
2153
+
2154
+ .admin-tabs a {
2155
+ padding: 9px 14px; font-size: 13px; color: var(--token-text-muted);
2156
+ border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
2157
+ }
2158
+ .admin-tabs a:hover { color: var(--token-accent); text-decoration: none; }
2159
+ .admin-tabs a.active { color: var(--token-accent); border-bottom-color: var(--token-accent); }
2160
+
2161
+
2162
+ /* ── components/toast.css ── */
2163
+ /*
2164
+ * @icen.ai/ui — Component: toast（轻提示，与 behaviors/toast 配套）
2165
+ * 容器固定在右下角，左缘 3px 语义色条；滑入动画用 motion token。
2166
+ */
2167
+
2168
+ .toast-container {
2169
+ position: fixed; right: 20px; bottom: 20px; z-index: 9999;
2170
+ display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
2171
+ pointer-events: none;
2172
+ }
2173
+ .toast {
2174
+ pointer-events: auto;
2175
+ background: var(--token-surface); color: var(--token-text);
2176
+ border: 1px solid var(--token-line-soft); border-left: 3px solid var(--token-line-strong);
2177
+ border-radius: var(--radius-sm); box-shadow: var(--token-shadow-overlay);
2178
+ padding: 11px 16px; font-size: 13px; max-width: 360px;
2179
+ animation: icen-toast-in var(--duration-slow) var(--ease-out);
2180
+ }
2181
+ .toast.ok { border-left-color: var(--token-success); }
2182
+ .toast.err { border-left-color: var(--token-error); }
2183
+ .toast.warn { border-left-color: var(--token-warning); }
2184
+ .toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
2185
+
2186
+ @keyframes icen-toast-in {
2187
+ from { opacity: 0; transform: translateY(8px); }
2188
+ to { opacity: 1; transform: translateY(0); }
2189
+ }
2190
+