@simple-base/tokens 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2365 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * ------------------------------------------- */
4
+
5
+ :root,
6
+ [data-theme="simple-base-dark"] {
7
+ color-scheme: dark;
8
+ --sb-primitive-border-width-hairline: 1px;
9
+ --sb-primitive-border-width-none: 0px;
10
+ --sb-primitive-border-width-strong: 2px;
11
+ --sb-primitive-breakpoint-2xl: 1536px;
12
+ --sb-primitive-breakpoint-lg: 1024px;
13
+ --sb-primitive-breakpoint-md: 768px;
14
+ --sb-primitive-breakpoint-sm: 640px;
15
+ --sb-primitive-breakpoint-xl: 1280px;
16
+ --sb-primitive-color-accent: oklch(60.56% 0.2189 292.7);
17
+ --sb-primitive-color-accent-readable: oklch(65.96% 0.1885 295.2);
18
+ --sb-primitive-color-accent-soft: oklch(60.56% 0.2189 292.7 / 0.14);
19
+ --sb-primitive-color-bg-subtle: oklch(97.84% 0.0011 197.1 / 0.06);
20
+ --sb-primitive-color-border: oklch(28.5% 0.0096 268.3);
21
+ --sb-primitive-color-border-strong: oklch(36% 0.014 268);
22
+ --sb-primitive-color-border-subtle: oklch(97.84% 0.0011 197.1 / 0.12);
23
+ --sb-primitive-color-canvas: oklch(12.76% 0.0035 245.8);
24
+ --sb-primitive-color-danger: oklch(70.03% 0.1907 23.4);
25
+ --sb-primitive-color-danger-on: oklch(14.5% 0.004 264);
26
+ --sb-primitive-color-danger-soft: oklch(70.03% 0.1907 23.4 / 0.12);
27
+ --sb-primitive-color-danger-surface: oklch(70.03% 0.1907 23.4);
28
+ --sb-primitive-color-danger-text: oklch(70.03% 0.1907 23.4);
29
+ --sb-primitive-color-fg: oklch(97.84% 0.0011 197.1);
30
+ --sb-primitive-color-fg-subtle: oklch(97.84% 0.0011 197.1 / 0.72);
31
+ --sb-primitive-color-info: oklch(77.61% 0.1314 236.8);
32
+ --sb-primitive-color-info-on: oklch(14.5% 0.004 264);
33
+ --sb-primitive-color-info-soft: oklch(77.61% 0.1314 236.8 / 0.12);
34
+ --sb-primitive-color-info-surface: oklch(77.61% 0.1314 236.8);
35
+ --sb-primitive-color-info-text: oklch(77.61% 0.1314 236.8);
36
+ --sb-primitive-color-inverse: oklch(14.5% 0.004 264);
37
+ --sb-primitive-color-muted: oklch(64.88% 0.0146 262.4);
38
+ --sb-primitive-color-overlay: oklch(20.3% 0.006 264);
39
+ --sb-primitive-color-raised: oklch(18.3% 0.005 264);
40
+ --sb-primitive-color-scrim: oklch(12.76% 0.0035 245.8 / 0.72);
41
+ --sb-primitive-color-secondary: oklch(84% 0.008 260);
42
+ --sb-primitive-color-success: oklch(78.48% 0.14 159.7);
43
+ --sb-primitive-color-success-on: oklch(14.5% 0.004 264);
44
+ --sb-primitive-color-success-soft: oklch(78.48% 0.14 159.7 / 0.12);
45
+ --sb-primitive-color-success-surface: oklch(78.48% 0.14 159.7);
46
+ --sb-primitive-color-success-text: oklch(78.48% 0.14 159.7);
47
+ --sb-primitive-color-surface: oklch(15.88% 0.0045 264.4);
48
+ --sb-primitive-color-warning: oklch(74.37% 0.1262 79.5);
49
+ --sb-primitive-color-warning-on: oklch(14.5% 0.004 264);
50
+ --sb-primitive-color-warning-soft: oklch(74.37% 0.1262 79.5 / 0.12);
51
+ --sb-primitive-color-warning-surface: oklch(74.37% 0.1262 79.5);
52
+ --sb-primitive-color-warning-text: oklch(74.37% 0.1262 79.5);
53
+ --sb-primitive-duration-fast: 140ms;
54
+ --sb-primitive-duration-normal: 200ms;
55
+ --sb-primitive-duration-slow: 400ms;
56
+ --sb-primitive-duration-spinner: 900ms;
57
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
58
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
59
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
60
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
61
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
62
+ --sb-primitive-font-size-2xl: 20px;
63
+ --sb-primitive-font-size-3xl: 24px;
64
+ --sb-primitive-font-size-4xl: 32px;
65
+ --sb-primitive-font-size-5xl: 48px;
66
+ --sb-primitive-font-size-display: 64px;
67
+ --sb-primitive-font-size-lg: 16px;
68
+ --sb-primitive-font-size-md: 14px;
69
+ --sb-primitive-font-size-sm: 12px;
70
+ --sb-primitive-font-size-xl: 18px;
71
+ --sb-primitive-font-size-xs: 11px;
72
+ --sb-primitive-font-weight-bold: 700;
73
+ --sb-primitive-font-weight-medium: 500;
74
+ --sb-primitive-font-weight-regular: 400;
75
+ --sb-primitive-font-weight-semibold: 600;
76
+ /* Relative em value. */
77
+ --sb-primitive-letter-spacing-normal: -0.01em;
78
+ /* Relative em value. */
79
+ --sb-primitive-letter-spacing-snug: -0.03em;
80
+ /* Relative em value. */
81
+ --sb-primitive-letter-spacing-tight: -0.06em;
82
+ /* Relative em value. */
83
+ --sb-primitive-letter-spacing-wide: 0.04em;
84
+ /* Relative em value. */
85
+ --sb-primitive-letter-spacing-wider: 0.08em;
86
+ --sb-primitive-line-height-none: 1;
87
+ --sb-primitive-line-height-normal: 1.4;
88
+ --sb-primitive-line-height-relaxed: 1.55;
89
+ --sb-primitive-line-height-snug: 1.2;
90
+ --sb-primitive-line-height-tight: 1.08;
91
+ --sb-primitive-opacity-disabled: 0.48;
92
+ --sb-primitive-opacity-invisible: 0;
93
+ --sb-primitive-opacity-opaque: 1;
94
+ --sb-primitive-opacity-subtle: 0.72;
95
+ --sb-primitive-radius-full: 999px;
96
+ --sb-primitive-radius-lg: 12px;
97
+ --sb-primitive-radius-md: 8px;
98
+ --sb-primitive-radius-none: 0px;
99
+ --sb-primitive-radius-sm: 6px;
100
+ --sb-primitive-radius-xl: 16px;
101
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
102
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
103
+ /* Restrained dark-theme elevation; light themes override this shadow. */
104
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.32);
105
+ --sb-primitive-size-container-content: 1280px;
106
+ --sb-primitive-size-control-lg: 44px;
107
+ --sb-primitive-size-control-md: 40px;
108
+ --sb-primitive-size-control-sm: 34px;
109
+ --sb-primitive-size-control-xl: 52px;
110
+ --sb-primitive-size-control-xs: 30px;
111
+ --sb-primitive-size-icon-lg: 24px;
112
+ --sb-primitive-size-icon-md: 20px;
113
+ --sb-primitive-size-icon-sm: 16px;
114
+ --sb-primitive-size-target-minimum: 44px;
115
+ --sb-primitive-space-0: 0px;
116
+ --sb-primitive-space-1: 4px;
117
+ --sb-primitive-space-2: 8px;
118
+ --sb-primitive-space-3: 12px;
119
+ --sb-primitive-space-4: 16px;
120
+ --sb-primitive-space-5: 20px;
121
+ --sb-primitive-space-6: 24px;
122
+ --sb-primitive-space-8: 32px;
123
+ --sb-primitive-space-10: 40px;
124
+ --sb-primitive-space-12: 48px;
125
+ --sb-primitive-space-16: 64px;
126
+ --sb-primitive-space-20: 80px;
127
+ --sb-primitive-z-index-base: 0;
128
+ --sb-primitive-z-index-dropdown: 400;
129
+ --sb-primitive-z-index-modal: 700;
130
+ --sb-primitive-z-index-overlay: 600;
131
+ --sb-primitive-z-index-sticky: 200;
132
+ --sb-primitive-z-index-toast: 900;
133
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
134
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
135
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
136
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
137
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
138
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
139
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
140
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
141
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
142
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
143
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
144
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
145
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
146
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
147
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
148
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
149
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
150
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
151
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
152
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
153
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
154
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
155
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
156
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
157
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
158
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
159
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
160
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
161
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
162
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
163
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
164
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
165
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
166
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
167
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
168
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
169
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
170
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
171
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
172
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
173
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
174
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
175
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
176
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
177
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
178
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
179
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
180
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
181
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
182
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
183
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
184
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
185
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
186
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
187
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
188
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
189
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
190
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
191
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
192
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
193
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
194
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
195
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
196
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
197
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
198
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
199
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
200
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
201
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
202
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
203
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
204
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
205
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
206
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
207
+ /* Restrained dark-theme elevation; light themes override this shadow. */
208
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
209
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
210
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
211
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
212
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
213
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
214
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
215
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
216
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
217
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
218
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
219
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
220
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
221
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
222
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
223
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
224
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
225
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
226
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
227
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
228
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
229
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
230
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
231
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
232
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
233
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
234
+ /* Relative em value. */
235
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
236
+ /* Relative em value. */
237
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
238
+ /* Relative em value. */
239
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
240
+ /* Relative em value. */
241
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
242
+ /* Relative em value. */
243
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
244
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
245
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
246
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
247
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
248
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
249
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
250
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
251
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
252
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
253
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
254
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
255
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
256
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
257
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
258
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
259
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
260
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
261
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
262
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
263
+ }
264
+
265
+ @media (color-gamut: p3) {
266
+ :root,
267
+ [data-theme="simple-base-dark"] {
268
+ color-scheme: dark;
269
+ --sb-primitive-color-info: oklch(77.61% 0.1315 236.8);
270
+ --sb-primitive-color-info-soft: oklch(77.61% 0.1315 236.8 / 0.12);
271
+ --sb-primitive-color-info-surface: oklch(77.61% 0.1315 236.8);
272
+ --sb-primitive-color-info-text: oklch(77.61% 0.1315 236.8);
273
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
274
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
275
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
276
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
277
+ }
278
+ }
279
+
280
+ @media (color-gamut: rec2020) {
281
+ :root,
282
+ [data-theme="simple-base-dark"] {
283
+ color-scheme: dark;
284
+ --sb-primitive-color-info: oklch(77.61% 0.1315 236.8);
285
+ --sb-primitive-color-info-soft: oklch(77.61% 0.1315 236.8 / 0.12);
286
+ --sb-primitive-color-info-surface: oklch(77.61% 0.1315 236.8);
287
+ --sb-primitive-color-info-text: oklch(77.61% 0.1315 236.8);
288
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
289
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
290
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
291
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
292
+ }
293
+ }
294
+
295
+ [data-theme="simple-base-light"] {
296
+ color-scheme: light;
297
+ --sb-primitive-border-width-hairline: 1px;
298
+ --sb-primitive-border-width-none: 0px;
299
+ --sb-primitive-border-width-strong: 2px;
300
+ --sb-primitive-breakpoint-2xl: 1536px;
301
+ --sb-primitive-breakpoint-lg: 1024px;
302
+ --sb-primitive-breakpoint-md: 768px;
303
+ --sb-primitive-breakpoint-sm: 640px;
304
+ --sb-primitive-breakpoint-xl: 1280px;
305
+ --sb-primitive-color-accent: rgb(42.745% 15.686% 85.098%);
306
+ --sb-primitive-color-accent-readable: rgb(42.745% 15.686% 85.098%);
307
+ --sb-primitive-color-accent-soft: rgb(42.745% 15.686% 85.098% / 0.14);
308
+ --sb-primitive-color-bg-subtle: rgb(3.1373% 3.5294% 3.9216% / 0.06);
309
+ --sb-primitive-color-border: rgb(84.706% 86.667% 89.02%);
310
+ --sb-primitive-color-border-strong: rgb(76.863% 79.608% 82.745%);
311
+ --sb-primitive-color-border-subtle: rgb(3.1373% 3.5294% 3.9216% / 0.12);
312
+ --sb-primitive-color-canvas: rgb(96.471% 96.863% 97.255%);
313
+ --sb-primitive-color-danger: rgb(85.098% 30.98% 30.98%);
314
+ --sb-primitive-color-danger-on: rgb(100% 100% 100%);
315
+ --sb-primitive-color-danger-soft: rgb(85.098% 30.98% 30.98% / 0.12);
316
+ --sb-primitive-color-danger-surface: rgb(70.588% 13.725% 18.431%);
317
+ --sb-primitive-color-danger-text: rgb(70.588% 13.725% 18.431%);
318
+ --sb-primitive-color-fg: rgb(3.1373% 3.5294% 3.9216%);
319
+ --sb-primitive-color-fg-subtle: rgb(3.1373% 3.5294% 3.9216% / 0.72);
320
+ --sb-primitive-color-info: rgb(8.2353% 49.804% 81.961%);
321
+ --sb-primitive-color-info-on: rgb(100% 100% 100%);
322
+ --sb-primitive-color-info-soft: rgb(8.2353% 49.804% 81.961% / 0.12);
323
+ --sb-primitive-color-info-surface: rgb(3.5294% 41.177% 70.196%);
324
+ --sb-primitive-color-info-text: rgb(3.5294% 41.177% 70.196%);
325
+ --sb-primitive-color-inverse: rgb(100% 100% 100%);
326
+ --sb-primitive-color-muted: rgb(37.255% 40.392% 44.706%);
327
+ --sb-primitive-color-overlay: rgb(90.98% 92.157% 93.726%);
328
+ --sb-primitive-color-raised: rgb(94.51% 95.294% 96.078%);
329
+ --sb-primitive-color-scrim: rgb(96.471% 96.863% 97.255% / 0.72);
330
+ --sb-primitive-color-secondary: rgb(30.196% 32.941% 36.471%);
331
+ --sb-primitive-color-success: rgb(8.6275% 54.118% 24.706%);
332
+ --sb-primitive-color-success-on: rgb(100% 100% 100%);
333
+ --sb-primitive-color-success-soft: rgb(8.6275% 54.118% 24.706% / 0.12);
334
+ --sb-primitive-color-success-surface: rgb(8.6275% 44.314% 22.745%);
335
+ --sb-primitive-color-success-text: rgb(8.6275% 44.314% 22.745%);
336
+ --sb-primitive-color-surface: rgb(100% 100% 100%);
337
+ --sb-primitive-color-warning: rgb(60.392% 41.961% 0%);
338
+ --sb-primitive-color-warning-on: rgb(100% 100% 100%);
339
+ --sb-primitive-color-warning-soft: rgb(60.392% 41.961% 0% / 0.12);
340
+ --sb-primitive-color-warning-surface: rgb(60.392% 41.961% 0%);
341
+ --sb-primitive-color-warning-text: rgb(56.078% 38.039% 0%);
342
+ --sb-primitive-duration-fast: 140ms;
343
+ --sb-primitive-duration-normal: 200ms;
344
+ --sb-primitive-duration-slow: 400ms;
345
+ --sb-primitive-duration-spinner: 900ms;
346
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
347
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
348
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
349
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
350
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
351
+ --sb-primitive-font-size-2xl: 20px;
352
+ --sb-primitive-font-size-3xl: 24px;
353
+ --sb-primitive-font-size-4xl: 32px;
354
+ --sb-primitive-font-size-5xl: 48px;
355
+ --sb-primitive-font-size-display: 64px;
356
+ --sb-primitive-font-size-lg: 16px;
357
+ --sb-primitive-font-size-md: 14px;
358
+ --sb-primitive-font-size-sm: 12px;
359
+ --sb-primitive-font-size-xl: 18px;
360
+ --sb-primitive-font-size-xs: 11px;
361
+ --sb-primitive-font-weight-bold: 700;
362
+ --sb-primitive-font-weight-medium: 500;
363
+ --sb-primitive-font-weight-regular: 400;
364
+ --sb-primitive-font-weight-semibold: 600;
365
+ /* Relative em value. */
366
+ --sb-primitive-letter-spacing-normal: -0.01em;
367
+ /* Relative em value. */
368
+ --sb-primitive-letter-spacing-snug: -0.03em;
369
+ /* Relative em value. */
370
+ --sb-primitive-letter-spacing-tight: -0.06em;
371
+ /* Relative em value. */
372
+ --sb-primitive-letter-spacing-wide: 0.04em;
373
+ /* Relative em value. */
374
+ --sb-primitive-letter-spacing-wider: 0.08em;
375
+ --sb-primitive-line-height-none: 1;
376
+ --sb-primitive-line-height-normal: 1.4;
377
+ --sb-primitive-line-height-relaxed: 1.55;
378
+ --sb-primitive-line-height-snug: 1.2;
379
+ --sb-primitive-line-height-tight: 1.08;
380
+ --sb-primitive-opacity-disabled: 0.48;
381
+ --sb-primitive-opacity-invisible: 0;
382
+ --sb-primitive-opacity-opaque: 1;
383
+ --sb-primitive-opacity-subtle: 0.72;
384
+ --sb-primitive-radius-full: 999px;
385
+ --sb-primitive-radius-lg: 12px;
386
+ --sb-primitive-radius-md: 8px;
387
+ --sb-primitive-radius-none: 0px;
388
+ --sb-primitive-radius-sm: 6px;
389
+ --sb-primitive-radius-xl: 16px;
390
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
391
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
392
+ /* Light-theme elevation without a dark halo. */
393
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.12);
394
+ --sb-primitive-size-container-content: 1280px;
395
+ --sb-primitive-size-control-lg: 44px;
396
+ --sb-primitive-size-control-md: 40px;
397
+ --sb-primitive-size-control-sm: 34px;
398
+ --sb-primitive-size-control-xl: 52px;
399
+ --sb-primitive-size-control-xs: 30px;
400
+ --sb-primitive-size-icon-lg: 24px;
401
+ --sb-primitive-size-icon-md: 20px;
402
+ --sb-primitive-size-icon-sm: 16px;
403
+ --sb-primitive-size-target-minimum: 44px;
404
+ --sb-primitive-space-0: 0px;
405
+ --sb-primitive-space-1: 4px;
406
+ --sb-primitive-space-2: 8px;
407
+ --sb-primitive-space-3: 12px;
408
+ --sb-primitive-space-4: 16px;
409
+ --sb-primitive-space-5: 20px;
410
+ --sb-primitive-space-6: 24px;
411
+ --sb-primitive-space-8: 32px;
412
+ --sb-primitive-space-10: 40px;
413
+ --sb-primitive-space-12: 48px;
414
+ --sb-primitive-space-16: 64px;
415
+ --sb-primitive-space-20: 80px;
416
+ --sb-primitive-z-index-base: 0;
417
+ --sb-primitive-z-index-dropdown: 400;
418
+ --sb-primitive-z-index-modal: 700;
419
+ --sb-primitive-z-index-overlay: 600;
420
+ --sb-primitive-z-index-sticky: 200;
421
+ --sb-primitive-z-index-toast: 900;
422
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
423
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
424
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
425
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
426
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
427
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
428
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
429
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
430
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
431
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
432
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
433
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
434
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
435
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
436
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
437
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
438
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
439
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
440
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
441
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
442
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
443
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
444
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
445
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
446
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
447
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
448
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
449
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
450
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
451
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
452
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
453
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
454
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
455
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
456
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
457
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
458
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
459
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
460
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
461
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
462
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
463
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
464
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
465
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
466
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
467
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
468
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
469
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
470
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
471
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
472
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
473
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
474
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
475
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
476
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
477
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
478
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
479
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
480
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
481
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
482
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
483
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
484
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
485
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
486
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
487
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
488
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
489
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
490
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
491
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
492
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
493
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
494
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
495
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
496
+ /* Light-theme elevation without a dark halo. */
497
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
498
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
499
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
500
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
501
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
502
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
503
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
504
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
505
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
506
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
507
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
508
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
509
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
510
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
511
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
512
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
513
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
514
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
515
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
516
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
517
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
518
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
519
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
520
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
521
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
522
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
523
+ /* Relative em value. */
524
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
525
+ /* Relative em value. */
526
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
527
+ /* Relative em value. */
528
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
529
+ /* Relative em value. */
530
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
531
+ /* Relative em value. */
532
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
533
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
534
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
535
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
536
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
537
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
538
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
539
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
540
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
541
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
542
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
543
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
544
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
545
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
546
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
547
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
548
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
549
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
550
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
551
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
552
+ }
553
+
554
+ [data-theme="catppuccin-latte"] {
555
+ color-scheme: light;
556
+ --sb-primitive-border-width-hairline: 1px;
557
+ --sb-primitive-border-width-none: 0px;
558
+ --sb-primitive-border-width-strong: 2px;
559
+ --sb-primitive-breakpoint-2xl: 1536px;
560
+ --sb-primitive-breakpoint-lg: 1024px;
561
+ --sb-primitive-breakpoint-md: 768px;
562
+ --sb-primitive-breakpoint-sm: 640px;
563
+ --sb-primitive-breakpoint-xl: 1280px;
564
+ --sb-primitive-color-accent: rgb(53.333% 22.353% 93.726%);
565
+ --sb-primitive-color-accent-readable: rgb(42.745% 15.686% 85.098%);
566
+ --sb-primitive-color-accent-soft: rgb(53.333% 22.353% 93.726% / 0.14);
567
+ --sb-primitive-color-bg-subtle: rgb(29.804% 30.98% 41.177% / 0.06);
568
+ --sb-primitive-color-border: rgb(80% 81.569% 85.49%);
569
+ --sb-primitive-color-border-strong: rgb(67.451% 69.02% 74.51%);
570
+ --sb-primitive-color-border-subtle: rgb(29.804% 30.98% 41.177% / 0.12);
571
+ --sb-primitive-color-canvas: rgb(93.726% 94.51% 96.078%);
572
+ --sb-primitive-color-danger: rgb(82.353% 5.8824% 22.353%);
573
+ --sb-primitive-color-danger-on: rgb(93.726% 94.51% 96.078%);
574
+ --sb-primitive-color-danger-soft: rgb(82.353% 5.8824% 22.353% / 0.12);
575
+ --sb-primitive-color-danger-surface: rgb(82.353% 5.8824% 22.353%);
576
+ --sb-primitive-color-danger-text: rgb(69.804% 5.098% 18.824%);
577
+ --sb-primitive-color-fg: rgb(29.804% 30.98% 41.177%);
578
+ --sb-primitive-color-fg-subtle: rgb(29.804% 30.98% 41.177% / 0.72);
579
+ --sb-primitive-color-info: rgb(11.765% 40% 96.078%);
580
+ --sb-primitive-color-info-on: rgb(93.726% 94.51% 96.078%);
581
+ --sb-primitive-color-info-soft: rgb(11.765% 40% 96.078% / 0.12);
582
+ --sb-primitive-color-info-surface: rgb(8.2353% 34.118% 75.294%);
583
+ --sb-primitive-color-info-text: rgb(8.2353% 34.118% 75.294%);
584
+ --sb-primitive-color-inverse: rgb(93.726% 94.51% 96.078%);
585
+ --sb-primitive-color-muted: rgb(39.608% 40.784% 47.451%);
586
+ --sb-primitive-color-overlay: rgb(73.726% 75.294% 80%);
587
+ --sb-primitive-color-raised: rgb(80% 81.569% 85.49%);
588
+ --sb-primitive-color-scrim: rgb(93.726% 94.51% 96.078% / 0.72);
589
+ --sb-primitive-color-secondary: rgb(36.078% 37.255% 46.667%);
590
+ --sb-primitive-color-success: rgb(25.098% 62.745% 16.863%);
591
+ --sb-primitive-color-success-on: rgb(93.726% 94.51% 96.078%);
592
+ --sb-primitive-color-success-soft: rgb(25.098% 62.745% 16.863% / 0.12);
593
+ --sb-primitive-color-success-surface: rgb(18.431% 49.02% 12.549%);
594
+ --sb-primitive-color-success-text: rgb(18.431% 49.02% 12.549%);
595
+ --sb-primitive-color-surface: rgb(100% 100% 100%);
596
+ --sb-primitive-color-warning: rgb(87.451% 55.686% 11.373%);
597
+ --sb-primitive-color-warning-on: rgb(93.726% 94.51% 96.078%);
598
+ --sb-primitive-color-warning-soft: rgb(87.451% 55.686% 11.373% / 0.12);
599
+ --sb-primitive-color-warning-surface: rgb(50.196% 32.157% 0%);
600
+ --sb-primitive-color-warning-text: rgb(50.196% 32.157% 0%);
601
+ --sb-primitive-duration-fast: 140ms;
602
+ --sb-primitive-duration-normal: 200ms;
603
+ --sb-primitive-duration-slow: 400ms;
604
+ --sb-primitive-duration-spinner: 900ms;
605
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
606
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
607
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
608
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
609
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
610
+ --sb-primitive-font-size-2xl: 20px;
611
+ --sb-primitive-font-size-3xl: 24px;
612
+ --sb-primitive-font-size-4xl: 32px;
613
+ --sb-primitive-font-size-5xl: 48px;
614
+ --sb-primitive-font-size-display: 64px;
615
+ --sb-primitive-font-size-lg: 16px;
616
+ --sb-primitive-font-size-md: 14px;
617
+ --sb-primitive-font-size-sm: 12px;
618
+ --sb-primitive-font-size-xl: 18px;
619
+ --sb-primitive-font-size-xs: 11px;
620
+ --sb-primitive-font-weight-bold: 700;
621
+ --sb-primitive-font-weight-medium: 500;
622
+ --sb-primitive-font-weight-regular: 400;
623
+ --sb-primitive-font-weight-semibold: 600;
624
+ /* Relative em value. */
625
+ --sb-primitive-letter-spacing-normal: -0.01em;
626
+ /* Relative em value. */
627
+ --sb-primitive-letter-spacing-snug: -0.03em;
628
+ /* Relative em value. */
629
+ --sb-primitive-letter-spacing-tight: -0.06em;
630
+ /* Relative em value. */
631
+ --sb-primitive-letter-spacing-wide: 0.04em;
632
+ /* Relative em value. */
633
+ --sb-primitive-letter-spacing-wider: 0.08em;
634
+ --sb-primitive-line-height-none: 1;
635
+ --sb-primitive-line-height-normal: 1.4;
636
+ --sb-primitive-line-height-relaxed: 1.55;
637
+ --sb-primitive-line-height-snug: 1.2;
638
+ --sb-primitive-line-height-tight: 1.08;
639
+ --sb-primitive-opacity-disabled: 0.48;
640
+ --sb-primitive-opacity-invisible: 0;
641
+ --sb-primitive-opacity-opaque: 1;
642
+ --sb-primitive-opacity-subtle: 0.72;
643
+ --sb-primitive-radius-full: 999px;
644
+ --sb-primitive-radius-lg: 12px;
645
+ --sb-primitive-radius-md: 8px;
646
+ --sb-primitive-radius-none: 0px;
647
+ --sb-primitive-radius-sm: 6px;
648
+ --sb-primitive-radius-xl: 16px;
649
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
650
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
651
+ /* Light-theme elevation without a dark halo. */
652
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.12);
653
+ --sb-primitive-size-container-content: 1280px;
654
+ --sb-primitive-size-control-lg: 44px;
655
+ --sb-primitive-size-control-md: 40px;
656
+ --sb-primitive-size-control-sm: 34px;
657
+ --sb-primitive-size-control-xl: 52px;
658
+ --sb-primitive-size-control-xs: 30px;
659
+ --sb-primitive-size-icon-lg: 24px;
660
+ --sb-primitive-size-icon-md: 20px;
661
+ --sb-primitive-size-icon-sm: 16px;
662
+ --sb-primitive-size-target-minimum: 44px;
663
+ --sb-primitive-space-0: 0px;
664
+ --sb-primitive-space-1: 4px;
665
+ --sb-primitive-space-2: 8px;
666
+ --sb-primitive-space-3: 12px;
667
+ --sb-primitive-space-4: 16px;
668
+ --sb-primitive-space-5: 20px;
669
+ --sb-primitive-space-6: 24px;
670
+ --sb-primitive-space-8: 32px;
671
+ --sb-primitive-space-10: 40px;
672
+ --sb-primitive-space-12: 48px;
673
+ --sb-primitive-space-16: 64px;
674
+ --sb-primitive-space-20: 80px;
675
+ --sb-primitive-z-index-base: 0;
676
+ --sb-primitive-z-index-dropdown: 400;
677
+ --sb-primitive-z-index-modal: 700;
678
+ --sb-primitive-z-index-overlay: 600;
679
+ --sb-primitive-z-index-sticky: 200;
680
+ --sb-primitive-z-index-toast: 900;
681
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
682
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
683
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
684
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
685
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
686
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
687
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
688
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
689
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
690
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
691
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
692
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
693
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
694
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
695
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
696
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
697
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
698
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
699
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
700
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
701
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
702
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
703
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
704
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
705
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
706
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
707
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
708
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
709
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
710
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
711
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
712
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
713
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
714
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
715
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
716
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
717
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
718
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
719
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
720
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
721
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
722
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
723
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
724
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
725
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
726
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
727
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
728
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
729
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
730
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
731
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
732
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
733
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
734
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
735
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
736
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
737
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
738
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
739
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
740
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
741
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
742
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
743
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
744
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
745
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
746
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
747
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
748
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
749
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
750
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
751
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
752
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
753
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
754
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
755
+ /* Light-theme elevation without a dark halo. */
756
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
757
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
758
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
759
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
760
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
761
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
762
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
763
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
764
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
765
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
766
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
767
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
768
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
769
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
770
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
771
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
772
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
773
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
774
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
775
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
776
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
777
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
778
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
779
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
780
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
781
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
782
+ /* Relative em value. */
783
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
784
+ /* Relative em value. */
785
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
786
+ /* Relative em value. */
787
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
788
+ /* Relative em value. */
789
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
790
+ /* Relative em value. */
791
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
792
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
793
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
794
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
795
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
796
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
797
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
798
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
799
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
800
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
801
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
802
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
803
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
804
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
805
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
806
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
807
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
808
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
809
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
810
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
811
+ }
812
+
813
+ [data-theme="catppuccin-frappe"] {
814
+ color-scheme: dark;
815
+ --sb-primitive-border-width-hairline: 1px;
816
+ --sb-primitive-border-width-none: 0px;
817
+ --sb-primitive-border-width-strong: 2px;
818
+ --sb-primitive-breakpoint-2xl: 1536px;
819
+ --sb-primitive-breakpoint-lg: 1024px;
820
+ --sb-primitive-breakpoint-md: 768px;
821
+ --sb-primitive-breakpoint-sm: 640px;
822
+ --sb-primitive-breakpoint-xl: 1280px;
823
+ --sb-primitive-color-accent: rgb(79.216% 61.961% 90.196%);
824
+ --sb-primitive-color-accent-readable: rgb(79.216% 61.961% 90.196%);
825
+ --sb-primitive-color-accent-soft: rgb(79.216% 61.961% 90.196% / 0.14);
826
+ --sb-primitive-color-bg-subtle: rgb(77.647% 81.569% 96.078% / 0.06);
827
+ --sb-primitive-color-border: rgb(31.765% 34.118% 42.745%);
828
+ --sb-primitive-color-border-strong: rgb(38.431% 40.784% 50.196%);
829
+ --sb-primitive-color-border-subtle: rgb(77.647% 81.569% 96.078% / 0.12);
830
+ --sb-primitive-color-canvas: rgb(18.824% 20.392% 27.451%);
831
+ --sb-primitive-color-danger: rgb(90.588% 50.98% 51.765%);
832
+ --sb-primitive-color-danger-on: rgb(13.725% 14.902% 20.392%);
833
+ --sb-primitive-color-danger-soft: rgb(90.588% 50.98% 51.765% / 0.12);
834
+ --sb-primitive-color-danger-surface: rgb(90.588% 50.98% 51.765%);
835
+ --sb-primitive-color-danger-text: rgb(90.588% 50.98% 51.765%);
836
+ --sb-primitive-color-fg: rgb(77.647% 81.569% 96.078%);
837
+ --sb-primitive-color-fg-subtle: rgb(77.647% 81.569% 96.078% / 0.72);
838
+ --sb-primitive-color-info: rgb(54.902% 66.667% 93.333%);
839
+ --sb-primitive-color-info-on: rgb(13.725% 14.902% 20.392%);
840
+ --sb-primitive-color-info-soft: rgb(54.902% 66.667% 93.333% / 0.12);
841
+ --sb-primitive-color-info-surface: rgb(54.902% 66.667% 93.333%);
842
+ --sb-primitive-color-info-text: rgb(54.902% 66.667% 93.333%);
843
+ --sb-primitive-color-inverse: rgb(13.725% 14.902% 20.392%);
844
+ --sb-primitive-color-muted: rgb(64.706% 67.843% 80.784%);
845
+ --sb-primitive-color-overlay: rgb(38.431% 40.784% 50.196%);
846
+ --sb-primitive-color-raised: rgb(31.765% 34.118% 42.745%);
847
+ --sb-primitive-color-scrim: rgb(18.824% 20.392% 27.451% / 0.72);
848
+ --sb-primitive-color-secondary: rgb(70.98% 74.902% 88.628%);
849
+ --sb-primitive-color-success: rgb(65.098% 81.961% 53.726%);
850
+ --sb-primitive-color-success-on: rgb(13.725% 14.902% 20.392%);
851
+ --sb-primitive-color-success-soft: rgb(65.098% 81.961% 53.726% / 0.12);
852
+ --sb-primitive-color-success-surface: rgb(65.098% 81.961% 53.726%);
853
+ --sb-primitive-color-success-text: rgb(65.098% 81.961% 53.726%);
854
+ --sb-primitive-color-surface: rgb(25.49% 27.059% 34.902%);
855
+ --sb-primitive-color-warning: rgb(89.804% 78.431% 56.471%);
856
+ --sb-primitive-color-warning-on: rgb(13.725% 14.902% 20.392%);
857
+ --sb-primitive-color-warning-soft: rgb(89.804% 78.431% 56.471% / 0.12);
858
+ --sb-primitive-color-warning-surface: rgb(89.804% 78.431% 56.471%);
859
+ --sb-primitive-color-warning-text: rgb(89.804% 78.431% 56.471%);
860
+ --sb-primitive-duration-fast: 140ms;
861
+ --sb-primitive-duration-normal: 200ms;
862
+ --sb-primitive-duration-slow: 400ms;
863
+ --sb-primitive-duration-spinner: 900ms;
864
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
865
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
866
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
867
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
868
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
869
+ --sb-primitive-font-size-2xl: 20px;
870
+ --sb-primitive-font-size-3xl: 24px;
871
+ --sb-primitive-font-size-4xl: 32px;
872
+ --sb-primitive-font-size-5xl: 48px;
873
+ --sb-primitive-font-size-display: 64px;
874
+ --sb-primitive-font-size-lg: 16px;
875
+ --sb-primitive-font-size-md: 14px;
876
+ --sb-primitive-font-size-sm: 12px;
877
+ --sb-primitive-font-size-xl: 18px;
878
+ --sb-primitive-font-size-xs: 11px;
879
+ --sb-primitive-font-weight-bold: 700;
880
+ --sb-primitive-font-weight-medium: 500;
881
+ --sb-primitive-font-weight-regular: 400;
882
+ --sb-primitive-font-weight-semibold: 600;
883
+ /* Relative em value. */
884
+ --sb-primitive-letter-spacing-normal: -0.01em;
885
+ /* Relative em value. */
886
+ --sb-primitive-letter-spacing-snug: -0.03em;
887
+ /* Relative em value. */
888
+ --sb-primitive-letter-spacing-tight: -0.06em;
889
+ /* Relative em value. */
890
+ --sb-primitive-letter-spacing-wide: 0.04em;
891
+ /* Relative em value. */
892
+ --sb-primitive-letter-spacing-wider: 0.08em;
893
+ --sb-primitive-line-height-none: 1;
894
+ --sb-primitive-line-height-normal: 1.4;
895
+ --sb-primitive-line-height-relaxed: 1.55;
896
+ --sb-primitive-line-height-snug: 1.2;
897
+ --sb-primitive-line-height-tight: 1.08;
898
+ --sb-primitive-opacity-disabled: 0.48;
899
+ --sb-primitive-opacity-invisible: 0;
900
+ --sb-primitive-opacity-opaque: 1;
901
+ --sb-primitive-opacity-subtle: 0.72;
902
+ --sb-primitive-radius-full: 999px;
903
+ --sb-primitive-radius-lg: 12px;
904
+ --sb-primitive-radius-md: 8px;
905
+ --sb-primitive-radius-none: 0px;
906
+ --sb-primitive-radius-sm: 6px;
907
+ --sb-primitive-radius-xl: 16px;
908
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
909
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
910
+ /* Restrained dark-theme elevation; light themes override this shadow. */
911
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.32);
912
+ --sb-primitive-size-container-content: 1280px;
913
+ --sb-primitive-size-control-lg: 44px;
914
+ --sb-primitive-size-control-md: 40px;
915
+ --sb-primitive-size-control-sm: 34px;
916
+ --sb-primitive-size-control-xl: 52px;
917
+ --sb-primitive-size-control-xs: 30px;
918
+ --sb-primitive-size-icon-lg: 24px;
919
+ --sb-primitive-size-icon-md: 20px;
920
+ --sb-primitive-size-icon-sm: 16px;
921
+ --sb-primitive-size-target-minimum: 44px;
922
+ --sb-primitive-space-0: 0px;
923
+ --sb-primitive-space-1: 4px;
924
+ --sb-primitive-space-2: 8px;
925
+ --sb-primitive-space-3: 12px;
926
+ --sb-primitive-space-4: 16px;
927
+ --sb-primitive-space-5: 20px;
928
+ --sb-primitive-space-6: 24px;
929
+ --sb-primitive-space-8: 32px;
930
+ --sb-primitive-space-10: 40px;
931
+ --sb-primitive-space-12: 48px;
932
+ --sb-primitive-space-16: 64px;
933
+ --sb-primitive-space-20: 80px;
934
+ --sb-primitive-z-index-base: 0;
935
+ --sb-primitive-z-index-dropdown: 400;
936
+ --sb-primitive-z-index-modal: 700;
937
+ --sb-primitive-z-index-overlay: 600;
938
+ --sb-primitive-z-index-sticky: 200;
939
+ --sb-primitive-z-index-toast: 900;
940
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
941
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
942
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
943
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
944
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
945
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
946
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
947
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
948
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
949
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
950
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
951
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
952
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
953
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
954
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
955
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
956
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
957
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
958
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
959
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
960
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
961
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
962
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
963
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
964
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
965
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
966
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
967
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
968
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
969
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
970
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
971
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
972
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
973
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
974
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
975
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
976
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
977
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
978
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
979
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
980
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
981
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
982
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
983
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
984
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
985
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
986
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
987
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
988
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
989
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
990
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
991
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
992
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
993
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
994
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
995
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
996
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
997
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
998
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
999
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
1000
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
1001
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
1002
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
1003
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
1004
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
1005
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
1006
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
1007
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
1008
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
1009
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
1010
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
1011
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
1012
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
1013
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
1014
+ /* Restrained dark-theme elevation; light themes override this shadow. */
1015
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
1016
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
1017
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
1018
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
1019
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
1020
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
1021
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
1022
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
1023
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
1024
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
1025
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
1026
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
1027
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
1028
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
1029
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
1030
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
1031
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
1032
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
1033
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
1034
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
1035
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
1036
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
1037
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
1038
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
1039
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
1040
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
1041
+ /* Relative em value. */
1042
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
1043
+ /* Relative em value. */
1044
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
1045
+ /* Relative em value. */
1046
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
1047
+ /* Relative em value. */
1048
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
1049
+ /* Relative em value. */
1050
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
1051
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
1052
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
1053
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
1054
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
1055
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
1056
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
1057
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
1058
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
1059
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
1060
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
1061
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
1062
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
1063
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
1064
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
1065
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
1066
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
1067
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
1068
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
1069
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
1070
+ }
1071
+
1072
+ [data-theme="catppuccin-macchiato"] {
1073
+ color-scheme: dark;
1074
+ --sb-primitive-border-width-hairline: 1px;
1075
+ --sb-primitive-border-width-none: 0px;
1076
+ --sb-primitive-border-width-strong: 2px;
1077
+ --sb-primitive-breakpoint-2xl: 1536px;
1078
+ --sb-primitive-breakpoint-lg: 1024px;
1079
+ --sb-primitive-breakpoint-md: 768px;
1080
+ --sb-primitive-breakpoint-sm: 640px;
1081
+ --sb-primitive-breakpoint-xl: 1280px;
1082
+ --sb-primitive-color-accent: rgb(77.647% 62.745% 96.471%);
1083
+ --sb-primitive-color-accent-readable: rgb(77.647% 62.745% 96.471%);
1084
+ --sb-primitive-color-accent-soft: rgb(77.647% 62.745% 96.471% / 0.14);
1085
+ --sb-primitive-color-bg-subtle: rgb(79.216% 82.745% 96.078% / 0.06);
1086
+ --sb-primitive-color-border: rgb(28.628% 30.196% 39.216%);
1087
+ --sb-primitive-color-border-strong: rgb(35.686% 37.647% 47.059%);
1088
+ --sb-primitive-color-border-subtle: rgb(79.216% 82.745% 96.078% / 0.12);
1089
+ --sb-primitive-color-canvas: rgb(14.118% 15.294% 22.745%);
1090
+ --sb-primitive-color-danger: rgb(92.941% 52.941% 58.823%);
1091
+ --sb-primitive-color-danger-on: rgb(9.4118% 9.8039% 14.902%);
1092
+ --sb-primitive-color-danger-soft: rgb(92.941% 52.941% 58.823% / 0.12);
1093
+ --sb-primitive-color-danger-surface: rgb(92.941% 52.941% 58.823%);
1094
+ --sb-primitive-color-danger-text: rgb(92.941% 52.941% 58.823%);
1095
+ --sb-primitive-color-fg: rgb(79.216% 82.745% 96.078%);
1096
+ --sb-primitive-color-fg-subtle: rgb(79.216% 82.745% 96.078% / 0.72);
1097
+ --sb-primitive-color-info: rgb(54.118% 67.843% 95.686%);
1098
+ --sb-primitive-color-info-on: rgb(9.4118% 9.8039% 14.902%);
1099
+ --sb-primitive-color-info-soft: rgb(54.118% 67.843% 95.686% / 0.12);
1100
+ --sb-primitive-color-info-surface: rgb(54.118% 67.843% 95.686%);
1101
+ --sb-primitive-color-info-text: rgb(54.118% 67.843% 95.686%);
1102
+ --sb-primitive-color-inverse: rgb(9.4118% 9.8039% 14.902%);
1103
+ --sb-primitive-color-muted: rgb(64.706% 67.843% 79.608%);
1104
+ --sb-primitive-color-overlay: rgb(35.686% 37.647% 47.059%);
1105
+ --sb-primitive-color-raised: rgb(28.628% 30.196% 39.216%);
1106
+ --sb-primitive-color-scrim: rgb(14.118% 15.294% 22.745% / 0.72);
1107
+ --sb-primitive-color-secondary: rgb(72.157% 75.294% 87.843%);
1108
+ --sb-primitive-color-success: rgb(65.098% 85.49% 58.431%);
1109
+ --sb-primitive-color-success-on: rgb(9.4118% 9.8039% 14.902%);
1110
+ --sb-primitive-color-success-soft: rgb(65.098% 85.49% 58.431% / 0.12);
1111
+ --sb-primitive-color-success-surface: rgb(65.098% 85.49% 58.431%);
1112
+ --sb-primitive-color-success-text: rgb(65.098% 85.49% 58.431%);
1113
+ --sb-primitive-color-surface: rgb(21.177% 22.745% 30.98%);
1114
+ --sb-primitive-color-warning: rgb(93.333% 83.137% 62.353%);
1115
+ --sb-primitive-color-warning-on: rgb(9.4118% 9.8039% 14.902%);
1116
+ --sb-primitive-color-warning-soft: rgb(93.333% 83.137% 62.353% / 0.12);
1117
+ --sb-primitive-color-warning-surface: rgb(93.333% 83.137% 62.353%);
1118
+ --sb-primitive-color-warning-text: rgb(93.333% 83.137% 62.353%);
1119
+ --sb-primitive-duration-fast: 140ms;
1120
+ --sb-primitive-duration-normal: 200ms;
1121
+ --sb-primitive-duration-slow: 400ms;
1122
+ --sb-primitive-duration-spinner: 900ms;
1123
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
1124
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
1125
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
1126
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
1127
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
1128
+ --sb-primitive-font-size-2xl: 20px;
1129
+ --sb-primitive-font-size-3xl: 24px;
1130
+ --sb-primitive-font-size-4xl: 32px;
1131
+ --sb-primitive-font-size-5xl: 48px;
1132
+ --sb-primitive-font-size-display: 64px;
1133
+ --sb-primitive-font-size-lg: 16px;
1134
+ --sb-primitive-font-size-md: 14px;
1135
+ --sb-primitive-font-size-sm: 12px;
1136
+ --sb-primitive-font-size-xl: 18px;
1137
+ --sb-primitive-font-size-xs: 11px;
1138
+ --sb-primitive-font-weight-bold: 700;
1139
+ --sb-primitive-font-weight-medium: 500;
1140
+ --sb-primitive-font-weight-regular: 400;
1141
+ --sb-primitive-font-weight-semibold: 600;
1142
+ /* Relative em value. */
1143
+ --sb-primitive-letter-spacing-normal: -0.01em;
1144
+ /* Relative em value. */
1145
+ --sb-primitive-letter-spacing-snug: -0.03em;
1146
+ /* Relative em value. */
1147
+ --sb-primitive-letter-spacing-tight: -0.06em;
1148
+ /* Relative em value. */
1149
+ --sb-primitive-letter-spacing-wide: 0.04em;
1150
+ /* Relative em value. */
1151
+ --sb-primitive-letter-spacing-wider: 0.08em;
1152
+ --sb-primitive-line-height-none: 1;
1153
+ --sb-primitive-line-height-normal: 1.4;
1154
+ --sb-primitive-line-height-relaxed: 1.55;
1155
+ --sb-primitive-line-height-snug: 1.2;
1156
+ --sb-primitive-line-height-tight: 1.08;
1157
+ --sb-primitive-opacity-disabled: 0.48;
1158
+ --sb-primitive-opacity-invisible: 0;
1159
+ --sb-primitive-opacity-opaque: 1;
1160
+ --sb-primitive-opacity-subtle: 0.72;
1161
+ --sb-primitive-radius-full: 999px;
1162
+ --sb-primitive-radius-lg: 12px;
1163
+ --sb-primitive-radius-md: 8px;
1164
+ --sb-primitive-radius-none: 0px;
1165
+ --sb-primitive-radius-sm: 6px;
1166
+ --sb-primitive-radius-xl: 16px;
1167
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
1168
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
1169
+ /* Restrained dark-theme elevation; light themes override this shadow. */
1170
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.32);
1171
+ --sb-primitive-size-container-content: 1280px;
1172
+ --sb-primitive-size-control-lg: 44px;
1173
+ --sb-primitive-size-control-md: 40px;
1174
+ --sb-primitive-size-control-sm: 34px;
1175
+ --sb-primitive-size-control-xl: 52px;
1176
+ --sb-primitive-size-control-xs: 30px;
1177
+ --sb-primitive-size-icon-lg: 24px;
1178
+ --sb-primitive-size-icon-md: 20px;
1179
+ --sb-primitive-size-icon-sm: 16px;
1180
+ --sb-primitive-size-target-minimum: 44px;
1181
+ --sb-primitive-space-0: 0px;
1182
+ --sb-primitive-space-1: 4px;
1183
+ --sb-primitive-space-2: 8px;
1184
+ --sb-primitive-space-3: 12px;
1185
+ --sb-primitive-space-4: 16px;
1186
+ --sb-primitive-space-5: 20px;
1187
+ --sb-primitive-space-6: 24px;
1188
+ --sb-primitive-space-8: 32px;
1189
+ --sb-primitive-space-10: 40px;
1190
+ --sb-primitive-space-12: 48px;
1191
+ --sb-primitive-space-16: 64px;
1192
+ --sb-primitive-space-20: 80px;
1193
+ --sb-primitive-z-index-base: 0;
1194
+ --sb-primitive-z-index-dropdown: 400;
1195
+ --sb-primitive-z-index-modal: 700;
1196
+ --sb-primitive-z-index-overlay: 600;
1197
+ --sb-primitive-z-index-sticky: 200;
1198
+ --sb-primitive-z-index-toast: 900;
1199
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
1200
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
1201
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
1202
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
1203
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
1204
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
1205
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
1206
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
1207
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
1208
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
1209
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
1210
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
1211
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
1212
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
1213
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
1214
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
1215
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
1216
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
1217
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
1218
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
1219
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
1220
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
1221
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
1222
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
1223
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
1224
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
1225
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
1226
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
1227
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
1228
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
1229
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
1230
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
1231
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
1232
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
1233
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
1234
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
1235
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
1236
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
1237
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
1238
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
1239
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
1240
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
1241
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
1242
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
1243
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
1244
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
1245
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
1246
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
1247
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
1248
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
1249
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
1250
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
1251
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
1252
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
1253
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
1254
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
1255
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
1256
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
1257
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
1258
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
1259
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
1260
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
1261
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
1262
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
1263
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
1264
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
1265
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
1266
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
1267
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
1268
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
1269
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
1270
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
1271
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
1272
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
1273
+ /* Restrained dark-theme elevation; light themes override this shadow. */
1274
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
1275
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
1276
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
1277
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
1278
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
1279
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
1280
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
1281
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
1282
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
1283
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
1284
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
1285
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
1286
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
1287
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
1288
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
1289
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
1290
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
1291
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
1292
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
1293
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
1294
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
1295
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
1296
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
1297
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
1298
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
1299
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
1300
+ /* Relative em value. */
1301
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
1302
+ /* Relative em value. */
1303
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
1304
+ /* Relative em value. */
1305
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
1306
+ /* Relative em value. */
1307
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
1308
+ /* Relative em value. */
1309
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
1310
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
1311
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
1312
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
1313
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
1314
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
1315
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
1316
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
1317
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
1318
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
1319
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
1320
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
1321
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
1322
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
1323
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
1324
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
1325
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
1326
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
1327
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
1328
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
1329
+ }
1330
+
1331
+ [data-theme="catppuccin-mocha"] {
1332
+ color-scheme: dark;
1333
+ --sb-primitive-border-width-hairline: 1px;
1334
+ --sb-primitive-border-width-none: 0px;
1335
+ --sb-primitive-border-width-strong: 2px;
1336
+ --sb-primitive-breakpoint-2xl: 1536px;
1337
+ --sb-primitive-breakpoint-lg: 1024px;
1338
+ --sb-primitive-breakpoint-md: 768px;
1339
+ --sb-primitive-breakpoint-sm: 640px;
1340
+ --sb-primitive-breakpoint-xl: 1280px;
1341
+ --sb-primitive-color-accent: rgb(79.608% 65.098% 96.863%);
1342
+ --sb-primitive-color-accent-readable: rgb(79.608% 65.098% 96.863%);
1343
+ --sb-primitive-color-accent-soft: rgb(79.608% 65.098% 96.863% / 0.14);
1344
+ --sb-primitive-color-bg-subtle: rgb(80.392% 83.922% 95.686% / 0.06);
1345
+ --sb-primitive-color-border: rgb(27.059% 27.843% 35.294%);
1346
+ --sb-primitive-color-border-strong: rgb(34.51% 35.686% 43.922%);
1347
+ --sb-primitive-color-border-subtle: rgb(80.392% 83.922% 95.686% / 0.12);
1348
+ --sb-primitive-color-canvas: rgb(11.765% 11.765% 18.039%);
1349
+ --sb-primitive-color-danger: rgb(95.294% 54.51% 65.882%);
1350
+ --sb-primitive-color-danger-on: rgb(6.6667% 6.6667% 10.588%);
1351
+ --sb-primitive-color-danger-soft: rgb(95.294% 54.51% 65.882% / 0.12);
1352
+ --sb-primitive-color-danger-surface: rgb(95.294% 54.51% 65.882%);
1353
+ --sb-primitive-color-danger-text: rgb(95.294% 54.51% 65.882%);
1354
+ --sb-primitive-color-fg: rgb(80.392% 83.922% 95.686%);
1355
+ --sb-primitive-color-fg-subtle: rgb(80.392% 83.922% 95.686% / 0.72);
1356
+ --sb-primitive-color-info: rgb(53.726% 70.588% 98.039%);
1357
+ --sb-primitive-color-info-on: rgb(6.6667% 6.6667% 10.588%);
1358
+ --sb-primitive-color-info-soft: rgb(53.726% 70.588% 98.039% / 0.12);
1359
+ --sb-primitive-color-info-surface: rgb(53.726% 70.588% 98.039%);
1360
+ --sb-primitive-color-info-text: rgb(53.726% 70.588% 98.039%);
1361
+ --sb-primitive-color-inverse: rgb(6.6667% 6.6667% 10.588%);
1362
+ --sb-primitive-color-muted: rgb(65.098% 67.843% 78.431%);
1363
+ --sb-primitive-color-overlay: rgb(34.51% 35.686% 43.922%);
1364
+ --sb-primitive-color-raised: rgb(27.059% 27.843% 35.294%);
1365
+ --sb-primitive-color-scrim: rgb(11.765% 11.765% 18.039% / 0.72);
1366
+ --sb-primitive-color-secondary: rgb(72.941% 76.078% 87.059%);
1367
+ --sb-primitive-color-success: rgb(65.098% 89.02% 63.137%);
1368
+ --sb-primitive-color-success-on: rgb(6.6667% 6.6667% 10.588%);
1369
+ --sb-primitive-color-success-soft: rgb(65.098% 89.02% 63.137% / 0.12);
1370
+ --sb-primitive-color-success-surface: rgb(65.098% 89.02% 63.137%);
1371
+ --sb-primitive-color-success-text: rgb(65.098% 89.02% 63.137%);
1372
+ --sb-primitive-color-surface: rgb(19.216% 19.608% 26.667%);
1373
+ --sb-primitive-color-warning: rgb(97.647% 88.628% 68.628%);
1374
+ --sb-primitive-color-warning-on: rgb(6.6667% 6.6667% 10.588%);
1375
+ --sb-primitive-color-warning-soft: rgb(97.647% 88.628% 68.628% / 0.12);
1376
+ --sb-primitive-color-warning-surface: rgb(97.647% 88.628% 68.628%);
1377
+ --sb-primitive-color-warning-text: rgb(97.647% 88.628% 68.628%);
1378
+ --sb-primitive-duration-fast: 140ms;
1379
+ --sb-primitive-duration-normal: 200ms;
1380
+ --sb-primitive-duration-slow: 400ms;
1381
+ --sb-primitive-duration-spinner: 900ms;
1382
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
1383
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
1384
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
1385
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
1386
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
1387
+ --sb-primitive-font-size-2xl: 20px;
1388
+ --sb-primitive-font-size-3xl: 24px;
1389
+ --sb-primitive-font-size-4xl: 32px;
1390
+ --sb-primitive-font-size-5xl: 48px;
1391
+ --sb-primitive-font-size-display: 64px;
1392
+ --sb-primitive-font-size-lg: 16px;
1393
+ --sb-primitive-font-size-md: 14px;
1394
+ --sb-primitive-font-size-sm: 12px;
1395
+ --sb-primitive-font-size-xl: 18px;
1396
+ --sb-primitive-font-size-xs: 11px;
1397
+ --sb-primitive-font-weight-bold: 700;
1398
+ --sb-primitive-font-weight-medium: 500;
1399
+ --sb-primitive-font-weight-regular: 400;
1400
+ --sb-primitive-font-weight-semibold: 600;
1401
+ /* Relative em value. */
1402
+ --sb-primitive-letter-spacing-normal: -0.01em;
1403
+ /* Relative em value. */
1404
+ --sb-primitive-letter-spacing-snug: -0.03em;
1405
+ /* Relative em value. */
1406
+ --sb-primitive-letter-spacing-tight: -0.06em;
1407
+ /* Relative em value. */
1408
+ --sb-primitive-letter-spacing-wide: 0.04em;
1409
+ /* Relative em value. */
1410
+ --sb-primitive-letter-spacing-wider: 0.08em;
1411
+ --sb-primitive-line-height-none: 1;
1412
+ --sb-primitive-line-height-normal: 1.4;
1413
+ --sb-primitive-line-height-relaxed: 1.55;
1414
+ --sb-primitive-line-height-snug: 1.2;
1415
+ --sb-primitive-line-height-tight: 1.08;
1416
+ --sb-primitive-opacity-disabled: 0.48;
1417
+ --sb-primitive-opacity-invisible: 0;
1418
+ --sb-primitive-opacity-opaque: 1;
1419
+ --sb-primitive-opacity-subtle: 0.72;
1420
+ --sb-primitive-radius-full: 999px;
1421
+ --sb-primitive-radius-lg: 12px;
1422
+ --sb-primitive-radius-md: 8px;
1423
+ --sb-primitive-radius-none: 0px;
1424
+ --sb-primitive-radius-sm: 6px;
1425
+ --sb-primitive-radius-xl: 16px;
1426
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
1427
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
1428
+ /* Restrained dark-theme elevation; light themes override this shadow. */
1429
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.32);
1430
+ --sb-primitive-size-container-content: 1280px;
1431
+ --sb-primitive-size-control-lg: 44px;
1432
+ --sb-primitive-size-control-md: 40px;
1433
+ --sb-primitive-size-control-sm: 34px;
1434
+ --sb-primitive-size-control-xl: 52px;
1435
+ --sb-primitive-size-control-xs: 30px;
1436
+ --sb-primitive-size-icon-lg: 24px;
1437
+ --sb-primitive-size-icon-md: 20px;
1438
+ --sb-primitive-size-icon-sm: 16px;
1439
+ --sb-primitive-size-target-minimum: 44px;
1440
+ --sb-primitive-space-0: 0px;
1441
+ --sb-primitive-space-1: 4px;
1442
+ --sb-primitive-space-2: 8px;
1443
+ --sb-primitive-space-3: 12px;
1444
+ --sb-primitive-space-4: 16px;
1445
+ --sb-primitive-space-5: 20px;
1446
+ --sb-primitive-space-6: 24px;
1447
+ --sb-primitive-space-8: 32px;
1448
+ --sb-primitive-space-10: 40px;
1449
+ --sb-primitive-space-12: 48px;
1450
+ --sb-primitive-space-16: 64px;
1451
+ --sb-primitive-space-20: 80px;
1452
+ --sb-primitive-z-index-base: 0;
1453
+ --sb-primitive-z-index-dropdown: 400;
1454
+ --sb-primitive-z-index-modal: 700;
1455
+ --sb-primitive-z-index-overlay: 600;
1456
+ --sb-primitive-z-index-sticky: 200;
1457
+ --sb-primitive-z-index-toast: 900;
1458
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
1459
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
1460
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
1461
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
1462
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
1463
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
1464
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
1465
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
1466
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
1467
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
1468
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
1469
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
1470
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
1471
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
1472
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
1473
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
1474
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
1475
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
1476
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
1477
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
1478
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
1479
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
1480
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
1481
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
1482
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
1483
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
1484
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
1485
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
1486
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
1487
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
1488
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
1489
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
1490
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
1491
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
1492
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
1493
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
1494
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
1495
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
1496
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
1497
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
1498
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
1499
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
1500
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
1501
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
1502
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
1503
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
1504
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
1505
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
1506
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
1507
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
1508
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
1509
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
1510
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
1511
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
1512
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
1513
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
1514
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
1515
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
1516
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
1517
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
1518
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
1519
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
1520
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
1521
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
1522
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
1523
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
1524
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
1525
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
1526
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
1527
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
1528
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
1529
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
1530
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
1531
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
1532
+ /* Restrained dark-theme elevation; light themes override this shadow. */
1533
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
1534
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
1535
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
1536
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
1537
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
1538
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
1539
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
1540
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
1541
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
1542
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
1543
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
1544
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
1545
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
1546
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
1547
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
1548
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
1549
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
1550
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
1551
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
1552
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
1553
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
1554
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
1555
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
1556
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
1557
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
1558
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
1559
+ /* Relative em value. */
1560
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
1561
+ /* Relative em value. */
1562
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
1563
+ /* Relative em value. */
1564
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
1565
+ /* Relative em value. */
1566
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
1567
+ /* Relative em value. */
1568
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
1569
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
1570
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
1571
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
1572
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
1573
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
1574
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
1575
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
1576
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
1577
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
1578
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
1579
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
1580
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
1581
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
1582
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
1583
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
1584
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
1585
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
1586
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
1587
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
1588
+ }
1589
+
1590
+ [data-theme="dracula"] {
1591
+ color-scheme: dark;
1592
+ --sb-primitive-border-width-hairline: 1px;
1593
+ --sb-primitive-border-width-none: 0px;
1594
+ --sb-primitive-border-width-strong: 2px;
1595
+ --sb-primitive-breakpoint-2xl: 1536px;
1596
+ --sb-primitive-breakpoint-lg: 1024px;
1597
+ --sb-primitive-breakpoint-md: 768px;
1598
+ --sb-primitive-breakpoint-sm: 640px;
1599
+ --sb-primitive-breakpoint-xl: 1280px;
1600
+ --sb-primitive-color-accent: rgb(74.118% 57.647% 97.647%);
1601
+ --sb-primitive-color-accent-readable: rgb(74.118% 57.647% 97.647%);
1602
+ --sb-primitive-color-accent-soft: rgb(74.118% 57.647% 97.647% / 0.14);
1603
+ --sb-primitive-color-bg-subtle: rgb(97.255% 97.255% 94.902% / 0.06);
1604
+ --sb-primitive-color-border: rgb(26.667% 27.843% 35.294%);
1605
+ --sb-primitive-color-border-strong: rgb(38.431% 44.706% 64.314%);
1606
+ --sb-primitive-color-border-subtle: rgb(97.255% 97.255% 94.902% / 0.12);
1607
+ --sb-primitive-color-canvas: rgb(15.686% 16.471% 21.177%);
1608
+ --sb-primitive-color-danger: rgb(100% 33.333% 33.333%);
1609
+ --sb-primitive-color-danger-on: rgb(15.686% 16.471% 21.177%);
1610
+ --sb-primitive-color-danger-soft: rgb(100% 33.333% 33.333% / 0.12);
1611
+ --sb-primitive-color-danger-surface: rgb(100% 33.333% 33.333%);
1612
+ --sb-primitive-color-danger-text: rgb(100% 70.196% 70.196%);
1613
+ --sb-primitive-color-fg: rgb(97.255% 97.255% 94.902%);
1614
+ --sb-primitive-color-fg-subtle: rgb(97.255% 97.255% 94.902% / 0.72);
1615
+ --sb-primitive-color-info: rgb(54.51% 91.373% 99.216%);
1616
+ --sb-primitive-color-info-on: rgb(15.686% 16.471% 21.177%);
1617
+ --sb-primitive-color-info-soft: rgb(54.51% 91.373% 99.216% / 0.12);
1618
+ --sb-primitive-color-info-surface: rgb(54.51% 91.373% 99.216%);
1619
+ --sb-primitive-color-info-text: rgb(54.51% 91.373% 99.216%);
1620
+ --sb-primitive-color-inverse: rgb(15.686% 16.471% 21.177%);
1621
+ --sb-primitive-color-muted: rgb(60.392% 62.745% 70.98%);
1622
+ --sb-primitive-color-overlay: rgb(30.98% 32.157% 40.784%);
1623
+ --sb-primitive-color-raised: rgb(26.667% 27.843% 35.294%);
1624
+ --sb-primitive-color-scrim: rgb(15.686% 16.471% 21.177% / 0.72);
1625
+ --sb-primitive-color-secondary: rgb(74.118% 76.078% 84.706%);
1626
+ --sb-primitive-color-success: rgb(31.373% 98.039% 48.235%);
1627
+ --sb-primitive-color-success-on: rgb(15.686% 16.471% 21.177%);
1628
+ --sb-primitive-color-success-soft: rgb(31.373% 98.039% 48.235% / 0.12);
1629
+ --sb-primitive-color-success-surface: rgb(31.373% 98.039% 48.235%);
1630
+ --sb-primitive-color-success-text: rgb(31.373% 98.039% 48.235%);
1631
+ --sb-primitive-color-surface: rgb(20.392% 21.569% 27.451%);
1632
+ --sb-primitive-color-warning: rgb(94.51% 98.039% 54.902%);
1633
+ --sb-primitive-color-warning-on: rgb(15.686% 16.471% 21.177%);
1634
+ --sb-primitive-color-warning-soft: rgb(94.51% 98.039% 54.902% / 0.12);
1635
+ --sb-primitive-color-warning-surface: rgb(94.51% 98.039% 54.902%);
1636
+ --sb-primitive-color-warning-text: rgb(94.51% 98.039% 54.902%);
1637
+ --sb-primitive-duration-fast: 140ms;
1638
+ --sb-primitive-duration-normal: 200ms;
1639
+ --sb-primitive-duration-slow: 400ms;
1640
+ --sb-primitive-duration-spinner: 900ms;
1641
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
1642
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
1643
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
1644
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
1645
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
1646
+ --sb-primitive-font-size-2xl: 20px;
1647
+ --sb-primitive-font-size-3xl: 24px;
1648
+ --sb-primitive-font-size-4xl: 32px;
1649
+ --sb-primitive-font-size-5xl: 48px;
1650
+ --sb-primitive-font-size-display: 64px;
1651
+ --sb-primitive-font-size-lg: 16px;
1652
+ --sb-primitive-font-size-md: 14px;
1653
+ --sb-primitive-font-size-sm: 12px;
1654
+ --sb-primitive-font-size-xl: 18px;
1655
+ --sb-primitive-font-size-xs: 11px;
1656
+ --sb-primitive-font-weight-bold: 700;
1657
+ --sb-primitive-font-weight-medium: 500;
1658
+ --sb-primitive-font-weight-regular: 400;
1659
+ --sb-primitive-font-weight-semibold: 600;
1660
+ /* Relative em value. */
1661
+ --sb-primitive-letter-spacing-normal: -0.01em;
1662
+ /* Relative em value. */
1663
+ --sb-primitive-letter-spacing-snug: -0.03em;
1664
+ /* Relative em value. */
1665
+ --sb-primitive-letter-spacing-tight: -0.06em;
1666
+ /* Relative em value. */
1667
+ --sb-primitive-letter-spacing-wide: 0.04em;
1668
+ /* Relative em value. */
1669
+ --sb-primitive-letter-spacing-wider: 0.08em;
1670
+ --sb-primitive-line-height-none: 1;
1671
+ --sb-primitive-line-height-normal: 1.4;
1672
+ --sb-primitive-line-height-relaxed: 1.55;
1673
+ --sb-primitive-line-height-snug: 1.2;
1674
+ --sb-primitive-line-height-tight: 1.08;
1675
+ --sb-primitive-opacity-disabled: 0.48;
1676
+ --sb-primitive-opacity-invisible: 0;
1677
+ --sb-primitive-opacity-opaque: 1;
1678
+ --sb-primitive-opacity-subtle: 0.72;
1679
+ --sb-primitive-radius-full: 999px;
1680
+ --sb-primitive-radius-lg: 12px;
1681
+ --sb-primitive-radius-md: 8px;
1682
+ --sb-primitive-radius-none: 0px;
1683
+ --sb-primitive-radius-sm: 6px;
1684
+ --sb-primitive-radius-xl: 16px;
1685
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
1686
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
1687
+ /* Restrained dark-theme elevation; light themes override this shadow. */
1688
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.32);
1689
+ --sb-primitive-size-container-content: 1280px;
1690
+ --sb-primitive-size-control-lg: 44px;
1691
+ --sb-primitive-size-control-md: 40px;
1692
+ --sb-primitive-size-control-sm: 34px;
1693
+ --sb-primitive-size-control-xl: 52px;
1694
+ --sb-primitive-size-control-xs: 30px;
1695
+ --sb-primitive-size-icon-lg: 24px;
1696
+ --sb-primitive-size-icon-md: 20px;
1697
+ --sb-primitive-size-icon-sm: 16px;
1698
+ --sb-primitive-size-target-minimum: 44px;
1699
+ --sb-primitive-space-0: 0px;
1700
+ --sb-primitive-space-1: 4px;
1701
+ --sb-primitive-space-2: 8px;
1702
+ --sb-primitive-space-3: 12px;
1703
+ --sb-primitive-space-4: 16px;
1704
+ --sb-primitive-space-5: 20px;
1705
+ --sb-primitive-space-6: 24px;
1706
+ --sb-primitive-space-8: 32px;
1707
+ --sb-primitive-space-10: 40px;
1708
+ --sb-primitive-space-12: 48px;
1709
+ --sb-primitive-space-16: 64px;
1710
+ --sb-primitive-space-20: 80px;
1711
+ --sb-primitive-z-index-base: 0;
1712
+ --sb-primitive-z-index-dropdown: 400;
1713
+ --sb-primitive-z-index-modal: 700;
1714
+ --sb-primitive-z-index-overlay: 600;
1715
+ --sb-primitive-z-index-sticky: 200;
1716
+ --sb-primitive-z-index-toast: 900;
1717
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
1718
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
1719
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
1720
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
1721
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
1722
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
1723
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
1724
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
1725
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
1726
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
1727
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
1728
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
1729
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
1730
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
1731
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
1732
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
1733
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
1734
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
1735
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
1736
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
1737
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
1738
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
1739
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
1740
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
1741
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
1742
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
1743
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
1744
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
1745
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
1746
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
1747
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
1748
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
1749
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
1750
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
1751
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
1752
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
1753
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
1754
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
1755
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
1756
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
1757
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
1758
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
1759
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
1760
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
1761
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
1762
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
1763
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
1764
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
1765
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
1766
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
1767
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
1768
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
1769
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
1770
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
1771
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
1772
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
1773
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
1774
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
1775
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
1776
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
1777
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
1778
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
1779
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
1780
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
1781
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
1782
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
1783
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
1784
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
1785
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
1786
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
1787
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
1788
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
1789
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
1790
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
1791
+ /* Restrained dark-theme elevation; light themes override this shadow. */
1792
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
1793
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
1794
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
1795
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
1796
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
1797
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
1798
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
1799
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
1800
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
1801
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
1802
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
1803
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
1804
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
1805
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
1806
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
1807
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
1808
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
1809
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
1810
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
1811
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
1812
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
1813
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
1814
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
1815
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
1816
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
1817
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
1818
+ /* Relative em value. */
1819
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
1820
+ /* Relative em value. */
1821
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
1822
+ /* Relative em value. */
1823
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
1824
+ /* Relative em value. */
1825
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
1826
+ /* Relative em value. */
1827
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
1828
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
1829
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
1830
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
1831
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
1832
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
1833
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
1834
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
1835
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
1836
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
1837
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
1838
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
1839
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
1840
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
1841
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
1842
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
1843
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
1844
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
1845
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
1846
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
1847
+ }
1848
+
1849
+ [data-theme="tokyo-night"] {
1850
+ color-scheme: dark;
1851
+ --sb-primitive-border-width-hairline: 1px;
1852
+ --sb-primitive-border-width-none: 0px;
1853
+ --sb-primitive-border-width-strong: 2px;
1854
+ --sb-primitive-breakpoint-2xl: 1536px;
1855
+ --sb-primitive-breakpoint-lg: 1024px;
1856
+ --sb-primitive-breakpoint-md: 768px;
1857
+ --sb-primitive-breakpoint-sm: 640px;
1858
+ --sb-primitive-breakpoint-xl: 1280px;
1859
+ --sb-primitive-color-accent: rgb(47.843% 63.529% 96.863%);
1860
+ --sb-primitive-color-accent-readable: rgb(47.843% 63.529% 96.863%);
1861
+ --sb-primitive-color-accent-soft: rgb(47.843% 63.529% 96.863% / 0.14);
1862
+ --sb-primitive-color-bg-subtle: rgb(75.294% 79.216% 96.078% / 0.06);
1863
+ --sb-primitive-color-border: rgb(23.137% 25.882% 38.039%);
1864
+ --sb-primitive-color-border-strong: rgb(33.726% 37.255% 53.726%);
1865
+ --sb-primitive-color-border-subtle: rgb(75.294% 79.216% 96.078% / 0.12);
1866
+ --sb-primitive-color-canvas: rgb(10.196% 10.588% 14.902%);
1867
+ --sb-primitive-color-danger: rgb(96.863% 46.275% 55.686%);
1868
+ --sb-primitive-color-danger-on: rgb(10.196% 10.588% 14.902%);
1869
+ --sb-primitive-color-danger-soft: rgb(96.863% 46.275% 55.686% / 0.12);
1870
+ --sb-primitive-color-danger-surface: rgb(96.863% 46.275% 55.686%);
1871
+ --sb-primitive-color-danger-text: rgb(96.863% 46.275% 55.686%);
1872
+ --sb-primitive-color-fg: rgb(75.294% 79.216% 96.078%);
1873
+ --sb-primitive-color-fg-subtle: rgb(75.294% 79.216% 96.078% / 0.72);
1874
+ --sb-primitive-color-info: rgb(47.843% 63.529% 96.863%);
1875
+ --sb-primitive-color-info-on: rgb(10.196% 10.588% 14.902%);
1876
+ --sb-primitive-color-info-soft: rgb(47.843% 63.529% 96.863% / 0.12);
1877
+ --sb-primitive-color-info-surface: rgb(47.843% 63.529% 96.863%);
1878
+ --sb-primitive-color-info-text: rgb(47.843% 63.529% 96.863%);
1879
+ --sb-primitive-color-inverse: rgb(10.196% 10.588% 14.902%);
1880
+ --sb-primitive-color-muted: rgb(49.804% 52.941% 69.02%);
1881
+ --sb-primitive-color-overlay: rgb(23.137% 25.882% 38.039%);
1882
+ --sb-primitive-color-raised: rgb(16.078% 18.039% 25.882%);
1883
+ --sb-primitive-color-scrim: rgb(10.196% 10.588% 14.902% / 0.72);
1884
+ --sb-primitive-color-secondary: rgb(66.275% 69.412% 83.922%);
1885
+ --sb-primitive-color-success: rgb(61.961% 80.784% 41.569%);
1886
+ --sb-primitive-color-success-on: rgb(10.196% 10.588% 14.902%);
1887
+ --sb-primitive-color-success-soft: rgb(61.961% 80.784% 41.569% / 0.12);
1888
+ --sb-primitive-color-success-surface: rgb(61.961% 80.784% 41.569%);
1889
+ --sb-primitive-color-success-text: rgb(61.961% 80.784% 41.569%);
1890
+ --sb-primitive-color-surface: rgb(14.118% 15.686% 23.137%);
1891
+ --sb-primitive-color-warning: rgb(87.843% 68.628% 40.784%);
1892
+ --sb-primitive-color-warning-on: rgb(10.196% 10.588% 14.902%);
1893
+ --sb-primitive-color-warning-soft: rgb(87.843% 68.628% 40.784% / 0.12);
1894
+ --sb-primitive-color-warning-surface: rgb(87.843% 68.628% 40.784%);
1895
+ --sb-primitive-color-warning-text: rgb(87.843% 68.628% 40.784%);
1896
+ --sb-primitive-duration-fast: 140ms;
1897
+ --sb-primitive-duration-normal: 200ms;
1898
+ --sb-primitive-duration-slow: 400ms;
1899
+ --sb-primitive-duration-spinner: 900ms;
1900
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
1901
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
1902
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
1903
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
1904
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
1905
+ --sb-primitive-font-size-2xl: 20px;
1906
+ --sb-primitive-font-size-3xl: 24px;
1907
+ --sb-primitive-font-size-4xl: 32px;
1908
+ --sb-primitive-font-size-5xl: 48px;
1909
+ --sb-primitive-font-size-display: 64px;
1910
+ --sb-primitive-font-size-lg: 16px;
1911
+ --sb-primitive-font-size-md: 14px;
1912
+ --sb-primitive-font-size-sm: 12px;
1913
+ --sb-primitive-font-size-xl: 18px;
1914
+ --sb-primitive-font-size-xs: 11px;
1915
+ --sb-primitive-font-weight-bold: 700;
1916
+ --sb-primitive-font-weight-medium: 500;
1917
+ --sb-primitive-font-weight-regular: 400;
1918
+ --sb-primitive-font-weight-semibold: 600;
1919
+ /* Relative em value. */
1920
+ --sb-primitive-letter-spacing-normal: -0.01em;
1921
+ /* Relative em value. */
1922
+ --sb-primitive-letter-spacing-snug: -0.03em;
1923
+ /* Relative em value. */
1924
+ --sb-primitive-letter-spacing-tight: -0.06em;
1925
+ /* Relative em value. */
1926
+ --sb-primitive-letter-spacing-wide: 0.04em;
1927
+ /* Relative em value. */
1928
+ --sb-primitive-letter-spacing-wider: 0.08em;
1929
+ --sb-primitive-line-height-none: 1;
1930
+ --sb-primitive-line-height-normal: 1.4;
1931
+ --sb-primitive-line-height-relaxed: 1.55;
1932
+ --sb-primitive-line-height-snug: 1.2;
1933
+ --sb-primitive-line-height-tight: 1.08;
1934
+ --sb-primitive-opacity-disabled: 0.48;
1935
+ --sb-primitive-opacity-invisible: 0;
1936
+ --sb-primitive-opacity-opaque: 1;
1937
+ --sb-primitive-opacity-subtle: 0.72;
1938
+ --sb-primitive-radius-full: 999px;
1939
+ --sb-primitive-radius-lg: 12px;
1940
+ --sb-primitive-radius-md: 8px;
1941
+ --sb-primitive-radius-none: 0px;
1942
+ --sb-primitive-radius-sm: 6px;
1943
+ --sb-primitive-radius-xl: 16px;
1944
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
1945
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
1946
+ /* Restrained dark-theme elevation; light themes override this shadow. */
1947
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.32);
1948
+ --sb-primitive-size-container-content: 1280px;
1949
+ --sb-primitive-size-control-lg: 44px;
1950
+ --sb-primitive-size-control-md: 40px;
1951
+ --sb-primitive-size-control-sm: 34px;
1952
+ --sb-primitive-size-control-xl: 52px;
1953
+ --sb-primitive-size-control-xs: 30px;
1954
+ --sb-primitive-size-icon-lg: 24px;
1955
+ --sb-primitive-size-icon-md: 20px;
1956
+ --sb-primitive-size-icon-sm: 16px;
1957
+ --sb-primitive-size-target-minimum: 44px;
1958
+ --sb-primitive-space-0: 0px;
1959
+ --sb-primitive-space-1: 4px;
1960
+ --sb-primitive-space-2: 8px;
1961
+ --sb-primitive-space-3: 12px;
1962
+ --sb-primitive-space-4: 16px;
1963
+ --sb-primitive-space-5: 20px;
1964
+ --sb-primitive-space-6: 24px;
1965
+ --sb-primitive-space-8: 32px;
1966
+ --sb-primitive-space-10: 40px;
1967
+ --sb-primitive-space-12: 48px;
1968
+ --sb-primitive-space-16: 64px;
1969
+ --sb-primitive-space-20: 80px;
1970
+ --sb-primitive-z-index-base: 0;
1971
+ --sb-primitive-z-index-dropdown: 400;
1972
+ --sb-primitive-z-index-modal: 700;
1973
+ --sb-primitive-z-index-overlay: 600;
1974
+ --sb-primitive-z-index-sticky: 200;
1975
+ --sb-primitive-z-index-toast: 900;
1976
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
1977
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
1978
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
1979
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
1980
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
1981
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
1982
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
1983
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
1984
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
1985
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
1986
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
1987
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
1988
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
1989
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
1990
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
1991
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
1992
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
1993
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
1994
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
1995
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
1996
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
1997
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
1998
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
1999
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
2000
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
2001
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
2002
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
2003
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
2004
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
2005
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
2006
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
2007
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
2008
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
2009
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
2010
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
2011
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
2012
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
2013
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
2014
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
2015
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
2016
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
2017
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
2018
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
2019
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
2020
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
2021
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
2022
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
2023
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
2024
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
2025
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
2026
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
2027
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
2028
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
2029
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
2030
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
2031
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
2032
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
2033
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
2034
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
2035
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
2036
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
2037
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
2038
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
2039
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
2040
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
2041
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
2042
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
2043
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
2044
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
2045
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
2046
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
2047
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
2048
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
2049
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
2050
+ /* Restrained dark-theme elevation; light themes override this shadow. */
2051
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
2052
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
2053
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
2054
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
2055
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
2056
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
2057
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
2058
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
2059
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
2060
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
2061
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
2062
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
2063
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
2064
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
2065
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
2066
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
2067
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
2068
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
2069
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
2070
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
2071
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
2072
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
2073
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
2074
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
2075
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
2076
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
2077
+ /* Relative em value. */
2078
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
2079
+ /* Relative em value. */
2080
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
2081
+ /* Relative em value. */
2082
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
2083
+ /* Relative em value. */
2084
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
2085
+ /* Relative em value. */
2086
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
2087
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
2088
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
2089
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
2090
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
2091
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
2092
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
2093
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
2094
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
2095
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
2096
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
2097
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
2098
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
2099
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
2100
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
2101
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
2102
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
2103
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
2104
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
2105
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
2106
+ }
2107
+
2108
+ [data-theme="nord"] {
2109
+ color-scheme: dark;
2110
+ --sb-primitive-border-width-hairline: 1px;
2111
+ --sb-primitive-border-width-none: 0px;
2112
+ --sb-primitive-border-width-strong: 2px;
2113
+ --sb-primitive-breakpoint-2xl: 1536px;
2114
+ --sb-primitive-breakpoint-lg: 1024px;
2115
+ --sb-primitive-breakpoint-md: 768px;
2116
+ --sb-primitive-breakpoint-sm: 640px;
2117
+ --sb-primitive-breakpoint-xl: 1280px;
2118
+ --sb-primitive-color-accent: rgb(53.333% 75.294% 81.569%);
2119
+ --sb-primitive-color-accent-readable: rgb(53.333% 75.294% 81.569%);
2120
+ --sb-primitive-color-accent-soft: rgb(53.333% 75.294% 81.569% / 0.14);
2121
+ --sb-primitive-color-bg-subtle: rgb(92.549% 93.726% 95.686% / 0.06);
2122
+ --sb-primitive-color-border: rgb(29.804% 33.726% 41.569%);
2123
+ --sb-primitive-color-border-strong: rgb(36.863% 50.588% 67.451%);
2124
+ --sb-primitive-color-border-subtle: rgb(92.549% 93.726% 95.686% / 0.12);
2125
+ --sb-primitive-color-canvas: rgb(18.039% 20.392% 25.098%);
2126
+ --sb-primitive-color-danger: rgb(74.902% 38.039% 41.569%);
2127
+ --sb-primitive-color-danger-on: rgb(92.549% 93.726% 95.686%);
2128
+ --sb-primitive-color-danger-soft: rgb(74.902% 38.039% 41.569% / 0.12);
2129
+ --sb-primitive-color-danger-surface: rgb(66.275% 26.667% 30.98%);
2130
+ --sb-primitive-color-danger-text: rgb(87.843% 52.941% 56.078%);
2131
+ --sb-primitive-color-fg: rgb(92.549% 93.726% 95.686%);
2132
+ --sb-primitive-color-fg-subtle: rgb(92.549% 93.726% 95.686% / 0.72);
2133
+ --sb-primitive-color-info: rgb(53.333% 75.294% 81.569%);
2134
+ --sb-primitive-color-info-on: rgb(18.039% 20.392% 25.098%);
2135
+ --sb-primitive-color-info-soft: rgb(53.333% 75.294% 81.569% / 0.12);
2136
+ --sb-primitive-color-info-surface: rgb(53.333% 75.294% 81.569%);
2137
+ --sb-primitive-color-info-text: rgb(53.333% 75.294% 81.569%);
2138
+ --sb-primitive-color-inverse: rgb(18.039% 20.392% 25.098%);
2139
+ --sb-primitive-color-muted: rgb(72.157% 76.078% 82.745%);
2140
+ --sb-primitive-color-overlay: rgb(29.804% 33.726% 41.569%);
2141
+ --sb-primitive-color-raised: rgb(26.275% 29.804% 36.863%);
2142
+ --sb-primitive-color-scrim: rgb(18.039% 20.392% 25.098% / 0.72);
2143
+ --sb-primitive-color-secondary: rgb(84.706% 87.059% 91.373%);
2144
+ --sb-primitive-color-success: rgb(63.922% 74.51% 54.902%);
2145
+ --sb-primitive-color-success-on: rgb(18.039% 20.392% 25.098%);
2146
+ --sb-primitive-color-success-soft: rgb(63.922% 74.51% 54.902% / 0.12);
2147
+ --sb-primitive-color-success-surface: rgb(63.922% 74.51% 54.902%);
2148
+ --sb-primitive-color-success-text: rgb(63.922% 74.51% 54.902%);
2149
+ --sb-primitive-color-surface: rgb(23.137% 25.882% 32.157%);
2150
+ --sb-primitive-color-warning: rgb(92.157% 79.608% 54.51%);
2151
+ --sb-primitive-color-warning-on: rgb(18.039% 20.392% 25.098%);
2152
+ --sb-primitive-color-warning-soft: rgb(92.157% 79.608% 54.51% / 0.12);
2153
+ --sb-primitive-color-warning-surface: rgb(92.157% 79.608% 54.51%);
2154
+ --sb-primitive-color-warning-text: rgb(92.157% 79.608% 54.51%);
2155
+ --sb-primitive-duration-fast: 140ms;
2156
+ --sb-primitive-duration-normal: 200ms;
2157
+ --sb-primitive-duration-slow: 400ms;
2158
+ --sb-primitive-duration-spinner: 900ms;
2159
+ --sb-primitive-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
2160
+ --sb-primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
2161
+ --sb-primitive-font-family-display: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
2162
+ --sb-primitive-font-family-mono: "Geist Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
2163
+ --sb-primitive-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
2164
+ --sb-primitive-font-size-2xl: 20px;
2165
+ --sb-primitive-font-size-3xl: 24px;
2166
+ --sb-primitive-font-size-4xl: 32px;
2167
+ --sb-primitive-font-size-5xl: 48px;
2168
+ --sb-primitive-font-size-display: 64px;
2169
+ --sb-primitive-font-size-lg: 16px;
2170
+ --sb-primitive-font-size-md: 14px;
2171
+ --sb-primitive-font-size-sm: 12px;
2172
+ --sb-primitive-font-size-xl: 18px;
2173
+ --sb-primitive-font-size-xs: 11px;
2174
+ --sb-primitive-font-weight-bold: 700;
2175
+ --sb-primitive-font-weight-medium: 500;
2176
+ --sb-primitive-font-weight-regular: 400;
2177
+ --sb-primitive-font-weight-semibold: 600;
2178
+ /* Relative em value. */
2179
+ --sb-primitive-letter-spacing-normal: -0.01em;
2180
+ /* Relative em value. */
2181
+ --sb-primitive-letter-spacing-snug: -0.03em;
2182
+ /* Relative em value. */
2183
+ --sb-primitive-letter-spacing-tight: -0.06em;
2184
+ /* Relative em value. */
2185
+ --sb-primitive-letter-spacing-wide: 0.04em;
2186
+ /* Relative em value. */
2187
+ --sb-primitive-letter-spacing-wider: 0.08em;
2188
+ --sb-primitive-line-height-none: 1;
2189
+ --sb-primitive-line-height-normal: 1.4;
2190
+ --sb-primitive-line-height-relaxed: 1.55;
2191
+ --sb-primitive-line-height-snug: 1.2;
2192
+ --sb-primitive-line-height-tight: 1.08;
2193
+ --sb-primitive-opacity-disabled: 0.48;
2194
+ --sb-primitive-opacity-invisible: 0;
2195
+ --sb-primitive-opacity-opaque: 1;
2196
+ --sb-primitive-opacity-subtle: 0.72;
2197
+ --sb-primitive-radius-full: 999px;
2198
+ --sb-primitive-radius-lg: 12px;
2199
+ --sb-primitive-radius-md: 8px;
2200
+ --sb-primitive-radius-none: 0px;
2201
+ --sb-primitive-radius-sm: 6px;
2202
+ --sb-primitive-radius-xl: 16px;
2203
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
2204
+ --sb-primitive-shadow-card: 0px 0px 0px 0px oklch(12.76% 0.0035 245.8 / 0);
2205
+ /* Restrained dark-theme elevation; light themes override this shadow. */
2206
+ --sb-primitive-shadow-overlay: 0px 8px 24px 0px oklch(12.76% 0.0035 245.8 / 0.32);
2207
+ --sb-primitive-size-container-content: 1280px;
2208
+ --sb-primitive-size-control-lg: 44px;
2209
+ --sb-primitive-size-control-md: 40px;
2210
+ --sb-primitive-size-control-sm: 34px;
2211
+ --sb-primitive-size-control-xl: 52px;
2212
+ --sb-primitive-size-control-xs: 30px;
2213
+ --sb-primitive-size-icon-lg: 24px;
2214
+ --sb-primitive-size-icon-md: 20px;
2215
+ --sb-primitive-size-icon-sm: 16px;
2216
+ --sb-primitive-size-target-minimum: 44px;
2217
+ --sb-primitive-space-0: 0px;
2218
+ --sb-primitive-space-1: 4px;
2219
+ --sb-primitive-space-2: 8px;
2220
+ --sb-primitive-space-3: 12px;
2221
+ --sb-primitive-space-4: 16px;
2222
+ --sb-primitive-space-5: 20px;
2223
+ --sb-primitive-space-6: 24px;
2224
+ --sb-primitive-space-8: 32px;
2225
+ --sb-primitive-space-10: 40px;
2226
+ --sb-primitive-space-12: 48px;
2227
+ --sb-primitive-space-16: 64px;
2228
+ --sb-primitive-space-20: 80px;
2229
+ --sb-primitive-z-index-base: 0;
2230
+ --sb-primitive-z-index-dropdown: 400;
2231
+ --sb-primitive-z-index-modal: 700;
2232
+ --sb-primitive-z-index-overlay: 600;
2233
+ --sb-primitive-z-index-sticky: 200;
2234
+ --sb-primitive-z-index-toast: 900;
2235
+ --sb-semantic-border-width-hairline: var(--sb-primitive-border-width-hairline);
2236
+ --sb-semantic-border-width-none: var(--sb-primitive-border-width-none);
2237
+ --sb-semantic-border-width-strong: var(--sb-primitive-border-width-strong);
2238
+ --sb-semantic-breakpoint-2xl: var(--sb-primitive-breakpoint-2xl);
2239
+ --sb-semantic-breakpoint-lg: var(--sb-primitive-breakpoint-lg);
2240
+ --sb-semantic-breakpoint-md: var(--sb-primitive-breakpoint-md);
2241
+ --sb-semantic-breakpoint-sm: var(--sb-primitive-breakpoint-sm);
2242
+ --sb-semantic-breakpoint-xl: var(--sb-primitive-breakpoint-xl);
2243
+ --sb-semantic-color-accent-on-surface: var(--sb-primitive-color-inverse);
2244
+ --sb-semantic-color-accent-soft: var(--sb-primitive-color-accent-soft);
2245
+ --sb-semantic-color-accent-surface: var(--sb-primitive-color-accent);
2246
+ --sb-semantic-color-accent-text: var(--sb-primitive-color-accent-readable);
2247
+ --sb-semantic-color-background-canvas: var(--sb-primitive-color-canvas);
2248
+ --sb-semantic-color-background-overlay: var(--sb-primitive-color-overlay);
2249
+ --sb-semantic-color-background-raised: var(--sb-primitive-color-raised);
2250
+ --sb-semantic-color-background-subtle: var(--sb-primitive-color-bg-subtle);
2251
+ --sb-semantic-color-background-surface: var(--sb-primitive-color-surface);
2252
+ --sb-semantic-color-border-default: var(--sb-primitive-color-border);
2253
+ --sb-semantic-color-border-strong: var(--sb-primitive-color-border-strong);
2254
+ --sb-semantic-color-border-subtle: var(--sb-primitive-color-border-subtle);
2255
+ --sb-semantic-color-focus-danger-ring: var(--sb-primitive-color-danger);
2256
+ --sb-semantic-color-focus-ring: var(--sb-primitive-color-accent-readable);
2257
+ --sb-semantic-color-foreground-inverse: var(--sb-primitive-color-inverse);
2258
+ --sb-semantic-color-foreground-muted: var(--sb-primitive-color-muted);
2259
+ --sb-semantic-color-foreground-primary: var(--sb-primitive-color-fg);
2260
+ --sb-semantic-color-foreground-secondary: var(--sb-primitive-color-secondary);
2261
+ --sb-semantic-color-foreground-subtle: var(--sb-primitive-color-fg-subtle);
2262
+ --sb-semantic-color-overlay-scrim: var(--sb-primitive-color-scrim);
2263
+ --sb-semantic-color-selection-background: var(--sb-primitive-color-accent);
2264
+ --sb-semantic-color-selection-foreground: var(--sb-primitive-color-inverse);
2265
+ --sb-semantic-color-status-danger-base: var(--sb-primitive-color-danger);
2266
+ --sb-semantic-color-status-danger-on-surface: var(--sb-primitive-color-danger-on);
2267
+ --sb-semantic-color-status-danger-soft: var(--sb-primitive-color-danger-soft);
2268
+ --sb-semantic-color-status-danger-surface: var(--sb-primitive-color-danger-surface);
2269
+ --sb-semantic-color-status-danger-text: var(--sb-primitive-color-danger-text);
2270
+ --sb-semantic-color-status-info-base: var(--sb-primitive-color-info);
2271
+ --sb-semantic-color-status-info-on-surface: var(--sb-primitive-color-info-on);
2272
+ --sb-semantic-color-status-info-soft: var(--sb-primitive-color-info-soft);
2273
+ --sb-semantic-color-status-info-surface: var(--sb-primitive-color-info-surface);
2274
+ --sb-semantic-color-status-info-text: var(--sb-primitive-color-info-text);
2275
+ --sb-semantic-color-status-success-base: var(--sb-primitive-color-success);
2276
+ --sb-semantic-color-status-success-on-surface: var(--sb-primitive-color-success-on);
2277
+ --sb-semantic-color-status-success-soft: var(--sb-primitive-color-success-soft);
2278
+ --sb-semantic-color-status-success-surface: var(--sb-primitive-color-success-surface);
2279
+ --sb-semantic-color-status-success-text: var(--sb-primitive-color-success-text);
2280
+ --sb-semantic-color-status-warning-base: var(--sb-primitive-color-warning);
2281
+ --sb-semantic-color-status-warning-on-surface: var(--sb-primitive-color-warning-on);
2282
+ --sb-semantic-color-status-warning-soft: var(--sb-primitive-color-warning-soft);
2283
+ --sb-semantic-color-status-warning-surface: var(--sb-primitive-color-warning-surface);
2284
+ --sb-semantic-color-status-warning-text: var(--sb-primitive-color-warning-text);
2285
+ --sb-semantic-layer-base: var(--sb-primitive-z-index-base);
2286
+ --sb-semantic-layer-dropdown: var(--sb-primitive-z-index-dropdown);
2287
+ --sb-semantic-layer-modal: var(--sb-primitive-z-index-modal);
2288
+ --sb-semantic-layer-overlay: var(--sb-primitive-z-index-overlay);
2289
+ --sb-semantic-layer-sticky: var(--sb-primitive-z-index-sticky);
2290
+ --sb-semantic-layer-toast: var(--sb-primitive-z-index-toast);
2291
+ --sb-semantic-motion-duration-fast: var(--sb-primitive-duration-fast);
2292
+ --sb-semantic-motion-duration-normal: var(--sb-primitive-duration-normal);
2293
+ --sb-semantic-motion-duration-slow: var(--sb-primitive-duration-slow);
2294
+ --sb-semantic-motion-duration-spinner: var(--sb-primitive-duration-spinner);
2295
+ --sb-semantic-motion-easing-out: var(--sb-primitive-easing-out);
2296
+ --sb-semantic-motion-easing-standard: var(--sb-primitive-easing-standard);
2297
+ --sb-semantic-opacity-disabled: var(--sb-primitive-opacity-disabled);
2298
+ --sb-semantic-opacity-invisible: var(--sb-primitive-opacity-invisible);
2299
+ --sb-semantic-opacity-opaque: var(--sb-primitive-opacity-opaque);
2300
+ --sb-semantic-opacity-subtle: var(--sb-primitive-opacity-subtle);
2301
+ --sb-semantic-radius-full: var(--sb-primitive-radius-full);
2302
+ --sb-semantic-radius-lg: var(--sb-primitive-radius-lg);
2303
+ --sb-semantic-radius-md: var(--sb-primitive-radius-md);
2304
+ --sb-semantic-radius-none: var(--sb-primitive-radius-none);
2305
+ --sb-semantic-radius-sm: var(--sb-primitive-radius-sm);
2306
+ --sb-semantic-radius-xl: var(--sb-primitive-radius-xl);
2307
+ /* Flat grouping; cards are separated by surface and border, not elevation. */
2308
+ --sb-semantic-shadow-card: var(--sb-primitive-shadow-card);
2309
+ /* Restrained dark-theme elevation; light themes override this shadow. */
2310
+ --sb-semantic-shadow-overlay: var(--sb-primitive-shadow-overlay);
2311
+ --sb-semantic-size-container-content: var(--sb-primitive-size-container-content);
2312
+ --sb-semantic-size-control-lg: var(--sb-primitive-size-control-lg);
2313
+ --sb-semantic-size-control-md: var(--sb-primitive-size-control-md);
2314
+ --sb-semantic-size-control-sm: var(--sb-primitive-size-control-sm);
2315
+ --sb-semantic-size-control-xl: var(--sb-primitive-size-control-xl);
2316
+ --sb-semantic-size-control-xs: var(--sb-primitive-size-control-xs);
2317
+ --sb-semantic-size-icon-lg: var(--sb-primitive-size-icon-lg);
2318
+ --sb-semantic-size-icon-md: var(--sb-primitive-size-icon-md);
2319
+ --sb-semantic-size-icon-sm: var(--sb-primitive-size-icon-sm);
2320
+ --sb-semantic-size-target-minimum: var(--sb-primitive-size-target-minimum);
2321
+ --sb-semantic-space-0: var(--sb-primitive-space-0);
2322
+ --sb-semantic-space-1: var(--sb-primitive-space-1);
2323
+ --sb-semantic-space-2: var(--sb-primitive-space-2);
2324
+ --sb-semantic-space-3: var(--sb-primitive-space-3);
2325
+ --sb-semantic-space-4: var(--sb-primitive-space-4);
2326
+ --sb-semantic-space-5: var(--sb-primitive-space-5);
2327
+ --sb-semantic-space-6: var(--sb-primitive-space-6);
2328
+ --sb-semantic-space-8: var(--sb-primitive-space-8);
2329
+ --sb-semantic-space-10: var(--sb-primitive-space-10);
2330
+ --sb-semantic-space-12: var(--sb-primitive-space-12);
2331
+ --sb-semantic-space-16: var(--sb-primitive-space-16);
2332
+ --sb-semantic-space-20: var(--sb-primitive-space-20);
2333
+ --sb-semantic-typography-family-body: var(--sb-primitive-font-family-sans);
2334
+ --sb-semantic-typography-family-code: var(--sb-primitive-font-family-mono);
2335
+ --sb-semantic-typography-family-display: var(--sb-primitive-font-family-display);
2336
+ /* Relative em value. */
2337
+ --sb-semantic-typography-letter-spacing-normal: var(--sb-primitive-letter-spacing-normal);
2338
+ /* Relative em value. */
2339
+ --sb-semantic-typography-letter-spacing-snug: var(--sb-primitive-letter-spacing-snug);
2340
+ /* Relative em value. */
2341
+ --sb-semantic-typography-letter-spacing-tight: var(--sb-primitive-letter-spacing-tight);
2342
+ /* Relative em value. */
2343
+ --sb-semantic-typography-letter-spacing-wide: var(--sb-primitive-letter-spacing-wide);
2344
+ /* Relative em value. */
2345
+ --sb-semantic-typography-letter-spacing-wider: var(--sb-primitive-letter-spacing-wider);
2346
+ --sb-semantic-typography-line-height-none: var(--sb-primitive-line-height-none);
2347
+ --sb-semantic-typography-line-height-normal: var(--sb-primitive-line-height-normal);
2348
+ --sb-semantic-typography-line-height-relaxed: var(--sb-primitive-line-height-relaxed);
2349
+ --sb-semantic-typography-line-height-snug: var(--sb-primitive-line-height-snug);
2350
+ --sb-semantic-typography-line-height-tight: var(--sb-primitive-line-height-tight);
2351
+ --sb-semantic-typography-size-2xl: var(--sb-primitive-font-size-2xl);
2352
+ --sb-semantic-typography-size-3xl: var(--sb-primitive-font-size-3xl);
2353
+ --sb-semantic-typography-size-4xl: var(--sb-primitive-font-size-4xl);
2354
+ --sb-semantic-typography-size-5xl: var(--sb-primitive-font-size-5xl);
2355
+ --sb-semantic-typography-size-display: var(--sb-primitive-font-size-display);
2356
+ --sb-semantic-typography-size-lg: var(--sb-primitive-font-size-lg);
2357
+ --sb-semantic-typography-size-md: var(--sb-primitive-font-size-md);
2358
+ --sb-semantic-typography-size-sm: var(--sb-primitive-font-size-sm);
2359
+ --sb-semantic-typography-size-xl: var(--sb-primitive-font-size-xl);
2360
+ --sb-semantic-typography-size-xs: var(--sb-primitive-font-size-xs);
2361
+ --sb-semantic-typography-weight-bold: var(--sb-primitive-font-weight-bold);
2362
+ --sb-semantic-typography-weight-medium: var(--sb-primitive-font-weight-medium);
2363
+ --sb-semantic-typography-weight-regular: var(--sb-primitive-font-weight-regular);
2364
+ --sb-semantic-typography-weight-semibold: var(--sb-primitive-font-weight-semibold);
2365
+ }