@bspk/ui 1.3.30 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/build.ts +1 -2
  2. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.d.ts +11 -0
  3. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.js +14 -0
  4. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.js.map +1 -0
  5. package/dist/components/StylesProviderAgentWorkplace/index.d.ts +1 -0
  6. package/dist/components/StylesProviderAgentWorkplace/index.js +2 -0
  7. package/dist/components/StylesProviderAgentWorkplace/index.js.map +1 -0
  8. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.d.ts +11 -0
  9. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.js +14 -0
  10. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.js.map +1 -0
  11. package/dist/components/StylesProviderBrokerWorkplace/index.d.ts +1 -0
  12. package/dist/components/StylesProviderBrokerWorkplace/index.js +2 -0
  13. package/dist/components/StylesProviderBrokerWorkplace/index.js.map +1 -0
  14. package/dist/components/StylesProviderDemo/brandsCss.js +10 -9
  15. package/dist/components/StylesProviderDemo/brandsCss.js.map +1 -1
  16. package/dist/components/StylesProviderDemo/exampleCss.js +5 -5
  17. package/dist/components/StylesProviderDemo/exampleCss.js.map +1 -1
  18. package/dist/components/Table/Table.js +1 -1
  19. package/dist/components/Table/Table.js.map +1 -1
  20. package/dist/styles/agent-workplace.css +1800 -0
  21. package/dist/styles/{denali-boss.css.js → agent-workplace.css.js} +770 -849
  22. package/dist/styles/anywhere.css +687 -766
  23. package/dist/styles/anywhere.css.js +687 -766
  24. package/dist/styles/better-homes-gardens.css +579 -826
  25. package/dist/styles/better-homes-gardens.css.js +579 -826
  26. package/dist/styles/broker-workplace.css +1800 -0
  27. package/dist/styles/broker-workplace.css.js +1805 -0
  28. package/dist/styles/cartus.css +674 -765
  29. package/dist/styles/cartus.css.js +674 -765
  30. package/dist/styles/century-21.css +679 -766
  31. package/dist/styles/century-21.css.js +679 -766
  32. package/dist/styles/coldwell-banker.css +671 -762
  33. package/dist/styles/coldwell-banker.css.js +671 -762
  34. package/dist/styles/corcoran.css +663 -758
  35. package/dist/styles/corcoran.css.js +663 -758
  36. package/dist/styles/era.css +677 -766
  37. package/dist/styles/era.css.js +677 -766
  38. package/dist/styles/example.css +1898 -0
  39. package/dist/styles/example.css.js +1903 -0
  40. package/dist/styles/sothebys.css +670 -759
  41. package/dist/styles/sothebys.css.js +670 -759
  42. package/dist/types/common.d.ts +2 -1
  43. package/dist/types/common.js.map +1 -1
  44. package/package.json +7 -47
  45. package/src/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.tsx +15 -0
  46. package/src/components/StylesProviderAgentWorkplace/index.tsx +1 -0
  47. package/src/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.tsx +15 -0
  48. package/src/components/StylesProviderBrokerWorkplace/index.tsx +1 -0
  49. package/src/components/StylesProviderDemo/brandsCss.ts +13 -10
  50. package/src/components/StylesProviderDemo/exampleCss.ts +5 -5
  51. package/src/components/Table/Table.tsx +1 -1
  52. package/{dist/styles/denali-boss.css → src/styles/example.css} +401 -384
  53. package/src/types/common.ts +2 -10
  54. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.d.ts +0 -11
  55. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js +0 -14
  56. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js.map +0 -1
  57. package/dist/components/StylesProviderDenaliBoss/index.d.ts +0 -1
  58. package/dist/components/StylesProviderDenaliBoss/index.js +0 -2
  59. package/dist/components/StylesProviderDenaliBoss/index.js.map +0 -1
  60. package/dist/constants/brands.d.ts +0 -7
  61. package/dist/constants/brands.js +0 -43
  62. package/dist/constants/brands.js.map +0 -1
  63. package/src/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.tsx +0 -15
  64. package/src/components/StylesProviderDenaliBoss/index.tsx +0 -1
  65. package/src/constants/brands.ts +0 -49
package/dist/styles/broker-workplace.css.js ADDED
@@ -0,0 +1,1805 @@
1
+ /** * This file is generated by the build script.
2
+ * Do not edit this file directly. */
3
+ const style = document.createElement('style');
4
+ style.appendChild(document.createTextNode(`/* Generated from figma export: 2026-02-02T17:54:13.533Z */
5
+
6
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
7
+ body {
8
+ font-family: var(--typeface);
9
+ }
10
+
11
+ :root {
12
+ /* Body/Base */
13
+ --body-base: 400 16px/24px var(--typeface);
14
+ /* Body/Base - line height */
15
+ --body-base-line-height: 24px;
16
+ /* Body/Base - size */
17
+ --body-base-size: 16px;
18
+ /* Body/Base - style */
19
+ --body-base-style: regular;
20
+ /* Body/Large */
21
+ --body-large: 400 18px/28px var(--typeface);
22
+ /* Body/Large - line height */
23
+ --body-large-line-height: 28px;
24
+ /* Body/Large - size */
25
+ --body-large-size: 18px;
26
+ /* Body/Large - style */
27
+ --body-large-style: regular;
28
+ /* Body/Small */
29
+ --body-small: 400 14px/20px var(--typeface);
30
+ /* Body/Small - line height */
31
+ --body-small-line-height: 20px;
32
+ /* Body/Small - size */
33
+ --body-small-size: 14px;
34
+ /* Body/Small - style */
35
+ --body-small-style: regular;
36
+ /* Body/X-Small */
37
+ --body-x-small: 400 12px/16px var(--typeface);
38
+ /* Body/X-Small - line height */
39
+ --body-x-small-line-height: 16px;
40
+ /* Body/X-Small - size */
41
+ --body-x-small-size: 12px;
42
+ /* Body/X-Small - style */
43
+ --body-x-small-style: regular;
44
+ /* Colors/Internal/pink-00-light - Global (primitives) */
45
+ --colors-internal-pink-00-light: #ff4f8d;
46
+ /* Colors/Internal/pink-50-dark - Global (primitives) */
47
+ --colors-internal-pink-50-dark: #802847;
48
+ /* Colors/Neutral/00 - Global (primitives) */
49
+ --colors-neutral-00: #000000;
50
+ /* Colors/Neutral/02 - Global (primitives) */
51
+ --colors-neutral-02: #050505;
52
+ /* Colors/Neutral/04 - Global (primitives) */
53
+ --colors-neutral-04: #0a0a0a;
54
+ /* Colors/Neutral/06 - Global (primitives) */
55
+ --colors-neutral-06: #0f0f0f;
56
+ /* Colors/Neutral/08 - Global (primitives) */
57
+ --colors-neutral-08: #141414;
58
+ /* Colors/Neutral/10 - Global (primitives) */
59
+ --colors-neutral-10: #1a1a1a;
60
+ /* Colors/Neutral/100 - Global (primitives) */
61
+ --colors-neutral-100: #ffffff;
62
+ /* Colors/Neutral/12 - Global (primitives) */
63
+ --colors-neutral-12: #1f1f1f;
64
+ /* Colors/Neutral/14 - Global (primitives) */
65
+ --colors-neutral-14: #242424;
66
+ /* Colors/Neutral/16 - Global (primitives) */
67
+ --colors-neutral-16: #292929;
68
+ /* Colors/Neutral/18 - Global (primitives) */
69
+ --colors-neutral-18: #2e2e2e;
70
+ /* Colors/Neutral/20 - Global (primitives) */
71
+ --colors-neutral-20: #333333;
72
+ /* Colors/Neutral/22 - Global (primitives) */
73
+ --colors-neutral-22: #383838;
74
+ /* Colors/Neutral/24 - Global (primitives) */
75
+ --colors-neutral-24: #3d3d3d;
76
+ /* Colors/Neutral/26 - Global (primitives) */
77
+ --colors-neutral-26: #424242;
78
+ /* Colors/Neutral/28 - Global (primitives) */
79
+ --colors-neutral-28: #474747;
80
+ /* Colors/Neutral/30 - Global (primitives) */
81
+ --colors-neutral-30: #4d4d4d;
82
+ /* Colors/Neutral/32 - Global (primitives) */
83
+ --colors-neutral-32: #525252;
84
+ /* Colors/Neutral/34 - Global (primitives) */
85
+ --colors-neutral-34: #575757;
86
+ /* Colors/Neutral/36 - Global (primitives) */
87
+ --colors-neutral-36: #5c5c5c;
88
+ /* Colors/Neutral/38 - Global (primitives) */
89
+ --colors-neutral-38: #616161;
90
+ /* Colors/Neutral/40 - Global (primitives) */
91
+ --colors-neutral-40: #666666;
92
+ /* Colors/Neutral/42 - Global (primitives) */
93
+ --colors-neutral-42: #6b6b6b;
94
+ /* Colors/Neutral/44 - Global (primitives) */
95
+ --colors-neutral-44: #707070;
96
+ /* Colors/Neutral/46 - Global (primitives) */
97
+ --colors-neutral-46: #757575;
98
+ /* Colors/Neutral/48 - Global (primitives) */
99
+ --colors-neutral-48: #7a7a7a;
100
+ /* Colors/Neutral/50 - Global (primitives) */
101
+ --colors-neutral-50: #808080;
102
+ /* Colors/Neutral/52 - Global (primitives) */
103
+ --colors-neutral-52: #858585;
104
+ /* Colors/Neutral/54 - Global (primitives) */
105
+ --colors-neutral-54: #8a8a8a;
106
+ /* Colors/Neutral/56 - Global (primitives) */
107
+ --colors-neutral-56: #8f8f8f;
108
+ /* Colors/Neutral/58 - Global (primitives) */
109
+ --colors-neutral-58: #949494;
110
+ /* Colors/Neutral/60 - Global (primitives) */
111
+ --colors-neutral-60: #999999;
112
+ /* Colors/Neutral/62 - Global (primitives) */
113
+ --colors-neutral-62: #9e9e9e;
114
+ /* Colors/Neutral/64 - Global (primitives) */
115
+ --colors-neutral-64: #a3a3a3;
116
+ /* Colors/Neutral/66 - Global (primitives) */
117
+ --colors-neutral-66: #a8a8a8;
118
+ /* Colors/Neutral/68 - Global (primitives) */
119
+ --colors-neutral-68: #adadad;
120
+ /* Colors/Neutral/70 - Global (primitives) */
121
+ --colors-neutral-70: #b3b3b3;
122
+ /* Colors/Neutral/72 - Global (primitives) */
123
+ --colors-neutral-72: #b8b8b8;
124
+ /* Colors/Neutral/74 - Global (primitives) */
125
+ --colors-neutral-74: #bdbdbd;
126
+ /* Colors/Neutral/76 - Global (primitives) */
127
+ --colors-neutral-76: #c2c2c2;
128
+ /* Colors/Neutral/78 - Global (primitives) */
129
+ --colors-neutral-78: #c7c7c7;
130
+ /* Colors/Neutral/80 - Global (primitives) */
131
+ --colors-neutral-80: #cccccc;
132
+ /* Colors/Neutral/82 - Global (primitives) */
133
+ --colors-neutral-82: #d1d1d1;
134
+ /* Colors/Neutral/84 - Global (primitives) */
135
+ --colors-neutral-84: #d6d6d6;
136
+ /* Colors/Neutral/86 - Global (primitives) */
137
+ --colors-neutral-86: #dbdbdb;
138
+ /* Colors/Neutral/88 - Global (primitives) */
139
+ --colors-neutral-88: #e0e0e0;
140
+ /* Colors/Neutral/90 - Global (primitives) */
141
+ --colors-neutral-90: #e6e6e6;
142
+ /* Colors/Neutral/92 - Global (primitives) */
143
+ --colors-neutral-92: #ebebeb;
144
+ /* Colors/Neutral/94 - Global (primitives) */
145
+ --colors-neutral-94: #f0f0f0;
146
+ /* Colors/Neutral/96 - Global (primitives) */
147
+ --colors-neutral-96: #f5f5f5;
148
+ /* Colors/Neutral/98 - Global (primitives) */
149
+ --colors-neutral-98: #fafafa;
150
+ /* Colors/Neutral/transparent - Global (primitives) */
151
+ --colors-neutral-transparent: #ffffff00;
152
+ /* Colors/System/AI-gradient/blue - Global (primitives) */
153
+ --colors-system-ai-gradient-blue: #215ecd;
154
+ /* Colors/System/AI-gradient/pink - Global (primitives) */
155
+ --colors-system-ai-gradient-pink: #c60ede;
156
+ /* Colors/System/blue-dark - Global (primitives) */
157
+ --colors-system-blue-dark: #5d92f5;
158
+ /* Colors/System/blue-dark-bg - Global (primitives) */
159
+ --colors-system-blue-dark-bg: #0e2754;
160
+ /* Colors/System/blue-light - Global (primitives) */
161
+ --colors-system-blue-light: #276ef1;
162
+ /* Colors/System/blue-light-bg - Global (primitives) */
163
+ --colors-system-blue-light-bg: #dfe9fd;
164
+ /* Colors/System/green-dark - Global (primitives) */
165
+ --colors-system-green-dark: #519f73;
166
+ /* Colors/System/green-dark-bg - Global (primitives) */
167
+ --colors-system-green-dark-bg: #0d2f1c;
168
+ /* Colors/System/green-light - Global (primitives) */
169
+ --colors-system-green-light: #258750;
170
+ /* Colors/System/green-light-bg - Global (primitives) */
171
+ --colors-system-green-light-bg: #d3e7dc;
172
+ /* Colors/System/Links/00-default-light - Global (primitives) */
173
+ --colors-system-links-00-default-light: #215ecd;
174
+ /* Colors/System/Links/10-hover-light - Global (primitives) */
175
+ --colors-system-links-10-hover-light: #1e55b9;
176
+ /* Colors/System/Links/20-press-light - Global (primitives) */
177
+ --colors-system-links-20-press-light: #1a4ba4;
178
+ /* Colors/System/Links/30-active-dark - Global (primitives) */
179
+ --colors-system-links-30-active-dark: #648edc;
180
+ /* Colors/System/Links/30-active-light - Global (primitives) */
181
+ --colors-system-links-30-active-light: #174290;
182
+ /* Colors/System/Links/40-default-dark - Global (primitives) */
183
+ --colors-system-links-40-default-dark: #7a9ee1;
184
+ /* Colors/System/Links/40-disabled-dark - Global (primitives) */
185
+ --colors-system-links-40-disabled-dark: #14387b;
186
+ /* Colors/System/Links/40-disabled-light - Global (primitives) */
187
+ --colors-system-links-40-disabled-light: #7a9ee1;
188
+ /* Colors/System/Links/50-hover-dark - Global (primitives) */
189
+ --colors-system-links-50-hover-dark: #90afe6;
190
+ /* Colors/System/Links/60-press-dark - Global (primitives) */
191
+ --colors-system-links-60-press-dark: #a6bfeb;
192
+ /* Colors/System/red-dark - Global (primitives) */
193
+ --colors-system-red-dark: #e26b7d;
194
+ /* Colors/System/red-dark-bg - Global (primitives) */
195
+ --colors-system-red-dark-bg: #4c141d;
196
+ /* Colors/System/red-light - Global (primitives) */
197
+ --colors-system-red-light: #d83a52;
198
+ /* Colors/System/red-light-bg - Global (primitives) */
199
+ --colors-system-red-light-bg: #f9e1e9;
200
+ /* Colors/System/Spectrum/Data visual/azure-400 - Global (primitives) */
201
+ --colors-system-spectrum-data-visual-azure-400: #7fc4ec;
202
+ /* Colors/System/Spectrum/Data visual/azure-700 - Global (primitives) */
203
+ --colors-system-spectrum-data-visual-azure-700: #299de0;
204
+ /* Colors/System/Spectrum/Data visual/blackrose-1200 - Global (primitives) */
205
+ --colors-system-spectrum-data-visual-blackrose-1200: #130033;
206
+ /* Colors/System/Spectrum/Data visual/blackrose-900 - Global (primitives) */
207
+ --colors-system-spectrum-data-visual-blackrose-900: #958ca3;
208
+ /* Colors/System/Spectrum/Data visual/bronze-1100 - Global (primitives) */
209
+ --colors-system-spectrum-data-visual-bronze-1100: #794b34;
210
+ /* Colors/System/Spectrum/Data visual/bronze-800 - Global (primitives) */
211
+ --colors-system-spectrum-data-visual-bronze-800: #af9385;
212
+ /* Colors/System/Spectrum/Data visual/brown-1200 - Global (primitives) */
213
+ --colors-system-spectrum-data-visual-brown-1200: #7a2a0b;
214
+ /* Colors/System/Spectrum/Data visual/brown-900 - Global (primitives) */
215
+ --colors-system-spectrum-data-visual-brown-900: #b68a79;
216
+ /* Colors/System/Spectrum/Data visual/cadet-gray-1200 - Global (primitives) */
217
+ --colors-system-spectrum-data-visual-cadet-gray-1200: #094a53;
218
+ /* Colors/System/Spectrum/Data visual/cadet-gray-900 - Global (primitives) */
219
+ --colors-system-spectrum-data-visual-cadet-gray-900: #789ba0;
220
+ /* Colors/System/Spectrum/Data visual/cooper-500 - Global (primitives) */
221
+ --colors-system-spectrum-data-visual-cooper-500: #e6b297;
222
+ /* Colors/System/Spectrum/Data visual/cooper-800 - Global (primitives) */
223
+ --colors-system-spectrum-data-visual-cooper-800: #d67e51;
224
+ /* Colors/System/Spectrum/Data visual/gold-400 - Global (primitives) */
225
+ --colors-system-spectrum-data-visual-gold-400: #cdbe80;
226
+ /* Colors/System/Spectrum/Data visual/gold-700 - Global (primitives) */
227
+ --colors-system-spectrum-data-visual-gold-700: #ab922b;
228
+ /* Colors/System/Spectrum/Data visual/Gradient/opacity-black - Global (primitives) */
229
+ --colors-system-spectrum-data-visual-gradient-opacity-black: #1f1f1f4d;
230
+ /* Colors/System/Spectrum/Data visual/Gradient/opacity-white - Global (primitives) */
231
+ --colors-system-spectrum-data-visual-gradient-opacity-white: #ffffff4d;
232
+ /* Colors/System/Spectrum/Data visual/Highlight/azure-400-opacity - Global (primitives) */
233
+ --colors-system-spectrum-data-visual-highlight-azure-400-opacity: #7fc4ec4d;
234
+ /* Colors/System/Spectrum/Data visual/Highlight/azure-700-opacity - Global (primitives) */
235
+ --colors-system-spectrum-data-visual-highlight-azure-700-opacity: #299de04d;
236
+ /* Colors/System/Spectrum/Data visual/Highlight/blackrose-1200-opacity - Global (primitives) */
237
+ --colors-system-spectrum-data-visual-highlight-blackrose-1200-opacity: #1300334d;
238
+ /* Colors/System/Spectrum/Data visual/Highlight/blackrose-900-opacity - Global (primitives) */
239
+ --colors-system-spectrum-data-visual-highlight-blackrose-900-opacity: #958ca34d;
240
+ /* Colors/System/Spectrum/Data visual/Highlight/bronze-1100-opacity - Global (primitives) */
241
+ --colors-system-spectrum-data-visual-highlight-bronze-1100-opacity: #794b344d;
242
+ /* Colors/System/Spectrum/Data visual/Highlight/bronze-800-opacity - Global (primitives) */
243
+ --colors-system-spectrum-data-visual-highlight-bronze-800-opacity: #af93854d;
244
+ /* Colors/System/Spectrum/Data visual/Highlight/brown-1200-opacity - Global (primitives) */
245
+ --colors-system-spectrum-data-visual-highlight-brown-1200-opacity: #7a2a0b4d;
246
+ /* Colors/System/Spectrum/Data visual/Highlight/brown-900-opacity - Global (primitives) */
247
+ --colors-system-spectrum-data-visual-highlight-brown-900-opacity: #b68a794d;
248
+ /* Colors/System/Spectrum/Data visual/Highlight/cadet-gray-1200-opacity - Global (primitives) */
249
+ --colors-system-spectrum-data-visual-highlight-cadet-gray-1200-opacity: #094a534d;
250
+ /* Colors/System/Spectrum/Data visual/Highlight/cadet-gray-900-opacity - Global (primitives) */
251
+ --colors-system-spectrum-data-visual-highlight-cadet-gray-900-opacity: #789ba04d;
252
+ /* Colors/System/Spectrum/Data visual/Highlight/cooper-500-opacity - Global (primitives) */
253
+ --colors-system-spectrum-data-visual-highlight-cooper-500-opacity: #e6b2974d;
254
+ /* Colors/System/Spectrum/Data visual/Highlight/cooper-800-opacity - Global (primitives) */
255
+ --colors-system-spectrum-data-visual-highlight-cooper-800-opacity: #d67e514d;
256
+ /* Colors/System/Spectrum/Data visual/Highlight/gold-400-opacity - Global (primitives) */
257
+ --colors-system-spectrum-data-visual-highlight-gold-400-opacity: #cdbe804d;
258
+ /* Colors/System/Spectrum/Data visual/Highlight/gold-700-opacity - Global (primitives) */
259
+ --colors-system-spectrum-data-visual-highlight-gold-700-opacity: #ab922b4d;
260
+ /* Colors/System/Spectrum/Data visual/Highlight/jade-600-opacity - Global (primitives) */
261
+ --colors-system-spectrum-data-visual-highlight-jade-600-opacity: #88c5af4d;
262
+ /* Colors/System/Spectrum/Data visual/Highlight/jade-900-opacity - Global (primitives) */
263
+ --colors-system-spectrum-data-visual-highlight-jade-900-opacity: #389e7a4d;
264
+ /* Colors/System/Spectrum/Data visual/Highlight/maroon-1200-opacity - Global (primitives) */
265
+ --colors-system-spectrum-data-visual-highlight-maroon-1200-opacity: #5309094d;
266
+ /* Colors/System/Spectrum/Data visual/Highlight/maroon-900-opacity - Global (primitives) */
267
+ --colors-system-spectrum-data-visual-highlight-maroon-900-opacity: #a984844d;
268
+ /* Colors/System/Spectrum/Data visual/Highlight/platinum-1000-opacity - Global (primitives) */
269
+ --colors-system-spectrum-data-visual-highlight-platinum-1000-opacity: #7f7f7f4d;
270
+ /* Colors/System/Spectrum/Data visual/Highlight/platinum-700-opacity - Global (primitives) */
271
+ --colors-system-spectrum-data-visual-highlight-platinum-700-opacity: #b2b2b24d;
272
+ /* Colors/System/Spectrum/Data visual/Highlight/sage-1200-opacity - Global (primitives) */
273
+ --colors-system-spectrum-data-visual-highlight-sage-1200-opacity: #2d33004d;
274
+ /* Colors/System/Spectrum/Data visual/Highlight/sage-900-opacity - Global (primitives) */
275
+ --colors-system-spectrum-data-visual-highlight-sage-900-opacity: #9699804d;
276
+ /* Colors/System/Spectrum/Data visual/Highlight/tanzanite-1200-opacity - Global (primitives) */
277
+ --colors-system-spectrum-data-visual-highlight-tanzanite-1200-opacity: #0a466c4d;
278
+ /* Colors/System/Spectrum/Data visual/Highlight/tanzanite-900-opacity - Global (primitives) */
279
+ --colors-system-spectrum-data-visual-highlight-tanzanite-900-opacity: #7899ae4d;
280
+ /* Colors/System/Spectrum/Data visual/Highlight/violet-1200-opacity - Global (primitives) */
281
+ --colors-system-spectrum-data-visual-highlight-violet-1200-opacity: #4334794d;
282
+ /* Colors/System/Spectrum/Data visual/Highlight/violet-900-opacity - Global (primitives) */
283
+ --colors-system-spectrum-data-visual-highlight-violet-900-opacity: #a19abc4d;
284
+ /* Colors/System/Spectrum/Data visual/jade-600 - Global (primitives) */
285
+ --colors-system-spectrum-data-visual-jade-600: #88c5af;
286
+ /* Colors/System/Spectrum/Data visual/jade-900 - Global (primitives) */
287
+ --colors-system-spectrum-data-visual-jade-900: #389e7a;
288
+ /* Colors/System/Spectrum/Data visual/maroon-1200 - Global (primitives) */
289
+ --colors-system-spectrum-data-visual-maroon-1200: #530909;
290
+ /* Colors/System/Spectrum/Data visual/maroon-900 - Global (primitives) */
291
+ --colors-system-spectrum-data-visual-maroon-900: #a98484;
292
+ /* Colors/System/Spectrum/Data visual/platinum-1000 - Global (primitives) */
293
+ --colors-system-spectrum-data-visual-platinum-1000: #7f7f7f;
294
+ /* Colors/System/Spectrum/Data visual/platinum-700 - Global (primitives) */
295
+ --colors-system-spectrum-data-visual-platinum-700: #b2b2b2;
296
+ /* Colors/System/Spectrum/Data visual/sage-1200 - Global (primitives) */
297
+ --colors-system-spectrum-data-visual-sage-1200: #2d3300;
298
+ /* Colors/System/Spectrum/Data visual/sage-900 - Global (primitives) */
299
+ --colors-system-spectrum-data-visual-sage-900: #969980;
300
+ /* Colors/System/Spectrum/Data visual/tanzanite-1200 - Global (primitives) */
301
+ --colors-system-spectrum-data-visual-tanzanite-1200: #0a466c;
302
+ /* Colors/System/Spectrum/Data visual/tanzanite-900 - Global (primitives) */
303
+ --colors-system-spectrum-data-visual-tanzanite-900: #7899ae;
304
+ /* Colors/System/Spectrum/Data visual/violet-1200 - Global (primitives) */
305
+ --colors-system-spectrum-data-visual-violet-1200: #433479;
306
+ /* Colors/System/Spectrum/Data visual/violet-900 - Global (primitives) */
307
+ --colors-system-spectrum-data-visual-violet-900: #a19abc;
308
+ /* Colors/System/Spectrum/Depth/45-blue-dark - Global (primitives) */
309
+ --colors-system-spectrum-depth-45-blue-dark: #88aff7;
310
+ /* Colors/System/Spectrum/Depth/45-green-dark - Global (primitives) */
311
+ --colors-system-spectrum-depth-45-green-dark: #87bd9f;
312
+ /* Colors/System/Spectrum/Depth/45-lime-dark - Global (primitives) */
313
+ --colors-system-spectrum-depth-45-lime-dark: #dce28f;
314
+ /* Colors/System/Spectrum/Depth/45-magenta-dark - Global (primitives) */
315
+ --colors-system-spectrum-depth-45-magenta-dark: #e07aed;
316
+ /* Colors/System/Spectrum/Depth/45-orange-dark - Global (primitives) */
317
+ --colors-system-spectrum-depth-45-orange-dark: #f6a874;
318
+ /* Colors/System/Spectrum/Depth/45-pink-dark - Global (primitives) */
319
+ --colors-system-spectrum-depth-45-pink-dark: #ea86b9;
320
+ /* Colors/System/Spectrum/Depth/45-purple-dark - Global (primitives) */
321
+ --colors-system-spectrum-depth-45-purple-dark: #c8a6f9;
322
+ /* Colors/System/Spectrum/Depth/45-red-dark - Global (primitives) */
323
+ --colors-system-spectrum-depth-45-red-dark: #ea93a0;
324
+ /* Colors/System/Spectrum/Depth/45-teal-dark - Global (primitives) */
325
+ --colors-system-spectrum-depth-45-teal-dark: #74bbb4;
326
+ /* Colors/System/Spectrum/Depth/45-yellow-dark - Global (primitives) */
327
+ --colors-system-spectrum-depth-45-yellow-dark: #fada8d;
328
+ /* Colors/System/Spectrum/Depth/50-blue-light - Global (primitives) */
329
+ --colors-system-spectrum-depth-50-blue-light: #143778;
330
+ /* Colors/System/Spectrum/Depth/50-green-light - Global (primitives) */
331
+ --colors-system-spectrum-depth-50-green-light: #134428;
332
+ /* Colors/System/Spectrum/Depth/50-lime-light - Global (primitives) */
333
+ --colors-system-spectrum-depth-50-lime-light: #60651a;
334
+ /* Colors/System/Spectrum/Depth/50-magenta-light - Global (primitives) */
335
+ --colors-system-spectrum-depth-50-magenta-light: #63076f;
336
+ /* Colors/System/Spectrum/Depth/50-orange-light - Global (primitives) */
337
+ --colors-system-spectrum-depth-50-orange-light: #773001;
338
+ /* Colors/System/Spectrum/Depth/50-pink-light - Global (primitives) */
339
+ --colors-system-spectrum-depth-50-pink-light: #6c1240;
340
+ /* Colors/System/Spectrum/Depth/50-purple-light - Global (primitives) */
341
+ --colors-system-spectrum-depth-50-purple-light: #310077;
342
+ /* Colors/System/Spectrum/Depth/50-red-light - Global (primitives) */
343
+ --colors-system-spectrum-depth-50-red-light: #6c1d29;
344
+ /* Colors/System/Spectrum/Depth/50-teal-light - Global (primitives) */
345
+ --colors-system-spectrum-depth-50-teal-light: #01413c;
346
+ /* Colors/System/Spectrum/Depth/50-yellow-light - Global (primitives) */
347
+ --colors-system-spectrum-depth-50-yellow-light: #7b5e18;
348
+ /* Colors/System/Spectrum/Highlight/65-blue-dark - Global (primitives) */
349
+ --colors-system-spectrum-highlight-65-blue-dark: #0e2754;
350
+ /* Colors/System/Spectrum/Highlight/65-green-dark - Global (primitives) */
351
+ --colors-system-spectrum-highlight-65-green-dark: #0d2f1c;
352
+ /* Colors/System/Spectrum/Highlight/65-lime-dark - Global (primitives) */
353
+ --colors-system-spectrum-highlight-65-lime-dark: #434712;
354
+ /* Colors/System/Spectrum/Highlight/65-magenta-dark - Global (primitives) */
355
+ --colors-system-spectrum-highlight-65-magenta-dark: #45054e;
356
+ /* Colors/System/Spectrum/Highlight/65-orange-dark - Global (primitives) */
357
+ --colors-system-spectrum-highlight-65-orange-dark: #532201;
358
+ /* Colors/System/Spectrum/Highlight/65-pink-dark - Global (primitives) */
359
+ --colors-system-spectrum-highlight-65-pink-dark: #4c0c2d;
360
+ /* Colors/System/Spectrum/Highlight/65-purple-dark - Global (primitives) */
361
+ --colors-system-spectrum-highlight-65-purple-dark: #220053;
362
+ /* Colors/System/Spectrum/Highlight/65-red-dark - Global (primitives) */
363
+ --colors-system-spectrum-highlight-65-red-dark: #4c141d;
364
+ /* Colors/System/Spectrum/Highlight/65-teal-dark - Global (primitives) */
365
+ --colors-system-spectrum-highlight-65-teal-dark: #012e2a;
366
+ /* Colors/System/Spectrum/Highlight/65-yellow-dark - Global (primitives) */
367
+ --colors-system-spectrum-highlight-65-yellow-dark: #564210;
368
+ /* Colors/System/Spectrum/Highlight/85-blue-light - Global (primitives) */
369
+ --colors-system-spectrum-highlight-85-blue-light: #dfe9fd;
370
+ /* Colors/System/Spectrum/Highlight/85-green-light - Global (primitives) */
371
+ --colors-system-spectrum-highlight-85-green-light: #deede5;
372
+ /* Colors/System/Spectrum/Highlight/85-lime-light - Global (primitives) */
373
+ --colors-system-spectrum-highlight-85-lime-light: #f6f7e0;
374
+ /* Colors/System/Spectrum/Highlight/85-magenta-light - Global (primitives) */
375
+ --colors-system-spectrum-highlight-85-magenta-light: #f6dbfa;
376
+ /* Colors/System/Spectrum/Highlight/85-orange-light - Global (primitives) */
377
+ --colors-system-spectrum-highlight-85-orange-light: #fce7d9;
378
+ /* Colors/System/Spectrum/Highlight/85-pink-light - Global (primitives) */
379
+ --colors-system-spectrum-highlight-85-pink-light: #f9deec;
380
+ /* Colors/System/Spectrum/Highlight/85-purple-light - Global (primitives) */
381
+ --colors-system-spectrum-highlight-85-purple-light: #e7d9fc;
382
+ /* Colors/System/Spectrum/Highlight/85-red-light - Global (primitives) */
383
+ --colors-system-spectrum-highlight-85-red-light: #f9e1e5;
384
+ /* Colors/System/Spectrum/Highlight/85-teal-light - Global (primitives) */
385
+ --colors-system-spectrum-highlight-85-teal-light: #d9eceb;
386
+ /* Colors/System/Spectrum/Highlight/85-yellow-light - Global (primitives) */
387
+ --colors-system-spectrum-highlight-85-yellow-light: #fef5e0;
388
+ /* Colors/System/Spectrum/Vibrant/00-blue-light - Global (primitives) */
389
+ --colors-system-spectrum-vibrant-00-blue-light: #276ef1;
390
+ /* Colors/System/Spectrum/Vibrant/00-green-light - Global (primitives) */
391
+ --colors-system-spectrum-vibrant-00-green-light: #258750;
392
+ /* Colors/System/Spectrum/Vibrant/00-lime-light - Global (primitives) */
393
+ --colors-system-spectrum-vibrant-00-lime-light: #c0ca33;
394
+ /* Colors/System/Spectrum/Vibrant/00-magenta-light - Global (primitives) */
395
+ --colors-system-spectrum-vibrant-00-magenta-light: #c60ede;
396
+ /* Colors/System/Spectrum/Vibrant/00-orange-light - Global (primitives) */
397
+ --colors-system-spectrum-vibrant-00-orange-light: #ee6002;
398
+ /* Colors/System/Spectrum/Vibrant/00-pink-light - Global (primitives) */
399
+ --colors-system-spectrum-vibrant-00-pink-light: #d82380;
400
+ /* Colors/System/Spectrum/Vibrant/00-purple-light - Global (primitives) */
401
+ --colors-system-spectrum-vibrant-00-purple-light: #6200ee;
402
+ /* Colors/System/Spectrum/Vibrant/00-red-light - Global (primitives) */
403
+ --colors-system-spectrum-vibrant-00-red-light: #d83a52;
404
+ /* Colors/System/Spectrum/Vibrant/00-teal-light - Global (primitives) */
405
+ --colors-system-spectrum-vibrant-00-teal-light: #038377;
406
+ /* Colors/System/Spectrum/Vibrant/00-yellow-light - Global (primitives) */
407
+ --colors-system-spectrum-vibrant-00-yellow-light: #f6bc2f;
408
+ /* Colors/System/Spectrum/Vibrant/40-blue-dark - Global (primitives) */
409
+ --colors-system-spectrum-vibrant-40-blue-dark: #5d92f5;
410
+ /* Colors/System/Spectrum/Vibrant/40-green-dark - Global (primitives) */
411
+ --colors-system-spectrum-vibrant-40-green-dark: #7cb796;
412
+ /* Colors/System/Spectrum/Vibrant/40-lime-dark - Global (primitives) */
413
+ --colors-system-spectrum-vibrant-40-lime-dark: #d9df85;
414
+ /* Colors/System/Spectrum/Vibrant/40-magenta-dark - Global (primitives) */
415
+ --colors-system-spectrum-vibrant-40-magenta-dark: #dd6eeb;
416
+ /* Colors/System/Spectrum/Vibrant/40-orange-dark - Global (primitives) */
417
+ --colors-system-spectrum-vibrant-40-orange-dark: #f5a067;
418
+ /* Colors/System/Spectrum/Vibrant/40-pink-dark - Global (primitives) */
419
+ --colors-system-spectrum-vibrant-40-pink-dark: #e87bb3;
420
+ /* Colors/System/Spectrum/Vibrant/40-purple-dark - Global (primitives) */
421
+ --colors-system-spectrum-vibrant-40-purple-dark: #a166f5;
422
+ /* Colors/System/Spectrum/Vibrant/40-red-dark - Global (primitives) */
423
+ --colors-system-spectrum-vibrant-40-red-dark: #e88997;
424
+ /* Colors/System/Spectrum/Vibrant/40-teal-dark - Global (primitives) */
425
+ --colors-system-spectrum-vibrant-40-teal-dark: #68b5ad;
426
+ /* Colors/System/Spectrum/Vibrant/40-yellow-dark - Global (primitives) */
427
+ --colors-system-spectrum-vibrant-40-yellow-dark: #fad782;
428
+ /* Colors/System/Visited links/00-default-light - Global (primitives) */
429
+ --colors-system-visited-links-00-default-light: #7a3e7a;
430
+ /* Colors/System/Visited links/30-active-dark - Global (primitives) */
431
+ --colors-system-visited-links-30-active-dark: #a278a2;
432
+ /* Colors/System/Visited links/30-active-light - Global (primitives) */
433
+ --colors-system-visited-links-30-active-light: #552b55;
434
+ /* Colors/System/Visited links/40-default-dark - Global (primitives) */
435
+ --colors-system-visited-links-40-default-dark: #af8baf;
436
+ /* Colors/System/Visited links/40-disabled-dark - Global (primitives) */
437
+ --colors-system-visited-links-40-disabled-dark: #492549;
438
+ /* Colors/System/Visited links/40-disabled-light - Global (primitives) */
439
+ --colors-system-visited-links-40-disabled-light: #af8baf;
440
+ /* Colors/System/yellow-dark - Global (primitives) */
441
+ --colors-system-yellow-dark: #f8cd63;
442
+ /* Colors/System/yellow-dark-bg - Global (primitives) */
443
+ --colors-system-yellow-dark-bg: #564210;
444
+ /* Colors/System/yellow-light - Global (primitives) */
445
+ --colors-system-yellow-light: #f6bc2f;
446
+ /* Colors/System/yellow-light-bg - Global (primitives) */
447
+ --colors-system-yellow-light-bg: #fef5e0;
448
+ /* Corner radius/120 - Global (primitives) */
449
+ --corner-radius-120: 12px;
450
+ /* Corner radius/160 - Global (primitives) */
451
+ --corner-radius-160: 16px;
452
+ /* Corner radius/40 - Global (primitives) */
453
+ --corner-radius-40: 4px;
454
+ /* Corner radius/80 - Global (primitives) */
455
+ --corner-radius-80: 8px;
456
+ /* Corner radius/circular - Global (primitives) */
457
+ --corner-radius-circular: 999px;
458
+ /* Corner radius/None - Global (primitives) */
459
+ --corner-radius-none: 0;
460
+ /* East - navigation rails, drawers, sheets */
461
+ --drop-shadow-east: 2px 0px 8px -2px #0000001a, 2px 0px 4px -2px #0000001f;
462
+ /* Float */
463
+ --drop-shadow-float: 0px 0px 1px 0px #00000052, 0px 8px 12px 0px #00000026;
464
+ /* North - Bottom navigation, button dock, bottom sheet */
465
+ --drop-shadow-north: 0px -2px 8px -2px #0000001a, 0px -2px 4px -2px #0000001f;
466
+ /* Raise */
467
+ --drop-shadow-raise: 0px 0px 1px 0px #00000026, 0px 1px 1px 0px #00000052;
468
+ /* Scroll */
469
+ --drop-shadow-scroll: 0px 0px 3px 0px #00000052;
470
+ /* South - top navigation */
471
+ --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
472
+ /* West - side sheets */
473
+ --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
474
+ /* Interactions/opacity-black-10 - Global (primitives) */
475
+ --interactions-opacity-black-10: #0000001a;
476
+ /* Interactions/opacity-black-16 - Global (primitives) */
477
+ --interactions-opacity-black-16: #00000029;
478
+ /* Interactions/opacity-black-20 - Global (primitives) */
479
+ --interactions-opacity-black-20: #00000033;
480
+ /* Interactions/opacity-black-30 - Global (primitives) */
481
+ --interactions-opacity-black-30: #0000004d;
482
+ /* Interactions/opacity-black-6 - Global (primitives) */
483
+ --interactions-opacity-black-6: #0000000f;
484
+ /* Interactions/opacity-black-8 - Global (primitives) */
485
+ --interactions-opacity-black-8: #00000014;
486
+ /* Interactions/opacity-white-10 - Global (primitives) */
487
+ --interactions-opacity-white-10: #ffffff1a;
488
+ /* Interactions/opacity-white-16 - Global (primitives) */
489
+ --interactions-opacity-white-16: #ffffff29;
490
+ /* Interactions/opacity-white-20 - Global (primitives) */
491
+ --interactions-opacity-white-20: #ffffff33;
492
+ /* Interactions/opacity-white-30 - Global (primitives) */
493
+ --interactions-opacity-white-30: #ffffff4d;
494
+ /* Interactions/opacity-white-6 - Global (primitives) */
495
+ --interactions-opacity-white-6: #ffffff0f;
496
+ /* Interactions/opacity-white-8 - Global (primitives) */
497
+ --interactions-opacity-white-8: #ffffff14;
498
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-10 - Global (primitives) */
499
+ --interactions-primary-dark-opacity-10: #7574821a;
500
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-12 - Global (primitives) */
501
+ --interactions-primary-dark-opacity-12: #7574821f;
502
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-16 - Global (primitives) */
503
+ --interactions-primary-dark-opacity-16: #75748229;
504
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-20 - Global (primitives) */
505
+ --interactions-primary-dark-opacity-20: #75748233;
506
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-8 - Global (primitives) */
507
+ --interactions-primary-dark-opacity-8: #75748214;
508
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-10 - Global (primitives) */
509
+ --interactions-primary-light-opacity-10: #19172f1a;
510
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-12 - Global (primitives) */
511
+ --interactions-primary-light-opacity-12: #19172f1f;
512
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-16 - Global (primitives) */
513
+ --interactions-primary-light-opacity-16: #19172f29;
514
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-20 - Global (primitives) */
515
+ --interactions-primary-light-opacity-20: #19172f33;
516
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-8 - Global (primitives) */
517
+ --interactions-primary-light-opacity-8: #19172f14;
518
+ /* Labels/Base */
519
+ --labels-base: 500 16px/24px var(--typeface);
520
+ /* Labels/Base - line height */
521
+ --labels-base-line-height: 24px;
522
+ /* Labels/Base - size */
523
+ --labels-base-size: 16px;
524
+ /* Labels/Base - style */
525
+ --labels-base-style: medium;
526
+ /* Labels/Large */
527
+ --labels-large: 500 18px/28px var(--typeface);
528
+ /* Labels/Large - line height */
529
+ --labels-large-line-height: 28px;
530
+ /* Labels/Large - size */
531
+ --labels-large-size: 18px;
532
+ /* Labels/Large - style */
533
+ --labels-large-style: medium;
534
+ /* Labels/Small */
535
+ --labels-small: 500 14px/20px var(--typeface);
536
+ /* Labels/Small - line height */
537
+ --labels-small-line-height: 20px;
538
+ /* Labels/Small - size */
539
+ --labels-small-size: 14px;
540
+ /* Labels/Small - style */
541
+ --labels-small-style: medium;
542
+ /* Labels/X-Small */
543
+ --labels-x-small: 500 12px/16px var(--typeface);
544
+ /* Labels/X-Small - line height */
545
+ --labels-x-small-line-height: 16px;
546
+ /* Labels/X-Small - size */
547
+ --labels-x-small-size: 12px;
548
+ /* Labels/X-Small - style */
549
+ --labels-x-small-style: medium;
550
+ /* Colors/Brands/BRAND/Primary/00-base - Global (primitives) */
551
+ --primary-00-base: #19172f;
552
+ /* Colors/Brands/BRAND/Primary/15-dark - Global (primitives) */
553
+ --primary-15-dark: #151428;
554
+ /* Colors/Brands/BRAND/Primary/40-light - Global (primitives) */
555
+ --primary-40-light: #757482;
556
+ /* Colors/Brands/BRAND/Primary/55-light - Global (primitives) */
557
+ --primary-55-light: #9897a1;
558
+ /* Colors/Brands/BRAND/Primary/75-dark - Global (primitives) */
559
+ --primary-75-dark: #06060c;
560
+ /* Colors/Brands/BRAND/Primary/85-light - Global (primitives) */
561
+ --primary-85-light: #dddce0;
562
+ /* Radius/full - Borders */
563
+ --radius-full: 999px;
564
+ /* Radius/lg - Borders */
565
+ --radius-lg: 12px;
566
+ /* Radius/md - Borders */
567
+ --radius-md: 8px;
568
+ /* Radius/none - Borders */
569
+ --radius-none: 0;
570
+ /* Radius/sm - Borders */
571
+ --radius-sm: 4px;
572
+ /* Radius/xlg - Borders */
573
+ --radius-xlg: 16px;
574
+ /* Colors/Brands/BRAND/Secondary/00-base - Global (primitives) */
575
+ --secondary-00-base: #eb672f;
576
+ /* Colors/Brands/BRAND/Secondary/15-dark - Global (primitives) */
577
+ --secondary-15-dark: #c85828;
578
+ /* Colors/Brands/BRAND/Secondary/40-light - Global (primitives) */
579
+ --secondary-40-light: #f3a482;
580
+ /* Colors/Brands/BRAND/Secondary/55-light - Global (primitives) */
581
+ --secondary-55-light: #f6bba1;
582
+ /* Colors/Brands/BRAND/Secondary/75-dark - Global (primitives) */
583
+ --secondary-75-dark: #3b1a0c;
584
+ /* Colors/Brands/BRAND/Secondary/85-light - Global (primitives) */
585
+ --secondary-85-light: #fce8e0;
586
+ /* Shadows/Inner-Shadow-black-100 - Global (primitives) */
587
+ --shadows-inner-shadow-black-100: #000000;
588
+ /* Shadows/Inner-Shadow-white-100 - Global (primitives) */
589
+ --shadows-inner-shadow-white-100: #ffffff;
590
+ /* Shadows/Shadow-black-10 - Global (primitives) */
591
+ --shadows-shadow-black-10: #0000001a;
592
+ /* Shadows/Shadow-black-12 - Global (primitives) */
593
+ --shadows-shadow-black-12: #0000001f;
594
+ /* Shadows/Shadow-black-15 - Global (primitives) */
595
+ --shadows-shadow-black-15: #00000026;
596
+ /* Shadows/Shadow-black-25 - Global (primitives) */
597
+ --shadows-shadow-black-25: #00000040;
598
+ /* Shadows/Shadow-black-32 - Global (primitives) */
599
+ --shadows-shadow-black-32: #00000052;
600
+ /* Shadows/Shadow-black-50 - Global (primitives) */
601
+ --shadows-shadow-black-50: #00000080;
602
+ /* Shadows/Shadow-gray-10 - Global (primitives) */
603
+ --shadows-shadow-gray-10: #6161611a;
604
+ /* Shadows/Shadow-gray-12 - Global (primitives) */
605
+ --shadows-shadow-gray-12: #6161611f;
606
+ /* Shadows/Shadow-gray-15 - Global (primitives) */
607
+ --shadows-shadow-gray-15: #61616126;
608
+ /* Shadows/Shadow-gray-25 - Global (primitives) */
609
+ --shadows-shadow-gray-25: #61616140;
610
+ /* Shadows/Shadow-gray-32 - Global (primitives) */
611
+ --shadows-shadow-gray-32: #61616152;
612
+ /* Shadows/Shadow-gray-50 - Global (primitives) */
613
+ --shadows-shadow-gray-50: #61616180;
614
+ /* Spacing/sizing-01 - Spacing & Sizing */
615
+ --spacing-sizing-01: 4px;
616
+ /* Spacing/sizing-02 - Spacing & Sizing */
617
+ --spacing-sizing-02: 8px;
618
+ /* Spacing/sizing-03 - Spacing & Sizing */
619
+ --spacing-sizing-03: 12px;
620
+ /* Spacing/sizing-04 - Spacing & Sizing */
621
+ --spacing-sizing-04: 16px;
622
+ /* Spacing/sizing-05 - Spacing & Sizing */
623
+ --spacing-sizing-05: 20px;
624
+ /* Spacing/sizing-06 - Spacing & Sizing */
625
+ --spacing-sizing-06: 24px;
626
+ /* Spacing/sizing-07 - Spacing & Sizing */
627
+ --spacing-sizing-07: 28px;
628
+ /* Spacing/sizing-08 - Spacing & Sizing */
629
+ --spacing-sizing-08: 32px;
630
+ /* Spacing/sizing-09 - Spacing & Sizing */
631
+ --spacing-sizing-09: 36px;
632
+ /* Spacing/sizing-10 - Spacing & Sizing */
633
+ --spacing-sizing-10: 40px;
634
+ /* Spacing/sizing-11 - Spacing & Sizing */
635
+ --spacing-sizing-11: 44px;
636
+ /* Spacing/sizing-12 - Spacing & Sizing */
637
+ --spacing-sizing-12: 48px;
638
+ /* Spacing/sizing-13 - Spacing & Sizing */
639
+ --spacing-sizing-13: 52px;
640
+ /* Spacing/sizing-14 - Spacing & Sizing */
641
+ --spacing-sizing-14: 56px;
642
+ /* Spacing/sizing-15 - Spacing & Sizing */
643
+ --spacing-sizing-15: 60px;
644
+ /* Spacing/sizing-16 - Spacing & Sizing */
645
+ --spacing-sizing-16: 64px;
646
+ /* Spacing/sizing-17 - Spacing & Sizing */
647
+ --spacing-sizing-17: 68px;
648
+ /* Spacing/sizing-18 - Spacing & Sizing */
649
+ --spacing-sizing-18: 72px;
650
+ /* Spacing/sizing-19 - Spacing & Sizing */
651
+ --spacing-sizing-19: 80px;
652
+ /* Spacing/sizing-20 - Spacing & Sizing */
653
+ --spacing-sizing-20: 96px;
654
+ /* Spacing/sizing-21 - Spacing & Sizing */
655
+ --spacing-sizing-21: 104px;
656
+ /* Spacing/sizing-22 - Spacing & Sizing */
657
+ --spacing-sizing-22: 120px;
658
+ /* Spacing/sizing-23 - Spacing & Sizing */
659
+ --spacing-sizing-23: 128px;
660
+ /* Spacing/sizing-24 - Spacing & Sizing */
661
+ --spacing-sizing-24: 148px;
662
+ /* Spacing/sizing-25 - Spacing & Sizing */
663
+ --spacing-sizing-25: 152px;
664
+ /* Spacing/sizing-none - Spacing & Sizing */
665
+ --spacing-sizing-none: 0;
666
+ /* Spacings/1040 - Global (primitives) */
667
+ --spacings-1040: 104px;
668
+ /* Spacings/120 - Global (primitives) */
669
+ --spacings-120: 12px;
670
+ /* Spacings/1200 - Global (primitives) */
671
+ --spacings-1200: 120px;
672
+ /* Spacings/1280 - Global (primitives) */
673
+ --spacings-1280: 128px;
674
+ /* Spacings/1480 - Global (primitives) */
675
+ --spacings-1480: 148px;
676
+ /* Spacings/1520 - Global (primitives) */
677
+ --spacings-1520: 152px;
678
+ /* Spacings/160 - Global (primitives) */
679
+ --spacings-160: 16px;
680
+ /* Spacings/200 - Global (primitives) */
681
+ --spacings-200: 20px;
682
+ /* Spacings/240 - Global (primitives) */
683
+ --spacings-240: 24px;
684
+ /* Spacings/280 - Global (primitives) */
685
+ --spacings-280: 28px;
686
+ /* Spacings/320 - Global (primitives) */
687
+ --spacings-320: 32px;
688
+ /* Spacings/360 - Global (primitives) */
689
+ --spacings-360: 36px;
690
+ /* Spacings/40 - Global (primitives) */
691
+ --spacings-40: 4px;
692
+ /* Spacings/400 - Global (primitives) */
693
+ --spacings-400: 40px;
694
+ /* Spacings/440 - Global (primitives) */
695
+ --spacings-440: 44px;
696
+ /* Spacings/480 - Global (primitives) */
697
+ --spacings-480: 48px;
698
+ /* Spacings/520 - Global (primitives) */
699
+ --spacings-520: 52px;
700
+ /* Spacings/560 - Global (primitives) */
701
+ --spacings-560: 56px;
702
+ /* Spacings/600 - Global (primitives) */
703
+ --spacings-600: 60px;
704
+ /* Spacings/640 - Global (primitives) */
705
+ --spacings-640: 64px;
706
+ /* Spacings/680 - Global (primitives) */
707
+ --spacings-680: 68px;
708
+ /* Spacings/720 - Global (primitives) */
709
+ --spacings-720: 72px;
710
+ /* Spacings/80 - Global (primitives) */
711
+ --spacings-80: 8px;
712
+ /* Spacings/800 - Global (primitives) */
713
+ --spacings-800: 80px;
714
+ /* Spacings/960 - Global (primitives) */
715
+ --spacings-960: 96px;
716
+ /* Spacings/None - Global (primitives) */
717
+ --spacings-none: 0;
718
+ /* Stroke/none - Borders */
719
+ --stroke-none: 0;
720
+ /* Stroke/thick - Borders */
721
+ --stroke-thick: 2px;
722
+ /* Stroke/thicker - Borders */
723
+ --stroke-thicker: 4px;
724
+ /* Stroke/thin - Borders */
725
+ --stroke-thin: 1px;
726
+ /* Typeface - Brand */
727
+ --typeface: 'Inter', sans-serif;
728
+ /* Typography/Line-height/lh-1 - Global (primitives) */
729
+ --typography-line-height-lh-1: 16px;
730
+ /* Typography/Line-height/lh-10 - Global (primitives) */
731
+ --typography-line-height-lh-10: 48px;
732
+ /* Typography/Line-height/lh-11 - Global (primitives) */
733
+ --typography-line-height-lh-11: 56px;
734
+ /* Typography/Line-height/lh-12 - Global (primitives) */
735
+ --typography-line-height-lh-12: 60px;
736
+ /* Typography/Line-height/lh-13 - Global (primitives) */
737
+ --typography-line-height-lh-13: 64px;
738
+ /* Typography/Line-height/lh-14 - Global (primitives) */
739
+ --typography-line-height-lh-14: 72px;
740
+ /* Typography/Line-height/lh-15 - Global (primitives) */
741
+ --typography-line-height-lh-15: 88px;
742
+ /* Typography/Line-height/lh-2 - Global (primitives) */
743
+ --typography-line-height-lh-2: 20px;
744
+ /* Typography/Line-height/lh-3 - Global (primitives) */
745
+ --typography-line-height-lh-3: 22px;
746
+ /* Typography/Line-height/lh-4 - Global (primitives) */
747
+ --typography-line-height-lh-4: 24px;
748
+ /* Typography/Line-height/lh-5 - Global (primitives) */
749
+ --typography-line-height-lh-5: 28px;
750
+ /* Typography/Line-height/lh-6 - Global (primitives) */
751
+ --typography-line-height-lh-6: 32px;
752
+ /* Typography/Line-height/lh-7 - Global (primitives) */
753
+ --typography-line-height-lh-7: 36px;
754
+ /* Typography/Line-height/lh-8 - Global (primitives) */
755
+ --typography-line-height-lh-8: 40px;
756
+ /* Typography/Line-height/lh-9 - Global (primitives) */
757
+ --typography-line-height-lh-9: 44px;
758
+ /* Typography/Size/base - Global (primitives) */
759
+ --typography-size-base: 16px;
760
+ /* Typography/Size/bp-md - Global (primitives) */
761
+ --typography-size-bp-md: 18px;
762
+ /* Typography/Size/d-lg-m - Global (primitives) */
763
+ --typography-size-d-lg-m: 64px;
764
+ /* Typography/Size/d-lg (old) - Global (primitives) */
765
+ --typography-size-d-lg-old: 60px;
766
+ /* Typography/Size/d-md-m - Global (primitives) */
767
+ --typography-size-d-md-m: 56px;
768
+ /* Typography/Size/d-md (old) - Global (primitives) */
769
+ --typography-size-d-md-old: 52px;
770
+ /* Typography/Size/d-sm-m - Global (primitives) */
771
+ --typography-size-d-sm-m: 48px;
772
+ /* Typography/Size/d-sm (old) - Global (primitives) */
773
+ --typography-size-d-sm-old: 44px;
774
+ /* Typography/Size/lg-xlg - Global (primitives) */
775
+ --typography-size-lg-xlg: 28px;
776
+ /* Typography/Size/md-mdp - Global (primitives) */
777
+ --typography-size-md-mdp: 20px;
778
+ /* Typography/Size/mdp-lg - Global (primitives) */
779
+ --typography-size-mdp-lg: 24px;
780
+ /* Typography/Size/sm - Global (primitives) */
781
+ --typography-size-sm: 14px;
782
+ /* Typography/Size/xlg-xxlg - Global (primitives) */
783
+ --typography-size-xlg-xxlg: 32px;
784
+ /* Typography/Size/xs - Global (primitives) */
785
+ --typography-size-xs: 12px;
786
+ /* Typography/Size/xxlg-xxxlg - Global (primitives) */
787
+ --typography-size-xxlg-xxxlg: 36px;
788
+ /* Typography/Size/xxxlg - Global (primitives) */
789
+ --typography-size-xxxlg: 40px;
790
+ /* Typography/Typeface/Arial - Global (primitives) */
791
+ --typography-typeface-arial: 'Arial';
792
+ /* Typography/Typeface/Geist - Global (primitives) */
793
+ --typography-typeface-geist: 'Geist';
794
+ /* Typography/Typeface/Helvetica - Global (primitives) */
795
+ --typography-typeface-helvetica: 'Helvetica';
796
+ /* Typography/Typeface/Inter - Global (primitives) */
797
+ --typography-typeface-inter: 'Inter';
798
+ /* Typography/Typeface/Lato - Global (primitives) */
799
+ --typography-typeface-lato: 'Lato';
800
+ /* Typography/Typeface/Manrope - Global (primitives) */
801
+ --typography-typeface-manrope: 'Manrope';
802
+ /* Typography/Typeface/Open Sans - Global (primitives) */
803
+ --typography-typeface-open-sans: 'Open Sans';
804
+ /* Typography/Typeface/Red Hat Text - Global (primitives) */
805
+ --typography-typeface-red-hat-text: 'Red Hat Text';
806
+ /* Typography/Typeface/Roboto - Global (primitives) */
807
+ --typography-typeface-roboto: 'Roboto';
808
+ /* Typography/Typeface/SF Pro - Global (primitives) */
809
+ --typography-typeface-sf-pro: 'SF Pro';
810
+ /* Typography/Typeface/Typold - Global (primitives) */
811
+ --typography-typeface-typold: 'Typold';
812
+ /* Typography/Typeface/Work Sans - Global (primitives) */
813
+ --typography-typeface-work-sans: 'Work Sans';
814
+ /* Typography/Weight/300 - Global (primitives) */
815
+ --typography-weight-300: 300;
816
+ /* Typography/Weight/400 - Global (primitives) */
817
+ --typography-weight-400: 400;
818
+ /* Typography/Weight/500 - Global (primitives) */
819
+ --typography-weight-500: 500;
820
+ /* Typography/Weight/600 - Global (primitives) */
821
+ --typography-weight-600: 600;
822
+ /* Mobile/Display/Regular/Large */
823
+ --display-regular-large: 400 56px/72px var(--typeface);
824
+ /* Mobile/Display/Regular/Large - line height */
825
+ --display-regular-large-line-height: 72px;
826
+ /* Mobile/Display/Regular/Large - size */
827
+ --display-regular-large-size: 56px;
828
+ /* Mobile/Display/Regular/Large - style */
829
+ --display-regular-large-style: regular;
830
+ /* Mobile/Display/Regular/Medium */
831
+ --display-regular-medium: 400 48px/60px var(--typeface);
832
+ /* Mobile/Display/Regular/Medium - line height */
833
+ --display-regular-medium-line-height: 60px;
834
+ /* Mobile/Display/Regular/Medium - size */
835
+ --display-regular-medium-size: 48px;
836
+ /* Mobile/Display/Regular/Medium - style */
837
+ --display-regular-medium-style: regular;
838
+ /* Mobile/Display/Regular/Small */
839
+ --display-regular-small: 400 40px/48px var(--typeface);
840
+ /* Mobile/Display/Regular/Small - line height */
841
+ --display-regular-small-line-height: 48px;
842
+ /* Mobile/Display/Regular/Small - size */
843
+ --display-regular-small-size: 40px;
844
+ /* Mobile/Display/Regular/Small - style */
845
+ --display-regular-small-style: regular;
846
+ /* Mobile/Display/Semibold/Large */
847
+ --display-semibold-large: 600 56px/72px var(--typeface);
848
+ /* Mobile/Display/Semibold/Large - line height */
849
+ --display-semibold-large-line-height: 72px;
850
+ /* Mobile/Display/Semibold/Large - size */
851
+ --display-semibold-large-size: 56px;
852
+ /* Mobile/Display/Semibold/Large - style */
853
+ --display-semibold-large-style: 600;
854
+ /* Mobile/Display/Semibold/Medium */
855
+ --display-semibold-medium: 600 48px/60px var(--typeface);
856
+ /* Mobile/Display/Semibold/Medium - line height */
857
+ --display-semibold-medium-line-height: 60px;
858
+ /* Mobile/Display/Semibold/Medium - size */
859
+ --display-semibold-medium-size: 48px;
860
+ /* Mobile/Display/Semibold/Medium - style */
861
+ --display-semibold-medium-style: 600;
862
+ /* Mobile/Display/Semibold/Small */
863
+ --display-semibold-small: 600 40px/48px var(--typeface);
864
+ /* Mobile/Display/Semibold/Small - line height */
865
+ --display-semibold-small-line-height: 48px;
866
+ /* Mobile/Display/Semibold/Small - size */
867
+ --display-semibold-small-size: 40px;
868
+ /* Mobile/Display/Semibold/Small - style */
869
+ --display-semibold-small-style: 600;
870
+ /* Mobile/Heading/H1 - Large Headline */
871
+ --heading-h1: 600 32px/40px var(--typeface);
872
+ /* Mobile/Heading/H1 - Large Headline line height */
873
+ --heading-h1-line-height: 40px;
874
+ /* Mobile/Heading/H1 - Large Headline size */
875
+ --heading-h1-size: 32px;
876
+ /* Mobile/Heading/H1 - Large Headline style */
877
+ --heading-h1-style: 600;
878
+ /* Mobile/Heading/H2 - Headline */
879
+ --heading-h2: 600 28px/36px var(--typeface);
880
+ /* Mobile/Heading/H2 - Headline line height */
881
+ --heading-h2-line-height: 36px;
882
+ /* Mobile/Heading/H2 - Headline size */
883
+ --heading-h2-size: 28px;
884
+ /* Mobile/Heading/H2 - Headline style */
885
+ --heading-h2-style: 600;
886
+ /* Mobile/Heading/H3 - Headline */
887
+ --heading-h3: 600 24px/32px var(--typeface);
888
+ /* Mobile/Heading/H3 - Headline line height */
889
+ --heading-h3-line-height: 32px;
890
+ /* Mobile/Heading/H3 - Headline size */
891
+ --heading-h3-size: 24px;
892
+ /* Mobile/Heading/H3 - Headline style */
893
+ --heading-h3-style: 600;
894
+ /* Mobile/Heading/H4 - Headline */
895
+ --heading-h4: 600 20px/28px var(--typeface);
896
+ /* Mobile/Heading/H4 - Headline line height */
897
+ --heading-h4-line-height: 28px;
898
+ /* Mobile/Heading/H4 - Headline size */
899
+ --heading-h4-size: 20px;
900
+ /* Mobile/Heading/H4 - Headline style */
901
+ --heading-h4-style: 600;
902
+ /* Mobile/Heading/H5 */
903
+ --heading-h5: 600 18px/24px var(--typeface);
904
+ /* Mobile/Heading/H5 - line height */
905
+ --heading-h5-line-height: 24px;
906
+ /* Mobile/Heading/H5 - size */
907
+ --heading-h5-size: 18px;
908
+ /* Mobile/Heading/H5 - style */
909
+ --heading-h5-style: 600;
910
+ /* Mobile/Heading/H6 */
911
+ --heading-h6: 500 16px/20px var(--typeface);
912
+ /* Mobile/Heading/H6 - line height */
913
+ --heading-h6-line-height: 20px;
914
+ /* Mobile/Heading/H6 - size */
915
+ --heading-h6-size: 16px;
916
+ /* Mobile/Heading/H6 - style */
917
+ --heading-h6-style: medium;
918
+ /* Mobile/Subheader/Large - Headline */
919
+ --subheader-large: 400 20px/28px var(--typeface);
920
+ /* Mobile/Subheader/Large - Headline line height */
921
+ --subheader-large-line-height: 28px;
922
+ /* Mobile/Subheader/Large - Headline size */
923
+ --subheader-large-size: 20px;
924
+ /* Mobile/Subheader/Large - Headline style */
925
+ --subheader-large-style: regular;
926
+ /* Mobile/Subheader/Medium - Headline */
927
+ --subheader-medium: 400 18px/24px var(--typeface);
928
+ /* Mobile/Subheader/Medium - Headline line height */
929
+ --subheader-medium-line-height: 24px;
930
+ /* Mobile/Subheader/Medium - Headline size */
931
+ --subheader-medium-size: 18px;
932
+ /* Mobile/Subheader/Medium - Headline style */
933
+ --subheader-medium-style: regular;
934
+ /* Mobile/Subheader/X-Large - Headline */
935
+ --subheader-x-large: 400 24px/32px var(--typeface);
936
+ /* Mobile/Subheader/X-Large - Headline line height */
937
+ --subheader-x-large-line-height: 32px;
938
+ /* Mobile/Subheader/X-Large - Headline size */
939
+ --subheader-x-large-size: 24px;
940
+ /* Mobile/Subheader/X-Large - Headline style */
941
+ --subheader-x-large-style: regular;
942
+ /* Mobile/Subheader/XX-Large - Large Headline */
943
+ --subheader-xx-large: 400 28px/36px var(--typeface);
944
+ /* Mobile/Subheader/XX-Large - Large Headline line height */
945
+ --subheader-xx-large-line-height: 36px;
946
+ /* Mobile/Subheader/XX-Large - Large Headline size */
947
+ --subheader-xx-large-size: 28px;
948
+ /* Mobile/Subheader/XX-Large - Large Headline style */
949
+ --subheader-xx-large-style: regular;
950
+ /* Mobile/Subheader/XXX-Large - Large Headline */
951
+ --subheader-xxx-large: 400 32px/40px var(--typeface);
952
+ /* Mobile/Subheader/XXX-Large - Large Headline line height */
953
+ --subheader-xxx-large-line-height: 40px;
954
+ /* Mobile/Subheader/XXX-Large - Large Headline size */
955
+ --subheader-xxx-large-size: 32px;
956
+ /* Mobile/Subheader/XXX-Large - Large Headline style */
957
+ --subheader-xxx-large-style: regular;
958
+ /* light theme (default) */
959
+ /* Background/base - Theme - BRAND */
960
+ --background-base: #ffffff;
961
+ /* Background/scrim - Theme - BRAND */
962
+ --background-scrim: #00000040;
963
+ /* Background/shade - Theme - BRAND */
964
+ --background-shade: #f5f5f5;
965
+ /* Data visual/category-01 - Brand */
966
+ --data-visual-category-01: #d67e51;
967
+ /* Data visual/category-01-highlight - Brand */
968
+ --data-visual-category-01-highlight: #d67e514d;
969
+ /* Data visual/category-02 - Brand */
970
+ --data-visual-category-02: #7a2a0b;
971
+ /* Data visual/category-02-highlight - Brand */
972
+ --data-visual-category-02-highlight: #7a2a0b4d;
973
+ /* Data visual/category-03 - Brand */
974
+ --data-visual-category-03: #ab922b;
975
+ /* Data visual/category-03-highlight - Brand */
976
+ --data-visual-category-03-highlight: #ab922b4d;
977
+ /* Data visual/category-04 - Brand */
978
+ --data-visual-category-04: #2d3300;
979
+ /* Data visual/category-04-highlight - Brand */
980
+ --data-visual-category-04-highlight: #2d33004d;
981
+ /* Data visual/category-05 - Brand */
982
+ --data-visual-category-05: #794b34;
983
+ /* Data visual/category-05-highlight - Brand */
984
+ --data-visual-category-05-highlight: #794b344d;
985
+ /* Data visual/category-06 - Brand */
986
+ --data-visual-category-06: #7f7f7f;
987
+ /* Data visual/category-06-highlight - Brand */
988
+ --data-visual-category-06-highlight: #7f7f7f4d;
989
+ /* Data visual/category-07 - Brand */
990
+ --data-visual-category-07: #530909;
991
+ /* Data visual/category-07-highlight - Brand */
992
+ --data-visual-category-07-highlight: #5309094d;
993
+ /* Data visual/category-1 - Theme - BRAND */
994
+ --data-visual-category-1: #7a2a0b;
995
+ /* Data visual/category-1-highlight - Theme - BRAND */
996
+ --data-visual-category-1-highlight: #7a2a0b4d;
997
+ /* Data visual/category-2 - Theme - BRAND */
998
+ --data-visual-category-2: #d67e51;
999
+ /* Data visual/category-2-highlight - Theme - BRAND */
1000
+ --data-visual-category-2-highlight: #d67e514d;
1001
+ /* Data visual/category-3 - Theme - BRAND */
1002
+ --data-visual-category-3: #2d3300;
1003
+ /* Data visual/category-3-highlight - Theme - BRAND */
1004
+ --data-visual-category-3-highlight: #2d33004d;
1005
+ /* Data visual/category-4 - Theme - BRAND */
1006
+ --data-visual-category-4: #ab922b;
1007
+ /* Data visual/category-4-highlight - Theme - BRAND */
1008
+ --data-visual-category-4-highlight: #ab922b4d;
1009
+ /* Data visual/category-5 - Theme - BRAND */
1010
+ --data-visual-category-5: #530909;
1011
+ /* Data visual/category-5-highlight - Theme - BRAND */
1012
+ --data-visual-category-5-highlight: #5309094d;
1013
+ /* Data visual/category-6 - Theme - BRAND */
1014
+ --data-visual-category-6: #7f7f7f;
1015
+ /* Data visual/category-6-highlight - Theme - BRAND */
1016
+ --data-visual-category-6-highlight: #7f7f7f4d;
1017
+ /* Data visual/category-7 - Theme - BRAND */
1018
+ --data-visual-category-7: #794b34;
1019
+ /* Data visual/category-7-highlight - Theme - BRAND */
1020
+ --data-visual-category-7-highlight: #794b344d;
1021
+ /* Data visual/gradient-end - Theme - BRAND */
1022
+ --data-visual-gradient-end: #ffffff4d;
1023
+ /* Data visual/green - Theme - BRAND */
1024
+ --data-visual-green: #258750;
1025
+ /* Data visual/green-highlight - Theme - BRAND */
1026
+ --data-visual-green-highlight: #deede5;
1027
+ /* Data visual/negative - Brand */
1028
+ --data-visual-negative: #d83a52;
1029
+ /* Data visual/negative-highlight - Brand */
1030
+ --data-visual-negative-highlight: #f9e1e5;
1031
+ /* Data visual/positive - Brand */
1032
+ --data-visual-positive: #258750;
1033
+ /* Data visual/positive-highlight - Brand */
1034
+ --data-visual-positive-highlight: #deede5;
1035
+ /* Data visual/red - Theme - BRAND */
1036
+ --data-visual-red: #d83a52;
1037
+ /* Data visual/red-highlight - Theme - BRAND */
1038
+ --data-visual-red-highlight: #f9e1e5;
1039
+ /* Foreground/AI-powered/blue - Theme - BRAND */
1040
+ --foreground-ai-powered-blue: #215ecd;
1041
+ /* Foreground/AI-powered/pink - Theme - BRAND */
1042
+ --foreground-ai-powered-pink: #c60ede;
1043
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1044
+ --foreground-brand-on-inverse-primary: #757482;
1045
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1046
+ --foreground-brand-on-inverse-secondary: #f3a482;
1047
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1048
+ /* Foreground color used on Brand's primary color (non neutral color) */
1049
+ --foreground-brand-on-primary: #ffffff;
1050
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1051
+ /* Foreground color used on Brand's primary color (non neutral color) */
1052
+ --foreground-brand-on-secondary: #ffffff;
1053
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1054
+ /* Foreground text and icons that match the brand's primary color */
1055
+ --foreground-brand-primary: #19172f;
1056
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1057
+ --foreground-brand-primary-depth: #151428;
1058
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1059
+ /* Foreground text and icons that match the brand's secondary color */
1060
+ --foreground-brand-secondary: #eb672f;
1061
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1062
+ --foreground-brand-secondary-depth: #c85828;
1063
+ /* Foreground/Link text/default - Theme - BRAND */
1064
+ --foreground-link-text-default: #215ecd;
1065
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1066
+ --foreground-link-text-default-disabled: #7a9ee1;
1067
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1068
+ --foreground-link-text-default-hovered: #1e55b9;
1069
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1070
+ --foreground-link-text-default-pressed: #1a4ba4;
1071
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1072
+ --foreground-link-text-default-visited: #7a3e7a;
1073
+ /* Foreground/Link text/subtle-disabled - Brand */
1074
+ --foreground-link-text-subtle-disabled: #bdbdbd;
1075
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1076
+ --foreground-link-text-subtle-hovered: #292929;
1077
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1078
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1079
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1080
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1081
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1082
+ --foreground-link-text-subtle-inversed-disabled: #757575;
1083
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1084
+ --foreground-link-text-subtle-pressed: #3d3d3d;
1085
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1086
+ --foreground-neutral-disabled-on-color-surface: #757575;
1087
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1088
+ --foreground-neutral-disabled-on-surface: #bdbdbd;
1089
+ /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
1090
+ --foreground-neutral-inverse-on-surface: #fafafa;
1091
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1092
+ /* Interactive controls */
1093
+ --foreground-neutral-on-color: #ffffff;
1094
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1095
+ /* Text and icons against inverse surface */
1096
+ --foreground-neutral-on-inverse-surface: #fafafa;
1097
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1098
+ /* Default foreground text and icons against any surface color */
1099
+ --foreground-neutral-on-surface: #141414;
1100
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1101
+ /* Secondary foreground color for icons and text */
1102
+ --foreground-neutral-on-surface-variant-01: #707070;
1103
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1104
+ /* Tertiary foreground color for icons and text */
1105
+ --foreground-neutral-on-surface-variant-02: #757575;
1106
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1107
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1108
+ --foreground-neutral-on-surface-variant-03: #8a8a8a;
1109
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1110
+ --foreground-neutral-skeleton-element: #e0e0e0;
1111
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1112
+ --foreground-spectrum-blue: #143778;
1113
+ /* Foreground/Spectrum/green - Theme - BRAND */
1114
+ --foreground-spectrum-green: #134428;
1115
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1116
+ --foreground-spectrum-lime: #60651a;
1117
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1118
+ --foreground-spectrum-magenta: #63076f;
1119
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1120
+ --foreground-spectrum-orange: #773001;
1121
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1122
+ --foreground-spectrum-pink: #6c1240;
1123
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1124
+ --foreground-spectrum-purple: #310077;
1125
+ /* Foreground/Spectrum/red - Theme - BRAND */
1126
+ --foreground-spectrum-red: #6c1d29;
1127
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1128
+ --foreground-spectrum-teal: #01413c;
1129
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1130
+ --foreground-spectrum-yellow: #7b5e18;
1131
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1132
+ --interactions-brand-disabled-opacity: #0000000f;
1133
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1134
+ --interactions-brand-hover-opacity: #0000001a;
1135
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1136
+ --interactions-brand-press-opacity: #00000033;
1137
+ /* Interactions/disabled-opacity - Theme - BRAND */
1138
+ --interactions-disabled-opacity: #0000000f;
1139
+ /* Interactions/hover-opacity - Theme - BRAND */
1140
+ --interactions-hover-opacity: #00000014;
1141
+ /* Interactions/link-active-opacity - Theme - BRAND */
1142
+ --interactions-link-active-opacity: #0000004d;
1143
+ /* Interactions/neutral-hover-opacity - Brand */
1144
+ /* surfaces using neutral tones */
1145
+ --interactions-neutral-hover-opacity: #0000001a;
1146
+ /* Interactions/neutral-press-opacity - Brand */
1147
+ /* surfaces using neutral tones */
1148
+ --interactions-neutral-press-opacity: #00000029;
1149
+ /* Interactions/press-opacity - Theme - BRAND */
1150
+ --interactions-press-opacity: #00000029;
1151
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1152
+ --interactions-primary-disabled-opacity: #19172f1f;
1153
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1154
+ --interactions-primary-hover-opacity: #19172f1a;
1155
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1156
+ --interactions-primary-press-opacity: #19172f33;
1157
+ /* Shadow/shadow-10 - Theme - BRAND */
1158
+ --shadow-10: #0000001a;
1159
+ /* Shadow/shadow-12 - Theme - BRAND */
1160
+ --shadow-12: #0000001f;
1161
+ /* Shadow/shadow-15 - Theme - BRAND */
1162
+ --shadow-15: #00000026;
1163
+ /* Shadow/shadow-25 - Theme - BRAND */
1164
+ --shadow-25: #00000040;
1165
+ /* Shadow/shadow-32 - Theme - BRAND */
1166
+ --shadow-32: #00000052;
1167
+ /* Shadow/inner-shadow - Brand */
1168
+ --shadow-inner: #ffffff;
1169
+ /* Shadow/inner-shadow-100 - Theme - BRAND */
1170
+ --shadow-inner-100: #ffffff;
1171
+ /* Shadow/variant-01 - Brand */
1172
+ --shadow-variant-01: #0000001a;
1173
+ /* Shadow/variant-02 - Brand */
1174
+ --shadow-variant-02: #0000001f;
1175
+ /* Shadow/variant-03 - Brand */
1176
+ --shadow-variant-03: #00000026;
1177
+ /* Shadow/variant-04 - Brand */
1178
+ --shadow-variant-04: #00000040;
1179
+ /* Shadow/variant-05 - Brand */
1180
+ --shadow-variant-05: #00000052;
1181
+ /* Status/error - Theme - BRAND */
1182
+ /* Foreground error text and icons */
1183
+ --status-error: #d83a52;
1184
+ /* Status/information - Theme - BRAND */
1185
+ --status-information: #276ef1;
1186
+ /* Status/informational - Brand */
1187
+ /* Foreground informational text and icons */
1188
+ --status-informational: #276ef1;
1189
+ /* Status/on-error - Theme - BRAND */
1190
+ /* Foreground error text and icons */
1191
+ --status-on-error: #ffffff;
1192
+ /* Status/on-information - Theme - BRAND */
1193
+ --status-on-information: #ffffff;
1194
+ /* Status/on-informational - Brand */
1195
+ /* Foreground informational text and icons */
1196
+ --status-on-informational: #ffffff;
1197
+ /* Status/on-success - Theme - BRAND */
1198
+ /* Foreground success icons and text */
1199
+ --status-on-success: #ffffff;
1200
+ /* Status/on-warning - Theme - BRAND */
1201
+ /* Foreground warning icons */
1202
+ --status-on-warning: #141414;
1203
+ /* Status/success - Theme - BRAND */
1204
+ /* Foreground success icons and text */
1205
+ --status-success: #258750;
1206
+ /* Status/warning - Theme - BRAND */
1207
+ /* Foreground warning icons */
1208
+ --status-warning: #f6bc2f;
1209
+ /* Stroke/AI-powered/blue - Theme - BRAND */
1210
+ --stroke-ai-powered-blue: #215ecd;
1211
+ /* Stroke/AI-powered/pink - Theme - BRAND */
1212
+ --stroke-ai-powered-pink: #c60ede;
1213
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1214
+ /* Outline variant - decorative elements such as dividers */
1215
+ --stroke-brand-primary: #19172f;
1216
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1217
+ /* Outline variant - decorative elements such as dividers */
1218
+ --stroke-brand-primary-depth: #151428;
1219
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1220
+ --stroke-brand-secondary: #eb672f;
1221
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1222
+ --stroke-brand-secondary-depth: #c85828;
1223
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1224
+ /* For control components */
1225
+ --stroke-neutral-base: #949494;
1226
+ /* Stroke/Neutral/disabled-dark - Brand */
1227
+ /* Disabled outline separating the fill and surface background */
1228
+ --stroke-neutral-disabled-dark: #757575;
1229
+ /* Stroke/Neutral/disabled-light - Brand */
1230
+ /* Disabled outline separating the fill and surface background */
1231
+ --stroke-neutral-disabled-light: #bdbdbd;
1232
+ /* Stroke/Neutral/focus - Brand */
1233
+ /* Highlight focus element */
1234
+ --stroke-neutral-focus: #000000;
1235
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1236
+ /* Highlight focus element */
1237
+ --stroke-neutral-focus-on-inverse: #ffffff;
1238
+ /* Stroke/Neutral/neutral-high - Brand */
1239
+ --stroke-neutral-high: #141414;
1240
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1241
+ --stroke-neutral-high-contrast: #141414;
1242
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1243
+ --stroke-neutral-interactions-disabled-dark: #757575;
1244
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1245
+ --stroke-neutral-interactions-disabled-light: #bdbdbd;
1246
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1247
+ --stroke-neutral-interactions-focus: #000000;
1248
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
1249
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1250
+ /* Stroke/Neutral/neutral-low - Brand */
1251
+ /* Outline variant - decorative elements such as dividers */
1252
+ --stroke-neutral-low: #e0e0e0;
1253
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1254
+ --stroke-neutral-low-contrast: #e0e0e0;
1255
+ /* Surface/AI-powered/blue - Theme - BRAND */
1256
+ --surface-ai-powered-blue: #215ecd;
1257
+ /* Surface/AI-powered/pink - Theme - BRAND */
1258
+ --surface-ai-powered-pink: #c60ede;
1259
+ /* Surface/Brand/primary - Theme - BRAND */
1260
+ --surface-brand-primary: #19172f;
1261
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1262
+ --surface-brand-primary-highlight: #dddce0;
1263
+ /* Surface/Brand/secondary - Theme - BRAND */
1264
+ --surface-brand-secondary: #eb672f;
1265
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1266
+ --surface-brand-secondary-highlight: #fce8e0;
1267
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1268
+ --surface-neutral-interactions-dark-disabled: #d6d6d6;
1269
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1270
+ --surface-neutral-interactions-light-disabled: #f5f5f5;
1271
+ /* Surface/Neutral/inverse - Brand */
1272
+ /* Inverted. Use for toasts notification & snackbars */
1273
+ --surface-neutral-inverse: #1f1f1f;
1274
+ /* Surface/Neutral/inverse-dark - Theme - BRAND */
1275
+ --surface-neutral-inverse-dark: #1f1f1f;
1276
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1277
+ --surface-neutral-inverse-light: #ffffff;
1278
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1279
+ --surface-neutral-t1-base: #ffffff;
1280
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1281
+ --surface-neutral-t2-lowest: #f5f5f5;
1282
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1283
+ /* Navigations, app bar etc */
1284
+ --surface-neutral-t3-low: #dbdbdb;
1285
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1286
+ /* Navigations, app bar etc */
1287
+ --surface-neutral-t4-high: #8a8a8a;
1288
+ /* Surface/Neutral/transparent - Theme - BRAND */
1289
+ --surface-neutral-transparent: #ffffff00;
1290
+ /* Surface/Spectrum/blue - Theme - BRAND */
1291
+ --surface-spectrum-blue: #dfe9fd;
1292
+ /* Surface/Spectrum/green - Theme - BRAND */
1293
+ --surface-spectrum-green: #deede5;
1294
+ /* Surface/Spectrum/lime - Theme - BRAND */
1295
+ --surface-spectrum-lime: #f6f7e0;
1296
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1297
+ --surface-spectrum-magenta: #f6dbfa;
1298
+ /* Surface/Spectrum/orange - Theme - BRAND */
1299
+ --surface-spectrum-orange: #fce7d9;
1300
+ /* Surface/Spectrum/pink - Theme - BRAND */
1301
+ --surface-spectrum-pink: #f9deec;
1302
+ /* Surface/Spectrum/purple - Theme - BRAND */
1303
+ --surface-spectrum-purple: #e7d9fc;
1304
+ /* Surface/Spectrum/red - Theme - BRAND */
1305
+ --surface-spectrum-red: #f9e1e5;
1306
+ /* Surface/Spectrum/teal - Theme - BRAND */
1307
+ --surface-spectrum-teal: #d9eceb;
1308
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1309
+ --surface-spectrum-yellow: #fef5e0;
1310
+
1311
+ @media (width >= 640px) {
1312
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1313
+ --display-regular-large: 400 64px/88px var(--typeface);
1314
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1315
+ --display-regular-large-line-height: 88px;
1316
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1317
+ --display-regular-large-size: 64px;
1318
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1319
+ --display-regular-large-style: regular;
1320
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1321
+ --display-regular-medium: 400 56px/72px var(--typeface);
1322
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1323
+ --display-regular-medium-line-height: 72px;
1324
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1325
+ --display-regular-medium-size: 56px;
1326
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1327
+ --display-regular-medium-style: regular;
1328
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1329
+ --display-regular-small: 400 48px/60px var(--typeface);
1330
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1331
+ --display-regular-small-line-height: 60px;
1332
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1333
+ --display-regular-small-size: 48px;
1334
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1335
+ --display-regular-small-style: regular;
1336
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1337
+ --display-semibold-large: 600 64px/88px var(--typeface);
1338
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1339
+ --display-semibold-large-line-height: 88px;
1340
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1341
+ --display-semibold-large-size: 64px;
1342
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1343
+ --display-semibold-large-style: 600;
1344
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1345
+ --display-semibold-medium: 600 56px/72px var(--typeface);
1346
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1347
+ --display-semibold-medium-line-height: 72px;
1348
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1349
+ --display-semibold-medium-size: 56px;
1350
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1351
+ --display-semibold-medium-style: 600;
1352
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1353
+ --display-semibold-small: 600 48px/60px var(--typeface);
1354
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1355
+ --display-semibold-small-line-height: 60px;
1356
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1357
+ --display-semibold-small-size: 48px;
1358
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1359
+ --display-semibold-small-style: 600;
1360
+ /* Desktop/Heading/H1 */
1361
+ --heading-h1: 600 40px/48px var(--typeface);
1362
+ /* Desktop/Heading/H1 - line height */
1363
+ --heading-h1-line-height: 48px;
1364
+ /* Desktop/Heading/H1 - size */
1365
+ --heading-h1-size: 40px;
1366
+ /* Desktop/Heading/H1 - style */
1367
+ --heading-h1-style: 600;
1368
+ /* Desktop/Heading/H2 */
1369
+ --heading-h2: 600 32px/40px var(--typeface);
1370
+ /* Desktop/Heading/H2 - line height */
1371
+ --heading-h2-line-height: 40px;
1372
+ /* Desktop/Heading/H2 - size */
1373
+ --heading-h2-size: 32px;
1374
+ /* Desktop/Heading/H2 - style */
1375
+ --heading-h2-style: 600;
1376
+ /* Desktop/Heading/H3 */
1377
+ --heading-h3: 600 28px/36px var(--typeface);
1378
+ /* Desktop/Heading/H3 - line height */
1379
+ --heading-h3-line-height: 36px;
1380
+ /* Desktop/Heading/H3 - size */
1381
+ --heading-h3-size: 28px;
1382
+ /* Desktop/Heading/H3 - style */
1383
+ --heading-h3-style: 600;
1384
+ /* Desktop/Heading/H4 */
1385
+ --heading-h4: 600 24px/32px var(--typeface);
1386
+ /* Desktop/Heading/H4 - line height */
1387
+ --heading-h4-line-height: 32px;
1388
+ /* Desktop/Heading/H4 - size */
1389
+ --heading-h4-size: 24px;
1390
+ /* Desktop/Heading/H4 - style */
1391
+ --heading-h4-style: 600;
1392
+ /* Desktop/Heading/H5 */
1393
+ --heading-h5: 600 20px/28px var(--typeface);
1394
+ /* Desktop/Heading/H5 - line height */
1395
+ --heading-h5-line-height: 28px;
1396
+ /* Desktop/Heading/H5 - size */
1397
+ --heading-h5-size: 20px;
1398
+ /* Desktop/Heading/H5 - style */
1399
+ --heading-h5-style: 600;
1400
+ /* Desktop/Heading/H6 */
1401
+ --heading-h6: 500 18px/24px var(--typeface);
1402
+ /* Desktop/Heading/H6 - line height */
1403
+ --heading-h6-line-height: 24px;
1404
+ /* Desktop/Heading/H6 - size */
1405
+ --heading-h6-size: 18px;
1406
+ /* Desktop/Heading/H6 - style */
1407
+ --heading-h6-style: medium;
1408
+ /* Desktop/Subheader/Large - Headline */
1409
+ --subheader-large: 400 24px/32px var(--typeface);
1410
+ /* Desktop/Subheader/Large - Headline line height */
1411
+ --subheader-large-line-height: 32px;
1412
+ /* Desktop/Subheader/Large - Headline size */
1413
+ --subheader-large-size: 24px;
1414
+ /* Desktop/Subheader/Large - Headline style */
1415
+ --subheader-large-style: regular;
1416
+ /* Desktop/Subheader/Medium */
1417
+ --subheader-medium: 400 20px/28px var(--typeface);
1418
+ /* Desktop/Subheader/Medium - line height */
1419
+ --subheader-medium-line-height: 28px;
1420
+ /* Desktop/Subheader/Medium - size */
1421
+ --subheader-medium-size: 20px;
1422
+ /* Desktop/Subheader/Medium - style */
1423
+ --subheader-medium-style: regular;
1424
+ /* Desktop/Subheader/X-Large - Headline */
1425
+ --subheader-x-large: 400 28px/36px var(--typeface);
1426
+ /* Desktop/Subheader/X-Large - Headline line height */
1427
+ --subheader-x-large-line-height: 36px;
1428
+ /* Desktop/Subheader/X-Large - Headline size */
1429
+ --subheader-x-large-size: 28px;
1430
+ /* Desktop/Subheader/X-Large - Headline style */
1431
+ --subheader-x-large-style: regular;
1432
+ /* Desktop/Subheader/XX-Large - Headline */
1433
+ --subheader-xx-large: 400 32px/40px var(--typeface);
1434
+ /* Desktop/Subheader/XX-Large - Headline line height */
1435
+ --subheader-xx-large-line-height: 40px;
1436
+ /* Desktop/Subheader/XX-Large - Headline size */
1437
+ --subheader-xx-large-size: 32px;
1438
+ /* Desktop/Subheader/XX-Large - Headline style */
1439
+ --subheader-xx-large-style: regular;
1440
+ /* Desktop/Subheader/XXX-Large - Large Headline */
1441
+ --subheader-xxx-large: 400 40px/48px var(--typeface);
1442
+ /* Desktop/Subheader/XXX-Large - Large Headline line height */
1443
+ --subheader-xxx-large-line-height: 48px;
1444
+ /* Desktop/Subheader/XXX-Large - Large Headline size */
1445
+ --subheader-xxx-large-size: 40px;
1446
+ /* Desktop/Subheader/XXX-Large - Large Headline style */
1447
+ --subheader-xxx-large-style: regular;
1448
+ }
1449
+ }
1450
+ /* dark theme */
1451
+ [data-theme='dark'] {
1452
+ /* Background/base - Theme - BRAND */
1453
+ --background-base: #1f1f1f;
1454
+ /* Background/scrim - Theme - BRAND */
1455
+ --background-scrim: #61616180;
1456
+ /* Background/shade - Theme - BRAND */
1457
+ --background-shade: #292929;
1458
+ /* Data visual/category-01 - Brand */
1459
+ --data-visual-category-01: #e6b297;
1460
+ /* Data visual/category-01-highlight - Brand */
1461
+ --data-visual-category-01-highlight: #e6b2974d;
1462
+ /* Data visual/category-02 - Brand */
1463
+ --data-visual-category-02: #b68a79;
1464
+ /* Data visual/category-02-highlight - Brand */
1465
+ --data-visual-category-02-highlight: #b68a794d;
1466
+ /* Data visual/category-03 - Brand */
1467
+ --data-visual-category-03: #cdbe80;
1468
+ /* Data visual/category-03-highlight - Brand */
1469
+ --data-visual-category-03-highlight: #cdbe804d;
1470
+ /* Data visual/category-04 - Brand */
1471
+ --data-visual-category-04: #969980;
1472
+ /* Data visual/category-04-highlight - Brand */
1473
+ --data-visual-category-04-highlight: #9699804d;
1474
+ /* Data visual/category-05 - Brand */
1475
+ --data-visual-category-05: #af9385;
1476
+ /* Data visual/category-05-highlight - Brand */
1477
+ --data-visual-category-05-highlight: #af93854d;
1478
+ /* Data visual/category-06 - Brand */
1479
+ --data-visual-category-06: #b2b2b2;
1480
+ /* Data visual/category-06-highlight - Brand */
1481
+ --data-visual-category-06-highlight: #b2b2b24d;
1482
+ /* Data visual/category-07 - Brand */
1483
+ --data-visual-category-07: #a98484;
1484
+ /* Data visual/category-07-highlight - Brand */
1485
+ --data-visual-category-07-highlight: #a984844d;
1486
+ /* Data visual/category-1 - Theme - BRAND */
1487
+ --data-visual-category-1: #b68a79;
1488
+ /* Data visual/category-1-highlight - Theme - BRAND */
1489
+ --data-visual-category-1-highlight: #b68a794d;
1490
+ /* Data visual/category-2 - Theme - BRAND */
1491
+ --data-visual-category-2: #e6b297;
1492
+ /* Data visual/category-2-highlight - Theme - BRAND */
1493
+ --data-visual-category-2-highlight: #e6b2974d;
1494
+ /* Data visual/category-3 - Theme - BRAND */
1495
+ --data-visual-category-3: #969980;
1496
+ /* Data visual/category-3-highlight - Theme - BRAND */
1497
+ --data-visual-category-3-highlight: #9699804d;
1498
+ /* Data visual/category-4 - Theme - BRAND */
1499
+ --data-visual-category-4: #cdbe80;
1500
+ /* Data visual/category-4-highlight - Theme - BRAND */
1501
+ --data-visual-category-4-highlight: #cdbe804d;
1502
+ /* Data visual/category-5 - Theme - BRAND */
1503
+ --data-visual-category-5: #a98484;
1504
+ /* Data visual/category-5-highlight - Theme - BRAND */
1505
+ --data-visual-category-5-highlight: #a984844d;
1506
+ /* Data visual/category-6 - Theme - BRAND */
1507
+ --data-visual-category-6: #b2b2b2;
1508
+ /* Data visual/category-6-highlight - Theme - BRAND */
1509
+ --data-visual-category-6-highlight: #b2b2b24d;
1510
+ /* Data visual/category-7 - Theme - BRAND */
1511
+ --data-visual-category-7: #af9385;
1512
+ /* Data visual/category-7-highlight - Theme - BRAND */
1513
+ --data-visual-category-7-highlight: #af93854d;
1514
+ /* Data visual/gradient-end - Theme - BRAND */
1515
+ --data-visual-gradient-end: #1f1f1f4d;
1516
+ /* Data visual/green - Theme - BRAND */
1517
+ --data-visual-green: #7cb796;
1518
+ /* Data visual/green-highlight - Theme - BRAND */
1519
+ --data-visual-green-highlight: #0d2f1c;
1520
+ /* Data visual/negative - Brand */
1521
+ --data-visual-negative: #e88997;
1522
+ /* Data visual/negative-highlight - Brand */
1523
+ --data-visual-negative-highlight: #4c141d;
1524
+ /* Data visual/positive - Brand */
1525
+ --data-visual-positive: #7cb796;
1526
+ /* Data visual/positive-highlight - Brand */
1527
+ --data-visual-positive-highlight: #0d2f1c;
1528
+ /* Data visual/red - Theme - BRAND */
1529
+ --data-visual-red: #e88997;
1530
+ /* Data visual/red-highlight - Theme - BRAND */
1531
+ --data-visual-red-highlight: #4c141d;
1532
+ /* Foreground/AI-powered/blue - Theme - BRAND */
1533
+ --foreground-ai-powered-blue: #000000;
1534
+ /* Foreground/AI-powered/pink - Theme - BRAND */
1535
+ --foreground-ai-powered-pink: #000000;
1536
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1537
+ --foreground-brand-on-inverse-primary: #757482;
1538
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1539
+ --foreground-brand-on-inverse-secondary: #f3a482;
1540
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1541
+ /* Foreground color used on Brand's primary color (non neutral color) */
1542
+ --foreground-brand-on-primary: #141414;
1543
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1544
+ /* Foreground color used on Brand's primary color (non neutral color) */
1545
+ --foreground-brand-on-secondary: #141414;
1546
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1547
+ /* Foreground text and icons that match the brand's primary color */
1548
+ --foreground-brand-primary: #757482;
1549
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1550
+ --foreground-brand-primary-depth: #9897a1;
1551
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1552
+ /* Foreground text and icons that match the brand's secondary color */
1553
+ --foreground-brand-secondary: #f3a482;
1554
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1555
+ --foreground-brand-secondary-depth: #f6bba1;
1556
+ /* Foreground/Link text/default - Theme - BRAND */
1557
+ --foreground-link-text-default: #7a9ee1;
1558
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1559
+ --foreground-link-text-default-disabled: #14387b;
1560
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1561
+ --foreground-link-text-default-hovered: #90afe6;
1562
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1563
+ --foreground-link-text-default-pressed: #a6bfeb;
1564
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1565
+ --foreground-link-text-default-visited: #af8baf;
1566
+ /* Foreground/Link text/subtle-disabled - Brand */
1567
+ --foreground-link-text-subtle-disabled: #4d4d4d;
1568
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1569
+ --foreground-link-text-subtle-hovered: #e6e6e6;
1570
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1571
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1572
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1573
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1574
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1575
+ --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
1576
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1577
+ --foreground-link-text-subtle-pressed: #d1d1d1;
1578
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1579
+ --foreground-neutral-disabled-on-color-surface: #3d3d3d;
1580
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1581
+ --foreground-neutral-disabled-on-surface: #4d4d4d;
1582
+ /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
1583
+ --foreground-neutral-inverse-on-surface: #fafafa;
1584
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1585
+ /* Interactive controls */
1586
+ --foreground-neutral-on-color: #ffffff;
1587
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1588
+ /* Text and icons against inverse surface */
1589
+ --foreground-neutral-on-inverse-surface: #fafafa;
1590
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1591
+ /* Default foreground text and icons against any surface color */
1592
+ --foreground-neutral-on-surface: #fafafa;
1593
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1594
+ /* Secondary foreground color for icons and text */
1595
+ --foreground-neutral-on-surface-variant-01: #c2c2c2;
1596
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1597
+ /* Tertiary foreground color for icons and text */
1598
+ --foreground-neutral-on-surface-variant-02: #9e9e9e;
1599
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1600
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1601
+ --foreground-neutral-on-surface-variant-03: #757575;
1602
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1603
+ --foreground-neutral-skeleton-element: #333333;
1604
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1605
+ --foreground-spectrum-blue: #88aff7;
1606
+ /* Foreground/Spectrum/green - Theme - BRAND */
1607
+ --foreground-spectrum-green: #87bd9f;
1608
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1609
+ --foreground-spectrum-lime: #dce28f;
1610
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1611
+ --foreground-spectrum-magenta: #e07aed;
1612
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1613
+ --foreground-spectrum-orange: #f6a874;
1614
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1615
+ --foreground-spectrum-pink: #ea86b9;
1616
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1617
+ --foreground-spectrum-purple: #c8a6f9;
1618
+ /* Foreground/Spectrum/red - Theme - BRAND */
1619
+ --foreground-spectrum-red: #ea93a0;
1620
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1621
+ --foreground-spectrum-teal: #74bbb4;
1622
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1623
+ --foreground-spectrum-yellow: #fada8d;
1624
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1625
+ --interactions-brand-disabled-opacity: #ffffff0f;
1626
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1627
+ --interactions-brand-hover-opacity: #ffffff1a;
1628
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1629
+ --interactions-brand-press-opacity: #ffffff33;
1630
+ /* Interactions/disabled-opacity - Theme - BRAND */
1631
+ --interactions-disabled-opacity: #ffffff0f;
1632
+ /* Interactions/hover-opacity - Theme - BRAND */
1633
+ --interactions-hover-opacity: #ffffff14;
1634
+ /* Interactions/link-active-opacity - Theme - BRAND */
1635
+ --interactions-link-active-opacity: #ffffff4d;
1636
+ /* Interactions/neutral-hover-opacity - Brand */
1637
+ /* surfaces using neutral tones */
1638
+ --interactions-neutral-hover-opacity: #ffffff1a;
1639
+ /* Interactions/neutral-press-opacity - Brand */
1640
+ /* surfaces using neutral tones */
1641
+ --interactions-neutral-press-opacity: #ffffff29;
1642
+ /* Interactions/press-opacity - Theme - BRAND */
1643
+ --interactions-press-opacity: #ffffff29;
1644
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1645
+ --interactions-primary-disabled-opacity: #7574821f;
1646
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1647
+ --interactions-primary-hover-opacity: #7574821a;
1648
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1649
+ --interactions-primary-press-opacity: #75748233;
1650
+ /* Shadow/shadow-10 - Theme - BRAND */
1651
+ --shadow-10: #6161611a;
1652
+ /* Shadow/shadow-12 - Theme - BRAND */
1653
+ --shadow-12: #6161611f;
1654
+ /* Shadow/shadow-15 - Theme - BRAND */
1655
+ --shadow-15: #61616126;
1656
+ /* Shadow/shadow-25 - Theme - BRAND */
1657
+ --shadow-25: #61616140;
1658
+ /* Shadow/shadow-32 - Theme - BRAND */
1659
+ --shadow-32: #61616152;
1660
+ /* Shadow/inner-shadow - Brand */
1661
+ --shadow-inner: #000000;
1662
+ /* Shadow/inner-shadow-100 - Theme - BRAND */
1663
+ --shadow-inner-100: #000000;
1664
+ /* Shadow/variant-01 - Brand */
1665
+ --shadow-variant-01: #6161611a;
1666
+ /* Shadow/variant-02 - Brand */
1667
+ --shadow-variant-02: #6161611f;
1668
+ /* Shadow/variant-03 - Brand */
1669
+ --shadow-variant-03: #61616126;
1670
+ /* Shadow/variant-04 - Brand */
1671
+ --shadow-variant-04: #61616140;
1672
+ /* Shadow/variant-05 - Brand */
1673
+ --shadow-variant-05: #61616152;
1674
+ /* Status/error - Theme - BRAND */
1675
+ /* Foreground error text and icons */
1676
+ --status-error: #e26b7d;
1677
+ /* Status/information - Theme - BRAND */
1678
+ --status-information: #5d92f5;
1679
+ /* Status/informational - Brand */
1680
+ /* Foreground informational text and icons */
1681
+ --status-informational: #5d92f5;
1682
+ /* Status/on-error - Theme - BRAND */
1683
+ /* Foreground error text and icons */
1684
+ --status-on-error: #ffffff;
1685
+ /* Status/on-information - Theme - BRAND */
1686
+ --status-on-information: #ffffff;
1687
+ /* Status/on-informational - Brand */
1688
+ /* Foreground informational text and icons */
1689
+ --status-on-informational: #ffffff;
1690
+ /* Status/on-success - Theme - BRAND */
1691
+ /* Foreground success icons and text */
1692
+ --status-on-success: #ffffff;
1693
+ /* Status/on-warning - Theme - BRAND */
1694
+ /* Foreground warning icons */
1695
+ --status-on-warning: #141414;
1696
+ /* Status/success - Theme - BRAND */
1697
+ /* Foreground success icons and text */
1698
+ --status-success: #519f73;
1699
+ /* Status/warning - Theme - BRAND */
1700
+ /* Foreground warning icons */
1701
+ --status-warning: #f8cd63;
1702
+ /* Stroke/AI-powered/blue - Theme - BRAND */
1703
+ --stroke-ai-powered-blue: #000000;
1704
+ /* Stroke/AI-powered/pink - Theme - BRAND */
1705
+ --stroke-ai-powered-pink: #000000;
1706
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1707
+ /* Outline variant - decorative elements such as dividers */
1708
+ --stroke-brand-primary: #757482;
1709
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1710
+ /* Outline variant - decorative elements such as dividers */
1711
+ --stroke-brand-primary-depth: #9897a1;
1712
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1713
+ --stroke-brand-secondary: #f3a482;
1714
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1715
+ --stroke-brand-secondary-depth: #f6bba1;
1716
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1717
+ /* For control components */
1718
+ --stroke-neutral-base: #6b6b6b;
1719
+ /* Stroke/Neutral/disabled-dark - Brand */
1720
+ /* Disabled outline separating the fill and surface background */
1721
+ --stroke-neutral-disabled-dark: #3d3d3d;
1722
+ /* Stroke/Neutral/disabled-light - Brand */
1723
+ /* Disabled outline separating the fill and surface background */
1724
+ --stroke-neutral-disabled-light: #4d4d4d;
1725
+ /* Stroke/Neutral/focus - Brand */
1726
+ /* Highlight focus element */
1727
+ --stroke-neutral-focus: #ffffff;
1728
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1729
+ /* Highlight focus element */
1730
+ --stroke-neutral-focus-on-inverse: #ffffff;
1731
+ /* Stroke/Neutral/neutral-high - Brand */
1732
+ --stroke-neutral-high: #fafafa;
1733
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1734
+ --stroke-neutral-high-contrast: #fafafa;
1735
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1736
+ --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1737
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1738
+ --stroke-neutral-interactions-disabled-light: #4d4d4d;
1739
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1740
+ --stroke-neutral-interactions-focus: #ffffff;
1741
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
1742
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1743
+ /* Stroke/Neutral/neutral-low - Brand */
1744
+ /* Outline variant - decorative elements such as dividers */
1745
+ --stroke-neutral-low: #4d4d4d;
1746
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1747
+ --stroke-neutral-low-contrast: #4d4d4d;
1748
+ /* Surface/AI-powered/blue - Theme - BRAND */
1749
+ --surface-ai-powered-blue: #000000;
1750
+ /* Surface/AI-powered/pink - Theme - BRAND */
1751
+ --surface-ai-powered-pink: #000000;
1752
+ /* Surface/Brand/primary - Theme - BRAND */
1753
+ --surface-brand-primary: #757482;
1754
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1755
+ --surface-brand-primary-highlight: #06060c;
1756
+ /* Surface/Brand/secondary - Theme - BRAND */
1757
+ --surface-brand-secondary: #f3a482;
1758
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1759
+ --surface-brand-secondary-highlight: #3b1a0c;
1760
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1761
+ --surface-neutral-interactions-dark-disabled: #474747;
1762
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1763
+ --surface-neutral-interactions-light-disabled: #292929;
1764
+ /* Surface/Neutral/inverse - Brand */
1765
+ /* Inverted. Use for toasts notification & snackbars */
1766
+ --surface-neutral-inverse: #383838;
1767
+ /* Surface/Neutral/inverse-dark - Theme - BRAND */
1768
+ --surface-neutral-inverse-dark: #383838;
1769
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1770
+ --surface-neutral-inverse-light: #575757;
1771
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1772
+ --surface-neutral-t1-base: #1f1f1f;
1773
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1774
+ --surface-neutral-t2-lowest: #2e2e2e;
1775
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1776
+ /* Navigations, app bar etc */
1777
+ --surface-neutral-t3-low: #383838;
1778
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1779
+ /* Navigations, app bar etc */
1780
+ --surface-neutral-t4-high: #7a7a7a;
1781
+ /* Surface/Neutral/transparent - Theme - BRAND */
1782
+ --surface-neutral-transparent: #ffffff00;
1783
+ /* Surface/Spectrum/blue - Theme - BRAND */
1784
+ --surface-spectrum-blue: #0e2754;
1785
+ /* Surface/Spectrum/green - Theme - BRAND */
1786
+ --surface-spectrum-green: #0d2f1c;
1787
+ /* Surface/Spectrum/lime - Theme - BRAND */
1788
+ --surface-spectrum-lime: #434712;
1789
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1790
+ --surface-spectrum-magenta: #45054e;
1791
+ /* Surface/Spectrum/orange - Theme - BRAND */
1792
+ --surface-spectrum-orange: #532201;
1793
+ /* Surface/Spectrum/pink - Theme - BRAND */
1794
+ --surface-spectrum-pink: #4c0c2d;
1795
+ /* Surface/Spectrum/purple - Theme - BRAND */
1796
+ --surface-spectrum-purple: #220053;
1797
+ /* Surface/Spectrum/red - Theme - BRAND */
1798
+ --surface-spectrum-red: #4c141d;
1799
+ /* Surface/Spectrum/teal - Theme - BRAND */
1800
+ --surface-spectrum-teal: #012e2a;
1801
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1802
+ --surface-spectrum-yellow: #564210;
1803
+ }
1804
+ `));
1805
+ document.head.appendChild(style);