llzai/axonhub
0
1@import 'tailwindcss';
2@import 'tw-animate-css';
3
4@custom-variant dark (&:is(.dark *));
5
6:root {
7 --radius: 0.75rem;
8 --background: oklch(0.95 0.005 90);
9 --foreground: oklch(0.129 0.042 264.695);
10 --card: oklch(0.97 0.003 90);
11 --card-foreground: var(--foreground);
12 --popover: oklch(0.99 0.003 90);
13 --popover-foreground: var(--foreground);
14 --primary: oklch(0.208 0.042 265.755);
15 --primary-foreground: oklch(0.984 0.003 247.858);
16 --secondary: oklch(0.92 0.007 90);
17 --secondary-foreground: var(--primary);
18 --muted: oklch(0.9 0.008 90);
19 --muted-foreground: oklch(0.554 0.046 257.417);
20 --accent: oklch(0.88 0.009 90);
21 --accent-foreground: var(--primary);
22 --destructive: oklch(0.62 0.22 25.5);
23 --border: oklch(0.85 0.01 90);
24 --input: oklch(0.85 0.01 90);
25 --ring: oklch(0.704 0.04 256.788);
26 --chart-1: oklch(0.646 0.222 41.116);
27 --chart-2: oklch(0.6 0.118 184.704);
28 --chart-3: oklch(0.398 0.07 227.392);
29 --chart-4: oklch(0.828 0.189 84.429);
30 --chart-5: oklch(0.769 0.188 70.08);
31
32 --sidebar: var(--card);
33 --sidebar-foreground: var(--foreground);
34 --sidebar-primary: var(--primary);
35 --sidebar-primary-foreground: var(--primary-foreground);
36 --sidebar-accent: oklch(0.92 0.007 90);
37 --sidebar-accent-foreground: var(--primary);
38 --sidebar-border: var(--border);
39 --sidebar-ring: var(--ring);
40
41 /* Default Elevation */
42 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
43 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
44 --shadow-sm: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
45 --shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
46 --shadow-md: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
47 --shadow-lg: 0 0 20px rgba(0, 0, 0, 0.15);
48 --shadow-xl: 0 8px 10px -1px rgba(0, 0, 0, 0.06);
49 --shadow-2xl: 0 1px 3px 0px rgba(0, 0, 0, 0.12);
50
51 /* Table specific colors */
52 --table-background: var(--card);
53 --table-border: oklch(0.985 0.003 90);
54 --table-header: var(--muted);
55}
56
57.dark {
58 --background: oklch(0.129 0.042 264.695);
59 --foreground: oklch(0.984 0.003 247.858);
60 --card: oklch(0.14 0.04 259.21);
61 --card-foreground: oklch(0.984 0.003 247.858);
62 --popover: oklch(0.208 0.042 265.755);
63 --popover-foreground: oklch(0.984 0.003 247.858);
64 --primary: oklch(0.929 0.013 255.508);
65 --primary-foreground: oklch(0.208 0.042 265.755);
66 --secondary: oklch(0.279 0.041 260.031);
67 --secondary-foreground: oklch(0.984 0.003 247.858);
68 --muted: oklch(0.279 0.041 260.031);
69 --muted-foreground: oklch(0.704 0.04 256.788);
70 --accent: oklch(0.3 0.041 260.031);
71 --accent-foreground: oklch(0.984 0.003 247.858);
72 --destructive: oklch(0.68 0.2 22.5);
73 --border: oklch(1 0 0 / 10%);
74 --input: oklch(1 0 0 / 15%);
75 --ring: oklch(0.551 0.027 264.364);
76 --chart-1: oklch(0.488 0.243 264.376);
77 --chart-2: oklch(0.696 0.17 162.48);
78 --chart-3: oklch(0.769 0.188 70.08);
79 --chart-4: oklch(0.627 0.265 303.9);
80 --chart-5: oklch(0.645 0.246 16.439);
81
82 /* Table specific colors */
83 --table-background: var(--card);
84 --table-border: oklch(1 0 0 / 8%);
85 --table-header: var(--muted);
86}
87
88/* ===== COLOR SCHEMES ===== */
89
90.claude {
91 --background: #f0f0ef;
92 --foreground: #292524;
93 --card: #f5f5f4;
94 --card-foreground: #292524;
95 --popover: #fafaf9;
96 --popover-foreground: #292524;
97 --primary: #b05d2e; /* 核心主色 (类似图1的深棕色) */
98 --primary-foreground: #ffffff;
99 --secondary: #ebe9e8; /* 非常淡的暖灰线 */
100 --secondary-foreground: #292524;
101 --muted: #e0ddd9; /* 暖灰色背景 */
102 --muted-foreground: #78716c; /* 稍深的灰色文本，提高对比度 */
103 --accent: #ebe3db; /* 浅棕色背景 */
104 --accent-foreground: #292524;
105 --destructive: #ef4444;
106 --destructive-foreground: #ffffff;
107 --border: #d8d4cf; /* 更柔和的边框 */
108 --input: #d8d4cf;
109 --ring: #b05d2e;
110 --chart-1: #b05d2e; /* 核心主色 */
111 --chart-2: #7a381d; /* 深棕色 */
112 --chart-3: #e0b6a1; /* 中棕色 */
113 --chart-4: #f5ebe6; /* 浅棕色 */
114 --chart-5: #f5f5f4; /* 暖背景 */
115 --sidebar: var(--card);
116 --sidebar-foreground: #292524;
117 --sidebar-primary: #b05d2e;
118 --sidebar-primary-foreground: #ffffff;
119 --sidebar-accent: #ebe9e8;
120 --sidebar-accent-foreground: #292524;
121 --sidebar-border: #d8d4cf;
122 --sidebar-ring: #b05d2e;
123 --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
124 --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
125 --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
126 --radius: 0.75rem; /* 更大的圆角 */
127 --shadow-2xs: 0 1px 3px 0px rgba(176, 93, 46, 0.04);
128 --shadow-xs: 0 1px 3px 0px rgba(176, 93, 46, 0.04);
129 --shadow-sm: 0 20px 40px -15px rgba(176, 93, 46, 0.1); /* 阴影带暖色调 */
130 --shadow: 0 20px 40px -12px rgba(176, 93, 46, 0.15); /* 悬浮时暖色阴影 */
131 --shadow-md: 0 20px 40px -12px rgba(176, 93, 46, 0.15);
132 --shadow-lg: 0 0 20px rgba(176, 93, 46, 0.2); /* 发光阴影 */
133 --shadow-xl: 0 8px 10px -1px rgba(176, 93, 46, 0.08);
134 --shadow-2xl: 0 1px 3px 0px rgba(176, 93, 46, 0.2);
135 --tracking-normal: 0em;
136 --spacing: 0.25rem;
137
138 /* Table specific colors */
139 --table-background: var(--card);
140 --table-border: #f8f7f6;
141 --table-header: var(--muted);
142}
143
144.dark.claude {
145 --background: oklch(0.22 0.002 106); /* Darker background */
146 --foreground: oklch(0.8074 0.0142 93.0137);
147 --card: oklch(0.28 0.004 106); /* Lighter card for contrast */
148 --card-foreground: var(--foreground);
149 --popover: oklch(0.3085 0.0035 106.6039);
150 --popover-foreground: var(--foreground);
151 --primary: oklch(0.6724 0.1308 38.7559);
152 --primary-foreground: oklch(1 0 0);
153 --secondary: oklch(0.9818 0.0054 95.0986);
154 --secondary-foreground: oklch(0.3085 0.0035 106.6039);
155 --muted: oklch(0.2213 0.0038 106.707);
156 --muted-foreground: oklch(0.7713 0.0169 99.0657);
157 --accent: oklch(0.3 0.0078 95.4245);
158 --accent-foreground: oklch(0.9663 0.008 98.8792);
159 --destructive: oklch(0.64 0.21 26);
160 --destructive-foreground: oklch(1 0 0);
161 --border: oklch(0.3618 0.0101 106.8928);
162 --input: oklch(0.4336 0.0113 100.2195);
163 --ring: oklch(0.6724 0.1308 38.7559);
164 --chart-1: oklch(0.5583 0.1276 42.9956);
165 --chart-2: oklch(0.6898 0.1581 290.4107);
166 --chart-3: oklch(0.65 0.1 60);
167 --chart-4: oklch(0.3074 0.0516 289.323);
168 --chart-5: oklch(0.5608 0.1348 42.0584);
169 --sidebar: oklch(0.2357 0.0024 67.7077);
170 --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
171 --sidebar-primary: oklch(0.325 0 0);
172 --sidebar-primary-foreground: oklch(0.9881 0 0);
173 --sidebar-accent: oklch(0.168 0.002 106.6177);
174 --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
175 --sidebar-border: oklch(0.9401 0 0);
176 --sidebar-ring: oklch(0.7731 0 0);
177 --font-sans:
178 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
179 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
180 --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
181 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
182 --radius: 0.75rem;
183 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
184 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
185 --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
186 --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
187 --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
188 --shadow-lg: 0 0 20px rgba(255, 255, 255, 0.1);
189 --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
190 --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
191
192 /* Table specific colors */
193 --table-background: var(--card);
194 --table-border: oklch(1 0 0 / 8%);
195 --table-header: var(--muted);
196}
197
198/* Blue Color Scheme (Default) */
199.blue {
200 --background: oklch(0.95 0.008 260);
201 --foreground: oklch(0.3211 0 0);
202 --card: oklch(0.97 0.005 260);
203 --card-foreground: var(--foreground);
204 --popover: oklch(0.985 0.005 260);
205 --popover-foreground: var(--foreground);
206 --primary: oklch(0.6231 0.188 259.8145);
207 --primary-foreground: oklch(1 0 0);
208 --secondary: oklch(0.92 0.008 260);
209 --secondary-foreground: var(--foreground);
210 --muted: oklch(0.9 0.01 260);
211 --muted-foreground: oklch(0.45 0.02 260);
212 --accent: oklch(0.88 0.015 260);
213 --accent-foreground: var(--foreground);
214 --destructive: oklch(0.64 0.21 26);
215 --destructive-foreground: oklch(1 0 0);
216 --border: oklch(0.85 0.01 260);
217 --input: oklch(0.85 0.01 260);
218 --ring: oklch(0.6231 0.188 259.8145);
219 --chart-1: oklch(0.6231 0.188 259.8145);
220 --chart-2: oklch(0.5461 0.2152 262.8809);
221 --chart-3: oklch(0.4882 0.2172 264.3763);
222 --chart-4: oklch(0.4244 0.1809 265.6377);
223 --chart-5: oklch(0.3791 0.1378 265.5222);
224 --sidebar: var(--card);
225 --sidebar-foreground: var(--foreground);
226 --sidebar-primary: oklch(0.6231 0.188 259.8145);
227 --sidebar-primary-foreground: oklch(1 0 0);
228 --sidebar-accent: oklch(0.92 0.008 260);
229 --sidebar-accent-foreground: var(--foreground);
230 --sidebar-border: oklch(0.85 0.01 260);
231 --sidebar-ring: oklch(0.6231 0.188 259.8145);
232 --font-sans: Inter, sans-serif;
233 --font-serif: Source Serif 4, serif;
234 --font-mono: JetBrains Mono, monospace;
235 --radius: 0.75rem;
236 --shadow-2xs: 0 1px 3px 0px rgba(59, 130, 246, 0.04);
237 --shadow-xs: 0 1px 3px 0px rgba(59, 130, 246, 0.04);
238 --shadow-sm: 0 20px 40px -15px rgba(59, 130, 246, 0.1);
239 --shadow: 0 20px 40px -12px rgba(59, 130, 246, 0.15);
240 --shadow-md: 0 20px 40px -12px rgba(59, 130, 246, 0.15);
241 --shadow-lg: 0 0 20px rgba(59, 130, 246, 0.2);
242 --shadow-xl: 0 8px 10px -1px rgba(59, 130, 246, 0.08);
243 --shadow-2xl: 0 1px 3px 0px rgba(59, 130, 246, 0.2);
244 --tracking-normal: 0em;
245 --spacing: 0.25rem;
246
247 /* Table specific colors */
248 --table-background: var(--card);
249 --table-border: oklch(0.985 0.005 260);
250 --table-header: var(--muted);
251}
252
253.dark.blue {
254 --background: oklch(0.18 0.01 260); /* Very dark blue background */
255 --foreground: oklch(0.9219 0 0);
256 --card: oklch(0.24 0.02 260); /* Lighter blue card */
257 --card-foreground: var(--foreground);
258 --popover: oklch(0.26 0.02 260);
259 --popover-foreground: var(--foreground);
260 --primary: oklch(0.6231 0.188 259.8145);
261 --primary-foreground: oklch(1 0 0);
262 --secondary: oklch(0.22 0.01 260);
263 --secondary-foreground: var(--foreground);
264 --muted: oklch(0.2 0.01 260);
265 --muted-foreground: oklch(0.7 0.02 260);
266 --accent: oklch(0.3 0.03 260);
267 --accent-foreground: var(--foreground);
268 --destructive: oklch(0.64 0.21 26);
269 --destructive-foreground: oklch(1 0 0);
270 --border: oklch(0.28 0.02 260);
271 --input: oklch(0.28 0.02 260);
272 --ring: oklch(0.6231 0.188 259.8145);
273 --chart-1: oklch(0.7137 0.1434 254.624);
274 --chart-2: oklch(0.6231 0.188 259.8145);
275 --chart-3: oklch(0.5461 0.2152 262.8809);
276 --chart-4: oklch(0.4882 0.2172 264.3763);
277 --chart-5: oklch(0.4244 0.1809 265.6377);
278 --sidebar: oklch(0.16 0.01 260);
279 --sidebar-foreground: var(--foreground);
280 --sidebar-primary: oklch(0.6231 0.188 259.8145);
281 --sidebar-primary-foreground: oklch(1 0 0);
282 --sidebar-accent: oklch(0.24 0.02 260);
283 --sidebar-accent-foreground: var(--foreground);
284 --sidebar-border: oklch(0.28 0.02 260);
285 --sidebar-ring: oklch(0.6231 0.188 259.8145);
286 --font-sans: Inter, sans-serif;
287 --font-serif: Source Serif 4, serif;
288 --font-mono: JetBrains Mono, monospace;
289 --radius: 0.75rem;
290 --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
291 --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
292 --shadow-lg: 0 0 20px rgba(59, 130, 246, 0.2);
293 --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
294 --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
295
296 /* Table specific colors */
297 --table-background: var(--card);
298 --table-border: oklch(1 0 0 / 8%);
299 --table-header: var(--muted);
300}
301
302/* Green Color Scheme */
303.green {
304 --background: oklch(0.95 0.008 160);
305 --foreground: oklch(0.2046 0 0);
306 --card: oklch(0.97 0.005 160);
307 --card-foreground: var(--foreground);
308 --popover: oklch(0.985 0.005 160);
309 --popover-foreground: var(--foreground);
310 --primary: oklch(0.8348 0.1302 160.908);
311 --primary-foreground: oklch(0.2626 0.0147 166.4589);
312 --secondary: oklch(0.92 0.008 160); /* Softer green line */
313 --secondary-foreground: var(--foreground);
314 --muted: oklch(0.9 0.01 160); /* Light green-gray background */
315 --muted-foreground: oklch(0.45 0.02 160); /* Darker green-gray text */
316 --accent: oklch(0.88 0.015 160); /* Distinct green-ish accent */
317 --accent-foreground: var(--foreground);
318 --destructive: oklch(0.5523 0.1927 32.7272);
319 --border: oklch(0.85 0.01 160); /* Subtle green border */
320 --input: oklch(0.85 0.01 160);
321 --ring: oklch(0.8348 0.1302 160.908);
322 --chart-1: oklch(0.8348 0.1302 160.908);
323 --chart-2: oklch(0.6231 0.188 259.8145);
324 --chart-3: oklch(0.6056 0.2189 292.7172);
325 --chart-4: oklch(0.7686 0.1647 70.0804);
326 --chart-5: oklch(0.6959 0.1491 162.4796);
327 --sidebar: var(--card);
328 --sidebar-foreground: var(--foreground);
329 --sidebar-primary: var(--primary);
330 --sidebar-primary-foreground: var(--primary-foreground);
331 --sidebar-accent: oklch(0.92 0.008 160);
332 --sidebar-accent-foreground: var(--foreground);
333 --sidebar-border: oklch(0.85 0.01 160);
334 --sidebar-ring: var(--primary);
335 --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
336 --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
337 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
338 --radius: 0.75rem;
339 --shadow-2xs: 0 1px 3px 0px rgba(34, 197, 94, 0.04);
340 --shadow-xs: 0 1px 3px 0px rgba(34, 197, 94, 0.04);
341 --shadow-sm: 0 20px 40px -15px rgba(34, 197, 94, 0.1);
342 --shadow: 0 20px 40px -12px rgba(34, 197, 94, 0.15);
343 --shadow-md: 0 20px 40px -12px rgba(34, 197, 94, 0.15);
344 --shadow-lg: 0 0 20px rgba(34, 197, 94, 0.2);
345 --shadow-xl: 0 8px 10px -1px rgba(34, 197, 94, 0.08);
346 --shadow-2xl: 0 1px 3px 0px rgba(34, 197, 94, 0.2);
347 --tracking-normal: 0em;
348 --spacing: 0.25rem;
349
350 /* Table specific colors */
351 --table-background: var(--card);
352 --table-border: oklch(0.985 0.005 160);
353 --table-header: var(--muted);
354}
355
356.dark.green {
357 --background: oklch(0.18 0.01 160); /* Very dark green background */
358 --foreground: oklch(0.9288 0.0126 255.5078);
359 --card: oklch(0.24 0.02 160); /* Slightly lighter green card */
360 --card-foreground: var(--foreground);
361 --popover: oklch(0.2603 0 0);
362 --popover-foreground: var(--foreground);
363 --primary: oklch(0.4365 0.1044 156.7556);
364 --primary-foreground: oklch(0.9213 0.0135 167.1556);
365 --secondary: oklch(0.2603 0 0);
366 --secondary-foreground: oklch(0.9851 0 0);
367 --muted: oklch(0.2393 0 0);
368 --muted-foreground: oklch(0.7122 0 0);
369 --accent: oklch(0.3132 0 0);
370 --accent-foreground: oklch(0.9851 0 0);
371 --destructive: oklch(0.3123 0.0852 29.7877);
372 --border: oklch(0.2809 0 0);
373 --input: oklch(0.2603 0 0);
374 --ring: oklch(0.8003 0.1821 151.711);
375 --chart-1: oklch(0.8003 0.1821 151.711);
376 --chart-2: oklch(0.7137 0.1434 254.624);
377 --chart-3: oklch(0.709 0.1592 293.5412);
378 --chart-4: oklch(0.8369 0.1644 84.4286);
379 --chart-5: oklch(0.7845 0.1325 181.912);
380 --sidebar: oklch(0.1822 0 0);
381 --sidebar-foreground: var(--foreground);
382 --sidebar-primary: oklch(0.4365 0.1044 156.7556);
383 --sidebar-primary-foreground: oklch(0.9213 0.0135 167.1556);
384 --sidebar-accent: oklch(0.3132 0 0);
385 --sidebar-accent-foreground: oklch(0.9851 0 0);
386 --sidebar-border: oklch(0.2809 0 0);
387 --sidebar-ring: oklch(0.8003 0.1821 151.711);
388 --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
389 --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
390 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
391 --radius: 0.75rem;
392 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
393 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
394 --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
395 --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
396 --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
397 --shadow-lg: 0 0 20px rgba(34, 197, 94, 0.2);
398 --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
399 --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
400
401 /* Table specific colors */
402 --table-background: var(--card);
403 --table-border: oklch(1 0 0 / 8%);
404 --table-header: var(--muted);
405}
406
407/* Purple Color Scheme */
408.purple {
409 --background: oklch(0.95 0.008 280);
410 --foreground: oklch(0.4355 0.043 279.325);
411 --card: oklch(0.97 0.005 280);
412 --card-foreground: oklch(0.4355 0.043 279.325);
413 --popover: oklch(0.985 0.005 280);
414 --popover-foreground: oklch(0.4355 0.043 279.325);
415 --primary: oklch(0.5547 0.2503 297.0156);
416 --primary-foreground: oklch(1 0 0);
417 --secondary: oklch(0.92 0.008 280);
418 --secondary-foreground: oklch(0.4355 0.043 279.325);
419 --muted: oklch(0.9 0.01 280);
420 --muted-foreground: oklch(0.45 0.035 279);
421 --accent: oklch(0.88 0.015 280);
422 --accent-foreground: oklch(1 0 0);
423 --destructive: oklch(0.59 0.22 22);
424 --destructive-foreground: oklch(1 0 0);
425 --border: oklch(0.85 0.01 280);
426 --input: oklch(0.85 0.01 280);
427 --ring: oklch(0.5547 0.2503 297.0156);
428 --chart-1: oklch(0.5547 0.2503 297.0156);
429 --chart-2: oklch(0.682 0.1448 235.3822);
430 --chart-3: oklch(0.625 0.1772 140.4448);
431 --chart-4: oklch(0.692 0.2041 42.4293);
432 --chart-5: oklch(0.7141 0.1045 33.0967);
433 --sidebar: var(--card);
434 --sidebar-foreground: oklch(0.4355 0.043 279.325);
435 --sidebar-primary: oklch(0.5547 0.2503 297.0156);
436 --sidebar-primary-foreground: oklch(1 0 0);
437 --sidebar-accent: oklch(0.92 0.008 280);
438 --sidebar-accent-foreground: oklch(1 0 0);
439 --sidebar-border: oklch(0.85 0.01 280);
440 --sidebar-ring: oklch(0.5547 0.2503 297.0156);
441 --font-sans: Montserrat, sans-serif;
442 --font-serif: Georgia, serif;
443 --font-mono: Fira Code, monospace;
444 --radius: 0.75rem;
445 --shadow-2xs: 0 1px 3px 0px rgba(139, 92, 246, 0.04);
446 --shadow-xs: 0 1px 3px 0px rgba(139, 92, 246, 0.04);
447 --shadow-sm: 0 20px 40px -15px rgba(139, 92, 246, 0.1);
448 --shadow: 0 20px 40px -12px rgba(139, 92, 246, 0.15);
449 --shadow-md: 0 20px 40px -12px rgba(139, 92, 246, 0.15);
450 --shadow-lg: 0 0 20px rgba(139, 92, 246, 0.2);
451 --shadow-xl: 0 8px 10px -1px rgba(139, 92, 246, 0.08);
452 --shadow-2xl: 0 1px 3px 0px rgba(139, 92, 246, 0.2);
453 --tracking-normal: 0em;
454 --spacing: 0.25rem;
455
456 /* Table specific colors */
457 --table-background: var(--card);
458 --table-border: oklch(0.985 0.005 280);
459 --table-header: var(--muted);
460}
461
462.dark.purple {
463 --background: oklch(0.18 0.01 280); /* Very dark purple background */
464 --foreground: oklch(0.8787 0.0426 272.2767);
465 --card: oklch(0.24 0.02 280); /* Lighter purple card */
466 --card-foreground: var(--foreground);
467 --popover: oklch(0.26 0.02 280);
468 --popover-foreground: var(--foreground);
469 --primary: oklch(0.7871 0.1187 304.7693);
470 --primary-foreground: oklch(0.2429 0.0304 283.911);
471 --secondary: oklch(0.22 0.01 280);
472 --secondary-foreground: var(--foreground);
473 --muted: oklch(0.2 0.01 280);
474 --muted-foreground: oklch(0.751 0.0396 273.932);
475 --accent: oklch(0.3 0.03 280);
476 --accent-foreground: var(--foreground);
477 --destructive: oklch(0.64 0.21 26);
478 --destructive-foreground: oklch(0.2429 0.0304 283.911);
479 --border: oklch(0.28 0.02 280);
480 --input: oklch(0.28 0.02 280);
481 --ring: oklch(0.7871 0.1187 304.7693);
482 --chart-1: oklch(0.7871 0.1187 304.7693);
483 --chart-2: oklch(0.8467 0.0833 210.2545);
484 --chart-3: oklch(0.8577 0.1092 142.7153);
485 --chart-4: oklch(0.8237 0.1015 52.6294);
486 --chart-5: oklch(0.9226 0.0238 30.4919);
487 --sidebar: oklch(0.16 0.01 280);
488 --sidebar-foreground: var(--foreground);
489 --sidebar-primary: oklch(0.7871 0.1187 304.7693);
490 --sidebar-primary-foreground: var(--primary-foreground);
491 --sidebar-accent: oklch(0.24 0.02 280);
492 --sidebar-accent-foreground: var(--foreground);
493 --sidebar-border: oklch(0.28 0.02 280);
494 --sidebar-ring: oklch(0.7871 0.1187 304.7693);
495 --font-sans: Montserrat, sans-serif;
496 --font-serif: Georgia, serif;
497 --font-mono: Fira Code, monospace;
498 --radius: 0.75rem;
499 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
500 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
501 --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
502 --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
503 --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
504 --shadow-lg: 0 0 20px rgba(139, 92, 246, 0.2);
505 --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
506 --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
507
508 /* Table specific colors */
509 --table-background: var(--card);
510 --table-border: oklch(1 0 0 / 8%);
511 --table-header: var(--muted);
512}
513
514/* Hover Card Effect */
515.hover-card {
516 transition: all 0.2s ease;
517 border: 1px solid transparent;
518}
519
520.hover-card:hover {
521 box-shadow: var(--shadow-md);
522 transform: scale(1.02);
523 border-color: var(--primary);
524}
525
526/* 表格行悬浮效果 */
527.table-row-hover {
528 transition: all 0.2s ease;
529}
530.table-row-hover:hover {
531 background-color: var(--accent) !important;
532 transform: scale(1.005);
533 box-shadow: var(--shadow-sm);
534 border-color: var(--primary);
535 z-index: 10;
536 position: relative;
537 border-radius: 12px;
538}
539.table-row-hover:hover > * {
540 background-color: var(--accent) !important;
541}
542
543/* 隐藏默认复选框，使用自定义样式 */
544.custom-checkbox input:checked + div {
545 background-color: var(--primary);
546 border-color: var(--primary);
547}
548.custom-checkbox input:checked + div svg {
549 display: block;
550}
551
552/* 胶囊滚动条隐藏 */
553.hide-scroll {
554 -ms-overflow-style: none; /* IE and Edge */
555 scrollbar-width: none; /* Firefox */
556}
557
558.hide-scroll::-webkit-scrollbar {
559 display: none;
560}
561
562/* Orange Color Scheme */
563.orange {
564 --background: oklch(0.95 0.008 70); /* Softer orange-gray background */
565 --foreground: oklch(0.2686 0 0);
566 --card: oklch(0.97 0.005 70); /* Slightly tinted cards */
567 --card-foreground: var(--foreground);
568 --popover: oklch(0.985 0.005 70);
569 --popover-foreground: var(--foreground);
570 --primary: oklch(0.7686 0.1647 70.0804);
571 --primary-foreground: oklch(0 0 0);
572 --secondary: oklch(0.92 0.008 70);
573 --secondary-foreground: var(--foreground);
574 --muted: oklch(0.9 0.01 70);
575 --muted-foreground: oklch(0.45 0.02 70);
576 --accent: oklch(0.88 0.015 70);
577 --accent-foreground: var(--foreground);
578 --destructive: oklch(0.64 0.21 26);
579 --destructive-foreground: oklch(1 0 0);
580 --border: oklch(0.85 0.01 70);
581 --input: oklch(0.85 0.01 70);
582 --ring: oklch(0.7686 0.1647 70.0804);
583 --chart-1: oklch(0.7686 0.1647 70.0804);
584 --chart-2: oklch(0.6658 0.1574 58.3183);
585 --chart-3: oklch(0.5553 0.1455 48.9975);
586 --chart-4: oklch(0.4732 0.1247 46.2007);
587 --chart-5: oklch(0.4137 0.1054 45.9038);
588 --sidebar: var(--card);
589 --sidebar-foreground: var(--foreground);
590 --sidebar-primary: oklch(0.7686 0.1647 70.0804);
591 --sidebar-primary-foreground: oklch(1 0 0);
592 --sidebar-accent: oklch(0.92 0.008 70);
593 --sidebar-accent-foreground: var(--foreground);
594 --sidebar-border: oklch(0.85 0.01 70);
595 --sidebar-ring: oklch(0.7686 0.1647 70.0804);
596 --font-sans: Inter, sans-serif;
597 --font-serif: Source Serif 4, serif;
598 --font-mono: JetBrains Mono, monospace;
599 --radius: 0.75rem;
600 --shadow-2xs: 0 1px 3px 0px rgba(234, 88, 12, 0.04);
601 --shadow-xs: 0 1px 3px 0px rgba(234, 88, 12, 0.04);
602 --shadow-sm: 0 20px 40px -15px rgba(234, 88, 12, 0.1);
603 --shadow: 0 20px 40px -12px rgba(234, 88, 12, 0.15);
604 --shadow-md: 0 20px 40px -12px rgba(234, 88, 12, 0.15);
605 --shadow-lg: 0 0 20px rgba(234, 88, 12, 0.2);
606 --shadow-xl: 0 8px 10px -1px rgba(234, 88, 12, 0.08);
607 --shadow-2xl: 0 1px 3px 0px rgba(234, 88, 12, 0.2);
608 --tracking-normal: 0em;
609 --spacing: 0.25rem;
610
611 /* Table specific colors */
612 --table-background: var(--card);
613 --table-border: oklch(0.985 0.005 70);
614 --table-header: var(--muted);
615}
616
617.dark.orange {
618 --background: oklch(0.18 0.01 70); /* Very dark orange-gray background */
619 --foreground: oklch(0.9219 0 0);
620 --card: oklch(0.24 0.02 70); /* Slightly lighter card */
621 --card-foreground: var(--foreground);
622 --popover: oklch(0.26 0.02 70);
623 --popover-foreground: var(--foreground);
624 --primary: oklch(0.7686 0.1647 70.0804);
625 --primary-foreground: oklch(0 0 0);
626 --secondary: oklch(0.22 0.01 70);
627 --secondary-foreground: var(--foreground);
628 --muted: oklch(0.2 0.01 70);
629 --muted-foreground: oklch(0.7155 0 0);
630 --accent: oklch(0.3 0.03 70);
631 --accent-foreground: oklch(0.9243 0.1151 95.7459);
632 --destructive: oklch(0.64 0.21 26);
633 --destructive-foreground: oklch(1 0 0);
634 --border: oklch(0.28 0.02 70);
635 --input: oklch(0.28 0.02 70);
636 --ring: oklch(0.7686 0.1647 70.0804);
637 --chart-1: oklch(0.8369 0.1644 84.4286);
638 --chart-2: oklch(0.6658 0.1574 58.3183);
639 --chart-3: oklch(0.4732 0.1247 46.2007);
640 --chart-4: oklch(0.5553 0.1455 48.9975);
641 --chart-5: oklch(0.4732 0.1247 46.2007);
642 --sidebar: oklch(0.16 0.01 70);
643 --sidebar-foreground: oklch(0.9219 0 0);
644 --sidebar-primary: oklch(0.7686 0.1647 70.0804);
645 --sidebar-primary-foreground: oklch(1 0 0);
646 --sidebar-accent: oklch(0.24 0.02 70);
647 --sidebar-accent-foreground: oklch(0.9243 0.1151 95.7459);
648 --sidebar-border: oklch(0.28 0.02 70);
649 --sidebar-ring: oklch(0.7686 0.1647 70.0804);
650 --font-sans: Inter, sans-serif;
651 --font-serif: Source Serif 4, serif;
652 --font-mono: JetBrains Mono, monospace;
653 --radius: 0.75rem;
654 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
655 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
656 --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
657 --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
658 --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
659 --shadow-lg: 0 0 20px rgba(234, 88, 12, 0.2);
660 --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
661 --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
662}
663
664/* Red Color Scheme */
665.red {
666 --background: oklch(0.95 0.008 15); /* Softer red-gray background */
667 --foreground: oklch(0.3257 0.1161 325.0372);
668 --card: oklch(0.97 0.005 15); /* Slightly tinted cards */
669 --card-foreground: var(--foreground);
670 --popover: oklch(0.985 0.005 15);
671 --popover-foreground: var(--foreground);
672 --primary: oklch(0.5316 0.1409 355.1999);
673 --primary-foreground: oklch(1 0 0);
674 --secondary: oklch(0.92 0.008 15);
675 --secondary-foreground: var(--foreground);
676 --muted: oklch(0.9 0.01 15);
677 --muted-foreground: oklch(0.45 0.02 15);
678 --accent: oklch(0.88 0.015 15);
679 --accent-foreground: var(--foreground);
680 --destructive: oklch(0.5248 0.1368 20.8317);
681 --border: oklch(0.85 0.01 15);
682 --input: oklch(0.85 0.01 15);
683 --ring: oklch(0.5916 0.218 0.5844);
684 --chart-1: oklch(0.6038 0.2363 344.4657);
685 --chart-2: oklch(0.4445 0.2251 300.6246);
686 --chart-3: oklch(0.379 0.0438 226.1538);
687 --chart-4: oklch(0.833 0.1185 88.3461);
688 --chart-5: oklch(0.7843 0.1256 58.9964);
689 --sidebar: var(--card);
690 --sidebar-foreground: var(--foreground);
691 --sidebar-primary: oklch(0.5316 0.1409 355.1999);
692 --sidebar-primary-foreground: oklch(1 0 0);
693 --sidebar-accent: oklch(0.92 0.008 15);
694 --sidebar-accent-foreground: var(--foreground);
695 --sidebar-border: oklch(0.85 0.01 15);
696 --sidebar-ring: oklch(0.5916 0.218 0.5844);
697 --font-sans:
698 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
699 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
700 --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
701 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
702 --radius: 0.75rem;
703 --shadow-2xs: 0 1px 3px 0px rgba(220, 38, 38, 0.04);
704 --shadow-xs: 0 1px 3px 0px rgba(220, 38, 38, 0.04);
705 --shadow-sm: 0 20px 40px -15px rgba(220, 38, 38, 0.1);
706 --shadow: 0 20px 40px -12px rgba(220, 38, 38, 0.15);
707 --shadow-md: 0 20px 40px -12px rgba(220, 38, 38, 0.15);
708 --shadow-lg: 0 0 20px rgba(220, 38, 38, 0.2);
709 --shadow-xl: 0 8px 10px -1px rgba(220, 38, 38, 0.08);
710 --shadow-2xl: 0 1px 3px 0px rgba(220, 38, 38, 0.2);
711 --tracking-normal: 0em;
712 --spacing: 0.25rem;
713
714 /* Table specific colors */
715 --table-background: var(--card);
716 --table-border: oklch(0.985 0.005 15);
717 --table-header: var(--muted);
718}
719
720.dark.red {
721 --background: oklch(0.18 0.01 15); /* Very dark red background */
722 --foreground: oklch(0.8398 0.0387 309.5391);
723 --card: oklch(0.24 0.02 15); /* Slightly lighter red card */
724 --card-foreground: var(--foreground);
725 --popover: oklch(0.26 0.02 15);
726 --popover-foreground: var(--foreground);
727 --primary: oklch(0.4607 0.1853 4.0994);
728 --primary-foreground: oklch(0.856 0.0618 346.3684);
729 --secondary: oklch(0.22 0.01 15);
730 --secondary-foreground: var(--foreground);
731 --muted: oklch(0.2 0.01 15);
732 --muted-foreground: oklch(0.794 0.0372 307.1032);
733 --accent: oklch(0.3 0.03 15);
734 --accent-foreground: oklch(0.9647 0.0091 341.8035);
735 --destructive: oklch(0.2258 0.0524 12.6119);
736 --border: oklch(0.28 0.02 15);
737 --input: oklch(0.28 0.02 15);
738 --ring: oklch(0.5916 0.218 0.5844);
739 --chart-1: oklch(0.5316 0.1409 355.1999);
740 --chart-2: oklch(0.5633 0.1912 306.8561);
741 --chart-3: oklch(0.7227 0.1502 60.5799);
742 --chart-4: oklch(0.6193 0.2029 312.7422);
743 --chart-5: oklch(0.6118 0.2093 6.1387);
744 --sidebar: oklch(0.16 0.01 15);
745 --sidebar-foreground: oklch(0.8607 0.0293 343.6612);
746 --sidebar-primary: oklch(0.4882 0.2172 264.3763);
747 --sidebar-primary-foreground: oklch(1 0 0);
748 --sidebar-accent: oklch(0.24 0.02 15);
749 --sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
750 --sidebar-border: oklch(0 0 0);
751 --sidebar-ring: oklch(0.5916 0.218 0.5844);
752 --font-sans:
753 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
754 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
755 --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
756 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
757 --radius: 0.75rem;
758 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
759 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
760 --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
761 --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
762 --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
763 --shadow-lg: 0 0 20px rgba(220, 38, 38, 0.2);
764 --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
765 --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
766}
767
768.black {
769 --background: oklch(0.97 0 0); /* Softer gray background */
770 --foreground: oklch(0 0 0);
771 --card: oklch(0.985 0 0); /* Slightly off-white cards */
772 --card-foreground: var(--foreground);
773 --popover: oklch(0.985 0 0);
774 --popover-foreground: var(--foreground);
775 --primary: oklch(0 0 0);
776 --primary-foreground: oklch(1 0 0);
777 --secondary: oklch(0.92 0 0);
778 --secondary-foreground: var(--foreground);
779 --muted: oklch(0.9 0 0);
780 --muted-foreground: oklch(0.4 0 0);
781 --accent: oklch(0.88 0 0);
782 --accent-foreground: var(--foreground);
783 --destructive: oklch(0.63 0.19 23.03);
784 --border: oklch(0.85 0 0);
785 --input: oklch(0.85 0 0);
786 --ring: oklch(0 0 0);
787 --chart-1: oklch(0.81 0.17 75.35);
788 --chart-2: oklch(0.55 0.22 264.53);
789 --chart-3: oklch(0.72 0 0);
790 --chart-4: oklch(0.92 0 0);
791 --chart-5: oklch(0.56 0 0);
792 --sidebar: var(--card);
793 --sidebar-foreground: var(--foreground);
794 --sidebar-primary: oklch(0 0 0);
795 --sidebar-primary-foreground: oklch(1 0 0);
796 --sidebar-accent: oklch(0.92 0 0);
797 --sidebar-accent-foreground: var(--foreground);
798 --sidebar-border: oklch(0.85 0 0);
799 --sidebar-ring: oklch(0 0 0);
800 --font-sans:
801 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
802 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
803 --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
804 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
805 --radius: 0.75rem;
806 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
807 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
808 --shadow-sm: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
809 --shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
810 --shadow-md: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
811 --shadow-lg: 0 0 20px rgba(0, 0, 0, 0.15);
812 --shadow-xl: 0 8px 10px -1px rgba(0, 0, 0, 0.06);
813 --shadow-2xl: 0 1px 3px 0px rgba(0, 0, 0, 0.12);
814 --tracking-normal: 0em;
815 --spacing: 0.25rem;
816
817 /* Table specific colors */
818 --table-background: var(--card);
819 --table-border: oklch(0.985 0 0);
820 --table-header: var(--muted);
821}
822
823.dark.black {
824 --background: oklch(0.12 0 0); /* Very dark gray background */
825 --foreground: oklch(1 0 0);
826 --card: oklch(0.18 0 0); /* Slightly lighter card */
827 --card-foreground: var(--foreground);
828 --popover: oklch(0.2 0 0);
829 --popover-foreground: var(--foreground);
830 --primary: oklch(1 0 0);
831 --primary-foreground: oklch(0 0 0);
832 --secondary: oklch(0.16 0 0);
833 --secondary-foreground: var(--foreground);
834 --muted: oklch(0.14 0 0);
835 --muted-foreground: oklch(0.72 0 0);
836 --accent: oklch(0.26 0 0);
837 --accent-foreground: var(--foreground);
838 --destructive: oklch(0.69 0.2 23.91);
839 --border: oklch(0.22 0 0);
840 --input: oklch(0.22 0 0);
841 --ring: oklch(0.72 0 0);
842 --chart-1: oklch(0.81 0.17 75.35);
843 --chart-2: oklch(0.58 0.21 260.84);
844 --chart-3: oklch(0.56 0 0);
845 --chart-4: oklch(0.44 0 0);
846 --chart-5: oklch(0.92 0 0);
847 --sidebar: oklch(0.1 0 0);
848 --sidebar-foreground: oklch(1 0 0);
849 --sidebar-primary: oklch(1 0 0);
850 --sidebar-primary-foreground: oklch(0 0 0);
851 --sidebar-accent: oklch(0.18 0 0);
852 --sidebar-accent-foreground: oklch(1 0 0);
853 --sidebar-border: oklch(0.18 0 0);
854 --sidebar-ring: oklch(0.72 0 0);
855 --font-sans:
856 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
857 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
858 --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
859 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
860 --radius: 0.75rem;
861 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
862 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
863 --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
864 --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
865 --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
866 --shadow-lg: 0 0 20px rgba(255, 255, 255, 0.1);
867 --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
868 --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
869}
870
871/* Cream Color Scheme - Using provided colors */
872.cream {
873 --background: #f5f5f0; /* Light cream background (similar to claude) */
874 --foreground: #333333;
875 --card: #fafaf9; /* Slightly lighter cream cards */
876 --card-foreground: #333333;
877 --popover: #fafaf9;
878 --popover-foreground: #333333;
879 --primary: #a2af9b; /* Sage green primary */
880 --primary-foreground: #ffffff; /* White text on sage green */
881 --ring: #a2af9b;
882 --secondary: #f0f0ef;
883 --secondary-foreground: #333333;
884 --muted: #e8e7dc;
885 --muted-foreground: #666666;
886 --accent: #e0dfd0;
887 --accent-foreground: #333333;
888 --destructive: oklch(0.64 0.21 26); /* Red for destructive actions */
889 --destructive-foreground: #ffffff;
890 --border: #d4d3c5;
891 --input: #d4d3c5;
892 --sidebar: #fafaf9;
893 --sidebar-foreground: #333333;
894 --sidebar-primary: #a2af9b;
895 --sidebar-primary-foreground: #ffffff;
896 --sidebar-ring: #a2af9b;
897 --sidebar-accent: #f0f0ef;
898 --sidebar-accent-foreground: #333333;
899 --sidebar-border: #d4d3c5;
900 --chart-1: #a2af9b; /* Sage green */
901 --chart-2: #dccfc0; /* Warm beige */
902 --chart-3: #8b9a8a; /* Darker sage */
903 --chart-4: #c9b8a8; /* Darker beige */
904 --chart-5: #7a8a79; /* Deep sage */
905 --radius: 0.75rem;
906 --shadow-2xs: 0 1px 3px 0px rgba(162, 175, 155, 0.05);
907 --shadow-xs: 0 1px 3px 0px rgba(162, 175, 155, 0.05);
908 --shadow-sm: 0 10px 20px -5px rgba(162, 175, 155, 0.08);
909 --shadow: 0 15px 30px -10px rgba(162, 175, 155, 0.12);
910 --shadow-md: 0 15px 30px -10px rgba(162, 175, 155, 0.12);
911 --shadow-lg: 0 0 15px rgba(162, 175, 155, 0.15);
912 --shadow-xl: 0 8px 10px -1px rgba(162, 175, 155, 0.08);
913 --shadow-2xl: 0 1px 3px 0px rgba(162, 175, 155, 0.15);
914 --tracking-normal: 0em;
915 --spacing: 0.25rem;
916}
917
918.dark.cream {
919 --background: oklch(0.22 0.005 80); /* Dark cream background */
920 --foreground: oklch(0.9219 0 0);
921 --card: oklch(0.28 0.01 80); /* Lighter cream card */
922 --card-foreground: var(--foreground);
923 --popover: oklch(0.2686 0 0);
924 --popover-foreground: var(--foreground);
925 --primary: #a2af9b; /* Keep sage green for dark mode */
926 --primary-foreground: #1a1a1a; /* Dark text on sage green */
927 --ring: #a2af9b;
928 --secondary: oklch(0.2686 0 0);
929 --secondary-foreground: var(--foreground);
930 --muted: oklch(0.2686 0 0);
931 --muted-foreground: oklch(0.7155 0 0);
932 --accent: oklch(0.32 0.02 80);
933 --accent-foreground: oklch(0.9243 0.1151 95.7459);
934 --destructive: oklch(0.64 0.21 26); /* Red for destructive actions */
935 --destructive-foreground: #ffffff;
936 --sidebar: var(--background);
937 --sidebar-foreground: var(--foreground);
938 --sidebar-border: oklch(1 0 0 / 10%);
939 --sidebar-primary: #a2af9b;
940 --sidebar-primary-foreground: #1a1a1a;
941 --sidebar-ring: #a2af9b;
942 --sidebar-accent: #3a3a3a;
943 --sidebar-accent-foreground: #dccfc0;
944 --chart-1: #a2af9b; /* Sage green */
945 --chart-2: #dccfc0; /* Warm beige */
946 --chart-3: #b5c2b0; /* Lighter sage for dark mode */
947 --chart-4: #e0d3c4; /* Lighter beige for dark mode */
948 --chart-5: #8fa08e; /* Medium sage */
949 --radius: 0.75rem;
950 --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
951 --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
952 --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
953 --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
954 --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
955 --shadow-lg: 0 0 20px rgba(162, 175, 155, 0.2);
956 --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
957 --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
958}
959
960@theme inline {
961 /* Color System */
962 --color-background: var(--background);
963 --color-foreground: var(--foreground);
964 --color-card: var(--card);
965 --color-card-foreground: var(--card-foreground);
966 --color-popover: var(--popover);
967 --color-popover-foreground: var(--popover-foreground);
968 --color-primary: var(--primary);
969 --color-primary-foreground: var(--primary-foreground);
970 --color-secondary: var(--secondary);
971 --color-secondary-foreground: var(--secondary-foreground);
972 --color-muted: var(--muted);
973 --color-muted-foreground: var(--muted-foreground);
974 --color-accent: var(--accent);
975 --color-accent-foreground: var(--accent-foreground);
976 --color-destructive: var(--destructive);
977 --color-destructive-foreground: var(--destructive-foreground);
978 --color-border: var(--border);
979 --color-input: var(--input);
980 --color-ring: var(--ring);
981
982 /* Data Visualization */
983 --color-chart-1: var(--chart-1);
984 --color-chart-2: var(--chart-2);
985 --color-chart-3: var(--chart-3);
986 --color-chart-4: var(--chart-4);
987 --color-chart-5: var(--chart-5);
988
989 /* Brand Colors */
990 --color-brand-50: #fbf7f5;
991 --color-brand-100: #f5ebe6;
992 --color-brand-200: #edd5c8;
993 --color-brand-300: #e0b6a1;
994 --color-brand-400: #d08d6e;
995 --color-brand-500: #b05d2e;
996 --color-brand-600: #964823;
997 --color-brand-700: #7a381d;
998 --color-brand-800: #632e1a;
999 --color-brand-900: #512718;
1000
1001 /* Navigation */
1002 --color-sidebar: var(--sidebar);
1003 --color-sidebar-foreground: var(--sidebar-foreground);
1004 --color-sidebar-primary: var(--sidebar-primary);
1005 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
1006 --color-sidebar-accent: var(--sidebar-accent);
1007 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
1008 --color-sidebar-border: var(--sidebar-border);
1009 --color-sidebar-ring: var(--sidebar-ring);
1010
1011 /* Typography */
1012 --font-sans: var(--font-sans);
1013 --font-mono: var(--font-mono);
1014 --font-serif: var(--font-serif);
1015
1016 /* Border Radius */
1017 --radius-sm: calc(var(--radius) * 0.5);
1018 --radius-md: var(--radius);
1019 --radius-lg: calc(var(--radius) * 1.5);
1020 --radius-xl: calc(var(--radius) * 2);
1021
1022 /* Elevation */
1023 --shadow-2xs: var(--shadow-2xs);
1024 --shadow-xs: var(--shadow-xs);
1025 --shadow-sm: var(--shadow-sm);
1026 --shadow: var(--shadow);
1027 --shadow-md: var(--shadow-md);
1028 --shadow-lg: var(--shadow-lg);
1029 --shadow-xl: var(--shadow-xl);
1030 --shadow-2xl: var(--shadow-2xl);
1031}
1032
1033@layer base {
1034 * {
1035 @apply border-border outline-ring/50;
1036 scrollbar-width: thin;
1037 scrollbar-color: var(--border) transparent;
1038 }
1039 html {
1040 @apply overflow-x-hidden;
1041 }
1042 body {
1043 @apply bg-background text-foreground min-h-svh w-full;
1044 }
1045
1046 button:not(:disabled),
1047 [role='button']:not(:disabled) {
1048 cursor: pointer;
1049 }
1050
1051 /* Prevent focus zoom on mobile devices */
1052 @media screen and (max-width: 767px) {
1053 input,
1054 select,
1055 textarea {
1056 font-size: 16px !important;
1057 }
1058 }
1059}
1060
1061@utility container {
1062 margin-inline: auto;
1063 padding-inline: 2rem;
1064}
1065
1066@utility no-scrollbar {
1067 /* Hide scrollbar for Chrome, Safari and Opera */
1068 &::-webkit-scrollbar {
1069 display: none;
1070 }
1071 /* Hide scrollbar for IE, Edge and Firefox */
1072 -ms-overflow-style: none; /* IE and Edge */
1073 scrollbar-width: none; /* Firefox */
1074}
1075
1076@utility faded-bottom {
1077 @apply after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_var(--background)_70%)] md:after:block;
1078}
1079
1080/* styles.css */
1081.CollapsibleContent {
1082 overflow: hidden;
1083}
1084.CollapsibleContent[data-state='open'] {
1085 animation: slideDown 300ms ease-out;
1086}
1087.CollapsibleContent[data-state='closed'] {
1088 animation: slideUp 300ms ease-out;
1089}
1090
1091@keyframes slideDown {
1092 from {
1093 height: 0;
1094 }
1095 to {
1096 height: var(--radix-collapsible-content-height);
1097 }
1098}
1099
1100@keyframes slideUp {
1101 from {
1102 height: var(--radix-collapsible-content-height);
1103 }
1104 to {
1105 height: 0;
1106 }
1107}
1108
1109/* Particle float animation */
1110@keyframes particle-float {
1111 0%,
1112 100% {
1113 transform: translateY(0px) translateX(0px);
1114 opacity: 0.6;
1115 }
1116 25% {
1117 transform: translateY(-15px) translateX(5px);
1118 opacity: 1;
1119 }
1120 50% {
1121 transform: translateY(-5px) translateX(-8px);
1122 opacity: 0.8;
1123 }
1124 75% {
1125 transform: translateY(-20px) translateX(3px);
1126 opacity: 0.9;
1127 }
1128}
1129
1130/* Matrix digital rain */
1131@keyframes matrix-rain {
1132 0% {
1133 transform: translateY(-100vh);
1134 opacity: 0;
1135 }
1136 10% {
1137 opacity: 1;
1138 }
1139 90% {
1140 opacity: 1;
1141 }
1142 100% {
1143 transform: translateY(100vh);
1144 opacity: 0;
1145 }
1146}
1147
1148/* Data flow animation */
1149@keyframes data-flow {
1150 0% {
1151 transform: translateX(-100%) scaleX(0);
1152 opacity: 0;
1153 }
1154 20% {
1155 transform: translateX(-50%) scaleX(1);
1156 opacity: 1;
1157 }
1158 80% {
1159 transform: translateX(50%) scaleX(1);
1160 opacity: 1;
1161 }
1162 100% {
1163 transform: translateX(100%) scaleX(0);
1164 opacity: 0;
1165 }
1166}
1167
1168/* Binary code stream */
1169@keyframes binary-stream {
1170 0% {
1171 transform: translateX(-100%);
1172 opacity: 0;
1173 }
1174 10% {
1175 opacity: 0.3;
1176 }
1177 90% {
1178 opacity: 0.3;
1179 }
1180 100% {
1181 transform: translateX(100vw);
1182 opacity: 0;
1183 }
1184}
1185
1186/* Low-poly grid animation */
1187@keyframes grid-pulse {
1188 0%,
1189 100% {
1190 opacity: 0.1;
1191 transform: scale(1);
1192 }
1193 50% {
1194 opacity: 0.3;
1195 transform: scale(1.05);
1196 }
1197}
1198
1199/* Animation classes */
1200.animate-particle-float {