@cupcodev/ui 7.0.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +239 -239
  2. package/dist/index.cjs +3604 -2715
  3. package/dist/index.d.cts +61 -4
  4. package/dist/index.d.ts +61 -4
  5. package/dist/index.js +3561 -2667
  6. package/dist/styles.css +3 -3
  7. package/package.json +189 -187
  8. package/postinstall.cjs +20 -20
  9. package/styles/base.css +140 -138
  10. package/styles/dock.css +868 -813
  11. package/styles/global.css +2073 -2071
  12. package/styles/tokens.css +415 -415
  13. package/tailwind-preset.cjs +196 -196
package/styles/tokens.css CHANGED
@@ -1,415 +1,415 @@
1
- @layer base {
2
- :root {
3
- /* Cupcode Core Colors (HSL) */
4
- --cc-surface: 0 0% 100%; /* #ffffff */
5
- --cc-ink: 261 35% 25%; /* #3a2a58 */
6
- --ink: 258 91% 11.8%;
7
- --ink-muted: 258 40% 45%;
8
- --cc-pink: 330 87% 52%; /* #ed1e79 (high-attention highlight) */
9
- --cc-purple: 261 41% 55%; /* #7c5bbb */
10
- --cc-hover: 280 39% 53%; /* #975ab6 */
11
- --cc-hover-rgb: 151 90 182;
12
- --cc-highlight: 330 87% 52%; /* #ed1e79 */
13
- --cc-hover-overlay: rgba(151, 90, 182, 0.3);
14
-
15
- /* Legacy color variables (compatibilidade) */
16
- --color-one: #975ab6;
17
- --color-two: #7c5bbb;
18
- --color-three: #3a2a58;
19
- --color-four: #ffffff;
20
- --cupcode-dark: #3a2a58;
21
- --cupcode-pink: #ed1e79;
22
- --cupcode-purple: #7c5bbb;
23
- --cupcode-white: #ffffff;
24
-
25
- /* Base tokens */
26
- --background: 0 0% 100%;
27
- --foreground: 261 35% 25%;
28
-
29
- --card: 0 0% 100%;
30
- --card-foreground: 261 35% 25%;
31
-
32
- --popover: 0 0% 100%;
33
- --popover-foreground: 261 35% 25%;
34
-
35
- --primary: 261 41% 55%;
36
- --primary-foreground: 0 0% 100%;
37
-
38
- --secondary: 261 41% 55%;
39
- --secondary-foreground: 0 0% 100%;
40
-
41
- --muted: 262 20% 96%;
42
- --muted-foreground: 262 15% 45%;
43
-
44
- --accent: 280 39% 53%;
45
- --accent-foreground: 0 0% 100%;
46
-
47
- --destructive: 0 84% 60%;
48
- --destructive-foreground: 0 0% 100%;
49
-
50
- --success: 142 76% 36%;
51
- --success-foreground: 0 0% 100%;
52
-
53
- --warning: 38 92% 50%;
54
- --warning-foreground: 0 0% 100%;
55
-
56
- --info: 199 89% 48%;
57
- --info-foreground: 0 0% 100%;
58
-
59
- --border: 262 20% 90%;
60
- --input: 262 20% 90%;
61
- --ring: 261 41% 55%;
62
-
63
- /* Glass Morphism tokens (Light Mode) */
64
- --glass-bg: 0 0% 100% / 0.65;
65
- --glass-bg-subtle: 0 0% 100% / 0.45;
66
- --glass-bg-strong: 0 0% 100% / 0.78;
67
- --glass-border: 0 0% 100% / 0.45;
68
- --glass-border-subtle: 0 0% 100% / 0.3;
69
- --glass-highlight: rgba(255, 255, 255, 0.55);
70
- --glass-ambient: rgba(58, 42, 88, 0.12);
71
-
72
- /* Blur levels */
73
- --glass-blur-xs: 6px;
74
- --glass-blur-sm: 10px;
75
- --glass-blur-md: 16px;
76
- --glass-blur-lg: 24px;
77
- --glass-blur-xl: 40px;
78
-
79
- /* Scrollbar tokens (default: purple + light) */
80
- --cc-scrollbar-size: 10px;
81
- --cc-scrollbar-radius: 999px;
82
- --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
83
- --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
84
- --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
85
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
86
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
87
- --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
88
-
89
- /* Layout tokens */
90
- --cc-navbar-top-offset: 8px;
91
- --cc-navbar-side-offset-mobile: 8px;
92
- --cc-navbar-side-offset-desktop: 16px;
93
- --cc-navbar-height-mobile: 64px;
94
- --cc-navbar-height-desktop: 64px;
95
- --cc-navbar-radius: 20px;
96
- --cc-navbar-bg: 0 0% 100% / 0.72;
97
- --cc-navbar-border: 261 41% 55% / 0.2;
98
- --cc-navbar-shadow: 0 18px 42px -28px rgba(58, 42, 88, 0.55);
99
- --cc-navbar-drawer-bg: 0 0% 100% / 0.84;
100
- --cc-navbar-drawer-border: 261 41% 55% / 0.18;
101
- --cc-navbar-link-hover: 261 41% 55%;
102
- --cc-navbar-link-active: 261 41% 55%;
103
-
104
- /* Border radius */
105
- --radius-sm: 10px;
106
- --radius-md: 14px;
107
- --radius: 14px;
108
- --radius-lg: 18px;
109
- --radius-xl: 24px;
110
- --radius-2xl: 32px;
111
- --radius-pill: 9999px;
112
-
113
- /* Typography */
114
- --font-display: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
115
- --font-ui: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
116
- --font-sans: "Tomorrow", sans-serif;
117
-
118
- /* ===== SPACING SCALE (Cupcode) ===== */
119
- --space-0: 0;
120
- --space-1: 4px;
121
- --space-2: 8px;
122
- --space-3: 12px;
123
- --space-4: 16px;
124
- --space-5: 20px;
125
- --space-6: 24px;
126
- --space-7: 28px;
127
- --space-8: 32px;
128
- --space-9: 36px;
129
- --space-10: 40px;
130
- --space-12: 48px;
131
- --space-14: 56px;
132
- --space-16: 64px;
133
- --space-20: 80px;
134
- --space-24: 96px;
135
- --space-32: 128px;
136
-
137
- /* ===== FLUID TYPOGRAPHY (Responsive scales) ===== */
138
- --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
139
- --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
140
- --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
141
- --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
142
- --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
143
- --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
144
- --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
145
- --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
146
-
147
- /* ===== MOTION SYSTEM (Cupcode) ===== */
148
- /* Velocity tokens */
149
- --motion-instant: 0ms;
150
- --motion-fast: 120ms;
151
- --motion-medium: 220ms;
152
- --motion-slow: 360ms;
153
- --motion-slower: 500ms;
154
- --motion-slowest: 800ms;
155
-
156
- /* Easing curves Cupcode */
157
- --ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
158
- --ease-jelly: cubic-bezier(0.77, 0, 0.175, 1);
159
- --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
160
- --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
161
- --ease-in: cubic-bezier(0.4, 0, 1, 1);
162
- --ease-out: cubic-bezier(0, 0, 0.2, 1);
163
- --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
164
-
165
- /* Legacy duration support */
166
- --dur-fast: var(--motion-fast);
167
- --dur-med: var(--motion-medium);
168
- --dur-slow: var(--motion-slow);
169
-
170
- /* ===== STATE OPACITIES ===== */
171
- --opacity-hover: 0.85;
172
- --opacity-active: 0.7;
173
- --opacity-disabled: 0.5;
174
- --opacity-focus: 1;
175
- --opacity-subtle: 0.6;
176
-
177
- /* Gradients */
178
- --cc-gradient-galaxy: linear-gradient(120deg,
179
- hsl(var(--cc-hover)) 0%,
180
- hsl(var(--cc-purple)) 100%
181
- );
182
- --cc-gradient-comet: radial-gradient(
183
- circle at 50% 0%,
184
- rgba(255, 255, 255, 0.4) 0%,
185
- var(--cc-hover-overlay) 30%,
186
- rgba(124, 91, 187, 0.1) 60%,
187
- transparent 100%
188
- );
189
-
190
- /* Gradientes Animados */
191
- --cc-gradient-animated-1: linear-gradient(
192
- 135deg,
193
- hsl(var(--cc-hover)) 0%,
194
- hsl(var(--cc-purple)) 50%,
195
- hsl(var(--cc-hover)) 100%
196
- );
197
- --cc-gradient-animated-2: linear-gradient(
198
- -45deg,
199
- hsl(var(--cc-hover)) 0%,
200
- hsl(var(--cc-purple)) 25%,
201
- hsl(var(--cc-hover)) 50%,
202
- hsl(var(--cc-purple)) 75%,
203
- hsl(var(--cc-hover)) 100%
204
- );
205
- --cc-gradient-shimmer: linear-gradient(
206
- 90deg,
207
- transparent 0%,
208
- rgba(255, 255, 255, 0.3) 50%,
209
- transparent 100%
210
- );
211
-
212
- /* ===== ELEVATION & SHADOWS (Cupcode) ===== */
213
- --elevation-0: none;
214
- --elevation-1:
215
- 0 1px 2px rgba(124, 91, 187, 0.04),
216
- 0 1px 3px rgba(58, 42, 88, 0.06);
217
- --elevation-2:
218
- 0 2px 4px rgba(124, 91, 187, 0.06),
219
- 0 3px 8px rgba(58, 42, 88, 0.08);
220
- --elevation-3:
221
- 0 4px 8px rgba(124, 91, 187, 0.08),
222
- 0 6px 16px rgba(58, 42, 88, 0.1);
223
- --elevation-4:
224
- 0 8px 16px rgba(124, 91, 187, 0.1),
225
- 0 12px 32px rgba(58, 42, 88, 0.12);
226
- --elevation-5:
227
- 0 16px 32px rgba(124, 91, 187, 0.12),
228
- 0 24px 64px rgba(58, 42, 88, 0.15);
229
-
230
- /* Shadow tokens (named) */
231
- --shadow-sm: 0 1px 4px rgba(58, 42, 88, 0.1);
232
- --shadow-md: 0 4px 12px rgba(58, 42, 88, 0.15);
233
- --shadow-lg: 0 8px 24px rgba(58, 42, 88, 0.2);
234
- --shadow-xl: 0 16px 48px rgba(58, 42, 88, 0.25);
235
- --shadow-glow-pink: 0 0 24px rgba(237, 30, 121, 0.4);
236
- --shadow-glow-purple: 0 0 24px rgba(124, 91, 187, 0.4);
237
- --shadow-glow-galaxy: 0 0 32px rgba(193, 27, 150, 0.5);
238
-
239
- /* Clay/Neumorphism tokens */
240
- --white: #fff;
241
- --greyLight-1: #e4ebf5;
242
- --greyLight-2: #c8d0e7;
243
- --accent-color: #1fa8f5;
244
- --accent-color-fg: #fefefe;
245
- --backdrop-color: #89d4fe;
246
- --app-content-background-color: #c0d8ec;
247
- --inset-shadow: rgba(7, 43, 74, 0.3);
248
- --outset-shadow: rgba(223, 240, 255, 0.25);
249
- --clay-box-shadow: rgba(7, 43, 74, 0.3);
250
- --clay-background-color: #c0d8ec;
251
- --clay-fg-color: #444;
252
- }
253
-
254
- /* ===== DARK MODE ===== */
255
- .dark {
256
- /* Cupcode Core Colors (mantém as mesmas cores base) */
257
- --cc-surface: 0 0% 100%;
258
- --cc-ink: 261 35% 25%;
259
- --ink: 0 0% 98%;
260
- --ink-muted: 262 20% 75%;
261
- --cc-pink: 330 87% 52%;
262
- --cc-purple: 261 41% 55%;
263
- --cc-hover: 280 39% 53%;
264
- --cc-hover-rgb: 151 90 182;
265
- --cc-highlight: 330 87% 52%;
266
-
267
- /* Base tokens - Dark Mode */
268
- --background: 261 35% 25%; /* #3a2a58 - Deep purple almost black */
269
- --foreground: 0 0% 98%; /* #fafafa - Soft white */
270
-
271
- --card: 262 80% 12%; /* #1a0336 - Darker purple card */
272
- --card-foreground: 0 0% 98%;
273
-
274
- --popover: 262 75% 10%; /* #150028 - Deep purple popover */
275
- --popover-foreground: 0 0% 98%;
276
-
277
- --primary: 261 41% 65%; /* Lighter purple for dark mode */
278
- --primary-foreground: 0 0% 100%;
279
-
280
- --secondary: 261 41% 65%; /* Lighter purple for dark mode */
281
- --secondary-foreground: 0 0% 100%;
282
-
283
- --muted: 262 40% 18%; /* #1f0a3d - Muted purple */
284
- --muted-foreground: 262 20% 75%; /* Light purple gray text */
285
-
286
- --accent: 280 39% 63%; /* Hover color for dark mode */
287
- --accent-foreground: 0 0% 100%;
288
-
289
- --destructive: 0 84% 65%;
290
- --destructive-foreground: 0 0% 100%;
291
-
292
- --success: 142 76% 45%;
293
- --success-foreground: 0 0% 100%;
294
-
295
- --warning: 38 92% 60%;
296
- --warning-foreground: 0 0% 100%;
297
-
298
- --info: 199 89% 58%;
299
- --info-foreground: 0 0% 100%;
300
-
301
- --border: 262 40% 22%; /* #2b0f52 - Purple border */
302
- --input: 262 40% 22%;
303
- --ring: 261 41% 65%;
304
-
305
- /* Glass Morphism tokens (Dark Mode) */
306
- --glass-bg: 262 45% 30% / 0.22; /* Purple tinted glass */
307
- --glass-bg-subtle: 262 45% 30% / 0.14;
308
- --glass-bg-strong: 262 45% 30% / 0.32;
309
- --glass-border: 280 39% 53% / 0.35; /* Hover border glow */
310
- --glass-border-subtle: 262 45% 30% / 0.2;
311
- --glass-highlight: rgba(255, 255, 255, 0.1);
312
- --glass-ambient: rgba(151, 90, 182, 0.12); /* Hover ambient glow */
313
-
314
- /* Scrollbar tokens (default: purple + dark) */
315
- --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
316
- --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
317
- --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
318
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
319
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
320
- --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
321
-
322
- /* Navbar tokens (Dark Mode) */
323
- --cc-navbar-bg: 262 45% 22% / 0.7;
324
- --cc-navbar-border: 280 39% 53% / 0.42;
325
- --cc-navbar-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.85);
326
- --cc-navbar-drawer-bg: 262 48% 20% / 0.92;
327
- --cc-navbar-drawer-border: 280 39% 53% / 0.35;
328
- --cc-navbar-link-hover: 261 41% 65%;
329
- --cc-navbar-link-active: 261 41% 65%;
330
-
331
- /* Shadow tokens (Dark Mode) */
332
- --shadow-sm: 0 1px 4px rgba(151, 90, 182, 0.2);
333
- --shadow-md: 0 4px 12px rgba(124, 91, 187, 0.3);
334
- --shadow-lg: 0 8px 24px rgba(124, 91, 187, 0.4);
335
- --shadow-xl: 0 16px 48px rgba(151, 90, 182, 0.5);
336
- --shadow-glow-pink: 0 0 32px rgba(237, 30, 121, 0.6);
337
- --shadow-glow-purple: 0 0 32px rgba(124, 91, 187, 0.6);
338
- --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
339
-
340
- /* Elevation (Dark Mode) */
341
- --elevation-1:
342
- 0 1px 2px rgba(151, 90, 182, 0.1),
343
- 0 1px 3px rgba(124, 91, 187, 0.15);
344
- --elevation-2:
345
- 0 2px 4px rgba(151, 90, 182, 0.15),
346
- 0 3px 8px rgba(124, 91, 187, 0.2);
347
- --elevation-3:
348
- 0 4px 8px rgba(151, 90, 182, 0.2),
349
- 0 6px 16px rgba(124, 91, 187, 0.25);
350
- --elevation-4:
351
- 0 8px 16px rgba(151, 90, 182, 0.25),
352
- 0 12px 32px rgba(124, 91, 187, 0.3);
353
- --elevation-5:
354
- 0 16px 32px rgba(151, 90, 182, 0.3),
355
- 0 24px 64px rgba(124, 91, 187, 0.4);
356
- }
357
-
358
- /* Global scrollbar color override: pink + auto theme */
359
- html[data-cc-scrollbar-color="pink"] {
360
- --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
361
- --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
362
- --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
363
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
364
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
365
- --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
366
- }
367
-
368
- html.dark[data-cc-scrollbar-color="pink"] {
369
- --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
370
- --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
371
- --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
372
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
373
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
374
- --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
375
- }
376
-
377
- /* Forced theme: light */
378
- html[data-cc-scrollbar-theme="light"] {
379
- --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
380
- --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
381
- --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
382
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
383
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
384
- --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
385
- }
386
-
387
- html[data-cc-scrollbar-theme="light"][data-cc-scrollbar-color="pink"] {
388
- --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
389
- --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
390
- --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
391
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
392
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
393
- --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
394
- }
395
-
396
- /* Forced theme: dark */
397
- html[data-cc-scrollbar-theme="dark"] {
398
- --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
399
- --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
400
- --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
401
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
402
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
403
- --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
404
- }
405
-
406
- html[data-cc-scrollbar-theme="dark"][data-cc-scrollbar-color="pink"] {
407
- --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
408
- --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
409
- --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
410
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
411
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
412
- --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
413
- }
414
-
415
- }
1
+ @layer base {
2
+ :root {
3
+ /* Cupcode Core Colors (HSL) */
4
+ --cc-surface: 0 0% 100%; /* #ffffff */
5
+ --cc-ink: 261 35% 25%; /* #3a2a58 */
6
+ --ink: 258 91% 11.8%;
7
+ --ink-muted: 258 40% 45%;
8
+ --cc-pink: 330 87% 52%; /* #ed1e79 (high-attention highlight) */
9
+ --cc-purple: 261 41% 55%; /* #7c5bbb */
10
+ --cc-hover: 280 39% 53%; /* #975ab6 */
11
+ --cc-hover-rgb: 151 90 182;
12
+ --cc-highlight: 330 87% 52%; /* #ed1e79 */
13
+ --cc-hover-overlay: rgba(151, 90, 182, 0.3);
14
+
15
+ /* Legacy color variables (compatibilidade) */
16
+ --color-one: #975ab6;
17
+ --color-two: #7c5bbb;
18
+ --color-three: #3a2a58;
19
+ --color-four: #ffffff;
20
+ --cupcode-dark: #3a2a58;
21
+ --cupcode-pink: #ed1e79;
22
+ --cupcode-purple: #7c5bbb;
23
+ --cupcode-white: #ffffff;
24
+
25
+ /* Base tokens */
26
+ --background: 0 0% 100%;
27
+ --foreground: 261 35% 25%;
28
+
29
+ --card: 0 0% 100%;
30
+ --card-foreground: 261 35% 25%;
31
+
32
+ --popover: 0 0% 100%;
33
+ --popover-foreground: 261 35% 25%;
34
+
35
+ --primary: 261 41% 55%;
36
+ --primary-foreground: 0 0% 100%;
37
+
38
+ --secondary: 261 41% 55%;
39
+ --secondary-foreground: 0 0% 100%;
40
+
41
+ --muted: 262 20% 96%;
42
+ --muted-foreground: 262 15% 45%;
43
+
44
+ --accent: 280 39% 53%;
45
+ --accent-foreground: 0 0% 100%;
46
+
47
+ --destructive: 0 84% 60%;
48
+ --destructive-foreground: 0 0% 100%;
49
+
50
+ --success: 142 76% 36%;
51
+ --success-foreground: 0 0% 100%;
52
+
53
+ --warning: 38 92% 50%;
54
+ --warning-foreground: 0 0% 100%;
55
+
56
+ --info: 199 89% 48%;
57
+ --info-foreground: 0 0% 100%;
58
+
59
+ --border: 262 20% 90%;
60
+ --input: 262 20% 90%;
61
+ --ring: 261 41% 55%;
62
+
63
+ /* Glass Morphism tokens (Light Mode) */
64
+ --glass-bg: 0 0% 100% / 0.65;
65
+ --glass-bg-subtle: 0 0% 100% / 0.45;
66
+ --glass-bg-strong: 0 0% 100% / 0.78;
67
+ --glass-border: 0 0% 100% / 0.45;
68
+ --glass-border-subtle: 0 0% 100% / 0.3;
69
+ --glass-highlight: rgba(255, 255, 255, 0.55);
70
+ --glass-ambient: rgba(58, 42, 88, 0.12);
71
+
72
+ /* Blur levels */
73
+ --glass-blur-xs: 6px;
74
+ --glass-blur-sm: 10px;
75
+ --glass-blur-md: 16px;
76
+ --glass-blur-lg: 24px;
77
+ --glass-blur-xl: 40px;
78
+
79
+ /* Scrollbar tokens (default: purple + light) */
80
+ --cc-scrollbar-size: 10px;
81
+ --cc-scrollbar-radius: 999px;
82
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
83
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
84
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
85
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
86
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
87
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
88
+
89
+ /* Layout tokens */
90
+ --cc-navbar-top-offset: 8px;
91
+ --cc-navbar-side-offset-mobile: 8px;
92
+ --cc-navbar-side-offset-desktop: 16px;
93
+ --cc-navbar-height-mobile: 64px;
94
+ --cc-navbar-height-desktop: 64px;
95
+ --cc-navbar-radius: 20px;
96
+ --cc-navbar-bg: 0 0% 100% / 0.72;
97
+ --cc-navbar-border: 261 41% 55% / 0.2;
98
+ --cc-navbar-shadow: 0 18px 42px -28px rgba(58, 42, 88, 0.55);
99
+ --cc-navbar-drawer-bg: 0 0% 100% / 0.84;
100
+ --cc-navbar-drawer-border: 261 41% 55% / 0.18;
101
+ --cc-navbar-link-hover: 261 41% 55%;
102
+ --cc-navbar-link-active: 261 41% 55%;
103
+
104
+ /* Border radius */
105
+ --radius-sm: 10px;
106
+ --radius-md: 14px;
107
+ --radius: 14px;
108
+ --radius-lg: 18px;
109
+ --radius-xl: 24px;
110
+ --radius-2xl: 32px;
111
+ --radius-pill: 9999px;
112
+
113
+ /* Typography */
114
+ --font-display: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
115
+ --font-ui: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
116
+ --font-sans: "Tomorrow", sans-serif;
117
+
118
+ /* ===== SPACING SCALE (Cupcode) ===== */
119
+ --space-0: 0;
120
+ --space-1: 4px;
121
+ --space-2: 8px;
122
+ --space-3: 12px;
123
+ --space-4: 16px;
124
+ --space-5: 20px;
125
+ --space-6: 24px;
126
+ --space-7: 28px;
127
+ --space-8: 32px;
128
+ --space-9: 36px;
129
+ --space-10: 40px;
130
+ --space-12: 48px;
131
+ --space-14: 56px;
132
+ --space-16: 64px;
133
+ --space-20: 80px;
134
+ --space-24: 96px;
135
+ --space-32: 128px;
136
+
137
+ /* ===== FLUID TYPOGRAPHY (Responsive scales) ===== */
138
+ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
139
+ --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
140
+ --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
141
+ --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
142
+ --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
143
+ --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
144
+ --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
145
+ --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
146
+
147
+ /* ===== MOTION SYSTEM (Cupcode) ===== */
148
+ /* Velocity tokens */
149
+ --motion-instant: 0ms;
150
+ --motion-fast: 120ms;
151
+ --motion-medium: 220ms;
152
+ --motion-slow: 360ms;
153
+ --motion-slower: 500ms;
154
+ --motion-slowest: 800ms;
155
+
156
+ /* Easing curves Cupcode */
157
+ --ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
158
+ --ease-jelly: cubic-bezier(0.77, 0, 0.175, 1);
159
+ --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
160
+ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
161
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
162
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
163
+ --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
164
+
165
+ /* Legacy duration support */
166
+ --dur-fast: var(--motion-fast);
167
+ --dur-med: var(--motion-medium);
168
+ --dur-slow: var(--motion-slow);
169
+
170
+ /* ===== STATE OPACITIES ===== */
171
+ --opacity-hover: 0.85;
172
+ --opacity-active: 0.7;
173
+ --opacity-disabled: 0.5;
174
+ --opacity-focus: 1;
175
+ --opacity-subtle: 0.6;
176
+
177
+ /* Gradients */
178
+ --cc-gradient-galaxy: linear-gradient(120deg,
179
+ hsl(var(--cc-hover)) 0%,
180
+ hsl(var(--cc-purple)) 100%
181
+ );
182
+ --cc-gradient-comet: radial-gradient(
183
+ circle at 50% 0%,
184
+ rgba(255, 255, 255, 0.4) 0%,
185
+ var(--cc-hover-overlay) 30%,
186
+ rgba(124, 91, 187, 0.1) 60%,
187
+ transparent 100%
188
+ );
189
+
190
+ /* Gradientes Animados */
191
+ --cc-gradient-animated-1: linear-gradient(
192
+ 135deg,
193
+ hsl(var(--cc-hover)) 0%,
194
+ hsl(var(--cc-purple)) 50%,
195
+ hsl(var(--cc-hover)) 100%
196
+ );
197
+ --cc-gradient-animated-2: linear-gradient(
198
+ -45deg,
199
+ hsl(var(--cc-hover)) 0%,
200
+ hsl(var(--cc-purple)) 25%,
201
+ hsl(var(--cc-hover)) 50%,
202
+ hsl(var(--cc-purple)) 75%,
203
+ hsl(var(--cc-hover)) 100%
204
+ );
205
+ --cc-gradient-shimmer: linear-gradient(
206
+ 90deg,
207
+ transparent 0%,
208
+ rgba(255, 255, 255, 0.3) 50%,
209
+ transparent 100%
210
+ );
211
+
212
+ /* ===== ELEVATION & SHADOWS (Cupcode) ===== */
213
+ --elevation-0: none;
214
+ --elevation-1:
215
+ 0 1px 2px rgba(124, 91, 187, 0.04),
216
+ 0 1px 3px rgba(58, 42, 88, 0.06);
217
+ --elevation-2:
218
+ 0 2px 4px rgba(124, 91, 187, 0.06),
219
+ 0 3px 8px rgba(58, 42, 88, 0.08);
220
+ --elevation-3:
221
+ 0 4px 8px rgba(124, 91, 187, 0.08),
222
+ 0 6px 16px rgba(58, 42, 88, 0.1);
223
+ --elevation-4:
224
+ 0 8px 16px rgba(124, 91, 187, 0.1),
225
+ 0 12px 32px rgba(58, 42, 88, 0.12);
226
+ --elevation-5:
227
+ 0 16px 32px rgba(124, 91, 187, 0.12),
228
+ 0 24px 64px rgba(58, 42, 88, 0.15);
229
+
230
+ /* Shadow tokens (named) */
231
+ --shadow-sm: 0 1px 4px rgba(58, 42, 88, 0.1);
232
+ --shadow-md: 0 4px 12px rgba(58, 42, 88, 0.15);
233
+ --shadow-lg: 0 8px 24px rgba(58, 42, 88, 0.2);
234
+ --shadow-xl: 0 16px 48px rgba(58, 42, 88, 0.25);
235
+ --shadow-glow-pink: 0 0 24px rgba(237, 30, 121, 0.4);
236
+ --shadow-glow-purple: 0 0 24px rgba(124, 91, 187, 0.4);
237
+ --shadow-glow-galaxy: 0 0 32px rgba(193, 27, 150, 0.5);
238
+
239
+ /* Clay/Neumorphism tokens */
240
+ --white: #fff;
241
+ --greyLight-1: #e4ebf5;
242
+ --greyLight-2: #c8d0e7;
243
+ --accent-color: #1fa8f5;
244
+ --accent-color-fg: #fefefe;
245
+ --backdrop-color: #89d4fe;
246
+ --app-content-background-color: #c0d8ec;
247
+ --inset-shadow: rgba(7, 43, 74, 0.3);
248
+ --outset-shadow: rgba(223, 240, 255, 0.25);
249
+ --clay-box-shadow: rgba(7, 43, 74, 0.3);
250
+ --clay-background-color: #c0d8ec;
251
+ --clay-fg-color: #444;
252
+ }
253
+
254
+ /* ===== DARK MODE ===== */
255
+ .dark {
256
+ /* Cupcode Core Colors (mantém as mesmas cores base) */
257
+ --cc-surface: 0 0% 100%;
258
+ --cc-ink: 261 35% 25%;
259
+ --ink: 0 0% 98%;
260
+ --ink-muted: 262 20% 75%;
261
+ --cc-pink: 330 87% 52%;
262
+ --cc-purple: 261 41% 55%;
263
+ --cc-hover: 280 39% 53%;
264
+ --cc-hover-rgb: 151 90 182;
265
+ --cc-highlight: 330 87% 52%;
266
+
267
+ /* Base tokens - Dark Mode */
268
+ --background: 261 35% 25%; /* #3a2a58 - Deep purple almost black */
269
+ --foreground: 0 0% 98%; /* #fafafa - Soft white */
270
+
271
+ --card: 262 80% 12%; /* #1a0336 - Darker purple card */
272
+ --card-foreground: 0 0% 98%;
273
+
274
+ --popover: 262 75% 10%; /* #150028 - Deep purple popover */
275
+ --popover-foreground: 0 0% 98%;
276
+
277
+ --primary: 261 41% 65%; /* Lighter purple for dark mode */
278
+ --primary-foreground: 0 0% 100%;
279
+
280
+ --secondary: 261 41% 65%; /* Lighter purple for dark mode */
281
+ --secondary-foreground: 0 0% 100%;
282
+
283
+ --muted: 262 40% 18%; /* #1f0a3d - Muted purple */
284
+ --muted-foreground: 262 20% 75%; /* Light purple gray text */
285
+
286
+ --accent: 280 39% 63%; /* Hover color for dark mode */
287
+ --accent-foreground: 0 0% 100%;
288
+
289
+ --destructive: 0 84% 65%;
290
+ --destructive-foreground: 0 0% 100%;
291
+
292
+ --success: 142 76% 45%;
293
+ --success-foreground: 0 0% 100%;
294
+
295
+ --warning: 38 92% 60%;
296
+ --warning-foreground: 0 0% 100%;
297
+
298
+ --info: 199 89% 58%;
299
+ --info-foreground: 0 0% 100%;
300
+
301
+ --border: 262 40% 22%; /* #2b0f52 - Purple border */
302
+ --input: 262 40% 22%;
303
+ --ring: 261 41% 65%;
304
+
305
+ /* Glass Morphism tokens (Dark Mode) */
306
+ --glass-bg: 262 45% 30% / 0.22; /* Purple tinted glass */
307
+ --glass-bg-subtle: 262 45% 30% / 0.14;
308
+ --glass-bg-strong: 262 45% 30% / 0.32;
309
+ --glass-border: 280 39% 53% / 0.35; /* Hover border glow */
310
+ --glass-border-subtle: 262 45% 30% / 0.2;
311
+ --glass-highlight: rgba(255, 255, 255, 0.1);
312
+ --glass-ambient: rgba(151, 90, 182, 0.12); /* Hover ambient glow */
313
+
314
+ /* Scrollbar tokens (default: purple + dark) */
315
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
316
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
317
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
318
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
319
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
320
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
321
+
322
+ /* Navbar tokens (Dark Mode) */
323
+ --cc-navbar-bg: 262 45% 22% / 0.7;
324
+ --cc-navbar-border: 280 39% 53% / 0.42;
325
+ --cc-navbar-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.85);
326
+ --cc-navbar-drawer-bg: 262 48% 20% / 0.92;
327
+ --cc-navbar-drawer-border: 280 39% 53% / 0.35;
328
+ --cc-navbar-link-hover: 261 41% 65%;
329
+ --cc-navbar-link-active: 261 41% 65%;
330
+
331
+ /* Shadow tokens (Dark Mode) */
332
+ --shadow-sm: 0 1px 4px rgba(151, 90, 182, 0.2);
333
+ --shadow-md: 0 4px 12px rgba(124, 91, 187, 0.3);
334
+ --shadow-lg: 0 8px 24px rgba(124, 91, 187, 0.4);
335
+ --shadow-xl: 0 16px 48px rgba(151, 90, 182, 0.5);
336
+ --shadow-glow-pink: 0 0 32px rgba(237, 30, 121, 0.6);
337
+ --shadow-glow-purple: 0 0 32px rgba(124, 91, 187, 0.6);
338
+ --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
339
+
340
+ /* Elevation (Dark Mode) */
341
+ --elevation-1:
342
+ 0 1px 2px rgba(151, 90, 182, 0.1),
343
+ 0 1px 3px rgba(124, 91, 187, 0.15);
344
+ --elevation-2:
345
+ 0 2px 4px rgba(151, 90, 182, 0.15),
346
+ 0 3px 8px rgba(124, 91, 187, 0.2);
347
+ --elevation-3:
348
+ 0 4px 8px rgba(151, 90, 182, 0.2),
349
+ 0 6px 16px rgba(124, 91, 187, 0.25);
350
+ --elevation-4:
351
+ 0 8px 16px rgba(151, 90, 182, 0.25),
352
+ 0 12px 32px rgba(124, 91, 187, 0.3);
353
+ --elevation-5:
354
+ 0 16px 32px rgba(151, 90, 182, 0.3),
355
+ 0 24px 64px rgba(124, 91, 187, 0.4);
356
+ }
357
+
358
+ /* Global scrollbar color override: pink + auto theme */
359
+ html[data-cc-scrollbar-color="pink"] {
360
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
361
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
362
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
363
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
364
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
365
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
366
+ }
367
+
368
+ html.dark[data-cc-scrollbar-color="pink"] {
369
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
370
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
371
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
372
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
373
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
374
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
375
+ }
376
+
377
+ /* Forced theme: light */
378
+ html[data-cc-scrollbar-theme="light"] {
379
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
380
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
381
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
382
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
383
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
384
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
385
+ }
386
+
387
+ html[data-cc-scrollbar-theme="light"][data-cc-scrollbar-color="pink"] {
388
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
389
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
390
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
391
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
392
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
393
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
394
+ }
395
+
396
+ /* Forced theme: dark */
397
+ html[data-cc-scrollbar-theme="dark"] {
398
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
399
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
400
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
401
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
402
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
403
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
404
+ }
405
+
406
+ html[data-cc-scrollbar-theme="dark"][data-cc-scrollbar-color="pink"] {
407
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
408
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
409
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
410
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
411
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
412
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
413
+ }
414
+
415
+ }