@abhir9/pd-design-system 0.1.5 → 0.1.6

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