brandsync-tokens 1.0.25 → 1.0.27

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.
@@ -1,1143 +1,1341 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ // Do not edit directly, this file was auto-generated.
4
2
 
5
3
  :root {
6
- --brand-colors-steel-50: #eef0f6;
7
- --brand-colors-steel-100: #d9e3f1;
8
- --brand-colors-steel-200: #b1c9e3;
9
- --brand-colors-steel-300: #83aad0;
10
- --brand-colors-steel-400: #558dbe;
11
- --brand-colors-steel-500: #3779ae;
12
- --brand-colors-steel-600: #2b6796;
13
- --brand-colors-steel-700: #1f567f;
14
- --brand-colors-steel-800: #103e5f;
15
- --brand-colors-steel-900: #041d30;
16
- --brand-colors-steel-950: #032841;
17
- --brand-colors-teal-50: #e9f3f2;
18
- --brand-colors-teal-100: #c8e9e7;
19
- --brand-colors-teal-200: #9ed1cf;
20
- --brand-colors-teal-300: #72b2b0;
21
- --brand-colors-teal-400: #469593;
22
- --brand-colors-teal-500: #008280;
23
- --brand-colors-teal-600: #116f6e;
24
- --brand-colors-teal-700: #185b5a;
25
- --brand-colors-teal-800: #144241;
26
- --brand-colors-teal-900: #032b2a;
27
- --brand-colors-teal-950: #02201f;
28
- --brand-colors-jade-50: #eaf3ef;
29
- --brand-colors-jade-100: #c6eadf;
30
- --brand-colors-jade-200: #8cd4c2;
31
- --brand-colors-jade-300: #63b4a2;
32
- --brand-colors-jade-400: #349985;
33
- --brand-colors-jade-500: #008370;
34
- --brand-colors-jade-600: #0e7060;
35
- --brand-colors-jade-700: #0e5d50;
36
- --brand-colors-jade-800: #034439;
37
- --brand-colors-jade-900: #002c24;
38
- --brand-colors-jade-950: #02201a;
39
- --brand-colors-purple-50: #f3effb;
40
- --brand-colors-purple-100: #e5dffd;
41
- --brand-colors-purple-200: #c8c0ff;
42
- --brand-colors-purple-300: #a49aff;
43
- --brand-colors-purple-400: #8676fe;
44
- --brand-colors-purple-500: #715afc;
45
- --brand-colors-purple-600: #5e47e6;
46
- --brand-colors-purple-700: #4b35c9;
47
- --brand-colors-purple-800: #3720a1;
48
- --brand-colors-purple-900: #220f73;
49
- --brand-colors-purple-950: #201463;
50
- --brand-colors-cobalt-50: #f1effa;
51
- --brand-colors-cobalt-100: #e0e0fd;
52
- --brand-colors-cobalt-200: #bcc2ff;
53
- --brand-colors-cobalt-300: #939eff;
54
- --brand-colors-cobalt-400: #6d7cff;
55
- --brand-colors-cobalt-500: #4f63ff;
56
- --brand-colors-cobalt-600: #3b4ee9;
57
- --brand-colors-cobalt-700: #303ecd;
58
- --brand-colors-cobalt-800: #1928a5;
59
- --brand-colors-cobalt-900: #091675;
60
- --brand-colors-cobalt-950: #050d5d;
61
- --brand-colors-blue-50: #eef0fa;
62
- --brand-colors-blue-100: #d8e3fc;
63
- --brand-colors-blue-200: #aec7f8;
64
- --brand-colors-blue-300: #7aa6f2;
65
- --brand-colors-blue-400: #3e88ef;
66
- --brand-colors-blue-500: #0073e1;
67
- --brand-colors-blue-600: #0062c1;
68
- --brand-colors-blue-700: #0051a2;
69
- --brand-colors-blue-800: #003a78;
70
- --brand-colors-blue-900: #002550;
71
- --brand-colors-blue-950: #001b3e;
72
- --brand-colors-green-50: #ecf2ea;
73
- --brand-colors-green-100: #d0e9d2;
74
- --brand-colors-green-200: #9fd3a9;
75
- --brand-colors-green-300: #78b385;
76
- --brand-colors-green-400: #469961;
77
- --brand-colors-green-500: #23834a;
78
- --brand-colors-green-600: #2a7043;
79
- --brand-colors-green-700: #295c3a;
80
- --brand-colors-green-800: #21422a;
81
- --brand-colors-green-900: #112b19;
82
- --brand-colors-green-950: #0b2011;
83
- --brand-colors-lime-50: #f0f2e7;
84
- --brand-colors-lime-100: #d7e8c6;
85
- --brand-colors-lime-200: #add18f;
86
- --brand-colors-lime-300: #81b45c;
87
- --brand-colors-lime-400: #64963f;
88
- --brand-colors-lime-500: #478019;
89
- --brand-colors-lime-600: #406f1d;
90
- --brand-colors-lime-700: #385b1e;
91
- --brand-colors-lime-800: #2a4218;
92
- --brand-colors-lime-900: #182a0c;
93
- --brand-colors-lime-950: #121f09;
94
- --brand-colors-yellow-50: #faf1db;
95
- --brand-colors-yellow-100: #f9e28a;
96
- --brand-colors-yellow-200: #e3c437;
97
- --brand-colors-yellow-300: #c0a300;
98
- --brand-colors-yellow-400: #a18800;
99
- --brand-colors-yellow-500: #887200;
100
- --brand-colors-yellow-600: #746202;
101
- --brand-colors-yellow-700: #615102;
102
- --brand-colors-yellow-800: #463a01;
103
- --brand-colors-yellow-900: #2e2500;
104
- --brand-colors-yellow-950: #221b00;
105
- --brand-colors-amber-50: #fceee0;
106
- --brand-colors-amber-100: #f8dfbf;
107
- --brand-colors-amber-200: #f1be71;
108
- --brand-colors-amber-300: #d19c46;
109
- --brand-colors-amber-400: #b47f1e;
110
- --brand-colors-amber-500: #996805;
111
- --brand-colors-amber-600: #875b04;
112
- --brand-colors-amber-700: #6f4b02;
113
- --brand-colors-amber-800: #513601;
114
- --brand-colors-amber-900: #352201;
115
- --brand-colors-amber-950: #291900;
116
- --brand-colors-orange-50: #faeee9;
117
- --brand-colors-orange-100: #f9ddd0;
118
- --brand-colors-orange-200: #f7b997;
119
- --brand-colors-orange-300: #f08c50;
120
- --brand-colors-orange-400: #d26d2b;
121
- --brand-colors-orange-500: #ba5400;
122
- --brand-colors-orange-600: #a24907;
123
- --brand-colors-orange-700: #873d07;
124
- --brand-colors-orange-800: #642c04;
125
- --brand-colors-orange-900: #411b02;
126
- --brand-colors-orange-950: #301302;
127
- --brand-colors-magenta-50: #fbeeef;
128
- --brand-colors-magenta-100: #ffd7e0;
129
- --brand-colors-magenta-200: #ffb1c7;
130
- --brand-colors-magenta-300: #ff7aa7;
131
- --brand-colors-magenta-400: #ea4f8b;
132
- --brand-colors-magenta-500: #d12e75;
133
- --brand-colors-magenta-600: #b62965;
134
- --brand-colors-magenta-700: #9a1f53;
135
- --brand-colors-magenta-800: #71163c;
136
- --brand-colors-magenta-900: #4a0d27;
137
- --brand-colors-magenta-950: #38091c;
138
- --brand-colors-maroon-50: #f9eef3;
139
- --brand-colors-maroon-100: #f6dbef;
140
- --brand-colors-maroon-200: #eab6e3;
141
- --brand-colors-maroon-300: #d88cd1;
142
- --brand-colors-maroon-400: #c465c0;
143
- --brand-colors-maroon-500: #b14bb0;
144
- --brand-colors-maroon-600: #983f98;
145
- --brand-colors-maroon-700: #7f347e;
146
- --brand-colors-maroon-800: #5e245d;
147
- --brand-colors-maroon-900: #3e163d;
148
- --brand-colors-maroon-950: #2c122b;
149
- --brand-colors-violet-50: #f9eefe;
150
- --brand-colors-violet-100: #eedcfd;
151
- --brand-colors-violet-200: #d8b8fd;
152
- --brand-colors-violet-300: #be92f4;
153
- --brand-colors-violet-400: #a372dd;
154
- --brand-colors-violet-500: #8f5ace;
155
- --brand-colors-violet-600: #7750a8;
156
- --brand-colors-violet-700: #64428d;
157
- --brand-colors-violet-800: #492e6a;
158
- --brand-colors-violet-900: #311b4b;
159
- --brand-colors-violet-950: #241338;
160
- --z-index-below: -1; /** Behind base layer */
161
- --z-index-base: 0; /** Default stacking context */
162
- --z-index-raised: 10; /** Elevated cards, focused inputs */
163
- --z-index-dropdown: 100; /** Select menus, autocomplete */
164
- --z-index-sticky: 200; /** Sticky headers, frozen columns */
165
- --z-index-overlay: 300; /** Backdrop overlays */
166
- --z-index-modal: 400; /** Modals, dialogs */
167
- --z-index-popover: 500; /** Popovers, tooltips */
168
- --z-index-toast: 600; /** Toast notifications */
169
- --z-index-top: 999; /** Highest priority elements */
170
- --opacity-disabled: 0.5;
171
- --opacity-hover: 0.8;
172
- --opacity-focus: 0.9;
173
- --breakpoint-xs: 480px; /** Small mobile */
174
- --breakpoint-sm: 640px; /** Mobile landscape */
175
- --breakpoint-md: 768px; /** Tablet portrait */
176
- --breakpoint-lg: 1024px; /** Tablet landscape / small desktop */
177
- --breakpoint-xl: 1280px; /** Desktop */
178
- --breakpoint-2xl: 1536px; /** Wide desktop */
179
- --grid-columns-default: 12; /** Default 12-column grid */
180
- --grid-columns-narrow: 4; /** Narrow / mobile */
181
- --grid-columns-wide: 16; /** Wide / dashboard */
182
- --grid-container-max: 1440px; /** Max content area width */
183
- --duration-instant: 0ms; /** No-animation states, reduced-motion fallback */
184
- --duration-fast: 100ms; /** Hover, focus ring, micro-interactions */
185
- --duration-default: 200ms; /** State changes, toggles */
186
- --duration-slow: 300ms; /** Panel expand, dropdown open */
187
- --duration-slower: 500ms; /** Modal entrance, page reveal */
188
- --standard: cubic-bezier(0.4, 0.0, 0.2, 1); /** General purpose */
189
- --decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); /** Elements entering the screen */
190
- --accelerate: cubic-bezier(0.4, 0.0, 1.0, 1); /** Elements leaving the screen */
191
- --easing-linear: linear; /** Color and opacity — no physics needed */
192
- --shadow-ambient-color-xs: rgba(33, 38, 46, 0.06);
193
- --shadow-ambient-color-sm: rgba(33, 38, 46, 0.08);
194
- --shadow-ambient-color-md: rgba(33, 38, 46, 0.1);
195
- --shadow-ambient-color-lg: rgba(33, 38, 46, 0.12);
196
- --shadow-ambient-color-xl: rgba(33, 38, 46, 0.14);
197
- --shadow-ambient-color-2xl: rgba(33, 38, 46, 0.2);
198
- --shadow-key-color-xs: rgba(33, 38, 46, 0.1);
199
- --shadow-key-color-sm: rgba(33, 38, 46, 0.12);
200
- --shadow-key-color-md: rgba(33, 38, 46, 0.16);
201
- --shadow-key-color-lg: rgba(33, 38, 46, 0.2);
202
- --shadow-key-color-xl: rgba(33, 38, 46, 0.24);
203
- --shadow-key-color-2xl: rgba(33, 38, 46, 0.32);
204
- --shadow-elevation-none: none;
205
- --shadow-elevation-xs: 0 1px 2px rgba(33,38,46,0.06), 0 1px 3px rgba(33,38,46,0.10); /** Cards, inputs at rest */
206
- --shadow-elevation-sm: 0 1px 3px rgba(33,38,46,0.08), 0 2px 6px rgba(33,38,46,0.12); /** Dropdowns, hovering cards */
207
- --shadow-elevation-md: 0 2px 8px rgba(33,38,46,0.10), 0 4px 16px rgba(33,38,46,0.16); /** Popovers, tooltips */
208
- --shadow-elevation-lg: 0 4px 16px rgba(33,38,46,0.12), 0 8px 32px rgba(33,38,46,0.20); /** Modals, dialogs */
209
- --shadow-elevation-xl: 0 8px 24px rgba(33,38,46,0.14), 0 16px 48px rgba(33,38,46,0.24); /** Drawers, side panels */
210
- --shadow-elevation-2xl: 0 16px 48px rgba(33,38,46,0.20), 0 32px 64px rgba(33,38,46,0.32); /** Full-screen overlays */
211
- --shadow-position-0: 0px;
212
- --shadow-position-10: 1px;
213
- --shadow-position-25: 2px;
214
- --shadow-position-50: 4px;
215
- --shadow-position-100: 8px;
216
- --shadow-position-150: 12px;
217
- --shadow-position-200: 16px;
218
- --shadow-blur-0: 0px;
219
- --shadow-blur-10: 1px;
220
- --shadow-blur-25: 2px;
221
- --shadow-blur-50: 4px;
222
- --shadow-blur-100: 8px;
223
- --shadow-blur-150: 12px;
224
- --shadow-blur-200: 16px;
225
- --shadow-blur-300: 24px;
226
- --line-height-none: 1;
227
- --line-height-tight: 1.1;
228
- --line-height-snug: 1.25;
229
- --line-height-normal: 1.5;
230
- --line-height-relaxed: 1.625;
231
- --line-height-loose: 2;
232
- --line-height-display-display1: 96;
233
- --line-height-display-display2: 88;
234
- --line-height-display-display3: 72;
235
- --line-height-display-display4: 64;
236
- --line-height-display-display5: 56;
237
- --line-height-display-display6: 48;
238
- --line-height-display-display7: 40;
239
- --line-height-heading-h1: 56;
240
- --line-height-heading-h2: 48;
241
- --line-height-heading-h3: 40;
242
- --line-height-heading-h4: 32;
243
- --line-height-heading-h5: 24;
244
- --line-height-heading-h6: 20;
245
- --line-height-body-lg: 28;
246
- --line-height-body-md: 24;
247
- --line-height-body-sm: 20;
248
- --line-height-caption-lg: 24;
249
- --line-height-caption-md: 20;
250
- --line-height-caption-sm: 16;
251
- --letter-spacing-tighter: -0.05em;
252
- --letter-spacing-tight: -0.025em;
253
- --letter-spacing-normal: 0em;
254
- --letter-spacing-wide: 0.025em;
255
- --letter-spacing-wider: 0.05em;
256
- --letter-spacing-widest: 0.1em;
257
- --text-style-display-weight: 700;
258
- --text-style-heading-1-weight: 600;
259
- --text-style-heading-2-weight: 600;
260
- --text-style-heading-3-weight: 600;
261
- --text-style-heading-4-weight: 500;
262
- --text-style-body-lg-weight: 400;
263
- --text-style-body-md-weight: 400;
264
- --text-style-body-sm-weight: 400;
265
- --text-style-label-lg-weight: 500;
266
- --text-style-label-md-weight: 500;
267
- --text-style-label-sm-weight: 500;
268
- --text-style-caption-weight: 400;
269
- --text-style-overline-weight: 500;
270
- --text-style-data-weight: 500;
271
- --text-style-data-dense-weight: 400;
272
- --font-size-2xs: 10px;
273
- --font-size-xs: 12px;
274
- --font-size-sm: 14px;
275
- --font-size-md: 16px;
276
- --font-size-lg: 18px;
277
- --font-size-xl: 20px;
278
- --font-size-2xl: 24px;
279
- --font-size-3xl: 28px;
280
- --font-size-4xl: 32px;
281
- --font-size-5xl: 40px;
282
- --font-size-6xl: 48px;
283
- --typography-font-family-heading: Roboto;
284
- --typography-font-family-body: Roboto;
285
- --typography-font-weight-thin: thin;
286
- --typography-font-weight-regular: regular;
287
- --typography-font-weight-medium: medium;
288
- --typography-font-weight-semibold: semibold;
289
- --typography-font-weight-bold: bold;
290
- --typography-font-weight-black: black;
291
- --typography-font-family-heading: Roboto;
292
- --typography-font-family-body: Roboto;
293
- --typography-font-weight-thin: 100;
294
- --typography-font-weight-regular: 400;
295
- --typography-font-weight-medium: 500;
296
- --typography-font-weight-semibold: 600;
297
- --typography-font-weight-bold: 700;
298
- --typography-font-weight-black: 900;
299
- --scale-0: 0px;
300
- --scale-10: 1px;
301
- --scale-25: 2px;
302
- --scale-50: 4px;
303
- --scale-75: 6px;
304
- --scale-100: 8px;
305
- --scale-150: 12px;
306
- --scale-200: 16px;
307
- --scale-250: 20px;
308
- --scale-300: 24px;
309
- --scale-350: 28px;
310
- --scale-400: 32px;
311
- --scale-500: 40px;
312
- --scale-550: 44px;
313
- --scale-600: 48px;
314
- --scale-700: 56px;
315
- --scale-800: 64px;
316
- --scale-1000: 80px;
317
- --scale-1200: 96px;
318
- --scale-1500: 120px;
319
- --scale-1600: 128px;
320
- --scale-3200: 256px;
321
- --scale-6400: 512px;
322
- --scale-600: -48px;
323
- --scale-500: -40px;
324
- --scale-350: -28px;
325
- --scale-200: -16px;
326
- --scale-150: -12px;
327
- --scale-100: -8px;
328
- --white: #ffffff;
329
- --static-white: #ffffff;
330
- --static-black: #000000;
331
- --neutral-25: #f9fafb;
332
- --neutral-50: #eff0f8;
333
- --neutral-100: #dee2ed;
334
- --neutral-200: #c2c7d3;
335
- --neutral-300: #a0a5b4;
336
- --neutral-400: #828998;
337
- --neutral-500: #6d7585;
338
- --neutral-600: #5d6472;
339
- --neutral-700: #4d535f;
340
- --neutral-800: #363c47;
341
- --neutral-900: #21262e;
342
- --neutral-950: #191c22;
343
- --neutral-500-transparent: rgba(109, 117, 133, 0.3);
344
- --neutral-500-transparent-2: rgba(109, 117, 133, 0.75);
345
- --neutral-50-transparent: rgba(239, 240, 248, 0.9);
346
- --neutral-500-transparent-2: rgba(109, 117, 133, 0.75);
347
- --gray-25: #fbfbfb;
348
- --gray-50: #f6f7f7;
349
- --gray-100: #eef1f1;
350
- --gray-200: #dfe5e6;
351
- --gray-300: #cbd3d6;
352
- --gray-400: #b6bec3;
353
- --gray-500: #a2aab2;
354
- --gray-600: #8c959f;
355
- --gray-700: #7f868f;
356
- --gray-800: #636970;
357
- --gray-900: #53585c;
358
- --gray-950: #303236;
359
- --gray-transparent: rgba(162, 170, 178, 0.24);
360
- --gray-transparent-2: rgba(162, 170, 178, 0.32);
361
- --gray-transparent-3: rgba(162, 170, 178, 0.44);
362
- --gray-transparent-2: rgba(162, 170, 178, 0.32);
363
- --gray-transparent-3: rgba(162, 170, 178, 0.44);
364
- --black: #000000;
365
- --semantic-success-success-50: #e5f5e9;
366
- --semantic-success-success-100: #c5ebd5;
367
- --semantic-success-success-200: #94d4b3;
368
- --semantic-success-success-300: #6bb491;
369
- --semantic-success-success-400: #469873;
370
- --semantic-success-success-500: #00855b;
371
- --semantic-success-success-600: #11714e;
372
- --semantic-success-success-700: #1b5d43;
373
- --semantic-success-success-800: #184330;
374
- --semantic-success-success-900: #0f2b1e;
375
- --semantic-success-success-950: #101e17;
376
- --semantic-error-error-50: #fcecea;
377
- --semantic-error-error-100: #ffdad7;
378
- --semantic-error-error-200: #ffb3ae;
379
- --semantic-error-error-300: #ff807a;
380
- --semantic-error-error-400: #ee5351;
381
- --semantic-error-error-500: #d93539;
382
- --semantic-error-error-600: #b92f31;
383
- --semantic-error-error-700: #982a2a;
384
- --semantic-error-error-800: #701d1e;
385
- --semantic-error-error-900: #481212;
386
- --semantic-error-error-950: #34100f;
387
- --semantic-warning-warning-50: #ffefdb;
388
- --semantic-warning-warning-100: #ffdea1;
389
- --semantic-warning-warning-200: #f1bd51;
390
- --semantic-warning-warning-300: #d39b00;
391
- --semantic-warning-warning-400: #b18100;
392
- --semantic-warning-warning-500: #956d00;
393
- --semantic-warning-warning-600: #805d00;
394
- --semantic-warning-warning-700: #6b4d00;
395
- --semantic-warning-warning-800: #4e3700;
396
- --semantic-warning-warning-900: #332300;
397
- --semantic-warning-warning-950: #261a00;
398
- --semantic-information-information-50: #edf0fa;
399
- --semantic-information-information-100: #d6e3f8;
400
- --semantic-information-information-200: #aec8ed;
401
- --semantic-information-information-300: #73a9ea;
402
- --semantic-information-information-400: #448cd6;
403
- --semantic-information-information-500: #0078cb;
404
- --semantic-information-information-600: #0066ae;
405
- --semantic-information-information-700: #005592;
406
- --semantic-information-information-800: #003d6c;
407
- --semantic-information-information-900: #00283f;
408
- --semantic-information-information-950: #111c2a;
409
- --brand-colors-purple-50: #f3effb;
410
- --brand-colors-purple-100: #e5dffd;
411
- --brand-colors-purple-200: #c8c0ff;
412
- --brand-colors-purple-300: #a49aff;
413
- --brand-colors-purple-400: #8676fe;
414
- --brand-colors-purple-500: #715afc;
415
- --brand-colors-purple-600: #5e47e6;
416
- --brand-colors-purple-700: #4b35c9;
417
- --brand-colors-purple-800: #3720a1;
418
- --brand-colors-purple-900: #220f73;
419
- --brand-colors-purple-950: #201463;
420
- --brand-colors-cobalt-50: #f1effa;
421
- --brand-colors-cobalt-100: #e0e0fd;
422
- --brand-colors-cobalt-200: #bcc2ff;
423
- --brand-colors-cobalt-300: #939eff;
424
- --brand-colors-cobalt-400: #6d7cff;
425
- --brand-colors-cobalt-500: #4f63ff;
426
- --brand-colors-cobalt-600: #3b4ee9;
427
- --brand-colors-cobalt-700: #303ecd;
428
- --brand-colors-cobalt-800: #1928a5;
429
- --brand-colors-cobalt-900: #091675;
430
- --brand-colors-cobalt-950: #050d5d;
431
- --brand-colors-blue-50: #eef0fa;
432
- --brand-colors-blue-100: #d8e3fc;
433
- --brand-colors-blue-200: #aec7f8;
434
- --brand-colors-blue-300: #7aa6f2;
435
- --brand-colors-blue-400: #3e88ef;
436
- --brand-colors-blue-500: #0073e1;
437
- --brand-colors-blue-600: #0062c1;
438
- --brand-colors-blue-700: #0051a2;
439
- --brand-colors-blue-800: #003a78;
440
- --brand-colors-blue-900: #002550;
441
- --brand-colors-blue-950: #001b3e;
442
- --brand-colors-green-50: #ecf2ea;
443
- --brand-colors-green-100: #d0e9d2;
444
- --brand-colors-green-200: #9fd3a9;
445
- --brand-colors-green-300: #78b385;
446
- --brand-colors-green-400: #469961;
447
- --brand-colors-green-500: #23834a;
448
- --brand-colors-green-600: #2a7043;
449
- --brand-colors-green-700: #295c3a;
450
- --brand-colors-green-800: #21422a;
451
- --brand-colors-green-900: #112b19;
452
- --brand-colors-green-950: #0b2011;
453
- --brand-colors-lime-50: #f0f2e7;
454
- --brand-colors-lime-100: #d7e8c6;
455
- --brand-colors-lime-200: #add18f;
456
- --brand-colors-lime-300: #81b45c;
457
- --brand-colors-lime-400: #64963f;
458
- --brand-colors-lime-500: #478019;
459
- --brand-colors-lime-600: #406f1d;
460
- --brand-colors-lime-700: #385b1e;
461
- --brand-colors-lime-800: #2a4218;
462
- --brand-colors-lime-900: #182a0c;
463
- --brand-colors-lime-950: #121f09;
464
- --brand-colors-yellow-50: #faf1db;
465
- --brand-colors-yellow-100: #f9e28a;
466
- --brand-colors-yellow-200: #e3c437;
467
- --brand-colors-yellow-300: #c0a300;
468
- --brand-colors-yellow-400: #a18800;
469
- --brand-colors-yellow-500: #887200;
470
- --brand-colors-yellow-600: #746202;
471
- --brand-colors-yellow-700: #615102;
472
- --brand-colors-yellow-800: #463a01;
473
- --brand-colors-yellow-900: #2e2500;
474
- --brand-colors-yellow-950: #221b00;
475
- --brand-colors-amber-50: #fceee0;
476
- --brand-colors-amber-100: #f8dfbf;
477
- --brand-colors-amber-200: #f1be71;
478
- --brand-colors-amber-300: #d19c46;
479
- --brand-colors-amber-400: #b47f1e;
480
- --brand-colors-amber-500: #996805;
481
- --brand-colors-amber-600: #875b04;
482
- --brand-colors-amber-700: #6f4b02;
483
- --brand-colors-amber-800: #513601;
484
- --brand-colors-amber-900: #352201;
485
- --brand-colors-amber-950: #291900;
486
- --brand-colors-orange-50: #faeee9;
487
- --brand-colors-orange-100: #f9ddd0;
488
- --brand-colors-orange-200: #f7b997;
489
- --brand-colors-orange-300: #f08c50;
490
- --brand-colors-orange-400: #d26d2b;
491
- --brand-colors-orange-500: #ba5400;
492
- --brand-colors-orange-600: #a24907;
493
- --brand-colors-orange-700: #873d07;
494
- --brand-colors-orange-800: #642c04;
495
- --brand-colors-orange-900: #411b02;
496
- --brand-colors-orange-950: #301302;
497
- --brand-colors-magenta-50: #fbeeef;
498
- --brand-colors-magenta-100: #ffd7e0;
499
- --brand-colors-magenta-200: #ffb1c7;
500
- --brand-colors-magenta-300: #ff7aa7;
501
- --brand-colors-magenta-400: #ea4f8b;
502
- --brand-colors-magenta-500: #d12e75;
503
- --brand-colors-magenta-600: #b62965;
504
- --brand-colors-magenta-700: #9a1f53;
505
- --brand-colors-magenta-800: #71163c;
506
- --brand-colors-magenta-900: #4a0d27;
507
- --brand-colors-magenta-950: #38091c;
508
- --brand-colors-maroon-50: #f9eef3;
509
- --brand-colors-maroon-100: #f6dbef;
510
- --brand-colors-maroon-200: #eab6e3;
511
- --brand-colors-maroon-300: #d88cd1;
512
- --brand-colors-maroon-400: #c465c0;
513
- --brand-colors-maroon-500: #b14bb0;
514
- --brand-colors-maroon-600: #983f98;
515
- --brand-colors-maroon-700: #7f347e;
516
- --brand-colors-maroon-800: #5e245d;
517
- --brand-colors-maroon-900: #3e163d;
518
- --brand-colors-maroon-950: #2c122b;
519
- --brand-colors-violet-50: #f9eefe;
520
- --brand-colors-violet-100: #eedcfd;
521
- --brand-colors-violet-200: #d8b8fd;
522
- --brand-colors-violet-300: #be92f4;
523
- --brand-colors-violet-400: #a372dd;
524
- --brand-colors-violet-500: #8f5ace;
525
- --brand-colors-violet-600: #7750a8;
526
- --brand-colors-violet-700: #64428d;
527
- --brand-colors-violet-800: #492e6a;
528
- --brand-colors-violet-900: #311b4b;
529
- --brand-colors-violet-950: #241338;
530
- --light-mode-0: rgba(0, 0, 0, 0);
531
- --light-mode-100: rgba(0, 0, 0, 0.05);
532
- --light-mode-200: rgba(0, 0, 0, 0.08);
533
- --light-mode-300: rgba(0, 0, 0, 0.1);
534
- --light-mode-400: rgba(0, 0, 0, 0.12);
535
- --light-mode-500: rgba(0, 0, 0, 0.14);
536
- --light-mode-600: rgba(0, 1, 2, 0.1);
537
- --light-mode-700: rgba(28, 133, 255, 0.4);
538
- --dark-mode-0: rgba(0, 0, 0, 0);
539
- --dark-mode-100: rgba(0, 0, 0, 0.4);
540
- --dark-mode-200: rgba(0, 0, 0, 0.35);
541
- --dark-mode-300: rgba(0, 0, 0, 0.3);
542
- --dark-mode-400: rgba(0, 0, 0, 0.25);
543
- --dark-mode-500: rgba(0, 0, 0, 0.2);
544
- --dark-mode-600: rgba(0, 1, 2, 0.05);
545
- --dark-mode-700: rgba(28, 133, 255, 0.05);
546
- --alpha-5: rgba(0, 0, 0, 0);
547
- --alpha-10: rgba(0, 0, 0, 0);
548
- --alpha-20: rgba(0, 0, 0, 0);
549
- --alpha-30: rgba(0, 0, 0, 0);
550
- --alpha-40: rgba(0, 0, 0, 0);
551
- --alpha-50: rgba(0, 0, 0, 0);
552
- --alpha-60: rgba(0, 0, 0, 0.01);
553
- --alpha-70: rgba(0, 0, 0, 0.01);
554
- --alpha-80: rgba(0, 0, 0, 0.01);
555
- --alpha-90: rgba(0, 0, 0, 0.01);
556
- --alpha-100: rgba(0, 0, 0, 0.01);
557
- --fontsize-display-display1: 80px;
558
- --fontsize-display-display2: 72px;
559
- --fontsize-display-display3: 60px;
560
- --fontsize-display-display4: 56px;
561
- --fontsize-display-display5: 48px;
562
- --fontsize-display-display6: 40px;
563
- --fontsize-display-display7: 32px;
564
- --fontsize-heading-h1: 48px;
565
- --fontsize-heading-h2: 40px;
566
- --fontsize-heading-h3: 32px;
567
- --fontsize-heading-h4: 24px;
568
- --fontsize-heading-h5: 20px;
569
- --fontsize-heading-h6: 16px;
570
- --fontsize-body-lg: 20px;
571
- --fontsize-body-md: 16px;
572
- --fontsize-body-sm: 14px;
573
- --fontsize-caption-lg: 16px;
574
- --fontsize-caption-md: 14px;
575
- --fontsize-caption-sm: 12px;
576
- --line-height-display-display1: 96;
577
- --line-height-display-display2: 88;
578
- --line-height-display-display3: 72;
579
- --line-height-display-display4: 64;
580
- --line-height-display-display5: 56;
581
- --line-height-display-display6: 48;
582
- --line-height-display-display7: 40;
583
- --line-height-heading-h1: 56;
584
- --line-height-heading-h2: 48;
585
- --line-height-heading-h3: 40;
586
- --line-height-heading-h4: 32;
587
- --line-height-heading-h5: 24;
588
- --line-height-heading-h6: 20;
589
- --line-height-body-lg: 28;
590
- --line-height-body-md: 24;
591
- --line-height-body-sm: 20;
592
- --line-height-caption-lg: 24;
593
- --line-height-caption-md: 20;
594
- --line-height-caption-sm: 16;
595
- --paragraph-spacing-display-display1: 40;
596
- --paragraph-spacing-display-display2: 36;
597
- --paragraph-spacing-display-display3: 30;
598
- --paragraph-spacing-display-display4: 28;
599
- --paragraph-spacing-display-display5: 24;
600
- --paragraph-spacing-display-display6: 20;
601
- --paragraph-spacing-display-display7: 16;
602
- --paragraph-spacing-heading-h1: 24;
603
- --paragraph-spacing-heading-h2: 20;
604
- --paragraph-spacing-heading-h3: 16;
605
- --paragraph-spacing-heading-h4: 12;
606
- --paragraph-spacing-heading-h5: 10;
607
- --paragraph-spacing-heading-h6: 8;
608
- --paragraph-spacing-body-lg: 10;
609
- --paragraph-spacing-body-md: 8;
610
- --paragraph-spacing-body-sm: 8;
611
- --paragraph-spacing-caption-lg: 8;
612
- --paragraph-spacing-caption-md: 8;
613
- --paragraph-spacing-caption-sm: 6;
614
- --layout-columns-columns: 12rem;
615
- --breakpoints-max-width: 1920rem;
616
- --breakpoints-min-width: 1024rem;
617
- --navigation-header-hamburger-menu: false;
618
- --navigation-header-logo: true;
619
- --navigation-header-left-menu: true;
620
- --navigation-header-page-label: false;
621
- --navigation-header-gap: 40;
622
- --semantic-success-success-50: #e5f5e9;
623
- --semantic-success-success-100: #c5ebd5;
624
- --semantic-success-success-200: #94d4b3;
625
- --semantic-success-success-300: #6bb491;
626
- --semantic-success-success-400: #469873;
627
- --semantic-success-success-500: #00855b;
628
- --semantic-success-success-600: #11714e;
629
- --semantic-success-success-700: #1b5d43;
630
- --semantic-success-success-800: #184330;
631
- --semantic-success-success-900: #0f2b1e;
632
- --semantic-success-success-950: #101e17;
633
- --semantic-error-error-50: #fcecea;
634
- --semantic-error-error-100: #ffdad7;
635
- --semantic-error-error-200: #ffb3ae;
636
- --semantic-error-error-300: #ff807a;
637
- --semantic-error-error-400: #ee5351;
638
- --semantic-error-error-500: #d93539;
639
- --semantic-error-error-600: #b92f31;
640
- --semantic-error-error-700: #982a2a;
641
- --semantic-error-error-800: #701d1e;
642
- --semantic-error-error-900: #481212;
643
- --semantic-error-error-950: #34100f;
644
- --semantic-warning-warning-50: #ffefdb;
645
- --semantic-warning-warning-100: #ffdea1;
646
- --semantic-warning-warning-200: #f1bd51;
647
- --semantic-warning-warning-300: #d39b00;
648
- --semantic-warning-warning-400: #b18100;
649
- --semantic-warning-warning-500: #956d00;
650
- --semantic-warning-warning-600: #805d00;
651
- --semantic-warning-warning-700: #6b4d00;
652
- --semantic-warning-warning-800: #4e3700;
653
- --semantic-warning-warning-900: #332300;
654
- --semantic-warning-warning-950: #261a00;
655
- --semantic-information-information-50: #edf0fa;
656
- --semantic-information-information-100: #d6e3f8;
657
- --semantic-information-information-200: #aec8ed;
658
- --semantic-information-information-300: #73a9ea;
659
- --semantic-information-information-400: #448cd6;
660
- --semantic-information-information-500: #0078cb;
661
- --semantic-information-information-600: #0066ae;
662
- --semantic-information-information-700: #005592;
663
- --semantic-information-information-800: #003d6c;
664
- --semantic-information-information-900: #00283f;
665
- --semantic-information-information-950: #111c2a;
666
- --light-mode-0: rgba(0, 0, 0, 0);
667
- --light-mode-100: rgba(0, 0, 0, 0.05);
668
- --light-mode-200: rgba(0, 0, 0, 0.08);
669
- --light-mode-300: rgba(0, 0, 0, 0.1);
670
- --light-mode-400: rgba(0, 0, 0, 0.12);
671
- --light-mode-500: rgba(0, 0, 0, 0.14);
672
- --light-mode-600: rgba(0, 1, 2, 0.1);
673
- --light-mode-700: rgba(28, 133, 255, 0.4);
674
- --dark-mode-0: rgba(0, 0, 0, 0);
675
- --dark-mode-100: rgba(0, 0, 0, 0.4);
676
- --dark-mode-200: rgba(0, 0, 0, 0.35);
677
- --dark-mode-300: rgba(0, 0, 0, 0.3);
678
- --dark-mode-400: rgba(0, 0, 0, 0.25);
679
- --dark-mode-500: rgba(0, 0, 0, 0.2);
680
- --dark-mode-600: rgba(0, 1, 2, 0.05);
681
- --dark-mode-700: rgba(28, 133, 255, 0.05);
682
- --paragraph-spacing-display-display1: 40;
683
- --paragraph-spacing-display-display2: 36;
684
- --paragraph-spacing-display-display3: 30;
685
- --paragraph-spacing-display-display4: 28;
686
- --paragraph-spacing-display-display5: 24;
687
- --paragraph-spacing-display-display6: 20;
688
- --paragraph-spacing-display-display7: 16;
689
- --paragraph-spacing-heading-h1: 24;
690
- --paragraph-spacing-heading-h2: 20;
691
- --paragraph-spacing-heading-h3: 16;
692
- --paragraph-spacing-heading-h4: 12;
693
- --paragraph-spacing-heading-h5: 10;
694
- --paragraph-spacing-heading-h6: 8;
695
- --paragraph-spacing-body-lg: 10;
696
- --paragraph-spacing-body-md: 8;
697
- --paragraph-spacing-body-sm: 8;
698
- --paragraph-spacing-caption-lg: 8;
699
- --paragraph-spacing-caption-md: 8;
700
- --paragraph-spacing-caption-sm: 6;
701
- --layout-columns-columns: 12rem;
702
- --navigation-header-hamburger-menu: false;
703
- --navigation-header-logo: true;
704
- --navigation-header-left-menu: true;
705
- --navigation-header-page-label: false;
706
- --navigation-header-gap: 40;
707
- --label: Label;
708
- --label: Label;
709
- --icon-primary: {color.icons.secondary};
710
- --icon: {color.icons.secondary};
711
- --icon-default: {color.icons.secondary};
712
- --radio-bg-default: var(--alpha-5);
713
- --radio-bg-hover: var(--alpha-60);
714
- --radio-bg-focus: var(--alpha-80);
715
- --radio-bg-pressed: var(--alpha-90);
716
- --text-style-display-size: var(--font-size-6xl);
717
- --text-style-display-line-height: var(--line-height-tight);
718
- --text-style-display-letter-spacing: var(--letter-spacing-tight);
719
- --text-style-heading-1-size: var(--font-size-4xl);
720
- --text-style-heading-1-line-height: var(--line-height-snug);
721
- --text-style-heading-1-letter-spacing: var(--letter-spacing-tight);
722
- --text-style-heading-2-size: var(--font-size-3xl);
723
- --text-style-heading-2-line-height: var(--line-height-snug);
724
- --text-style-heading-2-letter-spacing: var(--letter-spacing-normal);
725
- --text-style-heading-3-size: var(--font-size-2xl);
726
- --text-style-heading-3-line-height: var(--line-height-snug);
727
- --text-style-heading-3-letter-spacing: var(--letter-spacing-normal);
728
- --text-style-heading-4-size: var(--font-size-xl);
729
- --text-style-heading-4-line-height: var(--line-height-normal);
730
- --text-style-heading-4-letter-spacing: var(--letter-spacing-normal);
731
- --text-style-body-lg-size: var(--font-size-lg);
732
- --text-style-body-lg-line-height: var(--line-height-normal);
733
- --text-style-body-lg-letter-spacing: var(--letter-spacing-normal);
734
- --text-style-body-md-size: var(--font-size-md);
735
- --text-style-body-md-line-height: var(--line-height-normal);
736
- --text-style-body-md-letter-spacing: var(--letter-spacing-normal);
737
- --text-style-body-sm-size: var(--font-size-sm);
738
- --text-style-body-sm-line-height: var(--line-height-normal);
739
- --text-style-body-sm-letter-spacing: var(--letter-spacing-normal);
740
- --text-style-label-lg-size: var(--font-size-md);
741
- --text-style-label-lg-line-height: var(--line-height-snug);
742
- --text-style-label-lg-letter-spacing: var(--letter-spacing-normal);
743
- --text-style-label-md-size: var(--font-size-sm);
744
- --text-style-label-md-line-height: var(--line-height-snug);
745
- --text-style-label-md-letter-spacing: var(--letter-spacing-normal);
746
- --text-style-label-sm-size: var(--font-size-xs);
747
- --text-style-label-sm-line-height: var(--line-height-snug);
748
- --text-style-label-sm-letter-spacing: var(--letter-spacing-wide);
749
- --text-style-caption-size: var(--font-size-xs);
750
- --text-style-caption-line-height: var(--line-height-normal);
751
- --text-style-caption-letter-spacing: var(--letter-spacing-normal);
752
- --text-style-overline-size: var(--font-size-xs);
753
- --text-style-overline-line-height: var(--line-height-normal);
754
- --text-style-overline-letter-spacing: var(--letter-spacing-widest);
755
- --text-style-data-size: var(--font-size-sm);
756
- --text-style-data-line-height: var(--line-height-tight);
757
- --text-style-data-letter-spacing: var(--letter-spacing-normal);
758
- --text-style-data-dense-size: var(--font-size-2xs);
759
- --text-style-data-dense-line-height: var(--line-height-tight);
760
- --text-style-data-dense-letter-spacing: var(--letter-spacing-normal);
761
- --margin-fluid: var(--scale-300);
762
- --margin-with-navigation-drawer: var(--scale-300);
763
- --margin-with-navigation-drawer: var(--scale-300);
764
- --gutter-gutter: var(--scale-300);
765
- --brand-50: var(--brand-colors-blue-50);
766
- --brand-100: var(--brand-colors-blue-100);
767
- --brand-200: var(--brand-colors-blue-200);
768
- --brand-300: var(--brand-colors-blue-300);
769
- --brand-400: var(--brand-colors-blue-400);
770
- --brand-500: var(--brand-colors-blue-500);
771
- --brand-600: var(--brand-colors-blue-600);
772
- --brand-700: var(--brand-colors-blue-700);
773
- --brand-800: var(--brand-colors-blue-800);
774
- --brand-900: var(--brand-colors-blue-900);
775
- --brand-950: var(--brand-colors-blue-950);
776
- --brand-50: var(--brand-colors-blue-50);
777
- --brand-100: var(--brand-colors-blue-100);
778
- --brand-200: var(--brand-colors-blue-200);
779
- --brand-300: var(--brand-colors-blue-300);
780
- --brand-400: var(--brand-colors-blue-400);
781
- --brand-500: var(--brand-colors-blue-500);
782
- --brand-600: var(--brand-colors-blue-600);
783
- --brand-700: var(--brand-colors-blue-700);
784
- --brand-800: var(--brand-colors-blue-800);
785
- --brand-900: var(--brand-colors-blue-900);
786
- --brand-950: var(--brand-colors-blue-950);
787
- --color-neutral-default: var(--neutral-700);
788
- --color-neutral-hover: var(--neutral-800);
789
- --color-neutral-focused: var(--neutral-800);
790
- --color-neutral-pressed: var(--neutral-900);
791
- --color-neutral-container: var(--neutral-50);
792
- --color-neutral-container-hover: var(--neutral-100);
793
- --color-neutral-container-focused: var(--neutral-200);
794
- --color-neutral-container-pressed: var(--neutral-300);
795
- --color-accent-default: var(--brand-colors-magenta-600);
796
- --color-accent-hover: var(--brand-colors-magenta-700);
797
- --color-accent-active: var(--brand-colors-magenta-800);
798
- --color-accent-container: var(--brand-colors-magenta-100);
799
- --color-success-default: var(--semantic-success-success-600);
800
- --color-success-hover: var(--semantic-success-success-700);
801
- --color-success-focused: var(--semantic-success-success-700);
802
- --color-success-pressed: var(--semantic-success-success-800);
803
- --color-success-container: var(--semantic-success-success-100);
804
- --color-warning-default: var(--semantic-warning-warning-600);
805
- --color-warning-hover: var(--semantic-warning-warning-700);
806
- --color-warning-focused: var(--semantic-warning-warning-700);
807
- --color-warning-pressed: var(--semantic-warning-warning-800);
808
- --color-warning-container: var(--semantic-warning-warning-100);
809
- --color-error-default: var(--semantic-error-error-600);
810
- --color-error-hover: var(--semantic-error-error-700);
811
- --color-error-focused: var(--semantic-error-error-700);
812
- --color-error-pressed: var(--semantic-error-error-800);
813
- --color-error-container: var(--semantic-error-error-100);
814
- --color-info-default: var(--semantic-information-information-600);
815
- --color-info-hover: var(--semantic-information-information-700);
816
- --color-info-focused: var(--semantic-information-information-700);
817
- --color-info-pressed: var(--semantic-information-information-800);
818
- --color-info-container: var(--semantic-information-information-100);
819
- --color-text-static-white: var(--white);
820
- --color-text-static-black: var(--black);
821
- --color-text-default: var(--black);
822
- --color-text-secondary: var(--neutral-600);
823
- --color-text-muted: var(--neutral-500);
824
- --color-text-inverse: var(--static-white);
825
- --color-text-link: var(--semantic-information-information-700);
826
- --color-text-success: var(--semantic-success-success-700);
827
- --color-text-info: var(--semantic-information-information-700);
828
- --color-text-warning: var(--semantic-warning-warning-700);
829
- --color-text-error: var(--semantic-error-error-700);
830
- --color-text-on-action: var(--white);
831
- --color-text-on-disabled: var(--neutral-400);
832
- --color-text-accent: var(--brand-colors-purple-700);
833
- --color-text-inverse-accent: var(--brand-colors-purple-400);
834
- --color-text-neutral-default: var(--neutral-600);
835
- --color-text-neutral-hover: var(--neutral-800);
836
- --color-text-neutral-focused: var(--neutral-800);
837
- --color-text-neutral-pressed: var(--neutral-900);
838
- --color-text-info: var(--semantic-information-information-700);
839
- --color-text-neutral-default: var(--neutral-600);
840
- --color-text-neutral-hover: var(--neutral-800);
841
- --color-text-neutral-focused: var(--neutral-800);
842
- --color-text-neutral-pressed: var(--neutral-900);
843
- --color-surface-base: var(--white);
844
- --color-surface-raised: var(--static-white);
845
- --color-surface-container: var(--neutral-50);
846
- --color-surface-hover: var(--neutral-100);
847
- --color-surface-focus: var(--neutral-100);
848
- --color-surface-pressed: var(--neutral-300);
849
- --color-surface-selected: var(--neutral-50);
850
- --color-surface-selected-hover: var(--neutral-200);
851
- --color-surface-selected-focus: var(--neutral-200);
852
- --color-surface-selected-pressed: var(--neutral-200);
853
- --color-surface-active: var(--neutral-100);
854
- --color-surface-inset: var(--neutral-50);
855
- --color-surface-inverse: var(--neutral-900);
856
- --color-surface-accent: var(--gray-transparent-2);
857
- --color-surface-on-action: var(--gray-25);
858
- --color-surface-on-action-disabled: var(--neutral-300);
859
- --color-surface-action-disabled: var(--neutral-100);
860
- --color-surface-success: var(--semantic-success-success-50);
861
- --color-surface-info: var(--semantic-information-information-50);
862
- --color-surface-warning: var(--semantic-warning-warning-50);
863
- --color-surface-error: var(--semantic-error-error-50);
864
- --color-surface-overlay: var(--neutral-500-transparent);
865
- --color-surface-overlay-level-2: var(--neutral-500-transparent-2);
866
- --color-surface-overlay-level-2: var(--neutral-500-transparent-2);
867
- --color-icons-static-white: var(--white);
868
- --color-icons-static-black: var(--black);
869
- --color-icons-default: var(--neutral-900);
870
- --color-icons-muted: var(--neutral-500);
871
- --color-icons-disabled: var(--neutral-400);
872
- --color-icons-inverse: var(--static-white);
873
- --color-icons-success: var(--semantic-success-success-600);
874
- --color-icons-info: var(--semantic-information-information-700);
875
- --color-icons-warning: var(--semantic-warning-warning-700);
876
- --color-icons-error: var(--semantic-error-error-700);
877
- --color-icons-neutral-default: var(--neutral-700);
878
- --color-icons-neutral-hover: var(--neutral-800);
879
- --color-icons-neutral-focused: var(--neutral-800);
880
- --color-icons-neutral-pressed: var(--neutral-900);
881
- --color-border-default: var(--neutral-100);
882
- --color-border-neutral-hover: var(--neutral-400);
883
- --color-border-neutral-active: var(--neutral-500);
884
- --color-border-neutral-disabled: var(--neutral-200);
885
- --color-border-neutral-container: var(--neutral-200);
886
- --color-border-neutral-container-hover: var(--neutral-300);
887
- --color-border-neutral-container-focused: var(--neutral-300);
888
- --color-border-neutral-container-pressed: var(--neutral-400);
889
- --color-border-success: var(--semantic-success-success-500);
890
- --color-border-success-hover: var(--semantic-success-success-600);
891
- --color-border-success-focus: var(--semantic-success-success-700);
892
- --color-border-warning: var(--semantic-warning-warning-500);
893
- --color-border-warning-hover: var(--semantic-warning-warning-600);
894
- --color-border-warning-focus: var(--semantic-warning-warning-700);
895
- --color-border-error: var(--semantic-error-error-700);
896
- --color-border-error-hover: var(--semantic-error-error-800);
897
- --color-border-error-focus: var(--semantic-error-error-700);
898
- --color-border-info: var(--semantic-information-information-500);
899
- --color-border-info-hover: var(--semantic-information-information-600);
900
- --color-border-info-focus: var(--semantic-information-information-700);
901
- --color-elevation-none: var(--light-mode-0);
902
- --color-elevation-low: var(--light-mode-100);
903
- --color-elevation-medium: var(--light-mode-200);
904
- --color-elevation-high: var(--light-mode-300);
905
- --color-elevation-higher: var(--light-mode-400);
906
- --color-elevation-highest: var(--light-mode-500);
907
- --color-elevation-inner: var(--light-mode-600);
908
- --color-elevation-focus: var(--light-mode-700);
909
- --border-width-0: var(--scale-0);
910
- --border-width-thin: var(--scale-10);
911
- --border-width-medium: var(--scale-25);
912
- --border-width-thick: var(--scale-50);
913
- --border-radius-0: var(--scale-0);
914
- --border-radius-50: var(--scale-50);
915
- --border-radius-75: var(--scale-75);
916
- --border-radius-100: var(--scale-100);
917
- --border-radius-150: var(--scale-150);
918
- --border-radius-200: var(--scale-200);
919
- --border-radius-300: var(--scale-300);
920
- --border-radius-full: var(--scale-1500);
921
- --spacing-0: var(--scale-0);
922
- --spacing-25: var(--scale-25);
923
- --spacing-50: var(--scale-50);
924
- --spacing-75: var(--scale-75);
925
- --spacing-100: var(--scale-100);
926
- --spacing-150: var(--scale-150);
927
- --spacing-200: var(--scale-200);
928
- --spacing-250: var(--scale-250);
929
- --spacing-300: var(--scale-300);
930
- --spacing-350: var(--scale-350);
931
- --spacing-400: var(--scale-400);
932
- --spacing-500: var(--scale-500);
933
- --spacing-550: var(--scale-550);
934
- --spacing-600: var(--scale-600);
935
- --spacing-700: var(--scale-700);
936
- --spacing-800: var(--scale-800);
937
- --spacing-1000: var(--scale-1000);
938
- --spacing-1200: var(--scale-1200);
939
- --spacing-1500: var(--scale-1500);
940
- --spacing-600: var(--scale-600);
941
- --spacing-500: var(--scale-500);
942
- --spacing-350: var(--scale-350);
943
- --spacing-200: var(--scale-200);
944
- --spacing-150: var(--scale-150);
945
- --spacing-100: var(--scale-100);
946
- --sizing-75: var(--scale-75);
947
- --sizing-100: var(--scale-100);
948
- --sizing-200: var(--scale-200);
949
- --sizing-250: var(--scale-250);
950
- --sizing-300: var(--scale-300);
951
- --sizing-400: var(--scale-400);
952
- --sizing-500: var(--scale-500);
953
- --sizing-600: var(--scale-600);
954
- --sizing-700: var(--scale-700);
955
- --sizing-800: var(--scale-800);
956
- --sizing-1000: var(--scale-1000);
957
- --sizing-1200: var(--scale-1200);
958
- --sizing-1600: var(--scale-1600);
959
- --sizing-3200: var(--scale-3200);
960
- --sizing-6400: var(--scale-6400);
961
- --border-width-0: var(--scale-0);
962
- --border-width-thin: var(--scale-10);
963
- --border-width-medium: var(--scale-25);
964
- --border-width-thick: var(--scale-50);
965
- --border-radius-0: var(--scale-0);
966
- --border-radius-50: var(--scale-50);
967
- --border-radius-75: var(--scale-75);
968
- --border-radius-100: var(--scale-100);
969
- --border-radius-150: var(--scale-150);
970
- --border-radius-200: var(--scale-200);
971
- --border-radius-300: var(--scale-300);
972
- --border-radius-full: var(--scale-1500);
973
- --avatar-text-default: var(--color-text-default);
974
- --avatar-text-secondary: var(--color-text-secondary);
975
- --avatar-border-primary: var(--color-border-neutral-container);
976
- --avatar-border-hover: var(--color-border-neutral-container-hover);
977
- --avatar-border-pressed: var(--color-border-neutral-container-pressed);
978
- --avatar-border-focused: var(--color-border-neutral-container);
979
- --avatar-bg-dafault: var(--color-surface-raised);
980
- --avatar-bg-hover: var(--color-surface-raised);
981
- --avatar-bg-pressed: var(--color-surface-raised);
982
- --avatar-bg-focused: var(--color-surface-raised);
983
- --avatar-icon-primary: var(--color-icons-muted);
984
- --switch-track-bg-default: var(--color-surface-active);
985
- --switch-track-bg-hover: var(--color-surface-hover);
986
- --switch-thumb-bg-default: var(--color-surface-base);
987
- --switch-thumb-bg-hover: var(--color-surface-raised);
988
- --switch-thumb-bg-checked: var(--color-surface-base);
989
- --switch-thumb-bg-disabled: var(--color-surface-on-action-disabled);
990
- --switch-track-border-default: var(--color-border-neutral-container);
991
- --switch-track-border-hover: var(--color-border-neutral-container-hover);
992
- --switch-track-bg-disabled: var(--color-surface-action-disabled);
993
- --switch-icon-disabled: var(--color-icons-disabled);
994
- --input-bg-default: var(--color-surface-base);
995
- --input-bg-filled: var(--color-surface-raised);
996
- --input-bg-disabled: var(--color-surface-action-disabled);
997
- --input-border-default: var(--color-border-neutral-container);
998
- --input-border-hover: var(--color-border-neutral-container-hover);
999
- --input-border-disabled: var(--color-border-neutral-disabled);
1000
- --input-border-error: var(--color-border-error);
1001
- --input-text: var(--color-text-default);
1002
- --input-text-success: var(--color-text-success);
1003
- --input-text-disabled: var(--color-text-on-disabled);
1004
- --input-placeholder: var(--color-text-secondary);
1005
- --input-label: var(--color-text-default);
1006
- --input-error: var(--color-text-error);
1007
- --input-description: var(--color-text-secondary);
1008
- --input-icon-error: var(--color-icons-error);
1009
- --input-icon-success: var(--color-icons-success);
1010
- --input-icon-disabled: var(--color-icons-disabled);
1011
- --input-error: var(--color-text-error);
1012
- --chip-text-default: var(--color-text-default);
1013
- --chip-text-static: var(--color-text-static-white);
1014
- --chip-text-primary: var(--color-text-default);
1015
- --chip-text-on-primary: var(--color-text-on-action);
1016
- --chip-text-warning: var(--color-text-warning);
1017
- --chip-text-success: var(--color-text-success);
1018
- --chip-text-neutral: var(--color-text-default);
1019
- --chip-text-inverse: var(--color-text-inverse);
1020
- --chip-text-info: var(--color-text-info);
1021
- --chip-text-error: var(--color-text-error);
1022
- --chip-text-disabled: var(--color-text-on-disabled);
1023
- --chip-icon-static: var(--color-icons-static-white);
1024
- --chip-icon-default: var(--color-icons-default);
1025
- --chip-icon-inverse: var(--color-icons-inverse);
1026
- --chip-icon-success: var(--color-icons-success);
1027
- --chip-icon-warning: var(--color-icons-warning);
1028
- --chip-icon-info: var(--color-icons-info);
1029
- --chip-icon-error: var(--color-icons-error);
1030
- --chip-icon-disabled: var(--color-icons-disabled);
1031
- --chip-border-default: var(--color-border-default);
1032
- --chip-border-inverse: var(--color-border-neutral-container);
1033
- --chip-bg-default: var(--color-surface-action-disabled);
1034
- --chip-bg-neutral: var(--color-neutral-default);
1035
- --chip-bg-neutral-container: var(--color-neutral-container);
1036
- --chip-bg-inverse: var(--color-surface-inset);
1037
- --chip-bg-success: var(--color-success-default);
1038
- --chip-bg-success-container: var(--color-success-container);
1039
- --chip-bg-warning: var(--color-warning-default);
1040
- --chip-bg-warning-container: var(--color-warning-container);
1041
- --chip-bg-info: var(--color-info-default);
1042
- --chip-bg-info-container: var(--color-info-container);
1043
- --chip-bg-error: var(--color-error-default);
1044
- --chip-bg-error-container: var(--color-error-container);
1045
- --chip-bg-primary: var(--color-neutral-default);
1046
- --chip-bg-primary-hover: var(--color-neutral-hover);
1047
- --chip-bg-primary-focused: var(--color-neutral-focused);
1048
- --chip-bg-primary-pressed: var(--color-neutral-pressed);
1049
- --chip-bg-primary-container: var(--color-neutral-container);
1050
- --chip-bg-primary-container-hover: var(--color-neutral-container-hover);
1051
- --chip-bg-primary-container-focused: var(--color-neutral-container-focused);
1052
- --chip-bg-primary-container-pressed: var(--color-neutral-container-pressed);
1053
- --chip-bg-disabled: var(--color-surface-action-disabled);
1054
- --badge-bg-default: var(--color-surface-action-disabled);
1055
- --badge-bg-success: var(--color-success-default);
1056
- --badge-bg-success-container: var(--color-success-container);
1057
- --badge-bg-warning: var(--color-warning-default);
1058
- --badge-bg-warning-container: var(--color-warning-container);
1059
- --badge-bg-info: var(--color-info-default);
1060
- --badge-bg-info-container: var(--color-info-container);
1061
- --badge-bg-error: var(--color-error-default);
1062
- --badge-bg-error-container: var(--color-error-container);
1063
- --badge-bg-neutral: var(--color-neutral-default);
1064
- --badge-bg-neutral-container: var(--color-neutral-container);
1065
- --badge-bg-inverse: var(--color-surface-inset);
1066
- --badge-border-default: var(--color-border-default);
1067
- --badge-text-default: var(--color-text-default);
1068
- --badge-text-neutral: var(--color-text-default);
1069
- --badge-text-inverse: var(--color-text-inverse);
1070
- --badge-text-warning: var(--color-text-warning);
1071
- --badge-text-info: var(--color-text-info);
1072
- --badge-text-error: var(--color-text-error);
1073
- --badge-text-success: var(--color-text-success);
1074
- --radio-bg-disabled: var(--color-surface-action-disabled);
1075
- --radio-enabled-border-default: var(--color-border-default);
1076
- --radio-enabled-border-hover: var(--color-border-neutral-hover);
1077
- --radio-enabled-border-focus: var(--color-border-neutral-hover);
1078
- --radio-enabled-border-pressed: var(--color-border-neutral-active);
1079
- --radio-border-disabled: var(--color-border-neutral-disabled);
1080
- --radio-icon-disabled: var(--color-icons-muted);
1081
- --radio-label-default: var(--color-text-default);
1082
- --radio-label-disabled: var(--color-text-muted);
1083
- --paper-bg-base: var(--color-surface-base);
1084
- --paper-bg-raised: var(--color-surface-raised);
1085
- --paper-bg-container: var(--color-surface-container);
1086
- --paper-bg-hover: var(--color-surface-hover);
1087
- --paper-bg-disabled: var(--color-surface-action-disabled);
1088
- --paper-border-surface: var(--color-border-neutral-container);
1089
- --button-primary-disabled: var(--color-surface-action-disabled);
1090
- --button-neutral-default: var(--color-neutral-default);
1091
- --button-neutral-hover: var(--color-neutral-hover);
1092
- --button-neutral-focus: var(--color-neutral-container-focused);
1093
- --button-neutral-disabled: var(--color-surface-action-disabled);
1094
- --button-neutral-container: var(--color-neutral-container);
1095
- --grid-gutter: var(--spacing-200); /** Gap between columns (16px) */
1096
- --grid-margin-sm: var(--spacing-200); /** Page edge on mobile (16px) */
1097
- --grid-margin-md: var(--spacing-300); /** Page edge on tablet (24px) */
1098
- --grid-margin-lg: var(--spacing-400); /** Page edge on desktop (32px) */
1099
- --grid-sidebar-width: var(--sizing-3200); /** Standard sidebar width (256px) */
1100
- --grid-panel-min-width: var(--sizing-3200); /** Minimum panel width (256px) */
1101
- --color-primary-default: var(--brand-600);
1102
- --color-primary-hover: var(--brand-700);
1103
- --color-primary-focused: var(--brand-700);
1104
- --color-primary-pressed: var(--brand-800);
1105
- --color-primary-container: var(--brand-50);
1106
- --color-primary-container-hover: var(--brand-100);
1107
- --color-text-action: var(--brand-600);
1108
- --color-text-action-hover: var(--brand-700);
1109
- --color-icons-action: var(--brand-600);
1110
- --color-icons-action-hover: var(--brand-700);
1111
- --color-border-neutral-focus: var(--brand-600);
1112
- --color-border-primary: var(--brand-500);
1113
- --color-border-primary-hover: var(--brand-600);
1114
- --color-border-primary-focus: var(--brand-600);
1115
- --color-border-primary-pressed: var(--brand-700);
1116
- --avatar-text-primary: var(--color-text-action);
1117
- --avatar-border-focus: var(--color-border-neutral-focus);
1118
- --switch-track-bg-checked-default: var(--color-primary-default);
1119
- --switch-track-bg-checked-hover: var(--color-primary-hover);
1120
- --switch-track-bg-checked-focused: var(--color-primary-focused);
1121
- --switch-track-border-focus: var(--color-border-neutral-focus);
1122
- --switch-icon-checked: var(--color-icons-action);
1123
- --input-border-focus: var(--color-border-neutral-focus);
1124
- --input-label-focus: var(--color-primary-default);
1125
- --chip-border-focus: var(--color-border-neutral-focus);
1126
- --badge-bg-primary: var(--color-primary-default);
1127
- --badge-bg-primary-container: var(--color-primary-container);
1128
- --badge-text-primary: var(--color-text-action);
1129
- --radio-selected-border-default: var(--color-border-primary);
1130
- --radio-selected-border-hover: var(--color-border-primary-hover);
1131
- --radio-selected-border-focus: var(--color-border-primary-focus);
1132
- --radio-selected-border-pressed: var(--color-border-primary-pressed);
1133
- --radio-icon-checked: var(--color-icons-action);
1134
- --radio-icon-hover: var(--color-icons-action-hover);
1135
- --radio-focus-ring: var(--color-border-neutral-focus);
1136
- --button-primary-default: var(--color-primary-default);
1137
- --button-primary-hover: var(--color-primary-hover);
1138
- --button-primary-focus: var(--color-primary-focused);
1139
- --button-primary-pressed: var(--color-primary-pressed);
1140
- --button-primary-container: var(--color-primary-container);
1141
- --button-neutral-pressed: var(--color-primary-pressed);
1142
- --color-surface-action: var(--color-primary-default);
4
+
5
+ /* Static Colors */
6
+ --bs-static-white: #ffffff;
7
+ --bs-static-black: #000000;
8
+
9
+ /* Neutral Scale */
10
+ --bs-neutral-25: #f9fafb;
11
+ --bs-neutral-50: #eff0f8;
12
+ --bs-neutral-100: #dee2ed;
13
+ --bs-neutral-200: #c2c7d3;
14
+ --bs-neutral-300: #a0a5b4;
15
+ --bs-neutral-400: #828998;
16
+ --bs-neutral-500: #6d7585;
17
+ --bs-neutral-600: #5d6472;
18
+ --bs-neutral-700: #4d535f;
19
+ --bs-neutral-800: #363c47;
20
+ --bs-neutral-900: #21262e;
21
+ --bs-neutral-950: #191c22;
22
+ --bs-neutral-500-transparent: rgba(109, 117, 133, 0.3);
23
+ --bs-neutral-500-transparent-2: rgba(109, 117, 133, 0.75);
24
+ --bs-neutral-50-transparent: rgba(239, 240, 248, 0.9);
25
+
26
+ /* Gray Scale */
27
+ --bs-gray-25: #fbfbfb;
28
+ --bs-gray-50: #f6f7f7;
29
+ --bs-gray-100: #eef1f1;
30
+ --bs-gray-200: #dfe5e6;
31
+ --bs-gray-300: #cbd3d6;
32
+ --bs-gray-400: #b6bec3;
33
+ --bs-gray-500: #a2aab2;
34
+ --bs-gray-600: #8c959f;
35
+ --bs-gray-700: #7f868f;
36
+ --bs-gray-800: #636970;
37
+ --bs-gray-900: #53585c;
38
+ --bs-gray-950: #303236;
39
+ --bs-gray-transparent: rgba(162, 170, 178, 0.24);
40
+ --bs-gray-transparent-2: rgba(162, 170, 178, 0.32);
41
+ --bs-gray-transparent-3: rgba(162, 170, 178, 0.44);
42
+
43
+ /* Success Scale */
44
+ --bs-success-50: #e5f5e9;
45
+ --bs-success-100: #c5ebd5;
46
+ --bs-success-200: #94d4b3;
47
+ --bs-success-300: #6bb491;
48
+ --bs-success-400: #469873;
49
+ --bs-success-500: #00855b;
50
+ --bs-success-600: #11714e;
51
+ --bs-success-700: #1b5d43;
52
+ --bs-success-800: #184330;
53
+ --bs-success-900: #0f2b1e;
54
+ --bs-success-950: #101e17;
55
+
56
+ /* Error Scale */
57
+ --bs-error-50: #fcecea;
58
+ --bs-error-100: #ffdad7;
59
+ --bs-error-200: #ffb3ae;
60
+ --bs-error-300: #ff807a;
61
+ --bs-error-400: #ee5351;
62
+ --bs-error-500: #d93539;
63
+ --bs-error-600: #b92f31;
64
+ --bs-error-700: #982a2a;
65
+ --bs-error-800: #701d1e;
66
+ --bs-error-900: #481212;
67
+ --bs-error-950: #34100f;
68
+
69
+ /* Warning Scale */
70
+ --bs-warning-50: #ffefdb;
71
+ --bs-warning-100: #ffdea1;
72
+ --bs-warning-200: #f1bd51;
73
+ --bs-warning-300: #d39b00;
74
+ --bs-warning-400: #b18100;
75
+ --bs-warning-500: #956d00;
76
+ --bs-warning-600: #805d00;
77
+ --bs-warning-700: #6b4d00;
78
+ --bs-warning-800: #4e3700;
79
+ --bs-warning-900: #332300;
80
+ --bs-warning-950: #261a00;
81
+
82
+ /* Information Scale */
83
+ --bs-information-50: #edf0fa;
84
+ --bs-information-100: #d6e3f8;
85
+ --bs-information-200: #aec8ed;
86
+ --bs-information-300: #73a9ea;
87
+ --bs-information-400: #448cd6;
88
+ --bs-information-500: #0078cb;
89
+ --bs-information-600: #0066ae;
90
+ --bs-information-700: #005592;
91
+ --bs-information-800: #003d6c;
92
+ --bs-information-900: #00283f;
93
+ --bs-information-950: #111c2a;
94
+
95
+ /* Purple */
96
+ --bs-purple-50: #f3effb;
97
+ --bs-purple-100: #e5dffd;
98
+ --bs-purple-200: #c8c0ff;
99
+ --bs-purple-300: #a49aff;
100
+ --bs-purple-400: #8676fe;
101
+ --bs-purple-500: #715afc;
102
+ --bs-purple-600: #5e47e6;
103
+ --bs-purple-700: #4b35c9;
104
+ --bs-purple-800: #3720a1;
105
+ --bs-purple-900: #220f73;
106
+ --bs-purple-950: #201463;
107
+
108
+ /* Cobalt */
109
+ --bs-cobalt-50: #f1effa;
110
+ --bs-cobalt-100: #e0e0fd;
111
+ --bs-cobalt-200: #bcc2ff;
112
+ --bs-cobalt-300: #939eff;
113
+ --bs-cobalt-400: #6d7cff;
114
+ --bs-cobalt-500: #4f63ff;
115
+ --bs-cobalt-600: #3b4ee9;
116
+ --bs-cobalt-700: #303ecd;
117
+ --bs-cobalt-800: #1928a5;
118
+ --bs-cobalt-900: #091675;
119
+ --bs-cobalt-950: #050d5d;
120
+
121
+ /* Blue */
122
+ --bs-blue-50: #eef0fa;
123
+ --bs-blue-100: #d8e3fc;
124
+ --bs-blue-200: #aec7f8;
125
+ --bs-blue-300: #7aa6f2;
126
+ --bs-blue-400: #3e88ef;
127
+ --bs-blue-500: #0073e1;
128
+ --bs-blue-600: #0062c1;
129
+ --bs-blue-700: #0051a2;
130
+ --bs-blue-800: #003a78;
131
+ --bs-blue-900: #002550;
132
+ --bs-blue-950: #001b3e;
133
+
134
+ /* Steel */
135
+ --bs-steel-50: #eef0f6;
136
+ --bs-steel-100: #d9e3f1;
137
+ --bs-steel-200: #b1c9e3;
138
+ --bs-steel-300: #83aad0;
139
+ --bs-steel-400: #558dbe;
140
+ --bs-steel-500: #3779ae;
141
+ --bs-steel-600: #2b6796;
142
+ --bs-steel-700: #1f567f;
143
+ --bs-steel-800: #103e5f;
144
+ --bs-steel-900: #041d30;
145
+ --bs-steel-950: #032841;
146
+
147
+ /* Teal */
148
+ --bs-teal-50: #e9f3f2;
149
+ --bs-teal-100: #c8e9e7;
150
+ --bs-teal-200: #9ed1cf;
151
+ --bs-teal-300: #72b2b0;
152
+ --bs-teal-400: #469593;
153
+ --bs-teal-500: #008280;
154
+ --bs-teal-600: #116f6e;
155
+ --bs-teal-700: #185b5a;
156
+ --bs-teal-800: #144241;
157
+ --bs-teal-900: #032b2a;
158
+ --bs-teal-950: #02201f;
159
+
160
+ /* Jade */
161
+ --bs-jade-50: #eaf3ef;
162
+ --bs-jade-100: #c6eadf;
163
+ --bs-jade-200: #8cd4c2;
164
+ --bs-jade-300: #63b4a2;
165
+ --bs-jade-400: #349985;
166
+ --bs-jade-500: #008370;
167
+ --bs-jade-600: #0e7060;
168
+ --bs-jade-700: #0e5d50;
169
+ --bs-jade-800: #034439;
170
+ --bs-jade-900: #002c24;
171
+ --bs-jade-950: #02201a;
172
+
173
+ /* Green */
174
+ --bs-green-50: #ecf2ea;
175
+ --bs-green-100: #d0e9d2;
176
+ --bs-green-200: #9fd3a9;
177
+ --bs-green-300: #78b385;
178
+ --bs-green-400: #469961;
179
+ --bs-green-500: #23834a;
180
+ --bs-green-600: #2a7043;
181
+ --bs-green-700: #295c3a;
182
+ --bs-green-800: #21422a;
183
+ --bs-green-900: #112b19;
184
+ --bs-green-950: #0b2011;
185
+
186
+ /* Lime */
187
+ --bs-lime-50: #f0f2e7;
188
+ --bs-lime-100: #d7e8c6;
189
+ --bs-lime-200: #add18f;
190
+ --bs-lime-300: #81b45c;
191
+ --bs-lime-400: #64963f;
192
+ --bs-lime-500: #478019;
193
+ --bs-lime-600: #406f1d;
194
+ --bs-lime-700: #385b1e;
195
+ --bs-lime-800: #2a4218;
196
+ --bs-lime-900: #182a0c;
197
+ --bs-lime-950: #121f09;
198
+
199
+ /* Yellow */
200
+ --bs-yellow-50: #faf1db;
201
+ --bs-yellow-100: #f9e28a;
202
+ --bs-yellow-200: #e3c437;
203
+ --bs-yellow-300: #c0a300;
204
+ --bs-yellow-400: #a18800;
205
+ --bs-yellow-500: #887200;
206
+ --bs-yellow-600: #746202;
207
+ --bs-yellow-700: #615102;
208
+ --bs-yellow-800: #463a01;
209
+ --bs-yellow-900: #2e2500;
210
+ --bs-yellow-950: #221b00;
211
+
212
+ /* Amber */
213
+ --bs-amber-50: #fceee0;
214
+ --bs-amber-100: #f8dfbf;
215
+ --bs-amber-200: #f1be71;
216
+ --bs-amber-300: #d19c46;
217
+ --bs-amber-400: #b47f1e;
218
+ --bs-amber-500: #996805;
219
+ --bs-amber-600: #875b04;
220
+ --bs-amber-700: #6f4b02;
221
+ --bs-amber-800: #513601;
222
+ --bs-amber-900: #352201;
223
+ --bs-amber-950: #291900;
224
+
225
+ /* Orange */
226
+ --bs-orange-50: #faeee9;
227
+ --bs-orange-100: #f9ddd0;
228
+ --bs-orange-200: #f7b997;
229
+ --bs-orange-300: #f08c50;
230
+ --bs-orange-400: #d26d2b;
231
+ --bs-orange-500: #ba5400;
232
+ --bs-orange-600: #a24907;
233
+ --bs-orange-700: #873d07;
234
+ --bs-orange-800: #642c04;
235
+ --bs-orange-900: #411b02;
236
+ --bs-orange-950: #301302;
237
+
238
+ /* Magenta */
239
+ --bs-magenta-50: #fbeeef;
240
+ --bs-magenta-100: #ffd7e0;
241
+ --bs-magenta-200: #ffb1c7;
242
+ --bs-magenta-300: #ff7aa7;
243
+ --bs-magenta-400: #ea4f8b;
244
+ --bs-magenta-500: #d12e75;
245
+ --bs-magenta-600: #b62965;
246
+ --bs-magenta-700: #9a1f53;
247
+ --bs-magenta-800: #71163c;
248
+ --bs-magenta-900: #4a0d27;
249
+ --bs-magenta-950: #38091c;
250
+
251
+ /* Maroon */
252
+ --bs-maroon-50: #f9eef3;
253
+ --bs-maroon-100: #f6dbef;
254
+ --bs-maroon-200: #eab6e3;
255
+ --bs-maroon-300: #d88cd1;
256
+ --bs-maroon-400: #c465c0;
257
+ --bs-maroon-500: #b14bb0;
258
+ --bs-maroon-600: #983f98;
259
+ --bs-maroon-700: #7f347e;
260
+ --bs-maroon-800: #5e245d;
261
+ --bs-maroon-900: #3e163d;
262
+ --bs-maroon-950: #2c122b;
263
+
264
+ /* Violet */
265
+ --bs-violet-50: #f9eefe;
266
+ --bs-violet-100: #eedcfd;
267
+ --bs-violet-200: #d8b8fd;
268
+ --bs-violet-300: #be92f4;
269
+ --bs-violet-400: #a372dd;
270
+ --bs-violet-500: #8f5ace;
271
+ --bs-violet-600: #7750a8;
272
+ --bs-violet-700: #64428d;
273
+ --bs-violet-800: #492e6a;
274
+ --bs-violet-900: #311b4b;
275
+ --bs-violet-950: #241338;
276
+
277
+ /* Typography - Font Family */
278
+ --bs-typography-font-family-heading: Roboto;
279
+ --bs-typography-font-family-body: Roboto;
280
+
281
+ /* Typography - Font Weight */
282
+ --bs-font-weight-thin: 100;
283
+ --bs-font-weight-regular: 400;
284
+ --bs-font-weight-medium: 500;
285
+ --bs-font-weight-semibold: 600;
286
+ --bs-font-weight-bold: 700;
287
+ --bs-font-weight-black: 900;
288
+
289
+ /* Typography - Font Size Scale */
290
+ --bs-font-size-2xs: 10px;
291
+ --bs-font-size-xs: 12px;
292
+ --bs-font-size-sm: 14px;
293
+ --bs-font-size-md: 16px;
294
+ --bs-font-size-lg: 18px;
295
+ --bs-font-size-xl: 20px;
296
+ --bs-font-size-2xl: 24px;
297
+ --bs-font-size-3xl: 28px;
298
+ --bs-font-size-4xl: 32px;
299
+ --bs-font-size-5xl: 40px;
300
+ --bs-font-size-6xl: 48px;
301
+
302
+ /* Typography - Line Height */
303
+ --bs-line-height-none: 1;
304
+ --bs-line-height-tight: 1.1;
305
+ --bs-line-height-snug: 1.25;
306
+ --bs-line-height-normal: 1.5;
307
+ --bs-line-height-relaxed: 1.625;
308
+ --bs-line-height-loose: 2;
309
+ --bs-line-height-display: 96;
310
+ --bs-line-height-heading: 56;
311
+ --bs-line-height-body: 28;
312
+ --bs-line-height-caption: 24;
313
+
314
+ /* Typography - Letter Spacing */
315
+ --bs-letter-spacing-tighter: -0.05em;
316
+ --bs-letter-spacing-tight: -0.025em;
317
+ --bs-letter-spacing-normal: 0em;
318
+ --bs-letter-spacing-wide: 0.025em;
319
+ --bs-letter-spacing-wider: 0.05em;
320
+ --bs-letter-spacing-widest: 0.1em;
321
+
322
+ /* Shadow Scale */
323
+ --bs-shadow-none: none;
324
+ --bs-shadow-xs: 0 1px 2px rgba(33,38,46,0.06), 0 1px 3px rgba(33,38,46,0.10);
325
+ --bs-shadow-sm: 0 1px 3px rgba(33,38,46,0.08), 0 2px 6px rgba(33,38,46,0.12);
326
+ --bs-shadow-md: 0 2px 8px rgba(33,38,46,0.10), 0 4px 16px rgba(33,38,46,0.16);
327
+ --bs-shadow-lg: 0 4px 16px rgba(33,38,46,0.12), 0 8px 32px rgba(33,38,46,0.20);
328
+ --bs-shadow-xl: 0 8px 24px rgba(33,38,46,0.14), 0 16px 48px rgba(33,38,46,0.24);
329
+ --bs-shadow-2xl: 0 16px 48px rgba(33,38,46,0.20), 0 32px 64px rgba(33,38,46,0.32);
330
+
331
+ /* Z-Index Scale */
332
+ --bs-z-index-below: -1;
333
+ --bs-z-index-base: 0;
334
+ --bs-z-index-raised: 10;
335
+ --bs-z-index-dropdown: 100;
336
+ --bs-z-index-sticky: 200;
337
+ --bs-z-index-overlay: 300;
338
+ --bs-z-index-modal: 400;
339
+ --bs-z-index-popover: 500;
340
+ --bs-z-index-toast: 600;
341
+ --bs-z-index-top: 999;
342
+
343
+ /* Breakpoints */
344
+ --bs-breakpoint-xs: 480px;
345
+ --bs-breakpoint-sm: 640px;
346
+ --bs-breakpoint-md: 768px;
347
+ --bs-breakpoint-lg: 1024px;
348
+ --bs-breakpoint-xl: 1280px;
349
+ --bs-breakpoint-2xl: 1536px;
350
+
351
+ /* Grid */
352
+ --bs-grid-columns: 12;
353
+ --bs-grid-container-max: 1440px;
354
+ --bs-grid-gutter: var(--bs-spacing-200);
355
+ --bs-grid-margin-sm: var(--bs-spacing-200);
356
+ --bs-grid-margin-md: var(--bs-spacing-300);
357
+ --bs-grid-margin-lg: var(--bs-spacing-400);
358
+ --bs-grid-sidebar-width: var(--bs-sizing-3200);
359
+ --bs-grid-panel-min-width: var(--bs-sizing-3200);
360
+
361
+ /* Opacity */
362
+ --bs-opacity-disabled: 0.5;
363
+ --bs-opacity-hover: 0.8;
364
+ --bs-opacity-focus: 0.9;
365
+
366
+ /* Motion - Duration */
367
+ --bs-duration-instant: 0ms;
368
+ --bs-duration-fast: 100ms;
369
+ --bs-duration-default: 200ms;
370
+ --bs-duration-slow: 300ms;
371
+ --bs-duration-slower: 500ms;
372
+
373
+ /* Motion - Easing */
374
+ --bs-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
375
+ --bs-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
376
+ --bs-easing-accelerate: cubic-bezier(0.4, 0.0, 1.0, 1);
377
+ --bs-easing-linear: linear;
378
+
379
+ /* Primary Colors - Light Mode */
380
+ --bs-color-primary-default: var(--bs-brand-600);
381
+ --bs-color-primary-hover: var(--bs-brand-700);
382
+ --bs-color-primary-focused: var(--bs-brand-700);
383
+ --bs-color-primary-pressed: var(--bs-brand-800);
384
+ --bs-color-primary-container: var(--bs-brand-50);
385
+ --bs-color-primary-container-hover: var(--bs-brand-100);
386
+
387
+ /* Neutral Colors - Light Mode */
388
+ --bs-color-neutral-default: var(--bs-neutral-700);
389
+ --bs-color-neutral-hover: var(--bs-neutral-800);
390
+ --bs-color-neutral-focused: var(--bs-neutral-800);
391
+ --bs-color-neutral-pressed: var(--bs-neutral-900);
392
+ --bs-color-neutral-container: var(--bs-neutral-50);
393
+ --bs-color-neutral-container-hover: var(--bs-neutral-100);
394
+ --bs-color-neutral-container-focused: var(--bs-neutral-200);
395
+ --bs-color-neutral-container-pressed: var(--bs-neutral-300);
396
+
397
+ /* Accent Colors - Light Mode */
398
+ --bs-color-accent-default: var(--bs-brand-colors-magenta-600);
399
+ --bs-color-accent-hover: var(--bs-brand-colors-magenta-700);
400
+ --bs-color-accent-active: var(--bs-brand-colors-magenta-800);
401
+ --bs-color-accent-container: var(--bs-brand-colors-magenta-100);
402
+
403
+ /* Success Colors - Light Mode */
404
+ --bs-color-success-default: var(--bs-success-600);
405
+ --bs-color-success-hover: var(--bs-success-700);
406
+ --bs-color-success-focused: var(--bs-success-700);
407
+ --bs-color-success-pressed: var(--bs-success-800);
408
+ --bs-color-success-container: var(--bs-success-100);
409
+
410
+ /* Warning Colors - Light Mode */
411
+ --bs-color-warning-default: var(--bs-warning-600);
412
+ --bs-color-warning-hover: var(--bs-warning-700);
413
+ --bs-color-warning-focused: var(--bs-warning-700);
414
+ --bs-color-warning-pressed: var(--bs-warning-800);
415
+ --bs-color-warning-container: var(--bs-warning-100);
416
+
417
+ /* Error Colors - Light Mode */
418
+ --bs-color-error-default: var(--bs-error-600);
419
+ --bs-color-error-hover: var(--bs-error-700);
420
+ --bs-color-error-focused: var(--bs-error-700);
421
+ --bs-color-error-pressed: var(--bs-error-800);
422
+ --bs-color-error-container: var(--bs-error-100);
423
+
424
+ /* Info Colors - Light Mode */
425
+ --bs-color-info-default: var(--bs-information-600);
426
+ --bs-color-info-hover: var(--bs-information-700);
427
+ --bs-color-info-focused: var(--bs-information-700);
428
+ --bs-color-info-pressed: var(--bs-information-800);
429
+ --bs-color-info-container: var(--bs-information-100);
430
+
431
+ /* Text Colors - Light Mode */
432
+ --bs-text-static-white: var(--bs-white);
433
+ --bs-text-static-black: var(--bs-black);
434
+ --bs-text-default: var(--bs-black);
435
+ --bs-text-secondary: var(--bs-neutral-600);
436
+ --bs-text-muted: var(--bs-neutral-500);
437
+ --bs-text-inverse: var(--bs-static-white);
438
+ --bs-text-link: var(--bs-information-700);
439
+ --bs-text-action: var(--bs-brand-600);
440
+ --bs-text-action-hover: var(--bs-brand-700);
441
+ --bs-text-success: var(--bs-success-700);
442
+ --bs-text-info: var(--bs-information-700);
443
+ --bs-text-warning: var(--bs-warning-700);
444
+ --bs-text-error: var(--bs-error-700);
445
+ --bs-text-on-action: var(--bs-white);
446
+ --bs-text-on-disabled: var(--bs-neutral-400);
447
+ --bs-text-accent: var(--bs-brand-colors-purple-700);
448
+ --bs-text-inverse-accent: var(--bs-brand-colors-purple-400);
449
+ --bs-text-neutral---default: var(--bs-neutral-600);
450
+ --bs-text-neutral---hover: var(--bs-neutral-800);
451
+ --bs-text-neutral---focused: var(--bs-neutral-800);
452
+ --bs-text-neutral---pressed: var(--bs-neutral-900);
453
+ --bs-text-neutral-default: var(--bs-neutral-600);
454
+ --bs-text-neutral-hover: var(--bs-neutral-800);
455
+ --bs-text-neutral-focused: var(--bs-neutral-800);
456
+ --bs-text-neutral-pressed: var(--bs-neutral-900);
457
+
458
+ /* Surface Colors - Light Mode */
459
+ --bs-surface-base: var(--bs-white);
460
+ --bs-surface-raised: var(--bs-static-white);
461
+ --bs-surface-container: var(--bs-neutral-50);
462
+ --bs-surface-hover: var(--bs-neutral-100);
463
+ --bs-surface-focus: var(--bs-neutral-100);
464
+ --bs-surface-pressed: var(--bs-neutral-300);
465
+ --bs-surface-selected: var(--bs-neutral-50);
466
+ --bs-surface-selected-hover: var(--bs-neutral-200);
467
+ --bs-surface-selected-focus: var(--bs-neutral-200);
468
+ --bs-surface-selected-pressed: var(--bs-neutral-200);
469
+ --bs-surface-active: var(--bs-neutral-100);
470
+ --bs-surface-action: var(--bs-color-primary-default);
471
+ --bs-surface-inset: var(--bs-neutral-50);
472
+ --bs-surface-inverse: var(--bs-neutral-900);
473
+ --bs-surface-accent: var(--bs-gray-transparent-2);
474
+ --bs-surface-on-action: var(--bs-gray-25);
475
+ --bs-surface-on-action-disabled: var(--bs-neutral-300);
476
+ --bs-surface-action-disabled: var(--bs-neutral-100);
477
+ --bs-surface-success: var(--bs-success-50);
478
+ --bs-surface-info: var(--bs-information-50);
479
+ --bs-surface-warning: var(--bs-warning-50);
480
+ --bs-surface-error: var(--bs-error-50);
481
+ --bs-surface-overlay: var(--bs-neutral-500-transparent);
482
+ --bs-surface-overlay-level-2: var(--bs-neutral-500-transparent-2);
483
+
484
+ /* Icon Colors - Light Mode */
485
+ --bs-icon-static-white: var(--bs-white);
486
+ --bs-icon-static-black: var(--bs-black);
487
+ --bs-icon-default: var(--bs-neutral-900);
488
+ --bs-icon-muted: var(--bs-neutral-500);
489
+ --bs-icon-disabled: var(--bs-neutral-400);
490
+ --bs-icon-inverse: var(--bs-static-white);
491
+ --bs-icon-action: var(--bs-brand-600);
492
+ --bs-icon-action-hover: var(--bs-brand-700);
493
+ --bs-icon-success: var(--bs-success-600);
494
+ --bs-icon-info: var(--bs-information-700);
495
+ --bs-icon-warning: var(--bs-warning-700);
496
+ --bs-icon-error: var(--bs-error-700);
497
+ --bs-icon-neutral-default: var(--bs-neutral-700);
498
+ --bs-icon-neutral-hover: var(--bs-neutral-800);
499
+ --bs-icon-neutral-focused: var(--bs-neutral-800);
500
+ --bs-icon-neutral-pressed: var(--bs-neutral-900);
501
+
502
+ /* Border Colors - Light Mode */
503
+ --bs-border-default: var(--bs-neutral-100);
504
+ --bs-border-neutral-hover: var(--bs-neutral-400);
505
+ --bs-border-neutral-focus: var(--bs-brand-600);
506
+ --bs-border-neutral-active: var(--bs-neutral-500);
507
+ --bs-border-neutral-disabled: var(--bs-neutral-200);
508
+ --bs-border-neutral-container: var(--bs-neutral-200);
509
+ --bs-border-neutral-container-hover: var(--bs-neutral-300);
510
+ --bs-border-neutral-container-focused: var(--bs-neutral-300);
511
+ --bs-border-neutral-container-pressed: var(--bs-neutral-400);
512
+ --bs-border-success: var(--bs-success-500);
513
+ --bs-border-success-hover: var(--bs-success-600);
514
+ --bs-border-success-focus: var(--bs-success-700);
515
+ --bs-border-warning: var(--bs-warning-500);
516
+ --bs-border-warning-hover: var(--bs-warning-600);
517
+ --bs-border-warning-focus: var(--bs-warning-700);
518
+ --bs-border-error: var(--bs-error-700);
519
+ --bs-border-error-hover: var(--bs-error-800);
520
+ --bs-border-error-focus: var(--bs-error-700);
521
+ --bs-border-info: var(--bs-information-500);
522
+ --bs-border-info-hover: var(--bs-information-600);
523
+ --bs-border-info-focus: var(--bs-information-700);
524
+ --bs-border-primary: var(--bs-brand-500);
525
+ --bs-border-primary-hover: var(--bs-brand-600);
526
+ --bs-border-primary-focus: var(--bs-brand-600);
527
+ --bs-border-primary-pressed: var(--bs-brand-700);
528
+
529
+ /* Elevation Colors - Light Mode */
530
+ --bs-elevation-none: var(--bs-light-mode-0);
531
+ --bs-elevation-low: var(--bs-light-mode-100);
532
+ --bs-elevation-medium: var(--bs-light-mode-200);
533
+ --bs-elevation-high: var(--bs-light-mode-300);
534
+ --bs-elevation-higher: var(--bs-light-mode-400);
535
+ --bs-elevation-highest: var(--bs-light-mode-500);
536
+ --bs-elevation-inner: var(--bs-light-mode-600);
537
+ --bs-elevation-focus: var(--bs-light-mode-700);
538
+
539
+ /* Spacing */
540
+ --bs-spacing-0: var(--bs-scale-0);
541
+ --bs-spacing-25: var(--bs-scale-25);
542
+ --bs-spacing-50: var(--bs-scale-50);
543
+ --bs-spacing-75: var(--bs-scale-75);
544
+ --bs-spacing-100: var(--bs-scale-100);
545
+ --bs-spacing-150: var(--bs-scale-150);
546
+ --bs-spacing-200: var(--bs-scale-200);
547
+ --bs-spacing-250: var(--bs-scale-250);
548
+ --bs-spacing-300: var(--bs-scale-300);
549
+ --bs-spacing-350: var(--bs-scale-350);
550
+ --bs-spacing-400: var(--bs-scale-400);
551
+ --bs-spacing-500: var(--bs-scale-500);
552
+ --bs-spacing-550: var(--bs-scale-550);
553
+ --bs-spacing-600: var(--bs-scale-600);
554
+ --bs-spacing-700: var(--bs-scale-700);
555
+ --bs-spacing-800: var(--bs-scale-800);
556
+ --bs-spacing-1000: var(--bs-scale-1000);
557
+ --bs-spacing-1200: var(--bs-scale-1200);
558
+ --bs-spacing-1500: var(--bs-scale-1500);
559
+ --bs-spacing--600: var(--bs-scale--600);
560
+ --bs-spacing--500: var(--bs-scale--500);
561
+ --bs-spacing--350: var(--bs-scale--350);
562
+ --bs-spacing--200: var(--bs-scale--200);
563
+ --bs-spacing--150: var(--bs-scale--150);
564
+ --bs-spacing--100: var(--bs-scale--100);
565
+
566
+ /* Border Radius */
567
+ --bs-border-radius-0: var(--bs-scale-0);
568
+ --bs-border-radius-50: var(--bs-scale-50);
569
+ --bs-border-radius-75: var(--bs-scale-75);
570
+ --bs-border-radius-100: var(--bs-scale-100);
571
+ --bs-border-radius-150: var(--bs-scale-150);
572
+ --bs-border-radius-200: var(--bs-scale-200);
573
+ --bs-border-radius-300: var(--bs-scale-300);
574
+ --bs-border-radius-full: var(--bs-scale-1500);
575
+
576
+ /* Components */
577
+ --bs-avatar-text-primary: var(--bs-text-action);
578
+ --bs-avatar-text-default: var(--bs-text-default);
579
+ --bs-avatar-text-secondary: var(--bs-text-secondary);
580
+ --bs-avatar-border-primary: var(--bs-border-neutral-container);
581
+ --bs-avatar-border-hover: var(--bs-border-neutral-container-hover);
582
+ --bs-avatar-border-pressed: var(--bs-border-neutral-container-pressed);
583
+ --bs-avatar-border-focused: var(--bs-border-neutral-container);
584
+ --bs-avatar-bg-dafault: var(--bs-surface-raised);
585
+ --bs-avatar-bg-hover: var(--bs-surface-raised);
586
+ --bs-avatar-bg-pressed: var(--bs-surface-raised);
587
+ --bs-avatar-bg-focused: var(--bs-surface-raised);
588
+ --bs-avatar-icon-primary: var(--bs-icon-muted);
589
+ --bs-avatar-border-focus: var(--bs-border-neutral-focus);
590
+ --bs-switch-track-bg-default: var(--bs-surface-active);
591
+ --bs-switch-track-bg-hover: var(--bs-surface-hover);
592
+ --bs-switch-track-bg-checked-default: var(--bs-color-primary-default);
593
+ --bs-switch-track-bg-checked-hover: var(--bs-color-primary-hover);
594
+ --bs-switch-track-bg-checked-focused: var(--bs-color-primary-focused);
595
+ --bs-switch-thumb-bg-default: var(--bs-surface-base);
596
+ --bs-switch-thumb-bg-hover: var(--bs-surface-raised);
597
+ --bs-switch-thumb-bg-checked: var(--bs-surface-base);
598
+ --bs-switch-thumb-bg-disabled: var(--bs-surface-on-action-disabled);
599
+ --bs-switch-track-border-default: var(--bs-border-neutral-container);
600
+ --bs-switch-icon-default: {color.icons.secondary};
601
+ --bs-switch-track-border-hover: var(--bs-border-neutral-container-hover);
602
+ --bs-switch-track-border-focus: var(--bs-border-neutral-focus);
603
+ --bs-switch-icon-checked: var(--bs-icon-action);
604
+ --bs-switch-track-bg-disabled: var(--bs-surface-action-disabled);
605
+ --bs-switch-icon-disabled: var(--bs-icon-disabled);
606
+ --bs-input-bg-default: var(--bs-surface-base);
607
+ --bs-input-bg-filled: var(--bs-surface-raised);
608
+ --bs-input-bg-disabled: var(--bs-surface-action-disabled);
609
+ --bs-input-border-default: var(--bs-border-neutral-container);
610
+ --bs-input-border-hover: var(--bs-border-neutral-container-hover);
611
+ --bs-input-border-focus: var(--bs-border-neutral-focus);
612
+ --bs-input-border-disabled: var(--bs-border-neutral-disabled);
613
+ --bs-input-border-error: var(--bs-border-error);
614
+ --bs-input-text: var(--bs-text-default);
615
+ --bs-input-text-success: var(--bs-text-success);
616
+ --bs-input-text-disabled: var(--bs-text-on-disabled);
617
+ --bs-input-placeholder: var(--bs-text-secondary);
618
+ --bs-input-label: var(--bs-text-default);
619
+ --bs-input-error: var(--bs-text-error);
620
+ --bs-input-description: var(--bs-text-secondary);
621
+ --bs-input-label-focus: var(--bs-color-primary-default);
622
+ --bs-input-icon: {color.icons.secondary};
623
+ --bs-input-icon-error: var(--bs-icon-error);
624
+ --bs-input-icon-success: var(--bs-icon-success);
625
+ --bs-input-icon-disabled: var(--bs-icon-disabled);
626
+ --bs-chip-text-default: var(--bs-text-default);
627
+ --bs-chip-text-static: var(--bs-text-static-white);
628
+ --bs-chip-text-primary: var(--bs-text-default);
629
+ --bs-chip-text-on-primary: var(--bs-text-on-action);
630
+ --bs-chip-text-warning: var(--bs-text-warning);
631
+ --bs-chip-text-success: var(--bs-text-success);
632
+ --bs-chip-text-neutral: var(--bs-text-default);
633
+ --bs-chip-text-inverse: var(--bs-text-inverse);
634
+ --bs-chip-text-info: var(--bs-text-info);
635
+ --bs-chip-text-error: var(--bs-text-error);
636
+ --bs-chip-text-disabled: var(--bs-text-on-disabled);
637
+ --bs-chip-icon-static: var(--bs-icon-static-white);
638
+ --bs-chip-icon-default: var(--bs-icon-default);
639
+ --bs-chip-icon-inverse: var(--bs-icon-inverse);
640
+ --bs-chip-icon-primary: {color.icons.secondary};
641
+ --bs-chip-icon-success: var(--bs-icon-success);
642
+ --bs-chip-icon-warning: var(--bs-icon-warning);
643
+ --bs-chip-icon-info: var(--bs-icon-info);
644
+ --bs-chip-icon-error: var(--bs-icon-error);
645
+ --bs-chip-icon-disabled: var(--bs-icon-disabled);
646
+ --bs-chip-border-default: var(--bs-border-default);
647
+ --bs-chip-border-inverse: var(--bs-border-neutral-container);
648
+ --bs-chip-border-focus: var(--bs-border-neutral-focus);
649
+ --bs-chip-bg-default: var(--bs-surface-action-disabled);
650
+ --bs-chip-bg-neutral: var(--bs-color-neutral-default);
651
+ --bs-chip-bg-neutral-container: var(--bs-color-neutral-container);
652
+ --bs-chip-bg-inverse: var(--bs-surface-inset);
653
+ --bs-chip-bg-success: var(--bs-color-success-default);
654
+ --bs-chip-bg-success-container: var(--bs-color-success-container);
655
+ --bs-chip-bg-warning: var(--bs-color-warning-default);
656
+ --bs-chip-bg-warning-container: var(--bs-color-warning-container);
657
+ --bs-chip-bg-info: var(--bs-color-info-default);
658
+ --bs-chip-bg-info-container: var(--bs-color-info-container);
659
+ --bs-chip-bg-error: var(--bs-color-error-default);
660
+ --bs-chip-bg-error-container: var(--bs-color-error-container);
661
+ --bs-chip-bg-primary: var(--bs-color-neutral-default);
662
+ --bs-chip-bg-primary-hover: var(--bs-color-neutral-hover);
663
+ --bs-chip-bg-primary-focused: var(--bs-color-neutral-focused);
664
+ --bs-chip-bg-primary-pressed: var(--bs-color-neutral-pressed);
665
+ --bs-chip-bg-primary-container: var(--bs-color-neutral-container);
666
+ --bs-chip-bg-primary-container-hover: var(--bs-color-neutral-container-hover);
667
+ --bs-chip-bg-primary-container-focused: var(--bs-color-neutral-container-focused);
668
+ --bs-chip-bg-primary-container-pressed: var(--bs-color-neutral-container-pressed);
669
+ --bs-chip-bg-disabled: var(--bs-surface-action-disabled);
670
+ --bs-badge-bg-default: var(--bs-surface-action-disabled);
671
+ --bs-badge-bg-primary: var(--bs-color-primary-default);
672
+ --bs-badge-bg-primary-container: var(--bs-color-primary-container);
673
+ --bs-badge-bg-success: var(--bs-color-success-default);
674
+ --bs-badge-bg-success-container: var(--bs-color-success-container);
675
+ --bs-badge-bg-warning: var(--bs-color-warning-default);
676
+ --bs-badge-bg-warning-container: var(--bs-color-warning-container);
677
+ --bs-badge-bg-info: var(--bs-color-info-default);
678
+ --bs-badge-bg-info-container: var(--bs-color-info-container);
679
+ --bs-badge-bg-error: var(--bs-color-error-default);
680
+ --bs-badge-bg-error-container: var(--bs-color-error-container);
681
+ --bs-badge-bg-neutral: var(--bs-color-neutral-default);
682
+ --bs-badge-bg-neutral-container: var(--bs-color-neutral-container);
683
+ --bs-badge-bg-inverse: var(--bs-surface-inset);
684
+ --bs-badge-border-default: var(--bs-border-default);
685
+ --bs-badge-text-default: var(--bs-text-default);
686
+ --bs-badge-text-neutral: var(--bs-text-default);
687
+ --bs-badge-text-inverse: var(--bs-text-inverse);
688
+ --bs-badge-text-warning: var(--bs-text-warning);
689
+ --bs-badge-text-info: var(--bs-text-info);
690
+ --bs-badge-text-error: var(--bs-text-error);
691
+ --bs-badge-text-primary: var(--bs-text-action);
692
+ --bs-badge-text-success: var(--bs-text-success);
693
+ --bs-radio-bg-default: var(--bs-alpha-5);
694
+ --bs-radio-bg-hover: var(--bs-alpha-60);
695
+ --bs-radio-bg-focus: var(--bs-alpha-80);
696
+ --bs-radio-bg-pressed: var(--bs-alpha-90);
697
+ --bs-radio-bg-disabled: var(--bs-surface-action-disabled);
698
+ --bs-radio-selected-border-default: var(--bs-border-primary);
699
+ --bs-radio-selected-border-hover: var(--bs-border-primary-hover);
700
+ --bs-radio-selected-border-focus: var(--bs-border-primary-focus);
701
+ --bs-radio-selected-border-pressed: var(--bs-border-primary-pressed);
702
+ --bs-radio-enabled-border-default: var(--bs-border-default);
703
+ --bs-radio-enabled-border-hover: var(--bs-border-neutral-hover);
704
+ --bs-radio-enabled-border-focus: var(--bs-border-neutral-hover);
705
+ --bs-radio-enabled-border-pressed: var(--bs-border-neutral-active);
706
+ --bs-radio-border-disabled: var(--bs-border-neutral-disabled);
707
+ --bs-radio-icon-checked: var(--bs-icon-action);
708
+ --bs-radio-icon-hover: var(--bs-icon-action-hover);
709
+ --bs-radio-icon-disabled: var(--bs-icon-muted);
710
+ --bs-radio-label-default: var(--bs-text-default);
711
+ --bs-radio-label-disabled: var(--bs-text-muted);
712
+ --bs-radio-focus-ring: var(--bs-border-neutral-focus);
713
+ --bs-paper-bg-base: var(--bs-surface-base);
714
+ --bs-paper-bg-raised: var(--bs-surface-raised);
715
+ --bs-paper-bg-container: var(--bs-surface-container);
716
+ --bs-paper-bg-hover: var(--bs-surface-hover);
717
+ --bs-paper-bg-disabled: var(--bs-surface-action-disabled);
718
+ --bs-paper-border-surface: var(--bs-border-neutral-container);
719
+ --bs-button-primary-default: var(--bs-color-primary-default);
720
+ --bs-button-primary-hover: var(--bs-color-primary-hover);
721
+ --bs-button-primary-focus: var(--bs-color-primary-focused);
722
+ --bs-button-primary-pressed: var(--bs-color-primary-pressed);
723
+ --bs-button-primary-disabled: var(--bs-surface-action-disabled);
724
+ --bs-button-primary-container: var(--bs-color-primary-container);
725
+ --bs-button-neutral-default: var(--bs-color-neutral-default);
726
+ --bs-button-neutral-hover: var(--bs-color-neutral-hover);
727
+ --bs-button-neutral-focus: var(--bs-color-neutral-container-focused);
728
+ --bs-button-neutral-pressed: var(--bs-color-primary-pressed);
729
+ --bs-button-neutral-disabled: var(--bs-surface-action-disabled);
730
+ --bs-button-neutral-container: var(--bs-color-neutral-container);
731
+
732
+ --bs-shadow-ambient-color-xs: rgba(33, 38, 46, 0.06);
733
+ --bs-shadow-ambient-color-sm: rgba(33, 38, 46, 0.08);
734
+ --bs-shadow-ambient-color-md: rgba(33, 38, 46, 0.1);
735
+ --bs-shadow-ambient-color-lg: rgba(33, 38, 46, 0.12);
736
+ --bs-shadow-ambient-color-xl: rgba(33, 38, 46, 0.14);
737
+ --bs-shadow-ambient-color-2xl: rgba(33, 38, 46, 0.2);
738
+ --bs-shadow-key-color-xs: rgba(33, 38, 46, 0.1);
739
+ --bs-shadow-key-color-sm: rgba(33, 38, 46, 0.12);
740
+ --bs-shadow-key-color-md: rgba(33, 38, 46, 0.16);
741
+ --bs-shadow-key-color-lg: rgba(33, 38, 46, 0.2);
742
+ --bs-shadow-key-color-xl: rgba(33, 38, 46, 0.24);
743
+ --bs-shadow-key-color-2xl: rgba(33, 38, 46, 0.32);
744
+ --bs-shadow-position-0: 0px;
745
+ --bs-shadow-position-10: 1px;
746
+ --bs-shadow-position-25: 2px;
747
+ --bs-shadow-position-50: 4px;
748
+ --bs-shadow-position-100: 8px;
749
+ --bs-shadow-position-150: 12px;
750
+ --bs-shadow-position-200: 16px;
751
+ --bs-shadow-blur-0: 0px;
752
+ --bs-shadow-blur-10: 1px;
753
+ --bs-shadow-blur-25: 2px;
754
+ --bs-shadow-blur-50: 4px;
755
+ --bs-shadow-blur-100: 8px;
756
+ --bs-shadow-blur-150: 12px;
757
+ --bs-shadow-blur-200: 16px;
758
+ --bs-shadow-blur-300: 24px;
759
+ --bs-text-style-display-size: var(--bs-font-size-6xl);
760
+ --bs-text-style-display-weight: 700;
761
+ --bs-text-style-display-line-height: var(--bs-line-height-tight);
762
+ --bs-text-style-display-letter-spacing: var(--bs-letter-spacing-tight);
763
+ --bs-text-style-heading-1-size: var(--bs-font-size-4xl);
764
+ --bs-text-style-heading-1-weight: 600;
765
+ --bs-text-style-heading-1-line-height: var(--bs-line-height-snug);
766
+ --bs-text-style-heading-1-letter-spacing: var(--bs-letter-spacing-tight);
767
+ --bs-text-style-heading-2-size: var(--bs-font-size-3xl);
768
+ --bs-text-style-heading-2-weight: 600;
769
+ --bs-text-style-heading-2-line-height: var(--bs-line-height-snug);
770
+ --bs-text-style-heading-2-letter-spacing: var(--bs-letter-spacing-normal);
771
+ --bs-text-style-heading-3-size: var(--bs-font-size-2xl);
772
+ --bs-text-style-heading-3-weight: 600;
773
+ --bs-text-style-heading-3-line-height: var(--bs-line-height-snug);
774
+ --bs-text-style-heading-3-letter-spacing: var(--bs-letter-spacing-normal);
775
+ --bs-text-style-heading-4-size: var(--bs-font-size-xl);
776
+ --bs-text-style-heading-4-weight: 500;
777
+ --bs-text-style-heading-4-line-height: var(--bs-line-height-normal);
778
+ --bs-text-style-heading-4-letter-spacing: var(--bs-letter-spacing-normal);
779
+ --bs-text-style-body-lg-size: var(--bs-font-size-lg);
780
+ --bs-text-style-body-lg-weight: 400;
781
+ --bs-text-style-body-lg-line-height: var(--bs-line-height-normal);
782
+ --bs-text-style-body-lg-letter-spacing: var(--bs-letter-spacing-normal);
783
+ --bs-text-style-body-md-size: var(--bs-font-size-md);
784
+ --bs-text-style-body-md-weight: 400;
785
+ --bs-text-style-body-md-line-height: var(--bs-line-height-normal);
786
+ --bs-text-style-body-md-letter-spacing: var(--bs-letter-spacing-normal);
787
+ --bs-text-style-body-sm-size: var(--bs-font-size-sm);
788
+ --bs-text-style-body-sm-weight: 400;
789
+ --bs-text-style-body-sm-line-height: var(--bs-line-height-normal);
790
+ --bs-text-style-body-sm-letter-spacing: var(--bs-letter-spacing-normal);
791
+ --bs-text-style-label-lg-size: var(--bs-font-size-md);
792
+ --bs-text-style-label-lg-weight: 500;
793
+ --bs-text-style-label-lg-line-height: var(--bs-line-height-snug);
794
+ --bs-text-style-label-lg-letter-spacing: var(--bs-letter-spacing-normal);
795
+ --bs-text-style-label-md-size: var(--bs-font-size-sm);
796
+ --bs-text-style-label-md-weight: 500;
797
+ --bs-text-style-label-md-line-height: var(--bs-line-height-snug);
798
+ --bs-text-style-label-md-letter-spacing: var(--bs-letter-spacing-normal);
799
+ --bs-text-style-label-sm-size: var(--bs-font-size-xs);
800
+ --bs-text-style-label-sm-weight: 500;
801
+ --bs-text-style-label-sm-line-height: var(--bs-line-height-snug);
802
+ --bs-text-style-label-sm-letter-spacing: var(--bs-letter-spacing-wide);
803
+ --bs-text-style-caption-size: var(--bs-font-size-xs);
804
+ --bs-text-style-caption-weight: 400;
805
+ --bs-text-style-caption-line-height: var(--bs-line-height-normal);
806
+ --bs-text-style-caption-letter-spacing: var(--bs-letter-spacing-normal);
807
+ --bs-text-style-overline-size: var(--bs-font-size-xs);
808
+ --bs-text-style-overline-weight: 500;
809
+ --bs-text-style-overline-line-height: var(--bs-line-height-normal);
810
+ --bs-text-style-overline-letter-spacing: var(--bs-letter-spacing-widest);
811
+ --bs-text-style-data-size: var(--bs-font-size-sm);
812
+ --bs-text-style-data-weight: 500;
813
+ --bs-text-style-data-line-height: var(--bs-line-height-tight);
814
+ --bs-text-style-data-letter-spacing: var(--bs-letter-spacing-normal);
815
+ --bs-text-style-data-dense-size: var(--bs-font-size-2xs);
816
+ --bs-text-style-data-dense-weight: 400;
817
+ --bs-text-style-data-dense-line-height: var(--bs-line-height-tight);
818
+ --bs-text-style-data-dense-letter-spacing: var(--bs-letter-spacing-normal);
819
+ --bs-typography-font-family-heading: Roboto;
820
+ --bs-typography-font-family-body: Roboto;
821
+ --bs-typography-font-weight-thin: thin;
822
+ --bs-typography-font-weight-regular: regular;
823
+ --bs-typography-font-weight-medium: medium;
824
+ --bs-typography-font-weight-semibold: semibold;
825
+ --bs-typography-font-weight-bold: bold;
826
+ --bs-typography-font-weight-black: black;
827
+ --bs-scale-0: 0px;
828
+ --bs-scale-10: 1px;
829
+ --bs-scale-25: 2px;
830
+ --bs-scale-50: 4px;
831
+ --bs-scale-75: 6px;
832
+ --bs-scale-100: 8px;
833
+ --bs-scale-150: 12px;
834
+ --bs-scale-200: 16px;
835
+ --bs-scale-250: 20px;
836
+ --bs-scale-300: 24px;
837
+ --bs-scale-350: 28px;
838
+ --bs-scale-400: 32px;
839
+ --bs-scale-500: 40px;
840
+ --bs-scale-550: 44px;
841
+ --bs-scale-600: 48px;
842
+ --bs-scale-700: 56px;
843
+ --bs-scale-800: 64px;
844
+ --bs-scale-1000: 80px;
845
+ --bs-scale-1200: 96px;
846
+ --bs-scale-1500: 120px;
847
+ --bs-scale-1600: 128px;
848
+ --bs-scale-3200: 256px;
849
+ --bs-scale-6400: 512px;
850
+ --bs-scale--600: -48px;
851
+ --bs-scale--500: -40px;
852
+ --bs-scale--350: -28px;
853
+ --bs-scale--200: -16px;
854
+ --bs-scale--150: -12px;
855
+ --bs-scale--100: -8px;
856
+ --bs-white: #ffffff;
857
+ --bs-black: #000000;
858
+ --bs-brand-colors-purple-50: #f3effb;
859
+ --bs-brand-colors-purple-100: #e5dffd;
860
+ --bs-brand-colors-purple-200: #c8c0ff;
861
+ --bs-brand-colors-purple-300: #a49aff;
862
+ --bs-brand-colors-purple-400: #8676fe;
863
+ --bs-brand-colors-purple-500: #715afc;
864
+ --bs-brand-colors-purple-600: #5e47e6;
865
+ --bs-brand-colors-purple-700: #4b35c9;
866
+ --bs-brand-colors-purple-800: #3720a1;
867
+ --bs-brand-colors-purple-900: #220f73;
868
+ --bs-brand-colors-purple-950: #201463;
869
+ --bs-brand-colors-cobalt-50: #f1effa;
870
+ --bs-brand-colors-cobalt-100: #e0e0fd;
871
+ --bs-brand-colors-cobalt-200: #bcc2ff;
872
+ --bs-brand-colors-cobalt-300: #939eff;
873
+ --bs-brand-colors-cobalt-400: #6d7cff;
874
+ --bs-brand-colors-cobalt-500: #4f63ff;
875
+ --bs-brand-colors-cobalt-600: #3b4ee9;
876
+ --bs-brand-colors-cobalt-700: #303ecd;
877
+ --bs-brand-colors-cobalt-800: #1928a5;
878
+ --bs-brand-colors-cobalt-900: #091675;
879
+ --bs-brand-colors-cobalt-950: #050d5d;
880
+ --bs-brand-colors-blue-50: #eef0fa;
881
+ --bs-brand-colors-blue-100: #d8e3fc;
882
+ --bs-brand-colors-blue-200: #aec7f8;
883
+ --bs-brand-colors-blue-300: #7aa6f2;
884
+ --bs-brand-colors-blue-400: #3e88ef;
885
+ --bs-brand-colors-blue-500: #0073e1;
886
+ --bs-brand-colors-blue-600: #0062c1;
887
+ --bs-brand-colors-blue-700: #0051a2;
888
+ --bs-brand-colors-blue-800: #003a78;
889
+ --bs-brand-colors-blue-900: #002550;
890
+ --bs-brand-colors-blue-950: #001b3e;
891
+ --bs-brand-colors-green-50: #ecf2ea;
892
+ --bs-brand-colors-green-100: #d0e9d2;
893
+ --bs-brand-colors-green-200: #9fd3a9;
894
+ --bs-brand-colors-green-300: #78b385;
895
+ --bs-brand-colors-green-400: #469961;
896
+ --bs-brand-colors-green-500: #23834a;
897
+ --bs-brand-colors-green-600: #2a7043;
898
+ --bs-brand-colors-green-700: #295c3a;
899
+ --bs-brand-colors-green-800: #21422a;
900
+ --bs-brand-colors-green-900: #112b19;
901
+ --bs-brand-colors-green-950: #0b2011;
902
+ --bs-brand-colors-lime-50: #f0f2e7;
903
+ --bs-brand-colors-lime-100: #d7e8c6;
904
+ --bs-brand-colors-lime-200: #add18f;
905
+ --bs-brand-colors-lime-300: #81b45c;
906
+ --bs-brand-colors-lime-400: #64963f;
907
+ --bs-brand-colors-lime-500: #478019;
908
+ --bs-brand-colors-lime-600: #406f1d;
909
+ --bs-brand-colors-lime-700: #385b1e;
910
+ --bs-brand-colors-lime-800: #2a4218;
911
+ --bs-brand-colors-lime-900: #182a0c;
912
+ --bs-brand-colors-lime-950: #121f09;
913
+ --bs-brand-colors-yellow-50: #faf1db;
914
+ --bs-brand-colors-yellow-100: #f9e28a;
915
+ --bs-brand-colors-yellow-200: #e3c437;
916
+ --bs-brand-colors-yellow-300: #c0a300;
917
+ --bs-brand-colors-yellow-400: #a18800;
918
+ --bs-brand-colors-yellow-500: #887200;
919
+ --bs-brand-colors-yellow-600: #746202;
920
+ --bs-brand-colors-yellow-700: #615102;
921
+ --bs-brand-colors-yellow-800: #463a01;
922
+ --bs-brand-colors-yellow-900: #2e2500;
923
+ --bs-brand-colors-yellow-950: #221b00;
924
+ --bs-brand-colors-amber-50: #fceee0;
925
+ --bs-brand-colors-amber-100: #f8dfbf;
926
+ --bs-brand-colors-amber-200: #f1be71;
927
+ --bs-brand-colors-amber-300: #d19c46;
928
+ --bs-brand-colors-amber-400: #b47f1e;
929
+ --bs-brand-colors-amber-500: #996805;
930
+ --bs-brand-colors-amber-600: #875b04;
931
+ --bs-brand-colors-amber-700: #6f4b02;
932
+ --bs-brand-colors-amber-800: #513601;
933
+ --bs-brand-colors-amber-900: #352201;
934
+ --bs-brand-colors-amber-950: #291900;
935
+ --bs-brand-colors-orange-50: #faeee9;
936
+ --bs-brand-colors-orange-100: #f9ddd0;
937
+ --bs-brand-colors-orange-200: #f7b997;
938
+ --bs-brand-colors-orange-300: #f08c50;
939
+ --bs-brand-colors-orange-400: #d26d2b;
940
+ --bs-brand-colors-orange-500: #ba5400;
941
+ --bs-brand-colors-orange-600: #a24907;
942
+ --bs-brand-colors-orange-700: #873d07;
943
+ --bs-brand-colors-orange-800: #642c04;
944
+ --bs-brand-colors-orange-900: #411b02;
945
+ --bs-brand-colors-orange-950: #301302;
946
+ --bs-brand-colors-magenta-50: #fbeeef;
947
+ --bs-brand-colors-magenta-100: #ffd7e0;
948
+ --bs-brand-colors-magenta-200: #ffb1c7;
949
+ --bs-brand-colors-magenta-300: #ff7aa7;
950
+ --bs-brand-colors-magenta-400: #ea4f8b;
951
+ --bs-brand-colors-magenta-500: #d12e75;
952
+ --bs-brand-colors-magenta-600: #b62965;
953
+ --bs-brand-colors-magenta-700: #9a1f53;
954
+ --bs-brand-colors-magenta-800: #71163c;
955
+ --bs-brand-colors-magenta-900: #4a0d27;
956
+ --bs-brand-colors-magenta-950: #38091c;
957
+ --bs-brand-colors-maroon-50: #f9eef3;
958
+ --bs-brand-colors-maroon-100: #f6dbef;
959
+ --bs-brand-colors-maroon-200: #eab6e3;
960
+ --bs-brand-colors-maroon-300: #d88cd1;
961
+ --bs-brand-colors-maroon-400: #c465c0;
962
+ --bs-brand-colors-maroon-500: #b14bb0;
963
+ --bs-brand-colors-maroon-600: #983f98;
964
+ --bs-brand-colors-maroon-700: #7f347e;
965
+ --bs-brand-colors-maroon-800: #5e245d;
966
+ --bs-brand-colors-maroon-900: #3e163d;
967
+ --bs-brand-colors-maroon-950: #2c122b;
968
+ --bs-brand-colors-violet-50: #f9eefe;
969
+ --bs-brand-colors-violet-100: #eedcfd;
970
+ --bs-brand-colors-violet-200: #d8b8fd;
971
+ --bs-brand-colors-violet-300: #be92f4;
972
+ --bs-brand-colors-violet-400: #a372dd;
973
+ --bs-brand-colors-violet-500: #8f5ace;
974
+ --bs-brand-colors-violet-600: #7750a8;
975
+ --bs-brand-colors-violet-700: #64428d;
976
+ --bs-brand-colors-violet-800: #492e6a;
977
+ --bs-brand-colors-violet-900: #311b4b;
978
+ --bs-brand-colors-violet-950: #241338;
979
+ --bs-light-mode-0: rgba(0, 0, 0, 0);
980
+ --bs-light-mode-100: rgba(0, 0, 0, 0.05);
981
+ --bs-light-mode-200: rgba(0, 0, 0, 0.08);
982
+ --bs-light-mode-300: rgba(0, 0, 0, 0.1);
983
+ --bs-light-mode-400: rgba(0, 0, 0, 0.12);
984
+ --bs-light-mode-500: rgba(0, 0, 0, 0.14);
985
+ --bs-light-mode-600: rgba(0, 1, 2, 0.1);
986
+ --bs-light-mode-700: rgba(28, 133, 255, 0.4);
987
+ --bs-dark-mode-0: rgba(0, 0, 0, 0);
988
+ --bs-dark-mode-100: rgba(0, 0, 0, 0.4);
989
+ --bs-dark-mode-200: rgba(0, 0, 0, 0.35);
990
+ --bs-dark-mode-300: rgba(0, 0, 0, 0.3);
991
+ --bs-dark-mode-400: rgba(0, 0, 0, 0.25);
992
+ --bs-dark-mode-500: rgba(0, 0, 0, 0.2);
993
+ --bs-dark-mode-600: rgba(0, 1, 2, 0.05);
994
+ --bs-dark-mode-700: rgba(28, 133, 255, 0.05);
995
+ --bs-alpha-5: rgba(0, 0, 0, 0);
996
+ --bs-alpha-10: rgba(0, 0, 0, 0);
997
+ --bs-alpha-20: rgba(0, 0, 0, 0);
998
+ --bs-alpha-30: rgba(0, 0, 0, 0);
999
+ --bs-alpha-40: rgba(0, 0, 0, 0);
1000
+ --bs-alpha-50: rgba(0, 0, 0, 0);
1001
+ --bs-alpha-60: rgba(0, 0, 0, 0.01);
1002
+ --bs-alpha-70: rgba(0, 0, 0, 0.01);
1003
+ --bs-alpha-80: rgba(0, 0, 0, 0.01);
1004
+ --bs-alpha-90: rgba(0, 0, 0, 0.01);
1005
+ --bs-alpha-100: rgba(0, 0, 0, 0.01);
1006
+ --bs-fontsize-display-display1: 80px;
1007
+ --bs-fontsize-display-display2: 72px;
1008
+ --bs-fontsize-display-display3: 60px;
1009
+ --bs-fontsize-display-display4: 56px;
1010
+ --bs-fontsize-display-display5: 48px;
1011
+ --bs-fontsize-display-display6: 40px;
1012
+ --bs-fontsize-display-display7: 32px;
1013
+ --bs-fontsize-heading-h1: 48px;
1014
+ --bs-fontsize-heading-h2: 40px;
1015
+ --bs-fontsize-heading-h3: 32px;
1016
+ --bs-fontsize-heading-h4: 24px;
1017
+ --bs-fontsize-heading-h5: 20px;
1018
+ --bs-fontsize-heading-h6: 16px;
1019
+ --bs-fontsize-body-lg: 20px;
1020
+ --bs-fontsize-body-md: 16px;
1021
+ --bs-fontsize-body-sm: 14px;
1022
+ --bs-fontsize-caption-lg: 16px;
1023
+ --bs-fontsize-caption-md: 14px;
1024
+ --bs-fontsize-caption-sm: 12px;
1025
+ --bs-line-height-display-display1: 96;
1026
+ --bs-line-height-display-display2: 88;
1027
+ --bs-line-height-display-display3: 72;
1028
+ --bs-line-height-display-display4: 64;
1029
+ --bs-line-height-display-display5: 56;
1030
+ --bs-line-height-display-display6: 48;
1031
+ --bs-line-height-display-display7: 40;
1032
+ --bs-line-height-heading-h1: 56;
1033
+ --bs-line-height-heading-h2: 48;
1034
+ --bs-line-height-heading-h3: 40;
1035
+ --bs-line-height-heading-h4: 32;
1036
+ --bs-line-height-heading-h5: 24;
1037
+ --bs-line-height-heading-h6: 20;
1038
+ --bs-line-height-body-lg: 28;
1039
+ --bs-line-height-body-md: 24;
1040
+ --bs-line-height-body-sm: 20;
1041
+ --bs-line-height-caption-lg: 24;
1042
+ --bs-line-height-caption-md: 20;
1043
+ --bs-line-height-caption-sm: 16;
1044
+ --bs-paragraph-spacing-display-display1: 40;
1045
+ --bs-paragraph-spacing-display-display2: 36;
1046
+ --bs-paragraph-spacing-display-display3: 30;
1047
+ --bs-paragraph-spacing-display-display4: 28;
1048
+ --bs-paragraph-spacing-display-display5: 24;
1049
+ --bs-paragraph-spacing-display-display6: 20;
1050
+ --bs-paragraph-spacing-display-display7: 16;
1051
+ --bs-paragraph-spacing-heading-h1: 24;
1052
+ --bs-paragraph-spacing-heading-h2: 20;
1053
+ --bs-paragraph-spacing-heading-h3: 16;
1054
+ --bs-paragraph-spacing-heading-h4: 12;
1055
+ --bs-paragraph-spacing-heading-h5: 10;
1056
+ --bs-paragraph-spacing-heading-h6: 8;
1057
+ --bs-paragraph-spacing-body-lg: 10;
1058
+ --bs-paragraph-spacing-body-md: 8;
1059
+ --bs-paragraph-spacing-body-sm: 8;
1060
+ --bs-paragraph-spacing-caption-lg: 8;
1061
+ --bs-paragraph-spacing-caption-md: 8;
1062
+ --bs-paragraph-spacing-caption-sm: 6;
1063
+ --bs-margin-fluid: var(--bs-scale-300);
1064
+ --bs-margin-with-navigation-drawer: var(--bs-scale-300);
1065
+ --bs-gutter-gutter: var(--bs-scale-300);
1066
+ --bs-layout-columns-columns: 12rem;
1067
+ --bs-breakpoints-max-width: 1920rem;
1068
+ --bs-breakpoints-min-width: 1024rem;
1069
+ --bs-navigation-header-hamburger-menu: false;
1070
+ --bs-navigation-header-logo: true;
1071
+ --bs-navigation-header-left-menu: true;
1072
+ --bs-navigation-header-page-label: false;
1073
+ --bs-navigation-header-gap: 40;
1074
+ --bs-brand-50: var(--bs-brand-colors-blue-50);
1075
+ --bs-brand-100: var(--bs-brand-colors-blue-100);
1076
+ --bs-brand-200: var(--bs-brand-colors-blue-200);
1077
+ --bs-brand-300: var(--bs-brand-colors-blue-300);
1078
+ --bs-brand-400: var(--bs-brand-colors-blue-400);
1079
+ --bs-brand-500: var(--bs-brand-colors-blue-500);
1080
+ --bs-brand-600: var(--bs-brand-colors-blue-600);
1081
+ --bs-brand-700: var(--bs-brand-colors-blue-700);
1082
+ --bs-brand-800: var(--bs-brand-colors-blue-800);
1083
+ --bs-brand-900: var(--bs-brand-colors-blue-900);
1084
+ --bs-brand-950: var(--bs-brand-colors-blue-950);
1085
+ --bs-label: Label;
1086
+ --bs-border-width-0: var(--bs-scale-0);
1087
+ --bs-border-width-thin: var(--bs-scale-10);
1088
+ --bs-border-width-medium: var(--bs-scale-25);
1089
+ --bs-border-width-thick: var(--bs-scale-50);
1090
+ --bs-border-radius-0: var(--bs-scale-0);
1091
+ --bs-border-radius-50: var(--bs-scale-50);
1092
+ --bs-border-radius-75: var(--bs-scale-75);
1093
+ --bs-border-radius-100: var(--bs-scale-100);
1094
+ --bs-border-radius-150: var(--bs-scale-150);
1095
+ --bs-border-radius-200: var(--bs-scale-200);
1096
+ --bs-border-radius-300: var(--bs-scale-300);
1097
+ --bs-border-radius-full: var(--bs-scale-1500);
1098
+ --bs-sizing-75: var(--bs-scale-75);
1099
+ --bs-sizing-100: var(--bs-scale-100);
1100
+ --bs-sizing-200: var(--bs-scale-200);
1101
+ --bs-sizing-250: var(--bs-scale-250);
1102
+ --bs-sizing-300: var(--bs-scale-300);
1103
+ --bs-sizing-400: var(--bs-scale-400);
1104
+ --bs-sizing-500: var(--bs-scale-500);
1105
+ --bs-sizing-600: var(--bs-scale-600);
1106
+ --bs-sizing-700: var(--bs-scale-700);
1107
+ --bs-sizing-800: var(--bs-scale-800);
1108
+ --bs-sizing-1000: var(--bs-scale-1000);
1109
+ --bs-sizing-1200: var(--bs-scale-1200);
1110
+ --bs-sizing-1600: var(--bs-scale-1600);
1111
+ --bs-sizing-3200: var(--bs-scale-3200);
1112
+ --bs-sizing-6400: var(--bs-scale-6400);
1113
+ }
1114
+
1115
+ [data-theme="dark"] {
1116
+
1117
+ /* Primary Colors - Dark Mode */
1118
+ --bs-color-primary-default: var(--bs-brand-400);
1119
+ --bs-color-primary-hover: var(--bs-brand-300);
1120
+ --bs-color-primary-focused: var(--bs-brand-300);
1121
+ --bs-color-primary-pressed: var(--bs-brand-200);
1122
+ --bs-color-primary-container: var(--bs-brand-950);
1123
+ --bs-color-primary-container-hover: var(--bs-brand-900);
1124
+
1125
+ /* Neutral Colors - Dark Mode */
1126
+ --bs-color-neutral-default: var(--bs-neutral-300);
1127
+ --bs-color-neutral-hover: var(--bs-neutral-200);
1128
+ --bs-color-neutral-focused: var(--bs-neutral-200);
1129
+ --bs-color-neutral-pressed: var(--bs-neutral-50);
1130
+ --bs-color-neutral-container: var(--bs-neutral-900);
1131
+ --bs-color-neutral-container-hover: var(--bs-neutral-800);
1132
+ --bs-color-neutral-container-focused: var(--bs-neutral-800);
1133
+ --bs-color-neutral-container-pressed: var(--bs-neutral-700);
1134
+
1135
+ /* Accent Colors - Dark Mode */
1136
+ --bs-color-accent-default: var(--bs-brand-colors-magenta-400);
1137
+ --bs-color-accent-hover: var(--bs-brand-colors-magenta-300);
1138
+ --bs-color-accent-active: var(--bs-brand-colors-magenta-200);
1139
+ --bs-color-accent-container: var(--bs-brand-colors-magenta-700);
1140
+
1141
+ /* Success Colors - Dark Mode */
1142
+ --bs-color-success-default: var(--bs-success-400);
1143
+ --bs-color-success-hover: var(--bs-success-300);
1144
+ --bs-color-success-focused: var(--bs-success-300);
1145
+ --bs-color-success-pressed: var(--bs-success-200);
1146
+ --bs-color-success-container: var(--bs-success-800);
1147
+
1148
+ /* Warning Colors - Dark Mode */
1149
+ --bs-color-warning-default: var(--bs-warning-400);
1150
+ --bs-color-warning-hover: var(--bs-warning-300);
1151
+ --bs-color-warning-focused: var(--bs-warning-300);
1152
+ --bs-color-warning-pressed: var(--bs-warning-200);
1153
+ --bs-color-warning-container: var(--bs-warning-800);
1154
+
1155
+ /* Error Colors - Dark Mode */
1156
+ --bs-color-error-default: var(--bs-error-400);
1157
+ --bs-color-error-hover: var(--bs-error-300);
1158
+ --bs-color-error-focused: var(--bs-error-300);
1159
+ --bs-color-error-pressed: var(--bs-error-200);
1160
+ --bs-color-error-container: var(--bs-error-950);
1161
+
1162
+ /* Info Colors - Dark Mode */
1163
+ --bs-color-info-default: var(--bs-information-400);
1164
+ --bs-color-info-hover: var(--bs-information-300);
1165
+ --bs-color-info-focused: var(--bs-information-300);
1166
+ --bs-color-info-pressed: var(--bs-information-200);
1167
+ --bs-color-info-container: var(--bs-information-800);
1168
+
1169
+ /* Text Colors - Dark Mode */
1170
+ --bs-text-static-white: var(--bs-white);
1171
+ --bs-text-static-black: var(--bs-black);
1172
+ --bs-text-default: var(--bs-white);
1173
+ --bs-text-secondary: var(--bs-neutral-200);
1174
+ --bs-text-muted: var(--bs-neutral-300);
1175
+ --bs-text-inverse: var(--bs-static-black);
1176
+ --bs-text-link: var(--bs-information-400);
1177
+ --bs-text-action: var(--bs-brand-400);
1178
+ --bs-text-action-hover: var(--bs-brand-500);
1179
+ --bs-text-success: var(--bs-success-300);
1180
+ --bs-text-info: var(--bs-information-300);
1181
+ --bs-text-warning: var(--bs-warning-300);
1182
+ --bs-text-error: var(--bs-error-300);
1183
+ --bs-text-on-action: var(--bs-black);
1184
+ --bs-text-on-disabled: var(--bs-neutral-600);
1185
+ --bs-text-accent: var(--bs-brand-colors-purple-400);
1186
+ --bs-text-inverse-accent: var(--bs-brand-colors-purple-600);
1187
+ --bs-text-neutral---default: var(--bs-neutral-300);
1188
+ --bs-text-neutral---hover: var(--bs-neutral-200);
1189
+ --bs-text-neutral---focused: var(--bs-neutral-200);
1190
+ --bs-text-neutral---pressed: var(--bs-neutral-50);
1191
+ --bs-text-neutral-default: var(--bs-neutral-300);
1192
+ --bs-text-neutral-hover: var(--bs-neutral-200);
1193
+ --bs-text-neutral-focused: var(--bs-neutral-200);
1194
+ --bs-text-neutral-pressed: var(--bs-neutral-50);
1195
+
1196
+ /* Surface Colors - Dark Mode */
1197
+ --bs-surface-base: var(--bs-neutral-950);
1198
+ --bs-surface-raised: var(--bs-neutral-900);
1199
+ --bs-surface-container: var(--bs-neutral-900);
1200
+ --bs-surface-hover: var(--bs-neutral-800);
1201
+ --bs-surface-focus: var(--bs-neutral-800);
1202
+ --bs-surface-pressed: var(--bs-neutral-600);
1203
+ --bs-surface-selected: var(--bs-neutral-700);
1204
+ --bs-surface-selected-hover: var(--bs-neutral-700);
1205
+ --bs-surface-selected-focus: var(--bs-neutral-700);
1206
+ --bs-surface-selected-pressed: var(--bs-neutral-600);
1207
+ --bs-surface-active: var(--bs-neutral-600);
1208
+ --bs-surface-action: var(--bs-color-primary-default);
1209
+ --bs-surface-inset: var(--bs-neutral-900);
1210
+ --bs-surface-inverse: var(--bs-neutral-50-transparent);
1211
+ --bs-surface-accent: var(--bs-gray-transparent-2);
1212
+ --bs-surface-on-action: var(--bs-gray-900);
1213
+ --bs-surface-on-action-disabled: var(--bs-neutral-600);
1214
+ --bs-surface-action-disabled: var(--bs-neutral-900);
1215
+ --bs-surface-success: var(--bs-success-600);
1216
+ --bs-surface-info: var(--bs-information-600);
1217
+ --bs-surface-warning: var(--bs-warning-600);
1218
+ --bs-surface-error: var(--bs-error-600);
1219
+ --bs-surface-overlay: var(--bs-neutral-500-transparent-2);
1220
+ --bs-surface-overlay-level-2: var(--bs-neutral-500-transparent);
1221
+
1222
+ /* Icon Colors - Dark Mode */
1223
+ --bs-icon-static-white: var(--bs-white);
1224
+ --bs-icon-static-black: var(--bs-black);
1225
+ --bs-icon-default: var(--bs-neutral-25);
1226
+ --bs-icon-muted: var(--bs-neutral-400);
1227
+ --bs-icon-disabled: var(--bs-neutral-600);
1228
+ --bs-icon-inverse: var(--bs-static-black);
1229
+ --bs-icon-action: var(--bs-brand-400);
1230
+ --bs-icon-action-hover: var(--bs-brand-300);
1231
+ --bs-icon-success: var(--bs-success-400);
1232
+ --bs-icon-info: var(--bs-information-300);
1233
+ --bs-icon-warning: var(--bs-warning-300);
1234
+ --bs-icon-error: var(--bs-error-300);
1235
+ --bs-icon-neutral-default: var(--bs-neutral-300);
1236
+ --bs-icon-neutral-hover: var(--bs-neutral-200);
1237
+ --bs-icon-neutral-focused: var(--bs-neutral-200);
1238
+ --bs-icon-neutral-pressed: var(--bs-neutral-50);
1239
+
1240
+ /* Border Colors - Dark Mode */
1241
+ --bs-border-default: var(--bs-neutral-800);
1242
+ --bs-border-neutral-hover: var(--bs-neutral-300);
1243
+ --bs-border-neutral-focus: var(--bs-brand-400);
1244
+ --bs-border-neutral-active: var(--bs-neutral-500);
1245
+ --bs-border-neutral-disabled: var(--bs-neutral-700);
1246
+ --bs-border-neutral-container: var(--bs-neutral-700);
1247
+ --bs-border-neutral-container-hover: var(--bs-neutral-500);
1248
+ --bs-border-neutral-container-focused: var(--bs-neutral-500);
1249
+ --bs-border-neutral-container-pressed: var(--bs-neutral-300);
1250
+ --bs-border-success: var(--bs-success-400);
1251
+ --bs-border-success-hover: var(--bs-success-300);
1252
+ --bs-border-success-focus: var(--bs-success-200);
1253
+ --bs-border-warning: var(--bs-warning-400);
1254
+ --bs-border-warning-hover: var(--bs-warning-300);
1255
+ --bs-border-warning-focus: var(--bs-warning-300);
1256
+ --bs-border-error: var(--bs-error-300);
1257
+ --bs-border-error-hover: var(--bs-error-200);
1258
+ --bs-border-error-focus: var(--bs-error-50);
1259
+ --bs-border-info: var(--bs-information-400);
1260
+ --bs-border-info-hover: var(--bs-information-600);
1261
+ --bs-border-info-focus: var(--bs-information-200);
1262
+ --bs-border-primary: var(--bs-brand-400);
1263
+ --bs-border-primary-hover: var(--bs-brand-300);
1264
+ --bs-border-primary-focus: var(--bs-brand-300);
1265
+ --bs-border-primary-pressed: var(--bs-brand-200);
1266
+
1267
+ /* Elevation Colors - Dark Mode */
1268
+ --bs-elevation-none: var(--bs-dark-mode-0);
1269
+ --bs-elevation-low: var(--bs-dark-mode-100);
1270
+ --bs-elevation-medium: var(--bs-dark-mode-200);
1271
+ --bs-elevation-high: var(--bs-dark-mode-300);
1272
+ --bs-elevation-higher: var(--bs-dark-mode-400);
1273
+ --bs-elevation-highest: var(--bs-dark-mode-500);
1274
+ --bs-elevation-inner: var(--bs-dark-mode-600);
1275
+ --bs-elevation-focus: var(--bs-dark-mode-700);
1276
+
1277
+ --bs-label: Label;
1278
+ --bs-border-width-0: var(--bs-scale-0);
1279
+ --bs-border-width-thin: var(--bs-scale-10);
1280
+ --bs-border-width-medium: var(--bs-scale-25);
1281
+ --bs-border-width-thick: var(--bs-scale-50);
1282
+ --bs-border-radius-0: var(--bs-scale-0);
1283
+ --bs-border-radius-50: var(--bs-scale-50);
1284
+ --bs-border-radius-75: var(--bs-scale-75);
1285
+ --bs-border-radius-100: var(--bs-scale-100);
1286
+ --bs-border-radius-150: var(--bs-scale-150);
1287
+ --bs-border-radius-200: var(--bs-scale-200);
1288
+ --bs-border-radius-300: var(--bs-scale-300);
1289
+ --bs-border-radius-full: var(--bs-scale-1500);
1290
+ --bs-spacing-0: var(--bs-scale-0);
1291
+ --bs-spacing-25: var(--bs-scale-25);
1292
+ --bs-spacing-50: var(--bs-scale-50);
1293
+ --bs-spacing-75: var(--bs-scale-75);
1294
+ --bs-spacing-100: var(--bs-scale-100);
1295
+ --bs-spacing-150: var(--bs-scale-150);
1296
+ --bs-spacing-200: var(--bs-scale-200);
1297
+ --bs-spacing-250: var(--bs-scale-250);
1298
+ --bs-spacing-300: var(--bs-scale-300);
1299
+ --bs-spacing-350: var(--bs-scale-350);
1300
+ --bs-spacing-400: var(--bs-scale-400);
1301
+ --bs-spacing-500: var(--bs-scale-500);
1302
+ --bs-spacing-550: var(--bs-scale-550);
1303
+ --bs-spacing-600: var(--bs-scale-600);
1304
+ --bs-spacing-700: var(--bs-scale-700);
1305
+ --bs-spacing-800: var(--bs-scale-800);
1306
+ --bs-spacing-1000: var(--bs-scale-1000);
1307
+ --bs-spacing-1200: var(--bs-scale-1200);
1308
+ --bs-spacing-1500: var(--bs-scale-1500);
1309
+ --bs-spacing--600: var(--bs-scale--600);
1310
+ --bs-spacing--500: var(--bs-scale--500);
1311
+ --bs-spacing--350: var(--bs-scale--350);
1312
+ --bs-spacing--200: var(--bs-scale--200);
1313
+ --bs-spacing--150: var(--bs-scale--150);
1314
+ --bs-spacing--100: var(--bs-scale--100);
1315
+ --bs-sizing-75: var(--bs-scale-75);
1316
+ --bs-sizing-100: var(--bs-scale-100);
1317
+ --bs-sizing-200: var(--bs-scale-200);
1318
+ --bs-sizing-250: var(--bs-scale-250);
1319
+ --bs-sizing-300: var(--bs-scale-300);
1320
+ --bs-sizing-400: var(--bs-scale-400);
1321
+ --bs-sizing-500: var(--bs-scale-500);
1322
+ --bs-sizing-600: var(--bs-scale-600);
1323
+ --bs-sizing-700: var(--bs-scale-700);
1324
+ --bs-sizing-800: var(--bs-scale-800);
1325
+ --bs-sizing-1000: var(--bs-scale-1000);
1326
+ --bs-sizing-1200: var(--bs-scale-1200);
1327
+ --bs-sizing-1600: var(--bs-scale-1600);
1328
+ --bs-sizing-3200: var(--bs-scale-3200);
1329
+ --bs-sizing-6400: var(--bs-scale-6400);
1330
+ }
1331
+
1332
+ /* Reduced Motion */
1333
+ @media (prefers-reduced-motion: reduce) {
1334
+ :root {
1335
+ --bs-duration-instant: 0ms;
1336
+ --bs-duration-fast: 0ms;
1337
+ --bs-duration-default: 0ms;
1338
+ --bs-duration-slow: 0ms;
1339
+ --bs-duration-slower: 0ms;
1340
+ }
1143
1341
  }