organify-ui 0.2.16 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/{chunk-I47BBGVI.js → chunk-A2H2TBSV.js} +16 -34
  2. package/dist/chunk-A2H2TBSV.js.map +1 -0
  3. package/dist/{chunk-INKNHHKT.js → chunk-GQZMW7XN.js} +212 -217
  4. package/dist/chunk-GQZMW7XN.js.map +1 -0
  5. package/dist/{chunk-HY7M3VZM.js → chunk-MZKEDV5W.js} +9 -9
  6. package/dist/{chunk-HY7M3VZM.js.map → chunk-MZKEDV5W.js.map} +1 -1
  7. package/dist/{chunk-5L6BWKVA.js → chunk-RFOKENE3.js} +7 -6
  8. package/dist/chunk-RFOKENE3.js.map +1 -0
  9. package/dist/chunk-UGX6D3AO.js +327 -0
  10. package/dist/chunk-UGX6D3AO.js.map +1 -0
  11. package/dist/{chunk-ERFN2H75.js → chunk-VHQZS77G.js} +9 -9
  12. package/dist/chunk-VHQZS77G.js.map +1 -0
  13. package/dist/components/chat/index.js +3 -3
  14. package/dist/components/notifications/index.js +3 -3
  15. package/dist/icons/index.js +1 -1
  16. package/dist/index.d.ts +23 -33
  17. package/dist/index.js +176 -187
  18. package/dist/index.js.map +1 -1
  19. package/dist/providers/theme-provider.d.ts +2 -2
  20. package/dist/providers/theme-provider.js +1 -1
  21. package/dist/tailwind-preset.js +77 -28
  22. package/dist/tailwind-preset.js.map +1 -1
  23. package/dist/tokens/index.d.ts +181 -99
  24. package/dist/tokens/index.js +1 -1
  25. package/package.json +2 -2
  26. package/src/globals.css +1007 -366
  27. package/dist/chunk-5L6BWKVA.js.map +0 -1
  28. package/dist/chunk-ERFN2H75.js.map +0 -1
  29. package/dist/chunk-HZXKUGFH.js +0 -271
  30. package/dist/chunk-HZXKUGFH.js.map +0 -1
  31. package/dist/chunk-I47BBGVI.js.map +0 -1
  32. package/dist/chunk-INKNHHKT.js.map +0 -1
package/src/globals.css CHANGED
@@ -14,10 +14,11 @@
14
14
  @source "../dist";
15
15
 
16
16
  /* ═══════════════════════════════════════════════════════
17
- Space Grotesk — Variable Font (weight 300–700)
18
- Loaded from /SpaceGrotesk-VariableFont_wght.ttf
19
- in each app's public/ directory.
17
+ Space Grotesk — Primary font
18
+ Inter kept as secondary/fallback.
20
19
  ═══════════════════════════════════════════════════════ */
20
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
21
+
21
22
  @font-face {
22
23
  font-family: 'Space Grotesk';
23
24
  src: url('/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
@@ -30,22 +31,22 @@
30
31
  Tailwind v4 — @theme (CSS-first token registration)
31
32
  ═══════════════════════════════════════════════════════ */
32
33
  @theme {
33
- /* Brand */
34
- --color-primary: #241979;
35
- --color-primary-light: #4F39F6;
36
- --color-primary-soft: #3A2E9E;
37
- --color-primary-glow: #4C35DE;
38
- --color-primary-electric: #4F39F6;
39
- --color-primary-electric-light: #7C6AF8;
40
- --color-primary-dark: #0f0a38;
41
-
42
- /* Neutrals */
43
- --color-void: #191919;
44
- --color-surface: #1F1F21;
45
- --color-elevated: #2A2A2E;
46
- --color-cream-base: #F9F9F7;
34
+ /* Brand — Vibrant Violet */
35
+ --color-primary: #7C3AED;
36
+ --color-primary-light: #A78BFA;
37
+ --color-primary-soft: #6D28D9;
38
+ --color-primary-glow: #8B5CF6;
39
+ --color-primary-electric: #8B5CF6;
40
+ --color-primary-electric-light: #C4B5FD;
41
+ --color-primary-dark: #4C1D95;
42
+
43
+ /* Neutrals — purple-tinted dark base */
44
+ --color-void: #0D0A1A;
45
+ --color-surface: #110E22;
46
+ --color-elevated: #1A1530;
47
+ --color-cream-base: #F8F6FC;
47
48
  --color-cream-surface: #FFFFFF;
48
- --color-cream-border: #E5E5E5;
49
+ --color-cream-border: #DDD8EB;
49
50
 
50
51
  /* Semantic */
51
52
  --color-success: #10B981;
@@ -54,21 +55,21 @@
54
55
  --color-warning: #F59E0B;
55
56
  --color-warning-light: #FBBF24;
56
57
  --color-warning-surface: rgba(245, 158, 11, 0.10);
57
- --color-error: #E0115F;
58
- --color-error-light: #F43F5E;
59
- --color-error-surface: rgba(224, 17, 95, 0.10);
58
+ --color-error: #EF4444;
59
+ --color-error-light: #F87171;
60
+ --color-error-surface: rgba(239, 68, 68, 0.12);
60
61
  --color-info: #3B82F6;
61
62
  --color-info-light: #60A5FA;
62
63
  --color-info-surface: rgba(59, 130, 246, 0.10);
63
64
 
64
- /* Glass — dark defaults */
65
- --color-glass-bg: rgba(31, 31, 33, 0.40);
66
- --color-glass-bg-heavy: rgba(31, 31, 33, 0.80);
67
- --color-glass-surface: rgba(31, 31, 33, 0.70);
68
- --color-glass-border: rgba(255, 255, 255, 0.03);
69
- --color-glass-border-medium: rgba(255, 255, 255, 0.08);
70
- --color-glass-border-strong: rgba(255, 255, 255, 0.20);
71
- --color-glass-highlight: rgba(255, 255, 255, 0.05);
65
+ /* Glass — purple-tinted transparency */
66
+ --color-glass-bg: rgba(124, 58, 237, 0.06);
67
+ --color-glass-bg-heavy: rgba(124, 58, 237, 0.12);
68
+ --color-glass-surface: rgba(255, 255, 255, 0.05);
69
+ --color-glass-border: rgba(167, 139, 250, 0.15);
70
+ --color-glass-border-medium: rgba(167, 139, 250, 0.25);
71
+ --color-glass-border-strong: rgba(167, 139, 250, 0.40);
72
+ --color-glass-highlight: rgba(255, 255, 255, 0.06);
72
73
 
73
74
  /* White transparency scale */
74
75
  --color-white-3: rgba(255, 255, 255, 0.03);
@@ -81,44 +82,44 @@
81
82
  --color-white-80: rgba(255, 255, 255, 0.80);
82
83
 
83
84
  /* Card aliases */
84
- --color-card-surface: #1F1F21;
85
- --color-card-bg: #1F1F21;
85
+ --color-card-surface: #110E22;
86
+ --color-card-bg: #13102A;
86
87
 
87
88
  /* Semantic aliases */
88
89
  --color-semantic-success: #10B981;
89
90
  --color-semantic-warning: #F59E0B;
90
- --color-semantic-error: #E0115F;
91
+ --color-semantic-error: #EF4444;
91
92
  --color-semantic-info: #3B82F6;
92
93
 
93
94
  /* Cream theme tokens */
94
95
  --color-cream-card: #FFFFFF;
95
- --color-cream-primary: #241979;
96
- --color-cream-secondary: #4b5563;
97
- --color-cream-muted: #9ca3af;
98
- --color-cream-text: #191919;
96
+ --color-cream-primary: #6D28D9;
97
+ --color-cream-secondary: #7B7394;
98
+ --color-cream-muted: #A49BBF;
99
+ --color-cream-text: #1A1530;
99
100
 
100
101
  /* Status tokens */
101
- --color-in-flow-bg: rgba(99, 102, 241, 0.20);
102
- --color-in-flow-text: #c7d2fe;
103
- --color-in-flow-border: rgba(99, 102, 241, 0.30);
104
- --color-deep-work-bg: rgba(217, 70, 239, 0.10);
102
+ --color-in-flow-bg: rgba(124, 58, 237, 0.20);
103
+ --color-in-flow-text: #C4B5FD;
104
+ --color-in-flow-border: rgba(124, 58, 237, 0.30);
105
+ --color-deep-work-bg: rgba(217, 70, 239, 0.12);
105
106
  --color-deep-work-text: #f0abfc;
106
- --color-deep-work-border: rgba(217, 70, 239, 0.20);
107
+ --color-deep-work-border: rgba(217, 70, 239, 0.22);
107
108
  --color-resting-bg: rgba(245, 158, 11, 0.15);
108
109
  --color-resting-text: #fde68a;
109
110
  --color-resting-border: rgba(245, 158, 11, 0.30);
110
- --color-disconnected-bg: rgba(244, 63, 94, 0.15);
111
+ --color-disconnected-bg: rgba(239, 68, 68, 0.15);
111
112
  --color-disconnected-text: #fecdd3;
112
- --color-disconnected-border: rgba(244, 63, 94, 0.30);
113
+ --color-disconnected-border: rgba(239, 68, 68, 0.30);
113
114
 
114
115
  /* Fluid theme tokens */
115
- --color-fluid-bg: rgba(255, 255, 255, 0.03);
116
- --color-fluid-surface: #161618;
117
- --color-fluid-border: rgba(255, 255, 255, 0.05);
118
- --color-fluid-primary-soft: rgba(124, 106, 248, 0.20);
116
+ --color-fluid-bg: rgba(124, 58, 237, 0.05);
117
+ --color-fluid-surface: #1A1530;
118
+ --color-fluid-border: rgba(167, 139, 250, 0.08);
119
+ --color-fluid-primary-soft: rgba(124, 58, 237, 0.20);
119
120
 
120
121
  /* Typography */
121
- --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
122
+ --font-sans: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
122
123
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
123
124
 
124
125
  --font-size-display-xl: 5rem;
@@ -151,31 +152,62 @@
151
152
  --radius-geo-inv: 2rem 0.5rem 2rem 0.5rem;
152
153
  --radius-pill-asym: 4px 16px 16px 4px;
153
154
 
154
- /* Shadows */
155
- --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
156
- --shadow-glass-sm: 0 4px 24px rgba(0, 0, 0, 0.25);
157
- --shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
158
- --shadow-glass-xl: 10px 10px 40px rgba(0, 0, 0, 0.40);
159
- --shadow-glow: 0 0 20px rgba(79, 57, 246, 0.40);
160
- --shadow-glow-sm: 0 0 10px rgba(79, 57, 246, 0.30);
161
- --shadow-glow-lg: 0 0 40px rgba(79, 57, 246, 0.50);
162
- --shadow-glow-soft: 0 4px 30px rgba(79, 57, 246, 0.15);
163
- --shadow-glow-primary: 0 0 20px rgba(79, 57, 246, 0.30), 0 4px 12px rgba(79, 57, 246, 0.20);
164
- --shadow-glow-error: 0 0 20px rgba(224, 17, 95, 0.30), 0 4px 12px rgba(224, 17, 95, 0.20);
155
+ /* Shadows — violet-tinted depth */
156
+ --shadow-glass: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
157
+ --shadow-glass-sm: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
158
+ --shadow-glass-lg: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
159
+ --shadow-glass-xl: 0 40px 120px -20px rgba(13, 10, 26, 0.80);
160
+ --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.40);
161
+ --shadow-glow-sm: 0 0 10px rgba(124, 58, 237, 0.30);
162
+ --shadow-glow-lg: 0 0 40px rgba(124, 58, 237, 0.50);
163
+ --shadow-glow-soft: 0 4px 30px rgba(124, 58, 237, 0.18);
164
+ --shadow-glow-primary: 0 0 20px rgba(124, 58, 237, 0.35), 0 4px 12px rgba(124, 58, 237, 0.20);
165
+ --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.30), 0 4px 12px rgba(239, 68, 68, 0.20);
165
166
  --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.20);
166
167
  --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.20);
167
168
  --shadow-glow-info: 0 0 20px rgba(59, 130, 246, 0.20);
168
- --shadow-neon: 0 0 10px rgba(79, 57, 246, 0.40), 0 0 20px rgba(79, 57, 246, 0.20);
169
- --shadow-neon-lg: 0 0 30px rgba(79, 57, 246, 0.40), 0 0 60px rgba(79, 57, 246, 0.20);
170
- --shadow-neon-glow: 0 0 30px rgba(79, 57, 246, 0.40), 0 0 60px rgba(79, 57, 246, 0.20);
171
- --shadow-inner-light: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
172
- --shadow-cream-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
173
- --shadow-cream-md: 0 4px 16px rgba(0, 0, 0, 0.03);
174
- --shadow-cream-lg: 0 8px 32px rgba(0, 0, 0, 0.05);
175
- --shadow-cream-glow: 0 0 15px rgba(36, 25, 121, 0.10);
176
- --shadow-cream-btn: 0 2px 8px rgba(36, 25, 121, 0.08);
177
- --shadow-cream-btn-primary: 0 4px 16px rgba(36, 25, 121, 0.20);
178
- --shadow-soft-glow: 0 4px 30px rgba(0, 0, 0, 0.12);
169
+ --shadow-neon: 0 0 10px rgba(124, 58, 237, 0.40), 0 0 20px rgba(124, 58, 237, 0.20);
170
+ --shadow-neon-lg: 0 0 30px rgba(124, 58, 237, 0.45), 0 0 60px rgba(124, 58, 237, 0.20);
171
+ --shadow-neon-glow: 0 0 30px rgba(124, 58, 237, 0.45), 0 0 60px rgba(124, 58, 237, 0.20);
172
+ --shadow-inner-light: inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
173
+ --shadow-cream-sm: 0 2px 8px rgba(124, 58, 237, 0.03);
174
+ --shadow-cream-md: 0 4px 16px rgba(124, 58, 237, 0.05);
175
+ --shadow-cream-lg: 0 8px 32px rgba(124, 58, 237, 0.08);
176
+ --shadow-cream-glow: 0 0 15px rgba(124, 58, 237, 0.12);
177
+ --shadow-cream-btn: 0 2px 8px rgba(124, 58, 237, 0.10);
178
+ --shadow-cream-btn-primary: 0 4px 16px rgba(124, 58, 237, 0.22);
179
+ --shadow-soft-glow: 0 4px 30px rgba(13, 10, 26, 0.15);
180
+
181
+ /* Liquid Glass shadows */
182
+ --shadow-liquid-glass: 0 8px 32px rgba(13, 10, 26, 0.60), inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
183
+ --shadow-liquid-glass-sm: 0 4px 16px rgba(13, 10, 26, 0.40);
184
+ --shadow-liquid-glass-lg: 0 16px 48px rgba(13, 10, 26, 0.70), inset 0 1px 0 0 rgba(167, 139, 250, 0.10);
185
+ --shadow-liquid-glow: 0 0 20px rgba(124, 58, 237, 0.30), 0 0 40px rgba(168, 85, 247, 0.15);
186
+ --shadow-liquid-glow-primary: 0 0 24px rgba(124, 58, 237, 0.35), 0 4px 16px rgba(124, 58, 237, 0.20);
187
+ --shadow-liquid-neon: 0 0 15px rgba(124, 58, 237, 0.50), 0 0 30px rgba(168, 85, 247, 0.25);
188
+
189
+ /* Liquid Glass theme tokens */
190
+ --color-liquid-void: #0D0A1A;
191
+ --color-liquid-surface: #110E22;
192
+ --color-liquid-elevated: #1A1530;
193
+ --color-liquid-card: #13102A;
194
+ --color-liquid-text: #F0ECF9;
195
+ --color-liquid-text-secondary: #C4BDD9;
196
+ --color-liquid-text-muted: #7B7394;
197
+ --color-liquid-border: rgba(139, 92, 246, 0.08);
198
+ --color-liquid-border-medium: rgba(139, 92, 246, 0.15);
199
+ --color-liquid-border-strong: rgba(167, 139, 250, 0.25);
200
+ --color-liquid-glass-bg: rgba(17, 14, 34, 0.50);
201
+ --color-liquid-glass-bg-heavy: rgba(17, 14, 34, 0.85);
202
+ --color-liquid-glass-surface: rgba(17, 14, 34, 0.70);
203
+ --color-liquid-glass-border: rgba(139, 92, 246, 0.06);
204
+ --color-liquid-glass-border-medium: rgba(139, 92, 246, 0.12);
205
+ --color-liquid-glass-border-strong: rgba(167, 139, 250, 0.22);
206
+ --color-liquid-glass-highlight: rgba(167, 139, 250, 0.05);
207
+ --color-liquid-primary: #7C3AED;
208
+ --color-liquid-primary-soft: rgba(124, 58, 237, 0.20);
209
+ --color-liquid-accent: #A855F7;
210
+ --color-liquid-accent-glow: rgba(168, 85, 247, 0.40);
179
211
 
180
212
  /* Animations */
181
213
  --animate-shimmer: shimmer 2s infinite;
@@ -185,6 +217,8 @@
185
217
  --animate-float-subtle: float-subtle 6s infinite ease-in-out;
186
218
  --animate-fade-in: fade-in 0.3s ease-out;
187
219
  --animate-slide-up: slide-up 0.4s cubic-bezier(0.25, 1, 0.5, 1);
220
+ --animate-liquid-reveal: liquid-reveal 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
221
+ --animate-liquid-glow-pulse: liquid-glow-pulse 3s ease-in-out infinite;
188
222
  }
189
223
 
190
224
  /* ═══════════════════════════════════════════════════════
@@ -192,46 +226,46 @@
192
226
  Organic-Dark: deep void, glassmorphism, glow accents
193
227
  ═══════════════════════════════════════════════════════ */
194
228
  :root {
195
- --org-primary: #241979;
196
- --org-primary-light: #4F39F6;
197
- --org-primary-soft: #3A2E9E;
198
- --org-primary-glow: #4C35DE;
199
- --org-bg-void: #191919;
200
- --org-bg-surface: #1F1F21;
201
- --org-bg-elevated: #2A2A2E;
202
- --org-cream-base: #F9F9F7;
229
+ --org-primary: #7C3AED;
230
+ --org-primary-light: #A78BFA;
231
+ --org-primary-soft: #6D28D9;
232
+ --org-primary-glow: #8B5CF6;
233
+ --org-bg-void: #0D0A1A;
234
+ --org-bg-surface: #110E22;
235
+ --org-bg-elevated: #1A1530;
236
+ --org-cream-base: #F8F6FC;
203
237
 
204
238
  --org-success: #10B981;
205
239
  --org-warning: #F59E0B;
206
- --org-error: #E0115F;
240
+ --org-error: #EF4444;
207
241
  --org-info: #3B82F6;
208
242
 
209
- --org-glass-bg: rgba(31, 31, 33, 0.40);
210
- --org-glass-bg-heavy: rgba(31, 31, 33, 0.80);
211
- --org-glass-surface: rgba(31, 31, 33, 0.70);
212
- --org-glass-border: rgba(255, 255, 255, 0.03);
213
- --org-glass-border-medium: rgba(255, 255, 255, 0.08);
214
- --org-glass-border-strong: rgba(255, 255, 255, 0.20);
215
- --org-glass-highlight: rgba(255, 255, 255, 0.05);
243
+ --org-glass-bg: rgba(124, 58, 237, 0.06);
244
+ --org-glass-bg-heavy: rgba(124, 58, 237, 0.12);
245
+ --org-glass-surface: rgba(255, 255, 255, 0.05);
246
+ --org-glass-border: rgba(167, 139, 250, 0.15);
247
+ --org-glass-border-medium: rgba(167, 139, 250, 0.25);
248
+ --org-glass-border-strong: rgba(167, 139, 250, 0.40);
249
+ --org-glass-highlight: rgba(255, 255, 255, 0.06);
216
250
 
217
- --org-text: #f3f4f6;
218
- --org-text-secondary: #d1d5db;
219
- --org-text-muted: #6b7280;
220
- --org-border: rgba(255, 255, 255, 0.03);
251
+ --org-text: #F0ECF9;
252
+ --org-text-secondary: #C4BDD9;
253
+ --org-text-muted: #7B7394;
254
+ --org-border: rgba(167, 139, 250, 0.15);
221
255
 
222
- --org-card-bg: #1F1F21;
223
- --org-card-surface: #2A2A2E;
256
+ --org-card-bg: #13102A;
257
+ --org-card-surface: #1A1530;
224
258
 
225
- --org-subtle-5: rgba(255, 255, 255, 0.05);
226
- --org-subtle-10: rgba(255, 255, 255, 0.10);
227
- --org-subtle-20: rgba(255, 255, 255, 0.20);
259
+ --org-subtle-5: rgba(124, 58, 237, 0.04);
260
+ --org-subtle-10: rgba(124, 58, 237, 0.08);
261
+ --org-subtle-20: rgba(124, 58, 237, 0.14);
228
262
 
229
- --org-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
230
- --org-shadow-glass-sm: 0 4px 24px rgba(0, 0, 0, 0.25);
231
- --org-shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
263
+ --org-shadow-glass: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
264
+ --org-shadow-glass-sm: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
265
+ --org-shadow-glass-lg: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
232
266
 
233
267
  color-scheme: dark;
234
- font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
268
+ font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
235
269
  -webkit-font-smoothing: antialiased;
236
270
  -moz-osx-font-smoothing: grayscale;
237
271
  }
@@ -242,111 +276,154 @@
242
276
  ═══════════════════════════════════════════════════════ */
243
277
  .theme-cream,
244
278
  [data-theme='light'] {
245
- --org-bg-void: #F9F9F7;
279
+ --org-bg-void: #F8F6FC;
246
280
  --org-bg-surface: #FFFFFF;
247
- --org-bg-elevated: #F0F0EE;
281
+ --org-bg-elevated: #F0ECF9;
248
282
 
249
- --org-text: #191919;
250
- --org-text-secondary: #374151;
251
- --org-text-muted: #6b7280;
283
+ --org-text: #1A1530;
284
+ --org-text-secondary: #352D52;
285
+ --org-text-muted: #7B7394;
252
286
 
253
- --org-glass-bg: rgba(255, 255, 255, 0.70);
254
- --org-glass-bg-heavy: rgba(255, 255, 255, 0.90);
255
- --org-glass-surface: rgba(255, 255, 255, 0.80);
256
- --org-glass-border: rgba(36, 25, 121, 0.03);
257
- --org-glass-border-medium: rgba(36, 25, 121, 0.06);
258
- --org-glass-border-strong: rgba(36, 25, 121, 0.15);
259
- --org-glass-highlight: rgba(36, 25, 121, 0.02);
260
- --org-border: rgba(36, 25, 121, 0.06);
287
+ --org-glass-bg: rgba(255, 255, 255, 0.75);
288
+ --org-glass-bg-heavy: rgba(255, 255, 255, 0.92);
289
+ --org-glass-surface: rgba(255, 255, 255, 0.85);
290
+ --org-glass-border: rgba(124, 58, 237, 0.04);
291
+ --org-glass-border-medium: rgba(124, 58, 237, 0.08);
292
+ --org-glass-border-strong: rgba(124, 58, 237, 0.18);
293
+ --org-glass-highlight: rgba(124, 58, 237, 0.03);
294
+ --org-border: rgba(124, 58, 237, 0.08);
261
295
 
262
296
  --org-card-bg: #FFFFFF;
263
- --org-card-surface: #FAFAFB;
297
+ --org-card-surface: #F8F6FC;
264
298
 
265
- --org-subtle-5: rgba(36, 25, 121, 0.02);
266
- --org-subtle-10: rgba(36, 25, 121, 0.04);
267
- --org-subtle-20: rgba(36, 25, 121, 0.08);
299
+ --org-subtle-5: rgba(124, 58, 237, 0.03);
300
+ --org-subtle-10: rgba(124, 58, 237, 0.05);
301
+ --org-subtle-20: rgba(124, 58, 237, 0.08);
268
302
 
269
- --org-shadow-glass: 0 4px 24px rgba(36, 25, 121, 0.04);
270
- --org-shadow-glass-sm: 0 2px 12px rgba(36, 25, 121, 0.03);
271
- --org-shadow-glass-lg: 0 8px 40px rgba(36, 25, 121, 0.06);
303
+ --org-shadow-glass: 0 4px 24px rgba(124, 58, 237, 0.06);
304
+ --org-shadow-glass-sm: 0 2px 12px rgba(124, 58, 237, 0.04);
305
+ --org-shadow-glass-lg: 0 8px 40px rgba(124, 58, 237, 0.08);
272
306
 
273
307
  color-scheme: light;
274
- color: #191919;
275
- background-color: #F9F9F7;
308
+ color: #1A1530;
309
+ background-color: #F8F6FC;
276
310
  }
277
311
 
278
312
  /* ═══════════════════════════════════════════════════════
279
313
  Dark Theme (explicit)
280
314
  ═══════════════════════════════════════════════════════ */
281
315
  [data-theme='dark'] {
282
- --org-bg-void: #191919;
283
- --org-bg-surface: #1F1F21;
284
- --org-bg-elevated: #2A2A2E;
285
-
286
- --org-text: #f3f4f6;
287
- --org-text-secondary: #d1d5db;
288
- --org-text-muted: #6b7280;
289
-
290
- --org-glass-bg: rgba(31, 31, 33, 0.40);
291
- --org-glass-bg-heavy: rgba(31, 31, 33, 0.80);
292
- --org-glass-surface: rgba(31, 31, 33, 0.70);
293
- --org-glass-border: rgba(255, 255, 255, 0.03);
294
- --org-glass-border-medium: rgba(255, 255, 255, 0.08);
295
- --org-glass-border-strong: rgba(255, 255, 255, 0.20);
296
- --org-glass-highlight: rgba(255, 255, 255, 0.05);
297
- --org-border: rgba(255, 255, 255, 0.03);
298
-
299
- --org-card-bg: #1F1F21;
300
- --org-card-surface: #2A2A2E;
301
-
302
- --org-subtle-5: rgba(255, 255, 255, 0.05);
303
- --org-subtle-10: rgba(255, 255, 255, 0.10);
304
- --org-subtle-20: rgba(255, 255, 255, 0.20);
305
-
306
- --org-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
307
- --org-shadow-glass-sm: 0 4px 24px rgba(0, 0, 0, 0.25);
308
- --org-shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
316
+ --org-bg-void: #0D0A1A;
317
+ --org-bg-surface: #110E22;
318
+ --org-bg-elevated: #1A1530;
319
+
320
+ --org-text: #F0ECF9;
321
+ --org-text-secondary: #C4BDD9;
322
+ --org-text-muted: #7B7394;
323
+
324
+ --org-glass-bg: rgba(124, 58, 237, 0.06);
325
+ --org-glass-bg-heavy: rgba(124, 58, 237, 0.12);
326
+ --org-glass-surface: rgba(255, 255, 255, 0.05);
327
+ --org-glass-border: rgba(167, 139, 250, 0.15);
328
+ --org-glass-border-medium: rgba(167, 139, 250, 0.25);
329
+ --org-glass-border-strong: rgba(167, 139, 250, 0.40);
330
+ --org-glass-highlight: rgba(255, 255, 255, 0.06);
331
+ --org-border: rgba(167, 139, 250, 0.15);
332
+
333
+ --org-card-bg: #13102A;
334
+ --org-card-surface: #1A1530;
335
+
336
+ --org-subtle-5: rgba(124, 58, 237, 0.04);
337
+ --org-subtle-10: rgba(124, 58, 237, 0.08);
338
+ --org-subtle-20: rgba(124, 58, 237, 0.14);
339
+
340
+ --org-shadow-glass: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
341
+ --org-shadow-glass-sm: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
342
+ --org-shadow-glass-lg: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
309
343
 
310
344
  color-scheme: dark;
311
- color: #f3f4f6;
312
- background-color: #191919;
345
+ color: #F0ECF9;
346
+ background-color: #0D0A1A;
313
347
  }
314
348
 
315
349
  /* ═══════════════════════════════════════════════════════
316
350
  Fluid Theme — vibrant mesh, neon glows, deep blacks
317
351
  ═══════════════════════════════════════════════════════ */
318
352
  [data-theme='fluid'] {
319
- --org-bg-void: #0b0c10;
320
- --org-bg-surface: #161618;
321
- --org-bg-elevated: #1a1a1c;
322
-
323
- --org-text: #e5e7eb;
324
- --org-text-secondary: #9CA3AF;
325
- --org-text-muted: #6B6B76;
326
-
327
- --org-glass-bg: rgba(255, 255, 255, 0.03);
328
- --org-glass-bg-heavy: rgba(22, 22, 24, 0.90);
329
- --org-glass-surface: rgba(22, 22, 24, 0.80);
330
- --org-glass-border: rgba(255, 255, 255, 0.05);
331
- --org-glass-border-medium: rgba(255, 255, 255, 0.08);
332
- --org-glass-border-strong: rgba(255, 255, 255, 0.10);
333
- --org-glass-highlight: rgba(255, 255, 255, 0.05);
334
- --org-border: rgba(255, 255, 255, 0.05);
335
-
336
- --org-card-bg: #161618;
337
- --org-card-surface: #1a1a1c;
338
-
339
- --org-subtle-5: rgba(255, 255, 255, 0.03);
340
- --org-subtle-10: rgba(255, 255, 255, 0.06);
341
- --org-subtle-20: rgba(255, 255, 255, 0.10);
342
-
343
- --org-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.60);
344
- --org-shadow-glass-sm: 0 4px 24px rgba(0, 0, 0, 0.40);
345
- --org-shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, 0.70);
353
+ --org-bg-void: #0D0A1A;
354
+ --org-bg-surface: #1A1530;
355
+ --org-bg-elevated: #211B3A;
356
+
357
+ --org-text: #F0ECF9;
358
+ --org-text-secondary: #C4BDD9;
359
+ --org-text-muted: #7B7394;
360
+
361
+ --org-glass-bg: rgba(124, 58, 237, 0.05);
362
+ --org-glass-bg-heavy: rgba(17, 14, 34, 0.90);
363
+ --org-glass-surface: rgba(17, 14, 34, 0.80);
364
+ --org-glass-border: rgba(167, 139, 250, 0.08);
365
+ --org-glass-border-medium: rgba(167, 139, 250, 0.12);
366
+ --org-glass-border-strong: rgba(167, 139, 250, 0.18);
367
+ --org-glass-highlight: rgba(167, 139, 250, 0.06);
368
+ --org-border: rgba(167, 139, 250, 0.08);
369
+
370
+ --org-card-bg: #1A1530;
371
+ --org-card-surface: #211B3A;
372
+
373
+ --org-subtle-5: rgba(124, 58, 237, 0.04);
374
+ --org-subtle-10: rgba(124, 58, 237, 0.08);
375
+ --org-subtle-20: rgba(124, 58, 237, 0.14);
376
+
377
+ --org-shadow-glass: 0 8px 32px rgba(13, 10, 26, 0.60);
378
+ --org-shadow-glass-sm: 0 4px 24px rgba(13, 10, 26, 0.40);
379
+ --org-shadow-glass-lg: 0 12px 48px rgba(13, 10, 26, 0.70);
380
+
381
+ color-scheme: dark;
382
+ color: #F0ECF9;
383
+ background-color: #0D0A1A;
384
+ }
385
+
386
+ /* ═══════════════════════════════════════════════════════
387
+ Liquid Glass Theme — violet-tinted glassmorphism,
388
+ refraction effects, grain texture, purple glow
389
+ ═══════════════════════════════════════════════════════ */
390
+ [data-theme='liquid'] {
391
+ --org-primary: #7C3AED;
392
+ --org-primary-light: #A78BFA;
393
+ --org-primary-soft: rgba(124, 58, 237, 0.20);
394
+ --org-primary-glow: #8B5CF6;
395
+
396
+ --org-bg-void: #0D0A1A;
397
+ --org-bg-surface: #110E22;
398
+ --org-bg-elevated: #1A1530;
399
+
400
+ --org-text: #F0ECF9;
401
+ --org-text-secondary: #C4BDD9;
402
+ --org-text-muted: #7B7394;
403
+
404
+ --org-glass-bg: rgba(124, 58, 237, 0.06);
405
+ --org-glass-bg-heavy: rgba(124, 58, 237, 0.12);
406
+ --org-glass-surface: rgba(255, 255, 255, 0.05);
407
+ --org-glass-border: rgba(167, 139, 250, 0.15);
408
+ --org-glass-border-medium: rgba(167, 139, 250, 0.25);
409
+ --org-glass-border-strong: rgba(167, 139, 250, 0.40);
410
+ --org-glass-highlight: rgba(255, 255, 255, 0.06);
411
+ --org-border: rgba(167, 139, 250, 0.15);
412
+
413
+ --org-card-bg: #13102A;
414
+ --org-card-surface: #1A1530;
415
+
416
+ --org-subtle-5: rgba(124, 58, 237, 0.04);
417
+ --org-subtle-10: rgba(124, 58, 237, 0.08);
418
+ --org-subtle-20: rgba(124, 58, 237, 0.14);
419
+
420
+ --org-shadow-glass: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
421
+ --org-shadow-glass-sm: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
422
+ --org-shadow-glass-lg: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
346
423
 
347
424
  color-scheme: dark;
348
- color: #e5e7eb;
349
- background-color: #0b0c10;
425
+ color: #F0ECF9;
426
+ background-color: #0D0A1A;
350
427
  }
351
428
 
352
429
  /* ═══════════════════════════════════════════════════════
@@ -388,7 +465,7 @@
388
465
 
389
466
  /* Focus */
390
467
  .focus\:border-primary:focus { border-color: var(--org-primary-light); }
391
- .focus\:ring-primary:focus { box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.20); }
468
+ .focus\:ring-primary:focus { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.20); }
392
469
 
393
470
  /* Divider */
394
471
  .divide-theme > * + * { border-color: var(--org-glass-border); }
@@ -407,7 +484,7 @@ body {
407
484
  margin: 0;
408
485
  background-color: var(--org-bg-void);
409
486
  color: var(--org-text);
410
- font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
487
+ font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
411
488
  -webkit-font-smoothing: antialiased;
412
489
  -moz-osx-font-smoothing: grayscale;
413
490
  }
@@ -526,26 +603,26 @@ input, textarea, select, button {
526
603
  Background Patterns
527
604
  ═══════════════════════════════════════════════════════ */
528
605
  .bg-dark-mesh {
529
- background-color: #191919;
606
+ background-color: #0D0A1A;
530
607
  background-image:
531
- radial-gradient(circle at 80% 10%, rgba(36, 25, 121, 0.15) 0%, transparent 40%),
532
- radial-gradient(circle at 20% 80%, rgba(60, 20, 100, 0.08) 0%, transparent 40%);
608
+ radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.20) 0%, transparent 60%),
609
+ radial-gradient(ellipse 60% 40% at 80% 80%, rgba(168, 85, 247, 0.10) 0%, transparent 50%);
533
610
  }
534
611
 
535
612
  .bg-cream-mesh {
536
- background-color: #F9F9F7;
613
+ background-color: #F8F6FC;
537
614
  background-image:
538
- radial-gradient(circle at 15% 15%, rgba(36, 25, 121, 0.04) 0%, transparent 40%),
539
- radial-gradient(circle at 85% 85%, rgba(60, 20, 100, 0.03) 0%, transparent 40%);
615
+ radial-gradient(circle at 15% 15%, rgba(124, 58, 237, 0.06) 0%, transparent 40%),
616
+ radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.04) 0%, transparent 40%);
540
617
  }
541
618
 
542
619
  .bg-fluid-mesh {
543
- background-color: #0b0c10;
620
+ background-color: #0D0A1A;
544
621
  background-image:
545
- radial-gradient(at 0% 0%, #241979 0px, transparent 50%),
546
- radial-gradient(at 100% 0%, #4F39F6 0px, transparent 50%),
547
- radial-gradient(at 100% 100%, #241979 0px, transparent 50%),
548
- radial-gradient(at 0% 100%, #110c3b 0px, transparent 50%);
622
+ radial-gradient(at 0% 0%, #4C1D95 0px, transparent 50%),
623
+ radial-gradient(at 100% 0%, #7C3AED 0px, transparent 50%),
624
+ radial-gradient(at 100% 100%, #6D28D9 0px, transparent 50%),
625
+ radial-gradient(at 0% 100%, #3B0764 0px, transparent 50%);
549
626
  }
550
627
 
551
628
  .grid-overlay {
@@ -563,20 +640,51 @@ input, textarea, select, button {
563
640
  }
564
641
 
565
642
  .organic-grid {
566
- background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
643
+ background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
567
644
  background-size: 40px 40px;
568
645
  }
569
646
 
647
+ /* Tactile row — interactive list item */
648
+ .tactile-row {
649
+ display: flex;
650
+ align-items: center;
651
+ gap: 1rem;
652
+ padding: 0.75rem 1rem;
653
+ border-radius: 1rem;
654
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
655
+ cursor: pointer;
656
+ }
657
+
658
+ .tactile-row:hover {
659
+ background: rgba(255, 255, 255, 0.04);
660
+ }
661
+
662
+ .tactile-row:active {
663
+ background: rgba(255, 255, 255, 0.06);
664
+ transform: scale(0.99);
665
+ }
666
+
667
+ /* Glow mesh — ambient background gradient */
668
+ .glow-mesh {
669
+ position: fixed;
670
+ inset: 0;
671
+ z-index: -1;
672
+ pointer-events: none;
673
+ background:
674
+ radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.20), transparent),
675
+ radial-gradient(ellipse 60% 40% at 80% 80%, rgba(168, 85, 247, 0.10), transparent);
676
+ }
677
+
570
678
  .vibrant-mesh {
571
679
  background-image:
572
- radial-gradient(at 0% 0%, #241979 0px, transparent 50%),
573
- radial-gradient(at 100% 0%, #4F39F6 0px, transparent 50%),
574
- radial-gradient(at 100% 100%, #241979 0px, transparent 50%),
575
- radial-gradient(at 0% 100%, #110c3b 0px, transparent 50%);
680
+ radial-gradient(at 0% 0%, #4C1D95 0px, transparent 50%),
681
+ radial-gradient(at 100% 0%, #7C3AED 0px, transparent 50%),
682
+ radial-gradient(at 100% 100%, #6D28D9 0px, transparent 50%),
683
+ radial-gradient(at 0% 100%, #3B0764 0px, transparent 50%);
576
684
  }
577
685
 
578
686
  .glow-gradient {
579
- background-image: radial-gradient(circle at 50% -20%, #4F39F6 15%, rgba(36, 25, 121, 0.8) 45%, #191919 90%);
687
+ background-image: radial-gradient(circle at 50% -20%, #7C3AED 15%, rgba(124, 58, 237, 0.6) 45%, #0D0A1A 90%);
580
688
  }
581
689
 
582
690
  /* ═══════════════════════════════════════════════════════
@@ -592,13 +700,13 @@ input, textarea, select, button {
592
700
  }
593
701
 
594
702
  .glow-orb-primary {
595
- background: #4F39F6;
703
+ background: #7C3AED;
596
704
  width: 300px;
597
705
  height: 300px;
598
706
  }
599
707
 
600
708
  .glow-orb-secondary {
601
- background: #241979;
709
+ background: #A855F7;
602
710
  width: 200px;
603
711
  height: 200px;
604
712
  }
@@ -621,62 +729,63 @@ input, textarea, select, button {
621
729
  }
622
730
 
623
731
  /* ═══════════════════════════════════════════════════════
624
- Glass Panels — Organic Design System
625
- blur(40px) saturate(180%), organic border-radius 2.5rem
732
+ Glass Panels — White Transparency on Ultra-Dark
733
+ backdrop-blur(40px), white/[0.03], border-white/20
626
734
  ═══════════════════════════════════════════════════════ */
627
735
  .glass-panel {
628
- background: var(--org-glass-bg-heavy);
736
+ background: rgba(124, 58, 237, 0.06);
629
737
  backdrop-filter: blur(40px) saturate(180%);
630
738
  -webkit-backdrop-filter: blur(40px) saturate(180%);
631
- border: 1px solid var(--org-glass-border);
632
- border-radius: 2.5rem;
633
- box-shadow: var(--org-shadow-glass);
739
+ border: 1px solid rgba(167, 139, 250, 0.15);
740
+ border-radius: 2rem;
741
+ box-shadow: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
634
742
  }
635
743
 
636
744
  .glass-panel-alt {
637
- background: var(--org-glass-surface);
745
+ background: rgba(124, 58, 237, 0.08);
638
746
  backdrop-filter: blur(32px) saturate(160%);
639
747
  -webkit-backdrop-filter: blur(32px) saturate(160%);
640
- border: 1px solid var(--org-glass-border-medium);
641
- border-radius: 2rem;
642
- box-shadow: var(--org-shadow-glass-sm);
748
+ border: 1px solid rgba(167, 139, 250, 0.12);
749
+ border-radius: 1.5rem;
750
+ box-shadow: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
643
751
  }
644
752
 
645
753
  .glass-panel-highlight {
646
- background: var(--org-glass-highlight);
754
+ background: rgba(124, 58, 237, 0.10);
647
755
  backdrop-filter: blur(40px) saturate(180%);
648
756
  -webkit-backdrop-filter: blur(40px) saturate(180%);
649
- border: 1px solid var(--org-glass-border-strong);
650
- border-radius: 2.5rem;
651
- box-shadow: var(--org-shadow-glass);
757
+ border: 1px solid rgba(167, 139, 250, 0.20);
758
+ border-radius: 2rem;
759
+ box-shadow: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
652
760
  }
653
761
 
654
762
  .glass-card {
655
- background: var(--org-glass-bg);
656
- backdrop-filter: blur(24px) saturate(150%);
657
- -webkit-backdrop-filter: blur(24px) saturate(150%);
658
- border: 1px solid var(--org-glass-border);
659
- border-radius: 2rem;
660
- transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
763
+ background: rgba(124, 58, 237, 0.05);
764
+ backdrop-filter: blur(24px) saturate(160%);
765
+ -webkit-backdrop-filter: blur(24px) saturate(160%);
766
+ border: 1px solid rgba(167, 139, 250, 0.12);
767
+ border-radius: 1.5rem;
768
+ transition: all 500ms cubic-bezier(0.25, 1, 0.5, 1);
661
769
  }
662
770
 
663
771
  .glass-card:hover {
664
- border-color: var(--org-glass-border-strong);
665
- box-shadow: var(--org-shadow-glass);
772
+ background: rgba(124, 58, 237, 0.10);
773
+ border-color: rgba(167, 139, 250, 0.25);
774
+ box-shadow: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
666
775
  transform: translateY(-2px);
667
776
  }
668
777
 
669
778
  /* ═══════════════════════════════════════════════════════
670
- Glass Buttons — squircle radius, organic easing
779
+ Glass Buttons — rounded-2xl, white transparency
671
780
  ═══════════════════════════════════════════════════════ */
672
781
  .glass-button {
673
- background: var(--org-glass-highlight);
782
+ background: rgba(124, 58, 237, 0.08);
674
783
  backdrop-filter: blur(16px);
675
784
  -webkit-backdrop-filter: blur(16px);
676
- border: 1px solid var(--org-glass-border-medium);
677
- color: var(--org-text);
785
+ border: 1px solid rgba(167, 139, 250, 0.15);
786
+ color: #F0ECF9;
678
787
  padding: 0.625rem 1.25rem;
679
- border-radius: 1.25rem;
788
+ border-radius: 9999px;
680
789
  font-size: 0.8125rem;
681
790
  font-weight: 500;
682
791
  cursor: pointer;
@@ -684,14 +793,13 @@ input, textarea, select, button {
684
793
  align-items: center;
685
794
  justify-content: center;
686
795
  gap: 0.5rem;
687
- transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
796
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
688
797
  text-decoration: none;
689
798
  }
690
799
 
691
800
  .glass-button:hover {
692
- background: var(--org-glass-border-medium);
693
- border-color: var(--org-glass-border-strong);
694
- box-shadow: var(--org-shadow-glass-sm);
801
+ background: rgba(255, 255, 255, 0.10);
802
+ border-color: rgba(255, 255, 255, 0.30);
695
803
  }
696
804
 
697
805
  .glass-button:active {
@@ -699,38 +807,61 @@ input, textarea, select, button {
699
807
  }
700
808
 
701
809
  .glass-btn-primary {
702
- background: linear-gradient(135deg, #4F39F6, #241979);
703
- border: 1px solid rgba(79, 57, 246, 0.40);
704
- color: white;
810
+ background: rgba(255, 255, 255, 0.95);
811
+ backdrop-filter: blur(12px);
812
+ -webkit-backdrop-filter: blur(12px);
813
+ border: 1px solid rgba(255, 255, 255, 0.80);
814
+ color: #1A1530;
705
815
  padding: 0.625rem 1.25rem;
706
- border-radius: 1.25rem;
816
+ border-radius: 9999px;
707
817
  font-size: 0.8125rem;
708
- font-weight: 500;
818
+ font-weight: 600;
709
819
  cursor: pointer;
710
820
  display: inline-flex;
711
821
  align-items: center;
712
822
  justify-content: center;
713
823
  gap: 0.5rem;
714
- transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
715
- box-shadow: 0 0 20px rgba(79, 57, 246, 0.30);
824
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
716
825
  }
717
826
 
718
827
  .glass-btn-primary:hover {
719
- background: linear-gradient(135deg, #5b42f2, #2d1f99);
720
- box-shadow: 0 0 30px rgba(79, 57, 246, 0.45);
721
- transform: translateY(-1px);
828
+ background: rgba(255, 255, 255, 1);
829
+ border-color: rgba(255, 255, 255, 0.90);
830
+ box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
722
831
  }
723
832
 
724
833
  .glass-btn-primary:active {
725
- transform: translateY(0) scale(0.98);
834
+ transform: scale(0.98);
835
+ }
836
+
837
+ .glass-btn-secondary {
838
+ background: transparent;
839
+ border: 1px solid rgba(167, 139, 250, 0.15);
840
+ color: #C4BDD9;
841
+ padding: 0.625rem 1.25rem;
842
+ border-radius: 9999px;
843
+ font-size: 0.8125rem;
844
+ font-weight: 500;
845
+ cursor: pointer;
846
+ display: inline-flex;
847
+ align-items: center;
848
+ justify-content: center;
849
+ gap: 0.5rem;
850
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
851
+ }
852
+
853
+ .glass-btn-secondary:hover {
854
+ color: #F0ECF9;
855
+ border-color: rgba(167, 139, 250, 0.35);
856
+ background: rgba(124, 58, 237, 0.08);
726
857
  }
727
858
 
728
859
  .glass-btn-outline {
729
860
  background: transparent;
730
- border: 1px solid var(--org-glass-border-strong);
731
- color: var(--org-text-secondary);
861
+ border: 1px solid rgba(167, 139, 250, 0.15);
862
+ color: #C4BDD9;
732
863
  padding: 0.625rem 1.25rem;
733
- border-radius: 1.25rem;
864
+ border-radius: 9999px;
734
865
  font-size: 0.8125rem;
735
866
  font-weight: 500;
736
867
  cursor: pointer;
@@ -738,80 +869,80 @@ input, textarea, select, button {
738
869
  align-items: center;
739
870
  justify-content: center;
740
871
  gap: 0.5rem;
741
- transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
872
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
742
873
  }
743
874
 
744
875
  .glass-btn-outline:hover {
745
- border-color: var(--org-primary-light);
746
- background: var(--org-glass-highlight);
747
- color: var(--org-text);
876
+ border-color: rgba(167, 139, 250, 0.35);
877
+ background: rgba(124, 58, 237, 0.08);
878
+ color: #F0ECF9;
748
879
  }
749
880
 
750
881
  .glass-btn-sm {
751
882
  padding: 0.375rem 0.75rem;
752
883
  font-size: 0.75rem;
753
- border-radius: 1rem;
884
+ border-radius: 0.75rem;
754
885
  }
755
886
 
756
887
  .glass-btn-lg {
757
888
  padding: 0.875rem 2rem;
758
889
  font-size: 0.9375rem;
759
- border-radius: 1.5rem;
890
+ border-radius: 1.25rem;
760
891
  }
761
892
 
762
893
  /* ═══════════════════════════════════════════════════════
763
- Glass Inputs — squircle radius, focus glow
894
+ Glass Inputs — rounded-xl, white transparency, focus glow
764
895
  ═══════════════════════════════════════════════════════ */
765
896
  .glass-input,
766
897
  .input-glass {
767
- background: var(--org-glass-highlight);
898
+ background: rgba(124, 58, 237, 0.06);
768
899
  backdrop-filter: blur(16px);
769
900
  -webkit-backdrop-filter: blur(16px);
770
- border: 1px solid var(--org-glass-border);
771
- border-radius: 1.25rem;
901
+ border: 1px solid rgba(167, 139, 250, 0.12);
902
+ border-radius: 9999px;
772
903
  padding: 0.75rem 1rem;
773
904
  font-size: 0.875rem;
774
- font-weight: 300;
775
- color: var(--org-text);
905
+ font-weight: 400;
906
+ color: #F0ECF9;
776
907
  outline: none;
777
908
  width: 100%;
778
- transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
909
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
779
910
  }
780
911
 
781
912
  .glass-input::placeholder,
782
913
  .input-glass::placeholder {
783
- color: var(--org-text-muted);
784
- font-weight: 300;
914
+ color: #7B7394;
915
+ font-weight: 400;
785
916
  }
786
917
 
787
918
  .glass-input:focus,
788
919
  .input-glass:focus {
789
- border-color: rgba(79, 57, 246, 0.50);
790
- background: var(--org-glass-border-medium);
791
- box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.10), 0 0 20px rgba(79, 57, 246, 0.08);
920
+ border-color: rgba(124, 58, 237, 0.50);
921
+ background: rgba(124, 58, 237, 0.10);
922
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 0 20px rgba(124, 58, 237, 0.10);
792
923
  }
793
924
 
794
925
  .glass-textarea {
795
- background: var(--org-glass-highlight);
926
+ background: rgba(124, 58, 237, 0.06);
796
927
  backdrop-filter: blur(16px);
797
928
  -webkit-backdrop-filter: blur(16px);
798
- border: 1px solid var(--org-glass-border);
799
- border-radius: 1.25rem;
929
+ border: 1px solid rgba(167, 139, 250, 0.12);
930
+ border-radius: 1rem;
800
931
  padding: 0.75rem 1rem;
801
932
  font-size: 0.875rem;
802
- font-weight: 300;
803
- color: var(--org-text);
933
+ font-weight: 400;
934
+ color: #F0ECF9;
804
935
  outline: none;
805
936
  width: 100%;
806
937
  min-height: 100px;
807
938
  resize: vertical;
808
- transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
939
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
809
940
  }
810
941
 
811
942
  .glass-textarea:focus {
812
- border-color: rgba(79, 57, 246, 0.50);
813
- background: var(--org-glass-border-medium);
814
- box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.10);
943
+ border-color: rgba(124, 58, 237, 0.50);
944
+ background: rgba(124, 58, 237, 0.10);
945
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
815
946
  }
816
947
 
817
948
  /* ═══════════════════════════════════════════════════════
@@ -844,9 +975,9 @@ input, textarea, select, button {
844
975
  }
845
976
 
846
977
  .glass-pill-error {
847
- background: rgba(224, 17, 95, 0.12);
848
- border-color: rgba(224, 17, 95, 0.25);
849
- color: #F43F5E;
978
+ background: rgba(239, 68, 68, 0.12);
979
+ border-color: rgba(239, 68, 68, 0.25);
980
+ color: #F87171;
850
981
  }
851
982
 
852
983
  .glass-pill-info {
@@ -856,8 +987,8 @@ input, textarea, select, button {
856
987
  }
857
988
 
858
989
  .glass-pill-primary {
859
- background: rgba(79, 57, 246, 0.15);
860
- border-color: rgba(79, 57, 246, 0.30);
990
+ background: rgba(124, 58, 237, 0.15);
991
+ border-color: rgba(124, 58, 237, 0.30);
861
992
  color: #A78BFA;
862
993
  }
863
994
 
@@ -873,11 +1004,11 @@ input, textarea, select, button {
873
1004
  }
874
1005
 
875
1006
  .alert-error {
876
- background: rgba(224, 17, 95, 0.08);
877
- border: 1px solid rgba(224, 17, 95, 0.25);
1007
+ background: rgba(239, 68, 68, 0.08);
1008
+ border: 1px solid rgba(239, 68, 68, 0.25);
878
1009
  border-radius: 1.25rem;
879
1010
  padding: 1rem 1.25rem;
880
- box-shadow: 0 0 20px rgba(224, 17, 95, 0.10);
1011
+ box-shadow: 0 0 20px rgba(239, 68, 68, 0.10);
881
1012
  }
882
1013
 
883
1014
  .alert-warning {
@@ -897,7 +1028,7 @@ input, textarea, select, button {
897
1028
  }
898
1029
 
899
1030
  .alert-glow-success { box-shadow: 0 0 25px rgba(16, 185, 129, 0.15); }
900
- .alert-glow-error { box-shadow: 0 0 25px rgba(224, 17, 95, 0.15); }
1031
+ .alert-glow-error { box-shadow: 0 0 25px rgba(239, 68, 68, 0.15); }
901
1032
  .alert-glow-warning { box-shadow: 0 0 25px rgba(245, 158, 11, 0.15); }
902
1033
  .alert-glow-info { box-shadow: 0 0 25px rgba(59, 130, 246, 0.15); }
903
1034
 
@@ -905,20 +1036,20 @@ input, textarea, select, button {
905
1036
  Toasts — Floating notifications
906
1037
  ═══════════════════════════════════════════════════════ */
907
1038
  .toast {
908
- background: var(--org-glass-bg-heavy);
909
- backdrop-filter: blur(40px) saturate(180%);
910
- -webkit-backdrop-filter: blur(40px) saturate(180%);
911
- border: 1px solid var(--org-glass-border);
912
- border-radius: 1.25rem;
913
- padding: 0.875rem 1.25rem;
914
- box-shadow: var(--org-shadow-glass);
1039
+ background: rgba(255, 255, 255, 0.03);
1040
+ backdrop-filter: blur(40px);
1041
+ -webkit-backdrop-filter: blur(40px);
1042
+ border: 1px solid rgba(255, 255, 255, 0.20);
1043
+ border-radius: 1.5rem;
1044
+ padding: 1rem 1.25rem;
1045
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
915
1046
  animation: slide-up 0.4s cubic-bezier(0.25, 1, 0.5, 1);
916
1047
  }
917
1048
 
918
- .toast-success { border-left: 3px solid #10B981; }
919
- .toast-error { border-left: 3px solid #E0115F; }
920
- .toast-warning { border-left: 3px solid #F59E0B; }
921
- .toast-info { border-left: 3px solid #3B82F6; }
1049
+ .toast-success { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(16, 185, 129, 0.05); }
1050
+ .toast-error { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(239, 68, 68, 0.05); }
1051
+ .toast-warning { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(245, 158, 11, 0.05); }
1052
+ .toast-info { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(59, 130, 246, 0.05); }
922
1053
 
923
1054
  /* ═══════════════════════════════════════════════════════
924
1055
  Skeleton Loader
@@ -968,8 +1099,8 @@ input, textarea, select, button {
968
1099
  .progress-fill {
969
1100
  height: 100%;
970
1101
  border-radius: 9999px;
971
- background: linear-gradient(90deg, #4F39F6, #241979);
972
- box-shadow: 0 0 10px rgba(79, 57, 246, 0.40);
1102
+ background: linear-gradient(90deg, #7C3AED, #A78BFA);
1103
+ box-shadow: 0 0 10px rgba(124, 58, 237, 0.40);
973
1104
  transition: width 500ms cubic-bezier(0.25, 1, 0.5, 1);
974
1105
  }
975
1106
 
@@ -984,47 +1115,47 @@ input, textarea, select, button {
984
1115
  }
985
1116
 
986
1117
  .progress-fill-error {
987
- background: linear-gradient(90deg, #E0115F, #F43F5E);
988
- box-shadow: 0 0 10px rgba(224, 17, 95, 0.30);
1118
+ background: linear-gradient(90deg, #EF4444, #F87171);
1119
+ box-shadow: 0 0 10px rgba(239, 68, 68, 0.30);
989
1120
  }
990
1121
 
991
1122
  /* ═══════════════════════════════════════════════════════
992
1123
  Glows & Shadows
993
1124
  ═══════════════════════════════════════════════════════ */
994
- .shadow-glow { box-shadow: 0 0 20px rgba(79, 57, 246, 0.40); }
995
- .shadow-glow-primary { box-shadow: 0 0 20px rgba(79, 57, 246, 0.30), 0 4px 12px rgba(79, 57, 246, 0.20); }
996
- .shadow-glow-error { box-shadow: 0 0 20px rgba(224, 17, 95, 0.30), 0 4px 12px rgba(224, 17, 95, 0.20); }
997
- .shadow-glow-soft { box-shadow: 0 4px 30px rgba(79, 57, 246, 0.15); }
998
- .shadow-neon { box-shadow: 0 0 10px rgba(79, 57, 246, 0.40), 0 0 20px rgba(79, 57, 246, 0.20); }
999
- .shadow-neon-glow { box-shadow: 0 0 30px rgba(79, 57, 246, 0.40), 0 0 60px rgba(79, 57, 246, 0.20); }
1125
+ .shadow-glow { box-shadow: 0 0 20px rgba(124, 58, 237, 0.40); }
1126
+ .shadow-glow-primary { box-shadow: 0 0 20px rgba(124, 58, 237, 0.35), 0 4px 12px rgba(124, 58, 237, 0.20); }
1127
+ .shadow-glow-error { box-shadow: 0 0 20px rgba(239, 68, 68, 0.30), 0 4px 12px rgba(239, 68, 68, 0.20); }
1128
+ .shadow-glow-soft { box-shadow: 0 4px 30px rgba(124, 58, 237, 0.18); }
1129
+ .shadow-neon { box-shadow: 0 0 10px rgba(124, 58, 237, 0.40), 0 0 20px rgba(124, 58, 237, 0.20); }
1130
+ .shadow-neon-glow { box-shadow: 0 0 30px rgba(124, 58, 237, 0.45), 0 0 60px rgba(124, 58, 237, 0.20); }
1000
1131
 
1001
1132
  .shadow-glass-lg {
1002
- box-shadow: 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
1133
+ box-shadow: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
1003
1134
  }
1004
1135
 
1005
1136
  .shadow-glass-xl {
1006
- box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.40);
1137
+ box-shadow: 0 40px 120px -20px rgba(13, 10, 26, 0.80);
1007
1138
  }
1008
1139
 
1009
1140
  .shadow-inner-light {
1010
- box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
1141
+ box-shadow: inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
1011
1142
  }
1012
1143
 
1013
1144
  /* ═══════════════════════════════════════════════════════
1014
1145
  Text Effects
1015
1146
  ═══════════════════════════════════════════════════════ */
1016
- .text-glow { text-shadow: 0 0 15px rgba(79, 57, 246, 0.60); }
1017
- .text-glow-sm { text-shadow: 0 0 8px rgba(79, 57, 246, 0.40); }
1147
+ .text-glow { text-shadow: 0 0 15px rgba(124, 58, 237, 0.60); }
1148
+ .text-glow-sm { text-shadow: 0 0 8px rgba(124, 58, 237, 0.40); }
1018
1149
 
1019
1150
  .text-gradient {
1020
- background: linear-gradient(to right, #4F39F6, #241979);
1151
+ background: linear-gradient(to right, #7C3AED, #A78BFA);
1021
1152
  -webkit-background-clip: text;
1022
1153
  -webkit-text-fill-color: transparent;
1023
1154
  background-clip: text;
1024
1155
  }
1025
1156
 
1026
1157
  .text-gradient-brand {
1027
- background: linear-gradient(135deg, #4F39F6 0%, #A78BFA 100%);
1158
+ background: linear-gradient(135deg, #7C3AED 0%, #C4B5FD 100%);
1028
1159
  -webkit-background-clip: text;
1029
1160
  -webkit-text-fill-color: transparent;
1030
1161
  background-clip: text;
@@ -1056,12 +1187,12 @@ input, textarea, select, button {
1056
1187
  align-items: center;
1057
1188
  gap: 0.25rem;
1058
1189
  padding: 0.5rem 0.75rem;
1059
- background: linear-gradient(145deg, rgba(31, 31, 33, 0.92), rgba(31, 31, 33, 0.80));
1060
- backdrop-filter: blur(40px) saturate(180%);
1061
- -webkit-backdrop-filter: blur(40px) saturate(180%);
1062
- border: 1px solid rgba(255, 255, 255, 0.03);
1190
+ background: rgba(255, 255, 255, 0.03);
1191
+ backdrop-filter: blur(40px);
1192
+ -webkit-backdrop-filter: blur(40px);
1193
+ border: 1px solid rgba(255, 255, 255, 0.15);
1063
1194
  border-radius: 9999px;
1064
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50);
1195
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
1065
1196
  z-index: 50;
1066
1197
  }
1067
1198
 
@@ -1085,9 +1216,9 @@ input, textarea, select, button {
1085
1216
  }
1086
1217
 
1087
1218
  .dock-btn.active {
1088
- background: rgba(79, 57, 246, 0.20);
1219
+ background: rgba(124, 58, 237, 0.20);
1089
1220
  color: #A78BFA;
1090
- box-shadow: 0 0 12px rgba(79, 57, 246, 0.25);
1221
+ box-shadow: 0 0 12px rgba(124, 58, 237, 0.25);
1091
1222
  }
1092
1223
 
1093
1224
  /* ═══════════════════════════════════════════════════════
@@ -1099,8 +1230,8 @@ input, textarea, select, button {
1099
1230
  justify-content: center;
1100
1231
  border-radius: 9999px;
1101
1232
  overflow: hidden;
1102
- background: linear-gradient(135deg, rgba(79, 57, 246, 0.20), rgba(79, 57, 246, 0.10));
1103
- border: 2px solid rgba(255, 255, 255, 0.08);
1233
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(124, 58, 237, 0.10));
1234
+ border: 2px solid rgba(167, 139, 250, 0.10);
1104
1235
  flex-shrink: 0;
1105
1236
  }
1106
1237
 
@@ -1116,18 +1247,18 @@ input, textarea, select, button {
1116
1247
  Metric Card — Organic glass
1117
1248
  ═══════════════════════════════════════════════════════ */
1118
1249
  .metric-card {
1119
- background: var(--org-glass-bg-heavy);
1120
- backdrop-filter: blur(40px) saturate(180%);
1121
- -webkit-backdrop-filter: blur(40px) saturate(180%);
1122
- border: 1px solid var(--org-glass-border);
1123
- border-radius: 2.5rem;
1250
+ background: rgba(255, 255, 255, 0.03);
1251
+ backdrop-filter: blur(40px);
1252
+ -webkit-backdrop-filter: blur(40px);
1253
+ border: 1px solid rgba(255, 255, 255, 0.10);
1254
+ border-radius: 2rem;
1124
1255
  padding: 1.5rem;
1125
- transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
1256
+ transition: all 500ms cubic-bezier(0.25, 1, 0.5, 1);
1126
1257
  }
1127
1258
 
1128
1259
  .metric-card:hover {
1129
- border-color: var(--org-glass-border-medium);
1130
- box-shadow: var(--org-shadow-glass);
1260
+ border-color: rgba(255, 255, 255, 0.20);
1261
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
1131
1262
  }
1132
1263
 
1133
1264
  /* ═══════════════════════════════════════════════════════
@@ -1143,13 +1274,13 @@ input, textarea, select, button {
1143
1274
  .mini-chart-bar {
1144
1275
  flex: 1;
1145
1276
  border-radius: 2px 2px 0 0;
1146
- background: rgba(79, 57, 246, 0.40);
1277
+ background: rgba(124, 58, 237, 0.40);
1147
1278
  transition: height 500ms cubic-bezier(0.25, 1, 0.5, 1);
1148
1279
  min-width: 4px;
1149
1280
  }
1150
1281
 
1151
1282
  .mini-chart-bar:hover {
1152
- background: rgba(79, 57, 246, 0.70);
1283
+ background: rgba(124, 58, 237, 0.70);
1153
1284
  }
1154
1285
 
1155
1286
  /* ═══════════════════════════════════════════════════════
@@ -1196,29 +1327,29 @@ input, textarea, select, button {
1196
1327
  [data-theme='light'] .glass-panel,
1197
1328
  .theme-cream .glass-panel {
1198
1329
  background: rgba(255, 255, 255, 0.70);
1199
- border-color: rgba(36, 25, 121, 0.03);
1200
- box-shadow: 0 4px 24px rgba(36, 25, 121, 0.04);
1330
+ border-color: rgba(124, 58, 237, 0.06);
1331
+ box-shadow: 0 4px 24px rgba(124, 58, 237, 0.06);
1201
1332
  backdrop-filter: blur(40px) saturate(180%);
1202
1333
  }
1203
1334
 
1204
1335
  [data-theme='light'] .glass-panel-alt,
1205
1336
  .theme-cream .glass-panel-alt {
1206
1337
  background: rgba(255, 255, 255, 0.80);
1207
- border-color: rgba(36, 25, 121, 0.06);
1208
- box-shadow: 0 2px 12px rgba(36, 25, 121, 0.03);
1338
+ border-color: rgba(124, 58, 237, 0.08);
1339
+ box-shadow: 0 2px 12px rgba(124, 58, 237, 0.04);
1209
1340
  }
1210
1341
 
1211
1342
  [data-theme='light'] .glass-panel-highlight,
1212
1343
  .theme-cream .glass-panel-highlight {
1213
1344
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.60));
1214
- border-color: rgba(36, 25, 121, 0.06);
1215
- box-shadow: 0 4px 16px rgba(36, 25, 121, 0.03);
1345
+ border-color: rgba(124, 58, 237, 0.08);
1346
+ box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
1216
1347
  }
1217
1348
 
1218
1349
  [data-theme='light'] .glass-card,
1219
1350
  .theme-cream .glass-card {
1220
1351
  background: rgba(255, 255, 255, 0.70);
1221
- border-color: rgba(36, 25, 121, 0.03);
1352
+ border-color: rgba(124, 58, 237, 0.06);
1222
1353
  }
1223
1354
 
1224
1355
  [data-theme='light'] .glass-input,
@@ -1226,7 +1357,7 @@ input, textarea, select, button {
1226
1357
  .theme-cream .glass-input,
1227
1358
  .theme-cream .input-glass {
1228
1359
  background: rgba(255, 255, 255, 0.60);
1229
- border-color: rgba(36, 25, 121, 0.06);
1360
+ border-color: rgba(124, 58, 237, 0.08);
1230
1361
  color: #191919;
1231
1362
  }
1232
1363
 
@@ -1241,41 +1372,41 @@ input, textarea, select, button {
1241
1372
  [data-theme='light'] .input-glass:focus,
1242
1373
  .theme-cream .glass-input:focus,
1243
1374
  .theme-cream .input-glass:focus {
1244
- border-color: rgba(79, 57, 246, 0.40);
1375
+ border-color: rgba(124, 58, 237, 0.40);
1245
1376
  background: rgba(255, 255, 255, 0.80);
1246
- box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.08);
1377
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
1247
1378
  }
1248
1379
 
1249
1380
  [data-theme='light'] .glass-button,
1250
1381
  .theme-cream .glass-button {
1251
1382
  background: rgba(255, 255, 255, 0.60);
1252
- border-color: rgba(36, 25, 121, 0.06);
1383
+ border-color: rgba(124, 58, 237, 0.08);
1253
1384
  color: #191919;
1254
- box-shadow: 0 2px 8px rgba(36, 25, 121, 0.08);
1385
+ box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
1255
1386
  }
1256
1387
 
1257
1388
  [data-theme='light'] .glass-button:hover,
1258
1389
  .theme-cream .glass-button:hover {
1259
1390
  background: rgba(255, 255, 255, 0.80);
1260
- border-color: rgba(36, 25, 121, 0.10);
1261
- box-shadow: 0 4px 16px rgba(36, 25, 121, 0.10);
1391
+ border-color: rgba(124, 58, 237, 0.12);
1392
+ box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
1262
1393
  }
1263
1394
 
1264
1395
  [data-theme='light'] .glass-btn-primary,
1265
1396
  .theme-cream .glass-btn-primary {
1266
- box-shadow: 0 4px 16px rgba(36, 25, 121, 0.20);
1397
+ box-shadow: 0 4px 16px rgba(124, 58, 237, 0.20);
1267
1398
  }
1268
1399
 
1269
1400
  [data-theme='light'] .glass-btn-outline,
1270
1401
  .theme-cream .glass-btn-outline {
1271
- border-color: rgba(36, 25, 121, 0.12);
1402
+ border-color: rgba(124, 58, 237, 0.12);
1272
1403
  color: #191919;
1273
1404
  }
1274
1405
 
1275
1406
  [data-theme='light'] .glass-pill,
1276
1407
  .theme-cream .glass-pill {
1277
1408
  background: rgba(255, 255, 255, 0.60);
1278
- border-color: rgba(36, 25, 121, 0.06);
1409
+ border-color: rgba(124, 58, 237, 0.08);
1279
1410
  color: #4b5563;
1280
1411
  }
1281
1412
 
@@ -1283,28 +1414,28 @@ input, textarea, select, button {
1283
1414
  [data-theme='light'] .skeleton-shimmer,
1284
1415
  .theme-cream .skeleton,
1285
1416
  .theme-cream .skeleton-shimmer {
1286
- background: rgba(36, 25, 121, 0.03);
1417
+ background: rgba(124, 58, 237, 0.04);
1287
1418
  }
1288
1419
 
1289
1420
  [data-theme='light'] .skeleton::after,
1290
1421
  [data-theme='light'] .skeleton-shimmer::after,
1291
1422
  .theme-cream .skeleton::after,
1292
1423
  .theme-cream .skeleton-shimmer::after {
1293
- background: linear-gradient(90deg, transparent, rgba(36, 25, 121, 0.04), transparent);
1424
+ background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.05), transparent);
1294
1425
  }
1295
1426
 
1296
1427
  [data-theme='light'] .toast,
1297
1428
  .theme-cream .toast {
1298
1429
  background: rgba(255, 255, 255, 0.90);
1299
- border-color: rgba(36, 25, 121, 0.06);
1300
- box-shadow: 0 12px 40px rgba(36, 25, 121, 0.08);
1430
+ border-color: rgba(124, 58, 237, 0.08);
1431
+ box-shadow: 0 12px 40px rgba(124, 58, 237, 0.10);
1301
1432
  }
1302
1433
 
1303
1434
  [data-theme='light'] .dock-glass,
1304
1435
  .theme-cream .dock-glass {
1305
1436
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.80));
1306
- border-color: rgba(36, 25, 121, 0.06);
1307
- box-shadow: 0 12px 40px rgba(36, 25, 121, 0.08);
1437
+ border-color: rgba(124, 58, 237, 0.08);
1438
+ box-shadow: 0 12px 40px rgba(124, 58, 237, 0.10);
1308
1439
  }
1309
1440
 
1310
1441
  [data-theme='light'] .dock-btn,
@@ -1314,56 +1445,56 @@ input, textarea, select, button {
1314
1445
 
1315
1446
  [data-theme='light'] .dock-btn:hover,
1316
1447
  .theme-cream .dock-btn:hover {
1317
- background: rgba(36, 25, 121, 0.03);
1448
+ background: rgba(124, 58, 237, 0.04);
1318
1449
  color: #191919;
1319
1450
  }
1320
1451
 
1321
1452
  [data-theme='light'] .text-glow,
1322
1453
  .theme-cream .text-glow {
1323
- text-shadow: 0 0 15px rgba(79, 57, 246, 0.20);
1454
+ text-shadow: 0 0 15px rgba(124, 58, 237, 0.20);
1324
1455
  }
1325
1456
 
1326
1457
  [data-theme='light'] .text-glow-sm,
1327
1458
  .theme-cream .text-glow-sm {
1328
- text-shadow: 0 0 8px rgba(79, 57, 246, 0.12);
1459
+ text-shadow: 0 0 8px rgba(124, 58, 237, 0.12);
1329
1460
  }
1330
1461
 
1331
1462
  [data-theme='light'] .metric-card,
1332
1463
  .theme-cream .metric-card {
1333
1464
  background: rgba(255, 255, 255, 0.70);
1334
- border-color: rgba(36, 25, 121, 0.03);
1335
- box-shadow: 0 4px 24px rgba(36, 25, 121, 0.04);
1465
+ border-color: rgba(124, 58, 237, 0.06);
1466
+ box-shadow: 0 4px 24px rgba(124, 58, 237, 0.06);
1336
1467
  }
1337
1468
 
1338
1469
  [data-theme='light'] .mini-chart-bar,
1339
1470
  .theme-cream .mini-chart-bar {
1340
- background: rgba(79, 57, 246, 0.25);
1471
+ background: rgba(124, 58, 237, 0.25);
1341
1472
  }
1342
1473
 
1343
1474
  [data-theme='light'] .mini-chart-bar:hover,
1344
1475
  .theme-cream .mini-chart-bar:hover {
1345
- background: rgba(79, 57, 246, 0.50);
1476
+ background: rgba(124, 58, 237, 0.50);
1346
1477
  }
1347
1478
 
1348
1479
  [data-theme='light'] .custom-scrollbar::-webkit-scrollbar-thumb,
1349
1480
  .theme-cream .custom-scrollbar::-webkit-scrollbar-thumb {
1350
- background: rgba(36, 25, 121, 0.06);
1481
+ background: rgba(124, 58, 237, 0.06);
1351
1482
  }
1352
1483
 
1353
1484
  [data-theme='light'] .custom-scrollbar::-webkit-scrollbar-thumb:hover,
1354
1485
  .theme-cream .custom-scrollbar::-webkit-scrollbar-thumb:hover {
1355
- background: rgba(36, 25, 121, 0.10);
1486
+ background: rgba(124, 58, 237, 0.12);
1356
1487
  }
1357
1488
 
1358
1489
  [data-theme='light'] .empty-state-icon,
1359
1490
  .theme-cream .empty-state-icon {
1360
- background: rgba(36, 25, 121, 0.03);
1361
- border-color: rgba(36, 25, 121, 0.06);
1491
+ background: rgba(124, 58, 237, 0.04);
1492
+ border-color: rgba(124, 58, 237, 0.08);
1362
1493
  }
1363
1494
 
1364
1495
  [data-theme='light'] .shadow-glass-lg,
1365
1496
  .theme-cream .shadow-glass-lg {
1366
- box-shadow: 0 8px 32px rgba(36, 25, 121, 0.06);
1497
+ box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08);
1367
1498
  }
1368
1499
 
1369
1500
  /* ═══════════════════════════════════════════════════════
@@ -1383,16 +1514,16 @@ input, textarea, select, button {
1383
1514
  }
1384
1515
 
1385
1516
  [data-theme='fluid'] .glass-btn-primary {
1386
- box-shadow: 0 0 20px rgba(79, 57, 246, 0.40), 0 0 40px rgba(79, 57, 246, 0.15);
1517
+ box-shadow: 0 0 20px rgba(124, 58, 237, 0.40), 0 0 40px rgba(124, 58, 237, 0.15);
1387
1518
  }
1388
1519
 
1389
1520
  [data-theme='fluid'] .glass-btn-primary:hover {
1390
- box-shadow: 0 0 30px rgba(79, 57, 246, 0.50), 0 0 60px rgba(79, 57, 246, 0.25);
1521
+ box-shadow: 0 0 30px rgba(124, 58, 237, 0.50), 0 0 60px rgba(124, 58, 237, 0.25);
1391
1522
  }
1392
1523
 
1393
1524
  [data-theme='fluid'] .glass-input:focus,
1394
1525
  [data-theme='fluid'] .input-glass:focus {
1395
- box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.15), 0 0 20px rgba(79, 57, 246, 0.10);
1526
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 0 20px rgba(124, 58, 237, 0.10);
1396
1527
  }
1397
1528
 
1398
1529
  [data-theme='fluid'] .metric-card {
@@ -1400,6 +1531,483 @@ input, textarea, select, button {
1400
1531
  border-color: rgba(255, 255, 255, 0.05);
1401
1532
  }
1402
1533
 
1534
+ /* ═══════════════════════════════════════════════════════
1535
+ Liquid Glass Theme Overrides — matches default dark now
1536
+ with indigo/pink accent glows
1537
+ ═══════════════════════════════════════════════════════ */
1538
+ [data-theme='liquid'] .glass-panel {
1539
+ background: rgba(255, 255, 255, 0.03);
1540
+ backdrop-filter: blur(40px);
1541
+ -webkit-backdrop-filter: blur(40px);
1542
+ border: 1px solid rgba(255, 255, 255, 0.20);
1543
+ border-radius: 2rem;
1544
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
1545
+ }
1546
+
1547
+ [data-theme='liquid'] .glass-panel-alt {
1548
+ background: rgba(255, 255, 255, 0.04);
1549
+ backdrop-filter: blur(32px);
1550
+ -webkit-backdrop-filter: blur(32px);
1551
+ border: 1px solid rgba(255, 255, 255, 0.15);
1552
+ box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.40);
1553
+ }
1554
+
1555
+ [data-theme='liquid'] .glass-panel-highlight {
1556
+ background: rgba(255, 255, 255, 0.06);
1557
+ border-color: rgba(255, 255, 255, 0.25);
1558
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
1559
+ }
1560
+
1561
+ [data-theme='liquid'] .glass-card {
1562
+ background: rgba(255, 255, 255, 0.02);
1563
+ border-color: rgba(255, 255, 255, 0.10);
1564
+ }
1565
+
1566
+ [data-theme='liquid'] .glass-card:hover {
1567
+ background: rgba(255, 255, 255, 0.06);
1568
+ border-color: rgba(255, 255, 255, 0.20);
1569
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
1570
+ }
1571
+
1572
+ [data-theme='liquid'] .glass-input,
1573
+ [data-theme='liquid'] .input-glass {
1574
+ background: rgba(255, 255, 255, 0.03);
1575
+ border-color: rgba(255, 255, 255, 0.10);
1576
+ color: white;
1577
+ }
1578
+
1579
+ [data-theme='liquid'] .glass-input::placeholder,
1580
+ [data-theme='liquid'] .input-glass::placeholder {
1581
+ color: rgba(255, 255, 255, 0.40);
1582
+ }
1583
+
1584
+ [data-theme='liquid'] .glass-input:focus,
1585
+ [data-theme='liquid'] .input-glass:focus {
1586
+ border-color: rgba(124, 58, 237, 0.50);
1587
+ background: rgba(255, 255, 255, 0.06);
1588
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10), 0 0 20px rgba(124, 58, 237, 0.08);
1589
+ }
1590
+
1591
+ [data-theme='liquid'] .glass-button {
1592
+ background: rgba(255, 255, 255, 0.05);
1593
+ border-color: rgba(255, 255, 255, 0.15);
1594
+ color: white;
1595
+ }
1596
+
1597
+ [data-theme='liquid'] .glass-button:hover {
1598
+ background: rgba(255, 255, 255, 0.10);
1599
+ border-color: rgba(255, 255, 255, 0.30);
1600
+ }
1601
+
1602
+ [data-theme='liquid'] .glass-btn-primary {
1603
+ background: rgba(255, 255, 255, 0.10);
1604
+ border: 1px solid rgba(255, 255, 255, 0.20);
1605
+ }
1606
+
1607
+ [data-theme='liquid'] .glass-btn-primary:hover {
1608
+ background: rgba(255, 255, 255, 0.20);
1609
+ border-color: rgba(255, 255, 255, 0.40);
1610
+ }
1611
+
1612
+ [data-theme='liquid'] .glass-btn-outline {
1613
+ border-color: rgba(255, 255, 255, 0.15);
1614
+ color: rgba(255, 255, 255, 0.70);
1615
+ }
1616
+
1617
+ [data-theme='liquid'] .glass-btn-outline:hover {
1618
+ border-color: rgba(255, 255, 255, 0.30);
1619
+ background: rgba(255, 255, 255, 0.05);
1620
+ color: white;
1621
+ }
1622
+
1623
+ [data-theme='liquid'] .glass-pill {
1624
+ background: rgba(255, 255, 255, 0.05);
1625
+ border-color: rgba(255, 255, 255, 0.10);
1626
+ color: rgba(255, 255, 255, 0.70);
1627
+ }
1628
+
1629
+ [data-theme='liquid'] .glass-pill-primary {
1630
+ background: rgba(124, 58, 237, 0.15);
1631
+ border-color: rgba(124, 58, 237, 0.30);
1632
+ color: #A78BFA;
1633
+ }
1634
+
1635
+ [data-theme='liquid'] .toast {
1636
+ background: rgba(255, 255, 255, 0.03);
1637
+ border-color: rgba(255, 255, 255, 0.20);
1638
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
1639
+ }
1640
+
1641
+ [data-theme='liquid'] .dock-glass {
1642
+ background: rgba(255, 255, 255, 0.03);
1643
+ border-color: rgba(255, 255, 255, 0.15);
1644
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
1645
+ }
1646
+
1647
+ [data-theme='liquid'] .dock-btn {
1648
+ color: rgba(255, 255, 255, 0.50);
1649
+ }
1650
+
1651
+ [data-theme='liquid'] .dock-btn:hover {
1652
+ background: rgba(124, 58, 237, 0.10);
1653
+ color: #A78BFA;
1654
+ }
1655
+
1656
+ [data-theme='liquid'] .dock-btn.active {
1657
+ background: rgba(124, 58, 237, 0.20);
1658
+ color: #A78BFA;
1659
+ box-shadow: 0 0 12px rgba(124, 58, 237, 0.30);
1660
+ }
1661
+
1662
+ [data-theme='liquid'] .text-glow {
1663
+ text-shadow: 0 0 15px rgba(124, 58, 237, 0.60);
1664
+ }
1665
+
1666
+ [data-theme='liquid'] .text-glow-sm {
1667
+ text-shadow: 0 0 8px rgba(124, 58, 237, 0.40);
1668
+ }
1669
+
1670
+ [data-theme='liquid'] .text-gradient {
1671
+ background: linear-gradient(to right, #7C3AED, #A78BFA);
1672
+ -webkit-background-clip: text;
1673
+ -webkit-text-fill-color: transparent;
1674
+ background-clip: text;
1675
+ }
1676
+
1677
+ [data-theme='liquid'] .text-gradient-brand {
1678
+ background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
1679
+ -webkit-background-clip: text;
1680
+ -webkit-text-fill-color: transparent;
1681
+ background-clip: text;
1682
+ }
1683
+
1684
+ [data-theme='liquid'] .metric-card {
1685
+ background: rgba(255, 255, 255, 0.03);
1686
+ border-color: rgba(255, 255, 255, 0.10);
1687
+ }
1688
+
1689
+ [data-theme='liquid'] .metric-card:hover {
1690
+ border-color: rgba(255, 255, 255, 0.20);
1691
+ box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50);
1692
+ }
1693
+
1694
+ [data-theme='liquid'] .mini-chart-bar {
1695
+ background: rgba(124, 58, 237, 0.40);
1696
+ }
1697
+
1698
+ [data-theme='liquid'] .mini-chart-bar:hover {
1699
+ background: rgba(124, 58, 237, 0.70);
1700
+ }
1701
+
1702
+ [data-theme='liquid'] .progress-fill {
1703
+ background: linear-gradient(90deg, #7C3AED, #A78BFA);
1704
+ box-shadow: 0 0 12px rgba(124, 58, 237, 0.50);
1705
+ }
1706
+
1707
+ [data-theme='liquid'] .shadow-glow {
1708
+ box-shadow: 0 0 20px rgba(124, 58, 237, 0.40);
1709
+ }
1710
+
1711
+ [data-theme='liquid'] .shadow-glow-primary {
1712
+ box-shadow: 0 0 24px rgba(124, 58, 237, 0.35), 0 4px 16px rgba(124, 58, 237, 0.20);
1713
+ }
1714
+
1715
+ [data-theme='liquid'] .shadow-neon {
1716
+ box-shadow: 0 0 15px rgba(124, 58, 237, 0.50), 0 0 30px rgba(124, 58, 237, 0.25);
1717
+ }
1718
+
1719
+ [data-theme='liquid'] .shadow-neon-glow {
1720
+ box-shadow: 0 0 30px rgba(124, 58, 237, 0.50), 0 0 60px rgba(124, 58, 237, 0.25);
1721
+ }
1722
+
1723
+ [data-theme='liquid'] .skeleton,
1724
+ [data-theme='liquid'] .skeleton-shimmer {
1725
+ background: rgba(255, 255, 255, 0.04);
1726
+ }
1727
+
1728
+ [data-theme='liquid'] .skeleton::after,
1729
+ [data-theme='liquid'] .skeleton-shimmer::after {
1730
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
1731
+ }
1732
+
1733
+ [data-theme='liquid'] .custom-scrollbar::-webkit-scrollbar-thumb {
1734
+ background: rgba(255, 255, 255, 0.08);
1735
+ }
1736
+
1737
+ [data-theme='liquid'] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
1738
+ background: rgba(255, 255, 255, 0.15);
1739
+ }
1740
+
1741
+ [data-theme='liquid'] .empty-state-icon {
1742
+ background: rgba(124, 58, 237, 0.08);
1743
+ border-color: rgba(124, 58, 237, 0.15);
1744
+ color: #7C3AED;
1745
+ }
1746
+
1747
+ [data-theme='liquid'] .shadow-glass-lg {
1748
+ box-shadow: 0 32px 100px -20px rgba(0, 0, 0, 0.60);
1749
+ }
1750
+
1751
+ /* ═══════════════════════════════════════════════════════
1752
+ Liquid Glass — Utility Classes
1753
+ Refraction-like glass with violet tint, grain texture
1754
+ ═══════════════════════════════════════════════════════ */
1755
+
1756
+ /* Liquid Glass panels */
1757
+ .liquid-glass {
1758
+ background: rgba(17, 14, 34, 0.50);
1759
+ backdrop-filter: blur(40px) saturate(200%);
1760
+ -webkit-backdrop-filter: blur(40px) saturate(200%);
1761
+ border: 1px solid rgba(139, 92, 246, 0.08);
1762
+ border-radius: 2rem;
1763
+ box-shadow: 0 8px 32px rgba(13, 10, 26, 0.60), inset 0 1px 0 0 rgba(167, 139, 250, 0.06);
1764
+ }
1765
+
1766
+ .liquid-glass-heavy {
1767
+ background: rgba(17, 14, 34, 0.85);
1768
+ backdrop-filter: blur(48px) saturate(200%);
1769
+ -webkit-backdrop-filter: blur(48px) saturate(200%);
1770
+ border: 1px solid rgba(139, 92, 246, 0.10);
1771
+ border-radius: 2.5rem;
1772
+ box-shadow: 0 12px 40px rgba(13, 10, 26, 0.70), inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
1773
+ }
1774
+
1775
+ .liquid-glass-subtle {
1776
+ background: rgba(17, 14, 34, 0.30);
1777
+ backdrop-filter: blur(24px) saturate(160%);
1778
+ -webkit-backdrop-filter: blur(24px) saturate(160%);
1779
+ border: 1px solid rgba(139, 92, 246, 0.05);
1780
+ border-radius: 1.5rem;
1781
+ }
1782
+
1783
+ .liquid-glass-card {
1784
+ background: rgba(17, 14, 34, 0.50);
1785
+ backdrop-filter: blur(32px) saturate(180%);
1786
+ -webkit-backdrop-filter: blur(32px) saturate(180%);
1787
+ border: 1px solid rgba(139, 92, 246, 0.06);
1788
+ border-radius: 2rem;
1789
+ transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
1790
+ }
1791
+
1792
+ .liquid-glass-card:hover {
1793
+ border-color: rgba(167, 139, 250, 0.18);
1794
+ box-shadow: 0 8px 32px rgba(13, 10, 26, 0.50), 0 0 20px rgba(124, 58, 237, 0.10);
1795
+ transform: translateY(-2px);
1796
+ }
1797
+
1798
+ /* Liquid Glass Input */
1799
+ .liquid-glass-input {
1800
+ background: rgba(167, 139, 250, 0.04);
1801
+ backdrop-filter: blur(16px);
1802
+ -webkit-backdrop-filter: blur(16px);
1803
+ border: 1px solid rgba(139, 92, 246, 0.08);
1804
+ border-radius: 1.25rem;
1805
+ padding: 0.75rem 1rem;
1806
+ font-size: 0.875rem;
1807
+ font-weight: 300;
1808
+ color: #F0ECF9;
1809
+ outline: none;
1810
+ width: 100%;
1811
+ transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
1812
+ }
1813
+
1814
+ .liquid-glass-input::placeholder {
1815
+ color: #7B7394;
1816
+ font-weight: 300;
1817
+ }
1818
+
1819
+ .liquid-glass-input:focus {
1820
+ border-color: rgba(124, 58, 237, 0.40);
1821
+ background: rgba(167, 139, 250, 0.08);
1822
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 0 20px rgba(124, 58, 237, 0.10);
1823
+ }
1824
+
1825
+ /* Liquid Glass Buttons */
1826
+ .liquid-glass-btn {
1827
+ background: rgba(167, 139, 250, 0.06);
1828
+ backdrop-filter: blur(16px);
1829
+ -webkit-backdrop-filter: blur(16px);
1830
+ border: 1px solid rgba(139, 92, 246, 0.12);
1831
+ color: #F0ECF9;
1832
+ padding: 0.625rem 1.25rem;
1833
+ border-radius: 1.25rem;
1834
+ font-size: 0.8125rem;
1835
+ font-weight: 500;
1836
+ cursor: pointer;
1837
+ display: inline-flex;
1838
+ align-items: center;
1839
+ justify-content: center;
1840
+ gap: 0.5rem;
1841
+ transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
1842
+ }
1843
+
1844
+ .liquid-glass-btn:hover {
1845
+ background: rgba(167, 139, 250, 0.12);
1846
+ border-color: rgba(167, 139, 250, 0.22);
1847
+ box-shadow: 0 4px 16px rgba(13, 10, 26, 0.40), 0 0 12px rgba(124, 58, 237, 0.15);
1848
+ }
1849
+
1850
+ .liquid-glass-btn:active {
1851
+ transform: scale(0.98);
1852
+ }
1853
+
1854
+ .liquid-glass-btn-primary {
1855
+ background: linear-gradient(135deg, #7C3AED, #6D28D9);
1856
+ border: 1px solid rgba(124, 58, 237, 0.40);
1857
+ color: white;
1858
+ padding: 0.625rem 1.25rem;
1859
+ border-radius: 1.25rem;
1860
+ font-size: 0.8125rem;
1861
+ font-weight: 500;
1862
+ cursor: pointer;
1863
+ display: inline-flex;
1864
+ align-items: center;
1865
+ justify-content: center;
1866
+ gap: 0.5rem;
1867
+ transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
1868
+ box-shadow: 0 0 20px rgba(124, 58, 237, 0.30), 0 4px 16px rgba(124, 58, 237, 0.20);
1869
+ }
1870
+
1871
+ .liquid-glass-btn-primary:hover {
1872
+ background: linear-gradient(135deg, #8B5CF6, #7C3AED);
1873
+ box-shadow: 0 0 30px rgba(124, 58, 237, 0.45), 0 4px 24px rgba(124, 58, 237, 0.25);
1874
+ transform: translateY(-1px);
1875
+ }
1876
+
1877
+ .liquid-glass-btn-primary:active {
1878
+ transform: translateY(0) scale(0.98);
1879
+ }
1880
+
1881
+ /* Liquid Backgrounds */
1882
+ .bg-liquid-mesh {
1883
+ background-color: #0D0A1A;
1884
+ background-image:
1885
+ radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.15) 0%, transparent 40%),
1886
+ radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.08) 0%, transparent 40%),
1887
+ radial-gradient(circle at 50% 50%, rgba(109, 40, 217, 0.06) 0%, transparent 50%);
1888
+ }
1889
+
1890
+ .bg-liquid-gradient {
1891
+ background-image: radial-gradient(circle at 50% -20%, #7C3AED 15%, rgba(109, 40, 217, 0.6) 45%, #0D0A1A 90%);
1892
+ }
1893
+
1894
+ .liquid-vibrant-mesh {
1895
+ background-image:
1896
+ radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.30) 0px, transparent 50%),
1897
+ radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.25) 0px, transparent 50%),
1898
+ radial-gradient(at 100% 100%, rgba(109, 40, 217, 0.20) 0px, transparent 50%),
1899
+ radial-gradient(at 0% 100%, rgba(88, 28, 135, 0.15) 0px, transparent 50%);
1900
+ }
1901
+
1902
+ /* Liquid Glow Orbs */
1903
+ .liquid-glow-orb {
1904
+ position: absolute;
1905
+ border-radius: 50%;
1906
+ filter: blur(80px);
1907
+ opacity: 0.15;
1908
+ pointer-events: none;
1909
+ animation: float 20s infinite ease-in-out;
1910
+ }
1911
+
1912
+ .liquid-glow-orb-primary {
1913
+ background: #7C3AED;
1914
+ width: 300px;
1915
+ height: 300px;
1916
+ }
1917
+
1918
+ .liquid-glow-orb-accent {
1919
+ background: #A855F7;
1920
+ width: 200px;
1921
+ height: 200px;
1922
+ }
1923
+
1924
+ .liquid-glow-orb-deep {
1925
+ background: #6D28D9;
1926
+ width: 250px;
1927
+ height: 250px;
1928
+ }
1929
+
1930
+ /* Grain / Noise overlay utility */
1931
+ .grain-overlay {
1932
+ position: relative;
1933
+ }
1934
+
1935
+ .grain-overlay::after {
1936
+ content: '';
1937
+ position: fixed;
1938
+ inset: 0;
1939
+ z-index: 50;
1940
+ opacity: 0.06;
1941
+ pointer-events: none;
1942
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
1943
+ mix-blend-mode: overlay;
1944
+ }
1945
+
1946
+ /* Liquid Text Effects */
1947
+ .liquid-text-glow {
1948
+ text-shadow: 0 0 15px rgba(124, 58, 237, 0.60);
1949
+ }
1950
+
1951
+ .liquid-text-glow-sm {
1952
+ text-shadow: 0 0 8px rgba(124, 58, 237, 0.40);
1953
+ }
1954
+
1955
+ .liquid-text-gradient {
1956
+ background: linear-gradient(to right, #A855F7, #7C3AED);
1957
+ -webkit-background-clip: text;
1958
+ -webkit-text-fill-color: transparent;
1959
+ background-clip: text;
1960
+ }
1961
+
1962
+ .liquid-text-gradient-brand {
1963
+ background: linear-gradient(135deg, #7C3AED 0%, #C084FC 100%);
1964
+ -webkit-background-clip: text;
1965
+ -webkit-text-fill-color: transparent;
1966
+ background-clip: text;
1967
+ }
1968
+
1969
+ /* Liquid Shadows */
1970
+ .liquid-shadow {
1971
+ box-shadow: 0 8px 32px rgba(13, 10, 26, 0.60), inset 0 1px 0 0 rgba(167, 139, 250, 0.06);
1972
+ }
1973
+
1974
+ .liquid-shadow-lg {
1975
+ box-shadow: 0 16px 48px rgba(13, 10, 26, 0.70), inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
1976
+ }
1977
+
1978
+ .liquid-shadow-glow {
1979
+ box-shadow: 0 0 20px rgba(124, 58, 237, 0.30), 0 0 40px rgba(168, 85, 247, 0.15);
1980
+ }
1981
+
1982
+ .liquid-shadow-neon {
1983
+ box-shadow: 0 0 15px rgba(124, 58, 237, 0.50), 0 0 30px rgba(168, 85, 247, 0.25);
1984
+ }
1985
+
1986
+ /* Liquid Animations */
1987
+ @keyframes liquid-reveal {
1988
+ from { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(4px); }
1989
+ to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
1990
+ }
1991
+
1992
+ @keyframes liquid-glow-pulse {
1993
+ 0%, 100% { opacity: 0.3; box-shadow: 0 0 20px rgba(124, 58, 237, 0.20); }
1994
+ 50% { opacity: 0.6; box-shadow: 0 0 40px rgba(124, 58, 237, 0.40); }
1995
+ }
1996
+
1997
+ @keyframes grain-drift {
1998
+ 0% { transform: translate(0, 0); }
1999
+ 50% { transform: translate(-2%, -1%); }
2000
+ 100% { transform: translate(0, 0); }
2001
+ }
2002
+
2003
+ .animate-liquid-reveal {
2004
+ animation: liquid-reveal 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
2005
+ }
2006
+
2007
+ .animate-liquid-glow-pulse {
2008
+ animation: liquid-glow-pulse 3s ease-in-out infinite;
2009
+ }
2010
+
1403
2011
  /* ═══════════════════════════════════════════════════════
1404
2012
  Keyframes
1405
2013
  ═══════════════════════════════════════════════════════ */
@@ -1474,3 +2082,36 @@ input, textarea, select, button {
1474
2082
  .animate-float-subtle {
1475
2083
  animation: float-subtle 6s infinite ease-in-out;
1476
2084
  }
2085
+ /* ═══════════════════════════════════════════════════════
2086
+ Dialog — Force light mode colors (override dark theme)
2087
+ ═══════════════════════════════════════════════════════ */
2088
+ [data-slot="dialog-content"],
2089
+ [data-slot="drawer-content"],
2090
+ [data-slot="sheet-content"] {
2091
+ background-color: #FFFFFF !important;
2092
+ color: #111827 !important;
2093
+ border-color: #D1D5DB !important;
2094
+ }
2095
+
2096
+ [data-slot="dialog-content"] [data-slot="dialog-close"],
2097
+ [data-slot="drawer-content"] button,
2098
+ [data-slot="sheet-content"] button {
2099
+ color: #374151 !important;
2100
+ }
2101
+
2102
+ [data-slot="dialog-content"] input,
2103
+ [data-slot="dialog-content"] textarea,
2104
+ [data-slot="drawer-content"] input,
2105
+ [data-slot="drawer-content"] textarea,
2106
+ [data-slot="sheet-content"] input,
2107
+ [data-slot="sheet-content"] textarea {
2108
+ background-color: #F3F4F6 !important;
2109
+ border-color: #D1D5DB !important;
2110
+ color: #111827 !important;
2111
+ }
2112
+
2113
+ [data-slot="dialog-content"] input::placeholder,
2114
+ [data-slot="drawer-content"] input::placeholder,
2115
+ [data-slot="sheet-content"] input::placeholder {
2116
+ color: #9CA3AF !important;
2117
+ }