@abhir9/pd-design-system 0.1.6 → 0.1.7

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 (3) hide show
  1. package/dist/index.css +591 -588
  2. package/dist/styles.css +208 -208
  3. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1,311 +1,112 @@
1
- /* Default CSS variables (dark theme) - will be overridden by ThemeProvider */
2
- /* These ensure styling works before JavaScript loads */
3
- /* Auto-generated from theme tokens - DO NOT EDIT MANUALLY */
4
- :root {
5
- --accent: #17171C;
6
- --accent-foreground: #DFDFE2;
7
- --background: #09090B;
8
- --background-base: #09090B;
9
- --background-green: #00471A;
10
- --background-green-on-hover: #006625;
11
- --background-info: #00123D;
12
- --background-info-on-hover: #001E66;
13
- --background-invert: #FFFFFF;
14
- --background-invert-light: #DFDFE2;
15
- --background-low: #17171C;
16
- --background-low-on-hover: #2F2F37;
17
- --background-orange: #331500;
18
- --background-orange-on-hover: #5C2500;
19
- --background-primary: #00123D;
20
- --background-primary-on-hover: #001E66;
21
- --background-red: #2D060D;
22
- --background-red-on-hover: #4C0B17;
23
- --background-secondary: #17171C;
24
- --background-tertiary: #2F2F37;
25
- --background-yellow: #3D2600;
26
- --background-yellow-on-hover: #5C3A00;
27
- --border: #4E4E5A;
28
- --border-blue: #709AFF;
29
- --border-blue-on-hover: #3772FF;
30
- --border-blue-subtle: #002680;
31
- --border-green: #00E052;
32
- --border-green-on-hover: #00B241;
33
- --border-green-subtle: #006625;
34
- --border-invert: #FFFFFF;
35
- --border-on-color: #09090B;
36
- --border-orange: #EC9C64;
37
- --border-orange-on-hover: #FF6800;
38
- --border-orange-subtle: #5C2500;
39
- --border-primary: #4E4E5A;
40
- --border-red: #E15C5C;
41
- --border-red-on-hover: #E12D4E;
42
- --border-red-subtle: #4C0B17;
43
- --border-secondary: #2F2F37;
44
- --border-subtle: #2F2F37;
45
- --border-yellow: #FFCA70;
46
- --border-yellow-on-hover: #FFAD22;
47
- --border-yellow-subtle: #5C3A00;
48
- --card: #17171C;
49
- --card-foreground: #DFDFE2;
50
- --color-black: #09090B;
51
- --color-white: #FFFFFF;
52
- --content-always-black: #09090B;
53
- --content-always-white: #FFFFFF;
54
- --content-blue: #709AFF;
55
- --content-blue-disabled: #002680;
56
- --content-blue-on-hover: #3772FF;
57
- --content-green: #00E052;
58
- --content-green-disabled: #008A32;
59
- --content-green-on-hover: #09FF63;
60
- --content-on-color: #09090B;
61
- --content-on-color-inverse: #EDEDED;
62
- --content-orange: #EC9C64;
63
- --content-orange-disabled: #7A3200;
64
- --content-orange-on-hover: #FFC9A3;
65
- --content-primary: #DFDFE2;
66
- --content-red: #E15C5C;
67
- --content-red-disabled: #7D1225;
68
- --content-red-on-hover: #F6C1CA;
69
- --content-secondary: #7E7E8B;
70
- --content-subtle: #4E4E5A;
71
- --content-yellow: #FFCA70;
72
- --content-yellow-disabled: #7A4D00;
73
- --content-yellow-on-hover: #FFD999;
74
- --destructive: #E15C5C;
75
- --destructive-foreground: #FFFFFF;
76
- --font-mono: Gist Mono, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
77
- --font-sans: Gist, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
78
- --font-size-2xl: 1.5rem;
79
- --font-size-3xl: 1.875rem;
80
- --font-size-4xl: 2.25rem;
81
- --font-size-5xl: 3rem;
82
- --font-size-base: 1rem;
83
- --font-size-lg: 1.125rem;
84
- --font-size-sm: 0.875rem;
85
- --font-size-xl: 1.25rem;
86
- --font-size-xs: 0.75rem;
87
- --font-weight-bold: 700;
88
- --font-weight-medium: 500;
89
- --font-weight-normal: 400;
90
- --font-weight-semibold: 600;
91
- --foreground: #DFDFE2;
92
- --input: #4E4E5A;
93
- --intent-danger: #E15C5C;
94
- --intent-danger-active: #E12D4E;
95
- --intent-danger-bg: #2D060D;
96
- --intent-danger-bg-active: #4C0B17;
97
- --intent-danger-bg-hover: #4C0B17;
98
- --intent-danger-border: #E15C5C;
99
- --intent-danger-hover: #F6C1CA;
100
- --intent-danger-text: #E15C5C;
101
- --intent-neutral: #7E7E8B;
102
- --intent-neutral-active: #EDEDED;
103
- --intent-neutral-bg: #17171C;
104
- --intent-neutral-bg-active: #2F2F37;
105
- --intent-neutral-bg-hover: #2F2F37;
106
- --intent-neutral-border: #4E4E5A;
107
- --intent-neutral-hover: #DFDFE2;
108
- --intent-neutral-text: #DFDFE2;
109
- --intent-primary: #7E7E8B;
110
- --intent-primary-active: #EDEDED;
111
- --intent-primary-bg: #17171C;
112
- --intent-primary-bg-active: #2F2F37;
113
- --intent-primary-bg-hover: #2F2F37;
114
- --intent-primary-border: #4E4E5A;
115
- --intent-primary-hover: #DFDFE2;
116
- --intent-primary-text: #DFDFE2;
117
- --intent-success: #00E052;
118
- --intent-success-active: #00B241;
119
- --intent-success-bg: #00471A;
120
- --intent-success-bg-active: #008A32;
121
- --intent-success-bg-hover: #006625;
122
- --intent-success-border: #00E052;
123
- --intent-success-hover: #09FF63;
124
- --intent-success-text: #00E052;
125
- --intent-warning: #FFCA70;
126
- --intent-warning-active: #FFAD22;
127
- --intent-warning-bg: #3D2600;
128
- --intent-warning-bg-active: #5C3A00;
129
- --intent-warning-bg-hover: #5C3A00;
130
- --intent-warning-border: #FFCA70;
131
- --intent-warning-hover: #FFD999;
132
- --intent-warning-text: #FFCA70;
133
- --line-height-normal: 1.5;
134
- --line-height-relaxed: 1.75;
135
- --line-height-tight: 1.25;
136
- --muted: #17171C;
137
- --muted-foreground: #4E4E5A;
138
- --popover: #17171C;
139
- --popover-foreground: #DFDFE2;
140
- --primary: #7E7E8B;
141
- --primary-foreground: #FFFFFF;
142
- --radius: 0.375rem;
143
- --radius-2xl: 1rem;
144
- --radius-3xl: 1.5rem;
145
- --radius-base: 0.25rem;
146
- --radius-full: 9999px;
147
- --radius-lg: 0.5rem;
148
- --radius-md: 0.375rem;
149
- --radius-none: 0;
150
- --radius-sm: 0.125rem;
151
- --radius-xl: 0.75rem;
152
- --ring: #7E7E8B;
153
- --secondary: #17171C;
154
- --secondary-foreground: #DFDFE2;
155
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
156
- --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
157
- --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
158
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
159
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
160
- --shadow-none: none;
161
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
162
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
163
- --spacing-0: 0;
164
- --spacing-1: 0.25rem;
165
- --spacing-10: 2.5rem;
166
- --spacing-12: 3rem;
167
- --spacing-16: 4rem;
168
- --spacing-2: 0.5rem;
169
- --spacing-20: 5rem;
170
- --spacing-24: 6rem;
171
- --spacing-3: 0.75rem;
172
- --spacing-4: 1rem;
173
- --spacing-5: 1.25rem;
174
- --spacing-6: 1.5rem;
175
- --spacing-8: 2rem;
176
- --surface-base: #09090B;
177
- --surface-base-border: #4E4E5A;
178
- --surface-elevated: #17171C;
179
- --surface-elevated-border: #2F2F37;
180
- --surface-overlay: rgba(0, 0, 0, 0.7);
181
- --text-body: #DFDFE2;
182
- --text-disabled: #60606C;
183
- --text-heading: #DFDFE2;
184
- --text-muted: #4E4E5A;
185
- --z-dropdown: 1000;
186
- --z-fixed: 1030;
187
- --z-modal: 1050;
188
- --z-modal-backdrop: 1040;
189
- --z-popover: 1060;
190
- --z-sticky: 1020;
191
- --z-tooltip: 1070;
192
-
193
- font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
194
- color: var(--text-body);
195
- background-color: var(--surface-base);
196
- }
197
-
198
1
  *, ::before, ::after {
199
- --tw-border-spacing-x: 0;
200
- --tw-border-spacing-y: 0;
201
- --tw-translate-x: 0;
202
- --tw-translate-y: 0;
203
- --tw-rotate: 0;
204
- --tw-skew-x: 0;
205
- --tw-skew-y: 0;
206
- --tw-scale-x: 1;
207
- --tw-scale-y: 1;
208
- --tw-pan-x: ;
209
- --tw-pan-y: ;
210
- --tw-pinch-zoom: ;
211
- --tw-scroll-snap-strictness: proximity;
212
- --tw-gradient-from-position: ;
213
- --tw-gradient-via-position: ;
214
- --tw-gradient-to-position: ;
215
- --tw-ordinal: ;
216
- --tw-slashed-zero: ;
217
- --tw-numeric-figure: ;
218
- --tw-numeric-spacing: ;
219
- --tw-numeric-fraction: ;
220
- --tw-ring-inset: ;
221
- --tw-ring-offset-width: 0px;
222
- --tw-ring-offset-color: #fff;
223
- --tw-ring-color: rgb(59 130 246 / 0.5);
224
- --tw-ring-offset-shadow: 0 0 #0000;
225
- --tw-ring-shadow: 0 0 #0000;
226
- --tw-shadow: 0 0 #0000;
227
- --tw-shadow-colored: 0 0 #0000;
228
- --tw-blur: ;
229
- --tw-brightness: ;
230
- --tw-contrast: ;
231
- --tw-grayscale: ;
232
- --tw-hue-rotate: ;
233
- --tw-invert: ;
234
- --tw-saturate: ;
235
- --tw-sepia: ;
236
- --tw-drop-shadow: ;
237
- --tw-backdrop-blur: ;
238
- --tw-backdrop-brightness: ;
239
- --tw-backdrop-contrast: ;
240
- --tw-backdrop-grayscale: ;
241
- --tw-backdrop-hue-rotate: ;
242
- --tw-backdrop-invert: ;
243
- --tw-backdrop-opacity: ;
244
- --tw-backdrop-saturate: ;
245
- --tw-backdrop-sepia: ;
246
- --tw-contain-size: ;
247
- --tw-contain-layout: ;
248
- --tw-contain-paint: ;
249
- --tw-contain-style: ;
2
+ --tw-border-spacing-x: 0;
3
+ --tw-border-spacing-y: 0;
4
+ --tw-translate-x: 0;
5
+ --tw-translate-y: 0;
6
+ --tw-rotate: 0;
7
+ --tw-skew-x: 0;
8
+ --tw-skew-y: 0;
9
+ --tw-scale-x: 1;
10
+ --tw-scale-y: 1;
11
+ --tw-pan-x: ;
12
+ --tw-pan-y: ;
13
+ --tw-pinch-zoom: ;
14
+ --tw-scroll-snap-strictness: proximity;
15
+ --tw-gradient-from-position: ;
16
+ --tw-gradient-via-position: ;
17
+ --tw-gradient-to-position: ;
18
+ --tw-ordinal: ;
19
+ --tw-slashed-zero: ;
20
+ --tw-numeric-figure: ;
21
+ --tw-numeric-spacing: ;
22
+ --tw-numeric-fraction: ;
23
+ --tw-ring-inset: ;
24
+ --tw-ring-offset-width: 0px;
25
+ --tw-ring-offset-color: #fff;
26
+ --tw-ring-color: rgb(59 130 246 / 0.5);
27
+ --tw-ring-offset-shadow: 0 0 #0000;
28
+ --tw-ring-shadow: 0 0 #0000;
29
+ --tw-shadow: 0 0 #0000;
30
+ --tw-shadow-colored: 0 0 #0000;
31
+ --tw-blur: ;
32
+ --tw-brightness: ;
33
+ --tw-contrast: ;
34
+ --tw-grayscale: ;
35
+ --tw-hue-rotate: ;
36
+ --tw-invert: ;
37
+ --tw-saturate: ;
38
+ --tw-sepia: ;
39
+ --tw-drop-shadow: ;
40
+ --tw-backdrop-blur: ;
41
+ --tw-backdrop-brightness: ;
42
+ --tw-backdrop-contrast: ;
43
+ --tw-backdrop-grayscale: ;
44
+ --tw-backdrop-hue-rotate: ;
45
+ --tw-backdrop-invert: ;
46
+ --tw-backdrop-opacity: ;
47
+ --tw-backdrop-saturate: ;
48
+ --tw-backdrop-sepia: ;
49
+ --tw-contain-size: ;
50
+ --tw-contain-layout: ;
51
+ --tw-contain-paint: ;
52
+ --tw-contain-style: ;
250
53
  }
251
54
 
252
55
  ::backdrop {
253
- --tw-border-spacing-x: 0;
254
- --tw-border-spacing-y: 0;
255
- --tw-translate-x: 0;
256
- --tw-translate-y: 0;
257
- --tw-rotate: 0;
258
- --tw-skew-x: 0;
259
- --tw-skew-y: 0;
260
- --tw-scale-x: 1;
261
- --tw-scale-y: 1;
262
- --tw-pan-x: ;
263
- --tw-pan-y: ;
264
- --tw-pinch-zoom: ;
265
- --tw-scroll-snap-strictness: proximity;
266
- --tw-gradient-from-position: ;
267
- --tw-gradient-via-position: ;
268
- --tw-gradient-to-position: ;
269
- --tw-ordinal: ;
270
- --tw-slashed-zero: ;
271
- --tw-numeric-figure: ;
272
- --tw-numeric-spacing: ;
273
- --tw-numeric-fraction: ;
274
- --tw-ring-inset: ;
275
- --tw-ring-offset-width: 0px;
276
- --tw-ring-offset-color: #fff;
277
- --tw-ring-color: rgb(59 130 246 / 0.5);
278
- --tw-ring-offset-shadow: 0 0 #0000;
279
- --tw-ring-shadow: 0 0 #0000;
280
- --tw-shadow: 0 0 #0000;
281
- --tw-shadow-colored: 0 0 #0000;
282
- --tw-blur: ;
283
- --tw-brightness: ;
284
- --tw-contrast: ;
285
- --tw-grayscale: ;
286
- --tw-hue-rotate: ;
287
- --tw-invert: ;
288
- --tw-saturate: ;
289
- --tw-sepia: ;
290
- --tw-drop-shadow: ;
291
- --tw-backdrop-blur: ;
292
- --tw-backdrop-brightness: ;
293
- --tw-backdrop-contrast: ;
294
- --tw-backdrop-grayscale: ;
295
- --tw-backdrop-hue-rotate: ;
296
- --tw-backdrop-invert: ;
297
- --tw-backdrop-opacity: ;
298
- --tw-backdrop-saturate: ;
299
- --tw-backdrop-sepia: ;
300
- --tw-contain-size: ;
301
- --tw-contain-layout: ;
302
- --tw-contain-paint: ;
303
- --tw-contain-style: ;
304
- }
305
-
306
- /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
307
-
308
- /*
56
+ --tw-border-spacing-x: 0;
57
+ --tw-border-spacing-y: 0;
58
+ --tw-translate-x: 0;
59
+ --tw-translate-y: 0;
60
+ --tw-rotate: 0;
61
+ --tw-skew-x: 0;
62
+ --tw-skew-y: 0;
63
+ --tw-scale-x: 1;
64
+ --tw-scale-y: 1;
65
+ --tw-pan-x: ;
66
+ --tw-pan-y: ;
67
+ --tw-pinch-zoom: ;
68
+ --tw-scroll-snap-strictness: proximity;
69
+ --tw-gradient-from-position: ;
70
+ --tw-gradient-via-position: ;
71
+ --tw-gradient-to-position: ;
72
+ --tw-ordinal: ;
73
+ --tw-slashed-zero: ;
74
+ --tw-numeric-figure: ;
75
+ --tw-numeric-spacing: ;
76
+ --tw-numeric-fraction: ;
77
+ --tw-ring-inset: ;
78
+ --tw-ring-offset-width: 0px;
79
+ --tw-ring-offset-color: #fff;
80
+ --tw-ring-color: rgb(59 130 246 / 0.5);
81
+ --tw-ring-offset-shadow: 0 0 #0000;
82
+ --tw-ring-shadow: 0 0 #0000;
83
+ --tw-shadow: 0 0 #0000;
84
+ --tw-shadow-colored: 0 0 #0000;
85
+ --tw-blur: ;
86
+ --tw-brightness: ;
87
+ --tw-contrast: ;
88
+ --tw-grayscale: ;
89
+ --tw-hue-rotate: ;
90
+ --tw-invert: ;
91
+ --tw-saturate: ;
92
+ --tw-sepia: ;
93
+ --tw-drop-shadow: ;
94
+ --tw-backdrop-blur: ;
95
+ --tw-backdrop-brightness: ;
96
+ --tw-backdrop-contrast: ;
97
+ --tw-backdrop-grayscale: ;
98
+ --tw-backdrop-hue-rotate: ;
99
+ --tw-backdrop-invert: ;
100
+ --tw-backdrop-opacity: ;
101
+ --tw-backdrop-saturate: ;
102
+ --tw-backdrop-sepia: ;
103
+ --tw-contain-size: ;
104
+ --tw-contain-layout: ;
105
+ --tw-contain-paint: ;
106
+ --tw-contain-style: ;
107
+ }/*
108
+ ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
109
+ *//*
309
110
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
310
111
  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
311
112
  */
@@ -622,7 +423,6 @@ menu {
622
423
  /*
623
424
  Reset default styling for dialogs.
624
425
  */
625
-
626
426
  dialog {
627
427
  padding: 0;
628
428
  }
@@ -663,7 +463,6 @@ button,
663
463
  /*
664
464
  Make sure disabled buttons don't get the pointer cursor.
665
465
  */
666
-
667
466
  :disabled {
668
467
  cursor: default;
669
468
  }
@@ -697,16 +496,211 @@ video {
697
496
  }
698
497
 
699
498
  /* Make elements with the HTML hidden attribute stay hidden by default */
700
-
701
499
  [hidden]:where(:not([hidden="until-found"])) {
702
500
  display: none;
703
501
  }
704
-
705
- * {
502
+ /* Default CSS variables (dark theme) - will be overridden by ThemeProvider */
503
+ /* These ensure styling works before JavaScript loads */
504
+ /* Auto-generated from theme tokens - DO NOT EDIT MANUALLY */
505
+ :root {
506
+ --accent: #17171C;
507
+ --accent-foreground: #DFDFE2;
508
+ --background: #09090B;
509
+ --background-base: #09090B;
510
+ --background-green: #00471A;
511
+ --background-green-on-hover: #006625;
512
+ --background-info: #00123D;
513
+ --background-info-on-hover: #001E66;
514
+ --background-invert: #FFFFFF;
515
+ --background-invert-light: #DFDFE2;
516
+ --background-low: #17171C;
517
+ --background-low-on-hover: #2F2F37;
518
+ --background-orange: #331500;
519
+ --background-orange-on-hover: #5C2500;
520
+ --background-primary: #00123D;
521
+ --background-primary-on-hover: #001E66;
522
+ --background-red: #2D060D;
523
+ --background-red-on-hover: #4C0B17;
524
+ --background-secondary: #17171C;
525
+ --background-tertiary: #2F2F37;
526
+ --background-yellow: #3D2600;
527
+ --background-yellow-on-hover: #5C3A00;
528
+ --border: #4E4E5A;
529
+ --border-blue: #709AFF;
530
+ --border-blue-on-hover: #3772FF;
531
+ --border-blue-subtle: #002680;
532
+ --border-green: #00E052;
533
+ --border-green-on-hover: #00B241;
534
+ --border-green-subtle: #006625;
535
+ --border-invert: #FFFFFF;
536
+ --border-on-color: #09090B;
537
+ --border-orange: #EC9C64;
538
+ --border-orange-on-hover: #FF6800;
539
+ --border-orange-subtle: #5C2500;
540
+ --border-primary: #4E4E5A;
541
+ --border-red: #E15C5C;
542
+ --border-red-on-hover: #E12D4E;
543
+ --border-red-subtle: #4C0B17;
544
+ --border-secondary: #2F2F37;
545
+ --border-subtle: #2F2F37;
546
+ --border-yellow: #FFCA70;
547
+ --border-yellow-on-hover: #FFAD22;
548
+ --border-yellow-subtle: #5C3A00;
549
+ --card: #17171C;
550
+ --card-foreground: #DFDFE2;
551
+ --color-black: #09090B;
552
+ --color-white: #FFFFFF;
553
+ --content-always-black: #09090B;
554
+ --content-always-white: #FFFFFF;
555
+ --content-blue: #709AFF;
556
+ --content-blue-disabled: #002680;
557
+ --content-blue-on-hover: #3772FF;
558
+ --content-green: #00E052;
559
+ --content-green-disabled: #008A32;
560
+ --content-green-on-hover: #09FF63;
561
+ --content-on-color: #09090B;
562
+ --content-on-color-inverse: #EDEDED;
563
+ --content-orange: #EC9C64;
564
+ --content-orange-disabled: #7A3200;
565
+ --content-orange-on-hover: #FFC9A3;
566
+ --content-primary: #DFDFE2;
567
+ --content-red: #E15C5C;
568
+ --content-red-disabled: #7D1225;
569
+ --content-red-on-hover: #F6C1CA;
570
+ --content-secondary: #7E7E8B;
571
+ --content-subtle: #4E4E5A;
572
+ --content-yellow: #FFCA70;
573
+ --content-yellow-disabled: #7A4D00;
574
+ --content-yellow-on-hover: #FFD999;
575
+ --destructive: #E15C5C;
576
+ --destructive-foreground: #FFFFFF;
577
+ --font-mono: Gist Mono, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
578
+ --font-sans: Gist, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
579
+ --font-size-2xl: 1.5rem;
580
+ --font-size-3xl: 1.875rem;
581
+ --font-size-4xl: 2.25rem;
582
+ --font-size-5xl: 3rem;
583
+ --font-size-base: 1rem;
584
+ --font-size-lg: 1.125rem;
585
+ --font-size-sm: 0.875rem;
586
+ --font-size-xl: 1.25rem;
587
+ --font-size-xs: 0.75rem;
588
+ --font-weight-bold: 700;
589
+ --font-weight-medium: 500;
590
+ --font-weight-normal: 400;
591
+ --font-weight-semibold: 600;
592
+ --foreground: #DFDFE2;
593
+ --input: #4E4E5A;
594
+ --intent-danger: #E15C5C;
595
+ --intent-danger-active: #E12D4E;
596
+ --intent-danger-bg: #2D060D;
597
+ --intent-danger-bg-active: #4C0B17;
598
+ --intent-danger-bg-hover: #4C0B17;
599
+ --intent-danger-border: #E15C5C;
600
+ --intent-danger-hover: #F6C1CA;
601
+ --intent-danger-text: #E15C5C;
602
+ --intent-neutral: #7E7E8B;
603
+ --intent-neutral-active: #EDEDED;
604
+ --intent-neutral-bg: #17171C;
605
+ --intent-neutral-bg-active: #2F2F37;
606
+ --intent-neutral-bg-hover: #2F2F37;
607
+ --intent-neutral-border: #4E4E5A;
608
+ --intent-neutral-hover: #DFDFE2;
609
+ --intent-neutral-text: #DFDFE2;
610
+ --intent-primary: #7E7E8B;
611
+ --intent-primary-active: #EDEDED;
612
+ --intent-primary-bg: #17171C;
613
+ --intent-primary-bg-active: #2F2F37;
614
+ --intent-primary-bg-hover: #2F2F37;
615
+ --intent-primary-border: #4E4E5A;
616
+ --intent-primary-hover: #DFDFE2;
617
+ --intent-primary-text: #DFDFE2;
618
+ --intent-success: #00E052;
619
+ --intent-success-active: #00B241;
620
+ --intent-success-bg: #00471A;
621
+ --intent-success-bg-active: #008A32;
622
+ --intent-success-bg-hover: #006625;
623
+ --intent-success-border: #00E052;
624
+ --intent-success-hover: #09FF63;
625
+ --intent-success-text: #00E052;
626
+ --intent-warning: #FFCA70;
627
+ --intent-warning-active: #FFAD22;
628
+ --intent-warning-bg: #3D2600;
629
+ --intent-warning-bg-active: #5C3A00;
630
+ --intent-warning-bg-hover: #5C3A00;
631
+ --intent-warning-border: #FFCA70;
632
+ --intent-warning-hover: #FFD999;
633
+ --intent-warning-text: #FFCA70;
634
+ --line-height-normal: 1.5;
635
+ --line-height-relaxed: 1.75;
636
+ --line-height-tight: 1.25;
637
+ --muted: #17171C;
638
+ --muted-foreground: #4E4E5A;
639
+ --popover: #17171C;
640
+ --popover-foreground: #DFDFE2;
641
+ --primary: #7E7E8B;
642
+ --primary-foreground: #FFFFFF;
643
+ --radius: 0.375rem;
644
+ --radius-2xl: 1rem;
645
+ --radius-3xl: 1.5rem;
646
+ --radius-base: 0.25rem;
647
+ --radius-full: 9999px;
648
+ --radius-lg: 0.5rem;
649
+ --radius-md: 0.375rem;
650
+ --radius-none: 0;
651
+ --radius-sm: 0.125rem;
652
+ --radius-xl: 0.75rem;
653
+ --ring: #7E7E8B;
654
+ --secondary: #17171C;
655
+ --secondary-foreground: #DFDFE2;
656
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
657
+ --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
658
+ --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
659
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
660
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
661
+ --shadow-none: none;
662
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
663
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
664
+ --spacing-0: 0;
665
+ --spacing-1: 0.25rem;
666
+ --spacing-10: 2.5rem;
667
+ --spacing-12: 3rem;
668
+ --spacing-16: 4rem;
669
+ --spacing-2: 0.5rem;
670
+ --spacing-20: 5rem;
671
+ --spacing-24: 6rem;
672
+ --spacing-3: 0.75rem;
673
+ --spacing-4: 1rem;
674
+ --spacing-5: 1.25rem;
675
+ --spacing-6: 1.5rem;
676
+ --spacing-8: 2rem;
677
+ --surface-base: #09090B;
678
+ --surface-base-border: #4E4E5A;
679
+ --surface-elevated: #17171C;
680
+ --surface-elevated-border: #2F2F37;
681
+ --surface-overlay: rgba(0, 0, 0, 0.7);
682
+ --text-body: #DFDFE2;
683
+ --text-disabled: #60606C;
684
+ --text-heading: #DFDFE2;
685
+ --text-muted: #4E4E5A;
686
+ --z-dropdown: 1000;
687
+ --z-fixed: 1030;
688
+ --z-modal: 1050;
689
+ --z-modal-backdrop: 1040;
690
+ --z-popover: 1060;
691
+ --z-sticky: 1020;
692
+ --z-tooltip: 1070;
693
+
694
+ font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
695
+ color: var(--text-body);
696
+ background-color: var(--surface-base);
697
+ }
698
+
699
+ * {
706
700
  box-sizing: border-box;
707
701
  }
708
-
709
- button:focus-visible,
702
+
703
+ button:focus-visible,
710
704
  input:focus-visible,
711
705
  select:focus-visible,
712
706
  textarea:focus-visible {
@@ -714,541 +708,547 @@ button:focus-visible,
714
708
  outline-offset: 2px;
715
709
  }
716
710
  .container {
717
- width: 100%;
711
+ width: 100%;
718
712
  }
719
713
  @media (min-width: 640px) {
720
- .container {
721
- max-width: 640px;
722
- }
714
+
715
+ .container {
716
+ max-width: 640px;
717
+ }
723
718
  }
724
719
  @media (min-width: 768px) {
725
- .container {
726
- max-width: 768px;
727
- }
720
+
721
+ .container {
722
+ max-width: 768px;
723
+ }
728
724
  }
729
725
  @media (min-width: 1024px) {
730
- .container {
731
- max-width: 1024px;
732
- }
726
+
727
+ .container {
728
+ max-width: 1024px;
729
+ }
733
730
  }
734
731
  @media (min-width: 1280px) {
735
- .container {
736
- max-width: 1280px;
737
- }
732
+
733
+ .container {
734
+ max-width: 1280px;
735
+ }
738
736
  }
739
737
  @media (min-width: 1536px) {
740
- .container {
741
- max-width: 1536px;
742
- }
738
+
739
+ .container {
740
+ max-width: 1536px;
741
+ }
743
742
  }
744
743
  .sr-only {
745
- position: absolute;
746
- width: 1px;
747
- height: 1px;
748
- padding: 0;
749
- margin: -1px;
750
- overflow: hidden;
751
- clip: rect(0, 0, 0, 0);
752
- white-space: nowrap;
753
- border-width: 0;
744
+ position: absolute;
745
+ width: 1px;
746
+ height: 1px;
747
+ padding: 0;
748
+ margin: -1px;
749
+ overflow: hidden;
750
+ clip: rect(0, 0, 0, 0);
751
+ white-space: nowrap;
752
+ border-width: 0;
754
753
  }
755
754
  .fixed {
756
- position: fixed;
755
+ position: fixed;
757
756
  }
758
757
  .absolute {
759
- position: absolute;
758
+ position: absolute;
760
759
  }
761
760
  .relative {
762
- position: relative;
761
+ position: relative;
763
762
  }
764
763
  .sticky {
765
- position: sticky;
764
+ position: sticky;
766
765
  }
767
766
  .bottom-1 {
768
- bottom: 0.25rem;
767
+ bottom: 0.25rem;
769
768
  }
770
769
  .left-1\/2 {
771
- left: 50%;
770
+ left: 50%;
772
771
  }
773
772
  .mx-auto {
774
- margin-left: auto;
775
- margin-right: auto;
773
+ margin-left: auto;
774
+ margin-right: auto;
776
775
  }
777
776
  .mb-1 {
778
- margin-bottom: 0.25rem;
777
+ margin-bottom: 0.25rem;
779
778
  }
780
779
  .mb-2 {
781
- margin-bottom: 0.5rem;
780
+ margin-bottom: 0.5rem;
782
781
  }
783
782
  .mb-6 {
784
- margin-bottom: 1.5rem;
783
+ margin-bottom: 1.5rem;
785
784
  }
786
785
  .ml-1\.5 {
787
- margin-left: 0.375rem;
786
+ margin-left: 0.375rem;
788
787
  }
789
788
  .ml-2 {
790
- margin-left: 0.5rem;
789
+ margin-left: 0.5rem;
791
790
  }
792
791
  .ml-2\.5 {
793
- margin-left: 0.625rem;
792
+ margin-left: 0.625rem;
794
793
  }
795
794
  .mr-1\.5 {
796
- margin-right: 0.375rem;
795
+ margin-right: 0.375rem;
797
796
  }
798
797
  .mr-2 {
799
- margin-right: 0.5rem;
798
+ margin-right: 0.5rem;
800
799
  }
801
800
  .mr-2\.5 {
802
- margin-right: 0.625rem;
801
+ margin-right: 0.625rem;
803
802
  }
804
803
  .inline {
805
- display: inline;
804
+ display: inline;
806
805
  }
807
806
  .flex {
808
- display: flex;
807
+ display: flex;
809
808
  }
810
809
  .inline-flex {
811
- display: inline-flex;
810
+ display: inline-flex;
812
811
  }
813
812
  .table {
814
- display: table;
813
+ display: table;
815
814
  }
816
815
  .grid {
817
- display: grid;
816
+ display: grid;
818
817
  }
819
818
  .hidden {
820
- display: none;
819
+ display: none;
821
820
  }
822
821
  .h-10 {
823
- height: 2.5rem;
822
+ height: 2.5rem;
824
823
  }
825
824
  .h-12 {
826
- height: 3rem;
825
+ height: 3rem;
827
826
  }
828
827
  .h-16 {
829
- height: 4rem;
828
+ height: 4rem;
830
829
  }
831
830
  .h-2 {
832
- height: 0.5rem;
831
+ height: 0.5rem;
833
832
  }
834
833
  .h-28 {
835
- height: 7rem;
834
+ height: 7rem;
836
835
  }
837
836
  .h-3 {
838
- height: 0.75rem;
837
+ height: 0.75rem;
839
838
  }
840
839
  .h-4 {
841
- height: 1rem;
840
+ height: 1rem;
842
841
  }
843
842
  .h-5 {
844
- height: 1.25rem;
843
+ height: 1.25rem;
845
844
  }
846
845
  .h-8 {
847
- height: 2rem;
846
+ height: 2rem;
848
847
  }
849
848
  .min-h-\[100px\] {
850
- min-height: 100px;
849
+ min-height: 100px;
851
850
  }
852
851
  .min-h-screen {
853
- min-height: 100vh;
852
+ min-height: 100vh;
854
853
  }
855
854
  .w-2 {
856
- width: 0.5rem;
855
+ width: 0.5rem;
857
856
  }
858
857
  .w-20 {
859
- width: 5rem;
858
+ width: 5rem;
860
859
  }
861
860
  .w-24 {
862
- width: 6rem;
861
+ width: 6rem;
863
862
  }
864
863
  .w-3 {
865
- width: 0.75rem;
864
+ width: 0.75rem;
866
865
  }
867
866
  .w-4 {
868
- width: 1rem;
867
+ width: 1rem;
869
868
  }
870
869
  .w-5 {
871
- width: 1.25rem;
870
+ width: 1.25rem;
872
871
  }
873
872
  .w-full {
874
- width: 100%;
873
+ width: 100%;
875
874
  }
876
875
  .min-w-0 {
877
- min-width: 0px;
876
+ min-width: 0px;
878
877
  }
879
878
  .max-w-3xl {
880
- max-width: 48rem;
879
+ max-width: 48rem;
881
880
  }
882
881
  .max-w-4xl {
883
- max-width: 56rem;
882
+ max-width: 56rem;
884
883
  }
885
884
  .max-w-7xl {
886
- max-width: 80rem;
885
+ max-width: 80rem;
887
886
  }
888
887
  .max-w-\[1400px\] {
889
- max-width: 1400px;
888
+ max-width: 1400px;
890
889
  }
891
890
  .max-w-md {
892
- max-width: 28rem;
891
+ max-width: 28rem;
893
892
  }
894
893
  .flex-1 {
895
- flex: 1 1 0%;
894
+ flex: 1 1 0%;
896
895
  }
897
896
  .flex-shrink-0 {
898
- flex-shrink: 0;
897
+ flex-shrink: 0;
899
898
  }
900
899
  .-translate-x-1\/2 {
901
- --tw-translate-x: -50%;
902
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
900
+ --tw-translate-x: -50%;
901
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
903
902
  }
904
903
  @keyframes spin {
905
- to {
906
- transform: rotate(360deg);
907
- }
904
+
905
+ to {
906
+ transform: rotate(360deg);
907
+ }
908
908
  }
909
909
  .animate-spin {
910
- animation: spin 1s linear infinite;
910
+ animation: spin 1s linear infinite;
911
911
  }
912
912
  .cursor-pointer {
913
- cursor: pointer;
913
+ cursor: pointer;
914
914
  }
915
915
  .grid-cols-1 {
916
- grid-template-columns: repeat(1, minmax(0, 1fr));
916
+ grid-template-columns: repeat(1, minmax(0, 1fr));
917
917
  }
918
918
  .grid-cols-3 {
919
- grid-template-columns: repeat(3, minmax(0, 1fr));
919
+ grid-template-columns: repeat(3, minmax(0, 1fr));
920
920
  }
921
921
  .grid-cols-\[150px_repeat\(5\2c 1fr\)\] {
922
- grid-template-columns: 150px repeat(5,1fr);
922
+ grid-template-columns: 150px repeat(5,1fr);
923
923
  }
924
924
  .flex-row {
925
- flex-direction: row;
925
+ flex-direction: row;
926
926
  }
927
927
  .flex-col {
928
- flex-direction: column;
928
+ flex-direction: column;
929
929
  }
930
930
  .flex-wrap {
931
- flex-wrap: wrap;
931
+ flex-wrap: wrap;
932
932
  }
933
933
  .items-start {
934
- align-items: flex-start;
934
+ align-items: flex-start;
935
935
  }
936
936
  .items-center {
937
- align-items: center;
937
+ align-items: center;
938
938
  }
939
939
  .justify-center {
940
- justify-content: center;
940
+ justify-content: center;
941
941
  }
942
942
  .gap-1 {
943
- gap: 0.25rem;
943
+ gap: 0.25rem;
944
944
  }
945
945
  .gap-2 {
946
- gap: 0.5rem;
946
+ gap: 0.5rem;
947
947
  }
948
948
  .gap-3 {
949
- gap: 0.75rem;
949
+ gap: 0.75rem;
950
950
  }
951
951
  .gap-4 {
952
- gap: 1rem;
952
+ gap: 1rem;
953
953
  }
954
954
  .gap-6 {
955
- gap: 1.5rem;
955
+ gap: 1.5rem;
956
956
  }
957
957
  .gap-8 {
958
- gap: 2rem;
958
+ gap: 2rem;
959
959
  }
960
960
  .gap-x-6 {
961
- -moz-column-gap: 1.5rem;
962
- column-gap: 1.5rem;
961
+ -moz-column-gap: 1.5rem;
962
+ column-gap: 1.5rem;
963
963
  }
964
964
  .space-y-10 > :not([hidden]) ~ :not([hidden]) {
965
- --tw-space-y-reverse: 0;
966
- margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
967
- margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
965
+ --tw-space-y-reverse: 0;
966
+ margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
967
+ margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
968
968
  }
969
969
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
970
- --tw-space-y-reverse: 0;
971
- margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
972
- margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
970
+ --tw-space-y-reverse: 0;
971
+ margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
972
+ margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
973
973
  }
974
974
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
975
- --tw-space-y-reverse: 0;
976
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
977
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
975
+ --tw-space-y-reverse: 0;
976
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
977
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
978
978
  }
979
979
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
980
- --tw-space-y-reverse: 0;
981
- margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
982
- margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
980
+ --tw-space-y-reverse: 0;
981
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
982
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
983
983
  }
984
984
  .space-y-8 > :not([hidden]) ~ :not([hidden]) {
985
- --tw-space-y-reverse: 0;
986
- margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
987
- margin-bottom: calc(2rem * var(--tw-space-y-reverse));
985
+ --tw-space-y-reverse: 0;
986
+ margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
987
+ margin-bottom: calc(2rem * var(--tw-space-y-reverse));
988
988
  }
989
989
  .overflow-hidden {
990
- overflow: hidden;
990
+ overflow: hidden;
991
991
  }
992
992
  .overflow-x-auto {
993
- overflow-x: auto;
993
+ overflow-x: auto;
994
994
  }
995
995
  .truncate {
996
- overflow: hidden;
997
- text-overflow: ellipsis;
998
- white-space: nowrap;
996
+ overflow: hidden;
997
+ text-overflow: ellipsis;
998
+ white-space: nowrap;
999
999
  }
1000
1000
  .whitespace-nowrap {
1001
- white-space: nowrap;
1001
+ white-space: nowrap;
1002
1002
  }
1003
1003
  .rounded-full {
1004
- border-radius: 9999px;
1004
+ border-radius: 9999px;
1005
1005
  }
1006
1006
  .rounded-lg {
1007
- border-radius: 0.5rem;
1007
+ border-radius: 0.5rem;
1008
1008
  }
1009
1009
  .rounded-md {
1010
- border-radius: 0.375rem;
1010
+ border-radius: 0.375rem;
1011
1011
  }
1012
1012
  .rounded-xl {
1013
- border-radius: 0.75rem;
1013
+ border-radius: 0.75rem;
1014
1014
  }
1015
1015
  .border {
1016
- border-width: 1px;
1016
+ border-width: 1px;
1017
1017
  }
1018
1018
  .border-2 {
1019
- border-width: 2px;
1019
+ border-width: 2px;
1020
1020
  }
1021
1021
  .border-\[var\(--border-blue\)\] {
1022
- border-color: var(--border-blue);
1022
+ border-color: var(--border-blue);
1023
1023
  }
1024
1024
  .border-\[var\(--border-green\)\] {
1025
- border-color: var(--border-green);
1025
+ border-color: var(--border-green);
1026
1026
  }
1027
1027
  .border-\[var\(--border-green-subtle\)\] {
1028
- border-color: var(--border-green-subtle);
1028
+ border-color: var(--border-green-subtle);
1029
1029
  }
1030
1030
  .border-\[var\(--border-primary\)\] {
1031
- border-color: var(--border-primary);
1031
+ border-color: var(--border-primary);
1032
1032
  }
1033
1033
  .border-\[var\(--border-red\)\] {
1034
- border-color: var(--border-red);
1034
+ border-color: var(--border-red);
1035
1035
  }
1036
1036
  .border-\[var\(--border-secondary\)\] {
1037
- border-color: var(--border-secondary);
1037
+ border-color: var(--border-secondary);
1038
1038
  }
1039
1039
  .border-\[var\(--border-subtle\)\] {
1040
- border-color: var(--border-subtle);
1040
+ border-color: var(--border-subtle);
1041
1041
  }
1042
1042
  .border-\[var\(--border-yellow\)\] {
1043
- border-color: var(--border-yellow);
1043
+ border-color: var(--border-yellow);
1044
1044
  }
1045
1045
  .border-\[var\(--border-yellow-subtle\)\] {
1046
- border-color: var(--border-yellow-subtle);
1046
+ border-color: var(--border-yellow-subtle);
1047
1047
  }
1048
1048
  .bg-\[var\(--background-base\)\] {
1049
- background-color: var(--background-base);
1049
+ background-color: var(--background-base);
1050
1050
  }
1051
1051
  .bg-\[var\(--background-green\)\] {
1052
- background-color: var(--background-green);
1052
+ background-color: var(--background-green);
1053
1053
  }
1054
1054
  .bg-\[var\(--background-info\)\] {
1055
- background-color: var(--background-info);
1055
+ background-color: var(--background-info);
1056
1056
  }
1057
1057
  .bg-\[var\(--background-invert\)\] {
1058
- background-color: var(--background-invert);
1058
+ background-color: var(--background-invert);
1059
1059
  }
1060
1060
  .bg-\[var\(--background-low\)\] {
1061
- background-color: var(--background-low);
1061
+ background-color: var(--background-low);
1062
1062
  }
1063
1063
  .bg-\[var\(--background-primary\)\] {
1064
- background-color: var(--background-primary);
1064
+ background-color: var(--background-primary);
1065
1065
  }
1066
1066
  .bg-\[var\(--background-red\)\] {
1067
- background-color: var(--background-red);
1067
+ background-color: var(--background-red);
1068
1068
  }
1069
1069
  .bg-\[var\(--background-secondary\)\] {
1070
- background-color: var(--background-secondary);
1070
+ background-color: var(--background-secondary);
1071
1071
  }
1072
1072
  .bg-\[var\(--background-yellow\)\] {
1073
- background-color: var(--background-yellow);
1073
+ background-color: var(--background-yellow);
1074
1074
  }
1075
1075
  .bg-\[var\(--content-primary\)\] {
1076
- background-color: var(--content-primary);
1076
+ background-color: var(--content-primary);
1077
1077
  }
1078
1078
  .bg-blue-400 {
1079
- --tw-bg-opacity: 1;
1080
- background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
1079
+ --tw-bg-opacity: 1;
1080
+ background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
1081
1081
  }
1082
1082
  .bg-yellow-400 {
1083
- --tw-bg-opacity: 1;
1084
- background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
1083
+ --tw-bg-opacity: 1;
1084
+ background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
1085
1085
  }
1086
1086
  .p-12 {
1087
- padding: 3rem;
1087
+ padding: 3rem;
1088
1088
  }
1089
1089
  .p-2 {
1090
- padding: 0.5rem;
1090
+ padding: 0.5rem;
1091
1091
  }
1092
1092
  .p-4 {
1093
- padding: 1rem;
1093
+ padding: 1rem;
1094
1094
  }
1095
1095
  .p-5 {
1096
- padding: 1.25rem;
1096
+ padding: 1.25rem;
1097
1097
  }
1098
1098
  .p-6 {
1099
- padding: 1.5rem;
1099
+ padding: 1.5rem;
1100
1100
  }
1101
1101
  .p-8 {
1102
- padding: 2rem;
1102
+ padding: 2rem;
1103
1103
  }
1104
1104
  .px-1 {
1105
- padding-left: 0.25rem;
1106
- padding-right: 0.25rem;
1105
+ padding-left: 0.25rem;
1106
+ padding-right: 0.25rem;
1107
1107
  }
1108
1108
  .px-3 {
1109
- padding-left: 0.75rem;
1110
- padding-right: 0.75rem;
1109
+ padding-left: 0.75rem;
1110
+ padding-right: 0.75rem;
1111
1111
  }
1112
1112
  .px-4 {
1113
- padding-left: 1rem;
1114
- padding-right: 1rem;
1113
+ padding-left: 1rem;
1114
+ padding-right: 1rem;
1115
1115
  }
1116
1116
  .px-6 {
1117
- padding-left: 1.5rem;
1118
- padding-right: 1.5rem;
1117
+ padding-left: 1.5rem;
1118
+ padding-right: 1.5rem;
1119
1119
  }
1120
1120
  .pt-2 {
1121
- padding-top: 0.5rem;
1121
+ padding-top: 0.5rem;
1122
1122
  }
1123
1123
  .text-center {
1124
- text-align: center;
1124
+ text-align: center;
1125
1125
  }
1126
1126
  .font-mono {
1127
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1127
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1128
1128
  }
1129
1129
  .text-2xl {
1130
- font-size: 1.5rem;
1131
- line-height: 2rem;
1130
+ font-size: 1.5rem;
1131
+ line-height: 2rem;
1132
1132
  }
1133
1133
  .text-3xl {
1134
- font-size: 1.875rem;
1135
- line-height: 2.25rem;
1134
+ font-size: 1.875rem;
1135
+ line-height: 2.25rem;
1136
1136
  }
1137
1137
  .text-4xl {
1138
- font-size: 2.25rem;
1139
- line-height: 2.5rem;
1138
+ font-size: 2.25rem;
1139
+ line-height: 2.5rem;
1140
1140
  }
1141
1141
  .text-\[10px\] {
1142
- font-size: 10px;
1142
+ font-size: 10px;
1143
1143
  }
1144
1144
  .text-\[8px\] {
1145
- font-size: 8px;
1145
+ font-size: 8px;
1146
1146
  }
1147
1147
  .text-base {
1148
- font-size: 1rem;
1149
- line-height: 1.5rem;
1148
+ font-size: 1rem;
1149
+ line-height: 1.5rem;
1150
1150
  }
1151
1151
  .text-lg {
1152
- font-size: 1.125rem;
1153
- line-height: 1.75rem;
1152
+ font-size: 1.125rem;
1153
+ line-height: 1.75rem;
1154
1154
  }
1155
1155
  .text-sm {
1156
- font-size: 0.875rem;
1157
- line-height: 1.25rem;
1156
+ font-size: 0.875rem;
1157
+ line-height: 1.25rem;
1158
1158
  }
1159
1159
  .text-xl {
1160
- font-size: 1.25rem;
1161
- line-height: 1.75rem;
1160
+ font-size: 1.25rem;
1161
+ line-height: 1.75rem;
1162
1162
  }
1163
1163
  .text-xs {
1164
- font-size: 0.75rem;
1165
- line-height: 1rem;
1164
+ font-size: 0.75rem;
1165
+ line-height: 1rem;
1166
1166
  }
1167
1167
  .font-bold {
1168
- font-weight: 700;
1168
+ font-weight: 700;
1169
1169
  }
1170
1170
  .font-medium {
1171
- font-weight: 500;
1171
+ font-weight: 500;
1172
1172
  }
1173
1173
  .font-semibold {
1174
- font-weight: 600;
1174
+ font-weight: 600;
1175
1175
  }
1176
1176
  .capitalize {
1177
- text-transform: capitalize;
1177
+ text-transform: capitalize;
1178
1178
  }
1179
1179
  .leading-relaxed {
1180
- line-height: 1.625;
1180
+ line-height: 1.625;
1181
1181
  }
1182
1182
  .leading-tight {
1183
- line-height: 1.25;
1183
+ line-height: 1.25;
1184
1184
  }
1185
1185
  .text-\[var\(--content-blue\)\] {
1186
- color: var(--content-blue);
1186
+ color: var(--content-blue);
1187
1187
  }
1188
1188
  .text-\[var\(--content-green\)\] {
1189
- color: var(--content-green);
1189
+ color: var(--content-green);
1190
1190
  }
1191
1191
  .text-\[var\(--content-on-color\)\] {
1192
- color: var(--content-on-color);
1192
+ color: var(--content-on-color);
1193
1193
  }
1194
1194
  .text-\[var\(--content-primary\)\] {
1195
- color: var(--content-primary);
1195
+ color: var(--content-primary);
1196
1196
  }
1197
1197
  .text-\[var\(--content-red\)\] {
1198
- color: var(--content-red);
1198
+ color: var(--content-red);
1199
1199
  }
1200
1200
  .text-\[var\(--content-secondary\)\] {
1201
- color: var(--content-secondary);
1201
+ color: var(--content-secondary);
1202
1202
  }
1203
1203
  .text-\[var\(--content-subtle\)\] {
1204
- color: var(--content-subtle);
1204
+ color: var(--content-subtle);
1205
1205
  }
1206
1206
  .text-\[var\(--content-yellow\)\] {
1207
- color: var(--content-yellow);
1207
+ color: var(--content-yellow);
1208
1208
  }
1209
1209
  .text-gray-500 {
1210
- --tw-text-opacity: 1;
1211
- color: rgb(107 114 128 / var(--tw-text-opacity, 1));
1210
+ --tw-text-opacity: 1;
1211
+ color: rgb(107 114 128 / var(--tw-text-opacity, 1));
1212
1212
  }
1213
1213
  .shadow-sm {
1214
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1215
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1216
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1214
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1215
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1216
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1217
1217
  }
1218
1218
  .outline {
1219
- outline-style: solid;
1219
+ outline-style: solid;
1220
1220
  }
1221
1221
  .invert {
1222
- --tw-invert: invert(100%);
1223
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1222
+ --tw-invert: invert(100%);
1223
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1224
1224
  }
1225
1225
  .filter {
1226
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1226
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1227
1227
  }
1228
1228
  .transition {
1229
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1230
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1231
- transition-duration: 150ms;
1229
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1230
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1231
+ transition-duration: 150ms;
1232
1232
  }
1233
1233
  .transition-all {
1234
- transition-property: all;
1235
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1236
- transition-duration: 150ms;
1234
+ transition-property: all;
1235
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1236
+ transition-duration: 150ms;
1237
1237
  }
1238
1238
  .transition-colors {
1239
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1240
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1241
- transition-duration: 150ms;
1239
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1240
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1241
+ transition-duration: 150ms;
1242
1242
  }
1243
1243
  .transition-shadow {
1244
- transition-property: box-shadow;
1245
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1246
- transition-duration: 150ms;
1244
+ transition-property: box-shadow;
1245
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1246
+ transition-duration: 150ms;
1247
1247
  }
1248
1248
  .transition-transform {
1249
- transition-property: transform;
1250
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1251
- transition-duration: 150ms;
1249
+ transition-property: transform;
1250
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1251
+ transition-duration: 150ms;
1252
1252
  }
1253
1253
  /* Screen reader only utility - visually hidden but accessible to assistive technologies */
1254
1254
  .sr-only {
@@ -1263,138 +1263,141 @@ button:focus-visible,
1263
1263
  border-width: 0;
1264
1264
  }
1265
1265
  .hover\:border-\[var\(--border-green-on-hover\)\]:hover {
1266
- border-color: var(--border-green-on-hover);
1266
+ border-color: var(--border-green-on-hover);
1267
1267
  }
1268
1268
  .hover\:border-\[var\(--border-primary\)\]:hover {
1269
- border-color: var(--border-primary);
1269
+ border-color: var(--border-primary);
1270
1270
  }
1271
1271
  .hover\:border-\[var\(--border-red-on-hover\)\]:hover {
1272
- border-color: var(--border-red-on-hover);
1272
+ border-color: var(--border-red-on-hover);
1273
1273
  }
1274
1274
  .hover\:border-\[var\(--border-secondary\)\]:hover {
1275
- border-color: var(--border-secondary);
1275
+ border-color: var(--border-secondary);
1276
1276
  }
1277
1277
  .hover\:border-\[var\(--border-yellow-on-hover\)\]:hover {
1278
- border-color: var(--border-yellow-on-hover);
1278
+ border-color: var(--border-yellow-on-hover);
1279
1279
  }
1280
1280
  .hover\:bg-\[var\(--background-green\)\]:hover {
1281
- background-color: var(--background-green);
1281
+ background-color: var(--background-green);
1282
1282
  }
1283
1283
  .hover\:bg-\[var\(--background-green-on-hover\)\]:hover {
1284
- background-color: var(--background-green-on-hover);
1284
+ background-color: var(--background-green-on-hover);
1285
1285
  }
1286
1286
  .hover\:bg-\[var\(--background-invert-light\)\]:hover {
1287
- background-color: var(--background-invert-light);
1287
+ background-color: var(--background-invert-light);
1288
1288
  }
1289
1289
  .hover\:bg-\[var\(--background-low\)\]:hover {
1290
- background-color: var(--background-low);
1290
+ background-color: var(--background-low);
1291
1291
  }
1292
1292
  .hover\:bg-\[var\(--background-low-on-hover\)\]:hover {
1293
- background-color: var(--background-low-on-hover);
1293
+ background-color: var(--background-low-on-hover);
1294
1294
  }
1295
1295
  .hover\:bg-\[var\(--background-red\)\]:hover {
1296
- background-color: var(--background-red);
1296
+ background-color: var(--background-red);
1297
1297
  }
1298
1298
  .hover\:bg-\[var\(--background-red-on-hover\)\]:hover {
1299
- background-color: var(--background-red-on-hover);
1299
+ background-color: var(--background-red-on-hover);
1300
1300
  }
1301
1301
  .hover\:bg-\[var\(--background-yellow\)\]:hover {
1302
- background-color: var(--background-yellow);
1302
+ background-color: var(--background-yellow);
1303
1303
  }
1304
1304
  .hover\:bg-\[var\(--background-yellow-on-hover\)\]:hover {
1305
- background-color: var(--background-yellow-on-hover);
1305
+ background-color: var(--background-yellow-on-hover);
1306
1306
  }
1307
1307
  .hover\:text-\[var\(--content-green-on-hover\)\]:hover {
1308
- color: var(--content-green-on-hover);
1308
+ color: var(--content-green-on-hover);
1309
1309
  }
1310
1310
  .hover\:text-\[var\(--content-primary\)\]:hover {
1311
- color: var(--content-primary);
1311
+ color: var(--content-primary);
1312
1312
  }
1313
1313
  .hover\:text-\[var\(--content-red-on-hover\)\]:hover {
1314
- color: var(--content-red-on-hover);
1314
+ color: var(--content-red-on-hover);
1315
1315
  }
1316
1316
  .hover\:text-\[var\(--content-yellow-on-hover\)\]:hover {
1317
- color: var(--content-yellow-on-hover);
1317
+ color: var(--content-yellow-on-hover);
1318
1318
  }
1319
1319
  .hover\:shadow-lg:hover {
1320
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1321
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1322
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1320
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1321
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1322
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1323
1323
  }
1324
1324
  .hover\:shadow-md:hover {
1325
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1326
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1327
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1325
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1326
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1327
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1328
1328
  }
1329
1329
  .focus-visible\:outline-none:focus-visible {
1330
- outline: 2px solid transparent;
1331
- outline-offset: 2px;
1330
+ outline: 2px solid transparent;
1331
+ outline-offset: 2px;
1332
1332
  }
1333
1333
  .focus-visible\:ring-2:focus-visible {
1334
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1335
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1336
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1334
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1335
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1336
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1337
1337
  }
1338
1338
  .focus-visible\:ring-\[var\(--border-blue\)\]:focus-visible {
1339
- --tw-ring-color: var(--border-blue);
1339
+ --tw-ring-color: var(--border-blue);
1340
1340
  }
1341
1341
  .focus-visible\:ring-offset-2:focus-visible {
1342
- --tw-ring-offset-width: 2px;
1342
+ --tw-ring-offset-width: 2px;
1343
1343
  }
1344
1344
  .active\:bg-\[var\(--background-green\)\]:active {
1345
- background-color: var(--background-green);
1345
+ background-color: var(--background-green);
1346
1346
  }
1347
1347
  .active\:bg-\[var\(--background-invert\)\]:active {
1348
- background-color: var(--background-invert);
1348
+ background-color: var(--background-invert);
1349
1349
  }
1350
1350
  .active\:bg-\[var\(--background-red\)\]:active {
1351
- background-color: var(--background-red);
1351
+ background-color: var(--background-red);
1352
1352
  }
1353
1353
  .active\:bg-\[var\(--background-secondary\)\]:active {
1354
- background-color: var(--background-secondary);
1354
+ background-color: var(--background-secondary);
1355
1355
  }
1356
1356
  .active\:bg-\[var\(--background-tertiary\)\]:active {
1357
- background-color: var(--background-tertiary);
1357
+ background-color: var(--background-tertiary);
1358
1358
  }
1359
1359
  .active\:bg-\[var\(--background-yellow\)\]:active {
1360
- background-color: var(--background-yellow);
1360
+ background-color: var(--background-yellow);
1361
1361
  }
1362
1362
  .disabled\:pointer-events-none:disabled {
1363
- pointer-events: none;
1363
+ pointer-events: none;
1364
1364
  }
1365
1365
  .disabled\:border-\[var\(--border-subtle\)\]:disabled {
1366
- border-color: var(--border-subtle);
1366
+ border-color: var(--border-subtle);
1367
1367
  }
1368
1368
  .disabled\:bg-\[var\(--background-red\)\]:disabled {
1369
- background-color: var(--background-red);
1369
+ background-color: var(--background-red);
1370
1370
  }
1371
1371
  .disabled\:bg-\[var\(--background-secondary\)\]:disabled {
1372
- background-color: var(--background-secondary);
1372
+ background-color: var(--background-secondary);
1373
1373
  }
1374
1374
  .disabled\:bg-\[var\(--background-tertiary\)\]:disabled {
1375
- background-color: var(--background-tertiary);
1375
+ background-color: var(--background-tertiary);
1376
1376
  }
1377
1377
  .disabled\:text-\[var\(--content-subtle\)\]:disabled {
1378
- color: var(--content-subtle);
1378
+ color: var(--content-subtle);
1379
1379
  }
1380
1380
  .disabled\:opacity-50:disabled {
1381
- opacity: 0.5;
1381
+ opacity: 0.5;
1382
1382
  }
1383
1383
  .group:hover .group-hover\:scale-105 {
1384
- --tw-scale-x: 1.05;
1385
- --tw-scale-y: 1.05;
1386
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1384
+ --tw-scale-x: 1.05;
1385
+ --tw-scale-y: 1.05;
1386
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1387
1387
  }
1388
1388
  @media (min-width: 768px) {
1389
- .md\:grid-cols-2 {
1390
- grid-template-columns: repeat(2, minmax(0, 1fr));
1391
- }
1389
+
1390
+ .md\:grid-cols-2 {
1391
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1392
+ }
1392
1393
  }
1393
1394
  @media (min-width: 1024px) {
1394
- .lg\:grid-cols-2 {
1395
- grid-template-columns: repeat(2, minmax(0, 1fr));
1396
- }
1397
- .lg\:grid-cols-3 {
1398
- grid-template-columns: repeat(3, minmax(0, 1fr));
1399
- }
1395
+
1396
+ .lg\:grid-cols-2 {
1397
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1398
+ }
1399
+
1400
+ .lg\:grid-cols-3 {
1401
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1402
+ }
1400
1403
  }