@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
@@ -1,186 +1,46 @@
1
1
  /** * This file is generated by the build script.
2
2
  * Do not edit this file directly. */
3
3
  const style = document.createElement('style');
4
- style.appendChild(document.createTextNode(`/* Generated from figma export: 2025-07-08T20:32:21.402Z */
4
+ style.appendChild(document.createTextNode(`/* Generated from figma export: 2026-02-02T17:54:13.533Z */
5
5
 
6
- @import url('https://fonts.googleapis.com/css2?family=Work%20Sans:ital,wght@0,100..900;1,100..900&display=swap');
6
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
7
7
  body {
8
8
  font-family: var(--typeface);
9
9
  }
10
10
 
11
11
  :root {
12
12
  /* Body/Base */
13
- --body-base: 400 16px/20px var(--typeface);
14
- /* Body/Base - line height */
15
- --body-base-line-height: 20px;
16
- /* Body/Base - size */
13
+ --body-base: 400 16px/24px var(--typeface);
14
+ /* Body/Base - line height */
15
+ --body-base-line-height: 24px;
16
+ /* Body/Base - size */
17
17
  --body-base-size: 16px;
18
- /* Body/Base - style */
18
+ /* Body/Base - style */
19
19
  --body-base-style: regular;
20
20
  /* Body/Large */
21
- --body-large: 400 18px/24px var(--typeface);
22
- /* Body/Large - line height */
23
- --body-large-line-height: 24px;
24
- /* Body/Large - size */
21
+ --body-large: 400 18px/28px var(--typeface);
22
+ /* Body/Large - line height */
23
+ --body-large-line-height: 28px;
24
+ /* Body/Large - size */
25
25
  --body-large-size: 18px;
26
- /* Body/Large - style */
26
+ /* Body/Large - style */
27
27
  --body-large-style: regular;
28
28
  /* Body/Small */
29
29
  --body-small: 400 14px/20px var(--typeface);
30
- /* Body/Small - line height */
30
+ /* Body/Small - line height */
31
31
  --body-small-line-height: 20px;
32
- /* Body/Small - size */
32
+ /* Body/Small - size */
33
33
  --body-small-size: 14px;
34
- /* Body/Small - style */
34
+ /* Body/Small - style */
35
35
  --body-small-style: regular;
36
36
  /* Body/X-Small */
37
37
  --body-x-small: 400 12px/16px var(--typeface);
38
- /* Body/X-Small - line height */
38
+ /* Body/X-Small - line height */
39
39
  --body-x-small-line-height: 16px;
40
- /* Body/X-Small - size */
40
+ /* Body/X-Small - size */
41
41
  --body-x-small-size: 12px;
42
- /* Body/X-Small - style */
42
+ /* Body/X-Small - style */
43
43
  --body-x-small-style: regular;
44
- /* Colors/Brands/Experiment/blue-dark/100 - Global (primitives) */
45
- --colors-brands-experiment-blue-dark-100: #0a2f85;
46
- /* Colors/Brands/Experiment/blue-dark/200 - Global (primitives) */
47
- --colors-brands-experiment-blue-dark-200: #1347cc;
48
- /* Colors/Brands/Experiment/blue-dark/300 - Global (primitives) */
49
- --colors-brands-experiment-blue-dark-300: #0f59e2;
50
- /* Colors/Brands/Experiment/blue-dark/400 - Global (primitives) */
51
- --colors-brands-experiment-blue-dark-400: #357aea;
52
- /* Colors/Brands/Experiment/blue-dark/50 - Global (primitives) */
53
- --colors-brands-experiment-blue-dark-50: #181d34;
54
- /* Colors/Brands/Experiment/blue-dark/500 - Global (primitives) */
55
- --colors-brands-experiment-blue-dark-500: #2e88f6;
56
- /* Colors/Brands/Experiment/blue-dark/600 - Global (primitives) */
57
- --colors-brands-experiment-blue-dark-600: #50a1ff;
58
- /* Colors/Brands/Experiment/blue-dark/700 - Global (primitives) */
59
- --colors-brands-experiment-blue-dark-700: #7ab7ff;
60
- /* Colors/Brands/Experiment/blue-dark/800 - Global (primitives) */
61
- --colors-brands-experiment-blue-dark-800: #dcebfe;
62
- /* Colors/Brands/Experiment/blue-dark/900 - Global (primitives) */
63
- --colors-brands-experiment-blue-dark-900: #f0f6ff;
64
- /* Colors/Brands/Experiment/blue-gray-dark/100 - Global (primitives) */
65
- --colors-brands-experiment-blue-gray-dark-100: #1a2332;
66
- /* Colors/Brands/Experiment/blue-gray-dark/200 - Global (primitives) */
67
- --colors-brands-experiment-blue-gray-dark-200: #252e3c;
68
- /* Colors/Brands/Experiment/blue-gray-dark/300 - Global (primitives) */
69
- --colors-brands-experiment-blue-gray-dark-300: #323b49;
70
- /* Colors/Brands/Experiment/blue-gray-dark/400 - Global (primitives) */
71
- --colors-brands-experiment-blue-gray-dark-400: #5e6d82;
72
- /* Colors/Brands/Experiment/blue-gray-dark/50 - Global (primitives) */
73
- --colors-brands-experiment-blue-gray-dark-50: #0c101c;
74
- /* Colors/Brands/Experiment/blue-gray-dark/500 - Global (primitives) */
75
- --colors-brands-experiment-blue-gray-dark-500: #8b9bb2;
76
- /* Colors/Brands/Experiment/blue-gray-dark/600 - Global (primitives) */
77
- --colors-brands-experiment-blue-gray-dark-600: #b1c0d2;
78
- /* Colors/Brands/Experiment/blue-gray-dark/700 - Global (primitives) */
79
- --colors-brands-experiment-blue-gray-dark-700: #d4dce8;
80
- /* Colors/Brands/Experiment/blue-gray-dark/800 - Global (primitives) */
81
- --colors-brands-experiment-blue-gray-dark-800: #e2ebf3;
82
- /* Colors/Brands/Experiment/blue-gray-dark/900 - Global (primitives) */
83
- --colors-brands-experiment-blue-gray-dark-900: #f8fafc;
84
- /* Colors/Brands/Experiment/blue-gray-light/100 - Global (primitives) */
85
- --colors-brands-experiment-blue-gray-light-100: #f1f5f9;
86
- /* Colors/Brands/Experiment/blue-gray-light/200 - Global (primitives) */
87
- --colors-brands-experiment-blue-gray-light-200: #e1e7ef;
88
- /* Colors/Brands/Experiment/blue-gray-light/300 - Global (primitives) */
89
- --colors-brands-experiment-blue-gray-light-300: #c8d6e5;
90
- /* Colors/Brands/Experiment/blue-gray-light/400 - Global (primitives) */
91
- --colors-brands-experiment-blue-gray-light-400: #9eacc0;
92
- /* Colors/Brands/Experiment/blue-gray-light/50 - Global (primitives) */
93
- --colors-brands-experiment-blue-gray-light-50: #f8fafc;
94
- /* Colors/Brands/Experiment/blue-gray-light/500 - Global (primitives) */
95
- --colors-brands-experiment-blue-gray-light-500: #65758b;
96
- /* Colors/Brands/Experiment/blue-gray-light/600 - Global (primitives) */
97
- --colors-brands-experiment-blue-gray-light-600: #48566a;
98
- /* Colors/Brands/Experiment/blue-gray-light/700 - Global (primitives) */
99
- --colors-brands-experiment-blue-gray-light-700: #344256;
100
- /* Colors/Brands/Experiment/blue-gray-light/800 - Global (primitives) */
101
- --colors-brands-experiment-blue-gray-light-800: #1d283a;
102
- /* Colors/Brands/Experiment/blue-gray-light/900 - Global (primitives) */
103
- --colors-brands-experiment-blue-gray-light-900: #0f1729;
104
- /* Colors/Brands/Experiment/blue-light/100 - Global (primitives) */
105
- --colors-brands-experiment-blue-light-100: #dcebfe;
106
- /* Colors/Brands/Experiment/blue-light/200 - Global (primitives) */
107
- --colors-brands-experiment-blue-light-200: #bedbfe;
108
- /* Colors/Brands/Experiment/blue-light/300 - Global (primitives) */
109
- --colors-brands-experiment-blue-light-300: #91c3fd;
110
- /* Colors/Brands/Experiment/blue-light/400 - Global (primitives) */
111
- --colors-brands-experiment-blue-light-400: #61a6fa;
112
- /* Colors/Brands/Experiment/blue-light/50 - Global (primitives) */
113
- --colors-brands-experiment-blue-light-50: #f2f7ff;
114
- /* Colors/Brands/Experiment/blue-light/500 - Global (primitives) */
115
- --colors-brands-experiment-blue-light-500: #3479e9;
116
- /* Colors/Brands/Experiment/blue-light/600 - Global (primitives) */
117
- --colors-brands-experiment-blue-light-600: #1559ea;
118
- /* Colors/Brands/Experiment/blue-light/700 - Global (primitives) */
119
- --colors-brands-experiment-blue-light-700: #173fab;
120
- /* Colors/Brands/Experiment/blue-light/800 - Global (primitives) */
121
- --colors-brands-experiment-blue-light-800: #162f82;
122
- /* Colors/Brands/Experiment/blue-light/900 - Global (primitives) */
123
- --colors-brands-experiment-blue-light-900: #0c1736;
124
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-10 - Global (primitives) */
125
- --colors-brands-experiment-interactions-primary-dark-opacity-10: #50a1ff1a;
126
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-12 - Global (primitives) */
127
- --colors-brands-experiment-interactions-primary-dark-opacity-12: #50a1ff1f;
128
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-16 - Global (primitives) */
129
- --colors-brands-experiment-interactions-primary-dark-opacity-16: #50a1ff29;
130
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-20 - Global (primitives) */
131
- --colors-brands-experiment-interactions-primary-dark-opacity-20: #50a1ff33;
132
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-8 - Global (primitives) */
133
- --colors-brands-experiment-interactions-primary-dark-opacity-8: #50a1ff14;
134
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-10 - Global (primitives) */
135
- --colors-brands-experiment-interactions-primary-light-opacity-10: #1559ea1a;
136
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-12 - Global (primitives) */
137
- --colors-brands-experiment-interactions-primary-light-opacity-12: #1559ea1f;
138
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-16 - Global (primitives) */
139
- --colors-brands-experiment-interactions-primary-light-opacity-16: #1559ea29;
140
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-20 - Global (primitives) */
141
- --colors-brands-experiment-interactions-primary-light-opacity-20: #1559ea33;
142
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-8 - Global (primitives) */
143
- --colors-brands-experiment-interactions-primary-light-opacity-8: #1559ea14;
144
- /* Colors/Brands/Experiment/orange-dark/100 - Global (primitives) */
145
- --colors-brands-experiment-orange-dark-100: #852c0f;
146
- /* Colors/Brands/Experiment/orange-dark/200 - Global (primitives) */
147
- --colors-brands-experiment-orange-dark-200: #ab4827;
148
- /* Colors/Brands/Experiment/orange-dark/300 - Global (primitives) */
149
- --colors-brands-experiment-orange-dark-300: #ce5a07;
150
- /* Colors/Brands/Experiment/orange-dark/400 - Global (primitives) */
151
- --colors-brands-experiment-orange-dark-400: #f27013;
152
- /* Colors/Brands/Experiment/orange-dark/50 - Global (primitives) */
153
- --colors-brands-experiment-orange-dark-50: #31160d;
154
- /* Colors/Brands/Experiment/orange-dark/500 - Global (primitives) */
155
- --colors-brands-experiment-orange-dark-500: #fb923c;
156
- /* Colors/Brands/Experiment/orange-dark/600 - Global (primitives) */
157
- --colors-brands-experiment-orange-dark-600: #fdba72;
158
- /* Colors/Brands/Experiment/orange-dark/700 - Global (primitives) */
159
- --colors-brands-experiment-orange-dark-700: #fed6a9;
160
- /* Colors/Brands/Experiment/orange-dark/800 - Global (primitives) */
161
- --colors-brands-experiment-orange-dark-800: #ffedd6;
162
- /* Colors/Brands/Experiment/orange-dark/900 - Global (primitives) */
163
- --colors-brands-experiment-orange-dark-900: #fff6eb;
164
- /* Colors/Brands/Experiment/orange-light/100 - Global (primitives) */
165
- --colors-brands-experiment-orange-light-100: #ffedd6;
166
- /* Colors/Brands/Experiment/orange-light/200 - Global (primitives) */
167
- --colors-brands-experiment-orange-light-200: #fed6a9;
168
- /* Colors/Brands/Experiment/orange-light/300 - Global (primitives) */
169
- --colors-brands-experiment-orange-light-300: #fdba72;
170
- /* Colors/Brands/Experiment/orange-light/400 - Global (primitives) */
171
- --colors-brands-experiment-orange-light-400: #fb923c;
172
- /* Colors/Brands/Experiment/orange-light/50 - Global (primitives) */
173
- --colors-brands-experiment-orange-light-50: #fff6eb;
174
- /* Colors/Brands/Experiment/orange-light/500 - Global (primitives) */
175
- --colors-brands-experiment-orange-light-500: #f67416;
176
- /* Colors/Brands/Experiment/orange-light/600 - Global (primitives) */
177
- --colors-brands-experiment-orange-light-600: #e4570c;
178
- /* Colors/Brands/Experiment/orange-light/700 - Global (primitives) */
179
- --colors-brands-experiment-orange-light-700: #b63c0b;
180
- /* Colors/Brands/Experiment/orange-light/800 - Global (primitives) */
181
- --colors-brands-experiment-orange-light-800: #80310f;
182
- /* Colors/Brands/Experiment/orange-light/900 - Global (primitives) */
183
- --colors-brands-experiment-orange-light-900: #471a0a;
184
44
  /* Colors/Internal/pink-00-light - Global (primitives) */
185
45
  --colors-internal-pink-00-light: #ff4f8d;
186
46
  /* Colors/Internal/pink-50-dark - Global (primitives) */
@@ -212,7 +72,7 @@ body {
212
72
  /* Colors/Neutral/22 - Global (primitives) */
213
73
  --colors-neutral-22: #383838;
214
74
  /* Colors/Neutral/24 - Global (primitives) */
215
- --colors-neutral-24: #424242;
75
+ --colors-neutral-24: #3d3d3d;
216
76
  /* Colors/Neutral/26 - Global (primitives) */
217
77
  --colors-neutral-26: #424242;
218
78
  /* Colors/Neutral/28 - Global (primitives) */
@@ -289,6 +149,10 @@ body {
289
149
  --colors-neutral-98: #fafafa;
290
150
  /* Colors/Neutral/transparent - Global (primitives) */
291
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;
292
156
  /* Colors/System/blue-dark - Global (primitives) */
293
157
  --colors-system-blue-dark: #5d92f5;
294
158
  /* Colors/System/blue-dark-bg - Global (primitives) */
@@ -337,10 +201,10 @@ body {
337
201
  --colors-system-spectrum-data-visual-azure-400: #7fc4ec;
338
202
  /* Colors/System/Spectrum/Data visual/azure-700 - Global (primitives) */
339
203
  --colors-system-spectrum-data-visual-azure-700: #299de0;
340
- /* Colors/System/Spectrum/Data visual/backrose-900 - Global (primitives) */
341
- --colors-system-spectrum-data-visual-backrose-900: #958ca3;
342
204
  /* Colors/System/Spectrum/Data visual/blackrose-1200 - Global (primitives) */
343
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;
344
208
  /* Colors/System/Spectrum/Data visual/bronze-1100 - Global (primitives) */
345
209
  --colors-system-spectrum-data-visual-bronze-1100: #794b34;
346
210
  /* Colors/System/Spectrum/Data visual/bronze-800 - Global (primitives) */
@@ -369,10 +233,10 @@ body {
369
233
  --colors-system-spectrum-data-visual-highlight-azure-400-opacity: #7fc4ec4d;
370
234
  /* Colors/System/Spectrum/Data visual/Highlight/azure-700-opacity - Global (primitives) */
371
235
  --colors-system-spectrum-data-visual-highlight-azure-700-opacity: #299de04d;
372
- /* Colors/System/Spectrum/Data visual/Highlight/backrose-900-opacity - Global (primitives) */
373
- --colors-system-spectrum-data-visual-highlight-backrose-900-opacity: #958ca34d;
374
236
  /* Colors/System/Spectrum/Data visual/Highlight/blackrose-1200-opacity - Global (primitives) */
375
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;
376
240
  /* Colors/System/Spectrum/Data visual/Highlight/bronze-1100-opacity - Global (primitives) */
377
241
  --colors-system-spectrum-data-visual-highlight-bronze-1100-opacity: #794b344d;
378
242
  /* Colors/System/Spectrum/Data visual/Highlight/bronze-800-opacity - Global (primitives) */
@@ -593,10 +457,6 @@ body {
593
457
  --corner-radius-circular: 999px;
594
458
  /* Corner radius/None - Global (primitives) */
595
459
  --corner-radius-none: 0;
596
- /* Data visual/category-06-highlight - Theme - Century 21 */
597
- --data-visual-category-06-highlight: #7f7f7f4d;
598
- /* Data visual/category-6-highlight - Theme - Century 21 */
599
- --data-visual-category-6-highlight: #7f7f7f4d;
600
460
  /* East - navigation rails, drawers, sheets */
601
461
  --drop-shadow-east: 2px 0px 8px -2px #0000001a, 2px 0px 4px -2px #0000001f;
602
462
  /* Float */
@@ -611,24 +471,10 @@ body {
611
471
  --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
612
472
  /* West - side sheets */
613
473
  --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
614
- /* Foreground/Link text/subtle-inverse-hovered - Theme - Century 21 */
615
- --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
616
- /* Foreground/Link text/subtle-inverse-pressed - Theme - Century 21 */
617
- --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
618
- /* Foreground/Neutral/inverse-on-surface - Theme - Century 21 */
619
- --foreground-neutral-inverse-on-surface: #fafafa;
620
- /* Foreground/Neutral/on-color - Theme - Century 21 */
621
- --foreground-neutral-on-color: #ffffff;
622
- /* Foreground/Neutral/on-inverse-surface - Theme - Century 21 */
623
- --foreground-neutral-on-inverse-surface: #fafafa;
624
- /* Interaction/disabled-opacity - Theme - 3.0 */
625
- --interaction-disabled-opacity: #0000000f;
626
- /* Interaction/primary-disabled-opacity - Theme - 3.0 */
627
- --interaction-primary-disabled-opacity: #1559ea1f;
628
- /* Interaction/primary-hover-opacity - Theme - 3.0 */
629
- --interaction-primary-hover-opacity: #1559ea1a;
630
- /* Interaction/primary-press-opacity - Theme - 3.0 */
631
- --interaction-primary-press-opacity: #1559ea33;
474
+ /* Foreground/AI-powered/blue - Theme - BRAND */
475
+ --foreground-ai-powered-blue: #000000;
476
+ /* Foreground/AI-powered/pink - Theme - BRAND */
477
+ --foreground-ai-powered-pink: #000000;
632
478
  /* Interactions/opacity-black-10 - Global (primitives) */
633
479
  --interactions-opacity-black-10: #0000001a;
634
480
  /* Interactions/opacity-black-16 - Global (primitives) */
@@ -653,69 +499,69 @@ body {
653
499
  --interactions-opacity-white-6: #ffffff0f;
654
500
  /* Interactions/opacity-white-8 - Global (primitives) */
655
501
  --interactions-opacity-white-8: #ffffff14;
656
- /* Colors/Brands/Century 21/Interactions/primary-dark-opacity-10 - Global (primitives) */
502
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-10 - Global (primitives) */
657
503
  --interactions-primary-dark-opacity-10: #b0a58a1a;
658
- /* Colors/Brands/Century 21/Interactions/primary-dark-opacity-12 - Global (primitives) */
504
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-12 - Global (primitives) */
659
505
  --interactions-primary-dark-opacity-12: #b0a58a1f;
660
- /* Colors/Brands/Century 21/Interactions/primary-dark-opacity-16 - Global (primitives) */
506
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-16 - Global (primitives) */
661
507
  --interactions-primary-dark-opacity-16: #b0a58a29;
662
- /* Colors/Brands/Century 21/Interactions/primary-dark-opacity-20 - Global (primitives) */
508
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-20 - Global (primitives) */
663
509
  --interactions-primary-dark-opacity-20: #b0a58a33;
664
- /* Colors/Brands/Century 21/Interactions/primary-dark-opacity-8 - Global (primitives) */
510
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-8 - Global (primitives) */
665
511
  --interactions-primary-dark-opacity-8: #b0a58a14;
666
- /* Colors/Brands/Century 21/Interactions/primary-light-opacity-10 - Global (primitives) */
512
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-10 - Global (primitives) */
667
513
  --interactions-primary-light-opacity-10: #7c693c1a;
668
- /* Colors/Brands/Century 21/Interactions/primary-light-opacity-12 - Global (primitives) */
514
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-12 - Global (primitives) */
669
515
  --interactions-primary-light-opacity-12: #7c693c1f;
670
- /* Colors/Brands/Century 21/Interactions/primary-light-opacity-16 - Global (primitives) */
516
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-16 - Global (primitives) */
671
517
  --interactions-primary-light-opacity-16: #7c693c29;
672
- /* Colors/Brands/Century 21/Interactions/primary-light-opacity-20 - Global (primitives) */
518
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-20 - Global (primitives) */
673
519
  --interactions-primary-light-opacity-20: #7c693c33;
674
- /* Colors/Brands/Century 21/Interactions/primary-light-opacity-8 - Global (primitives) */
520
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-8 - Global (primitives) */
675
521
  --interactions-primary-light-opacity-8: #7c693c14;
676
522
  /* Labels/Base */
677
- --labels-base: 500 16px/20px var(--typeface);
678
- /* Labels/Base - line height */
679
- --labels-base-line-height: 20px;
680
- /* Labels/Base - size */
523
+ --labels-base: 500 16px/24px var(--typeface);
524
+ /* Labels/Base - line height */
525
+ --labels-base-line-height: 24px;
526
+ /* Labels/Base - size */
681
527
  --labels-base-size: 16px;
682
- /* Labels/Base - style */
528
+ /* Labels/Base - style */
683
529
  --labels-base-style: medium;
684
530
  /* Labels/Large */
685
- --labels-large: 500 18px/24px var(--typeface);
686
- /* Labels/Large - line height */
687
- --labels-large-line-height: 24px;
688
- /* Labels/Large - size */
531
+ --labels-large: 500 18px/28px var(--typeface);
532
+ /* Labels/Large - line height */
533
+ --labels-large-line-height: 28px;
534
+ /* Labels/Large - size */
689
535
  --labels-large-size: 18px;
690
- /* Labels/Large - style */
536
+ /* Labels/Large - style */
691
537
  --labels-large-style: medium;
692
538
  /* Labels/Small */
693
539
  --labels-small: 500 14px/20px var(--typeface);
694
- /* Labels/Small - line height */
540
+ /* Labels/Small - line height */
695
541
  --labels-small-line-height: 20px;
696
- /* Labels/Small - size */
542
+ /* Labels/Small - size */
697
543
  --labels-small-size: 14px;
698
- /* Labels/Small - style */
544
+ /* Labels/Small - style */
699
545
  --labels-small-style: medium;
700
546
  /* Labels/X-Small */
701
547
  --labels-x-small: 500 12px/16px var(--typeface);
702
- /* Labels/X-Small - line height */
548
+ /* Labels/X-Small - line height */
703
549
  --labels-x-small-line-height: 16px;
704
- /* Labels/X-Small - size */
550
+ /* Labels/X-Small - size */
705
551
  --labels-x-small-size: 12px;
706
- /* Labels/X-Small - style */
552
+ /* Labels/X-Small - style */
707
553
  --labels-x-small-style: medium;
708
- /* Colors/Brands/Century 21/Primary/00-base - Global (primitives) */
554
+ /* Colors/Brands/BRAND/Primary/00-base - Global (primitives) */
709
555
  --primary-00-base: #7c693c;
710
- /* Colors/Brands/Century 21/Primary/15-dark - Global (primitives) */
556
+ /* Colors/Brands/BRAND/Primary/15-dark - Global (primitives) */
711
557
  --primary-15-dark: #695933;
712
- /* Colors/Brands/Century 21/Primary/40-light - Global (primitives) */
558
+ /* Colors/Brands/BRAND/Primary/40-light - Global (primitives) */
713
559
  --primary-40-light: #b0a58a;
714
- /* Colors/Brands/Century 21/Primary/55-light - Global (primitives) */
560
+ /* Colors/Brands/BRAND/Primary/55-light - Global (primitives) */
715
561
  --primary-55-light: #c4bca7;
716
- /* Colors/Brands/Century 21/Primary/75-dark - Global (primitives) */
562
+ /* Colors/Brands/BRAND/Primary/75-dark - Global (primitives) */
717
563
  --primary-75-dark: #1f1a0f;
718
- /* Colors/Brands/Century 21/Primary/85-light - Global (primitives) */
564
+ /* Colors/Brands/BRAND/Primary/85-light - Global (primitives) */
719
565
  --primary-85-light: #ebe9e2;
720
566
  /* Radius/full - Borders */
721
567
  --radius-full: 999px;
@@ -729,17 +575,17 @@ body {
729
575
  --radius-sm: 4px;
730
576
  /* Radius/xlg - Borders */
731
577
  --radius-xlg: 16px;
732
- /* Colors/Brands/Century 21/Secondary/00-base - Global (primitives) */
578
+ /* Colors/Brands/BRAND/Secondary/00-base - Global (primitives) */
733
579
  --secondary-00-base: #252526;
734
- /* Colors/Brands/Century 21/Secondary/15-dark - Global (primitives) */
580
+ /* Colors/Brands/BRAND/Secondary/15-dark - Global (primitives) */
735
581
  --secondary-15-dark: #1f1f20;
736
- /* Colors/Brands/Century 21/Secondary/40-light - Global (primitives) */
582
+ /* Colors/Brands/BRAND/Secondary/40-light - Global (primitives) */
737
583
  --secondary-40-light: #7c7c7d;
738
- /* Colors/Brands/Century 21/Secondary/55-light - Global (primitives) */
584
+ /* Colors/Brands/BRAND/Secondary/55-light - Global (primitives) */
739
585
  --secondary-55-light: #9d9d9d;
740
- /* Colors/Brands/Century 21/Secondary/75-dark - Global (primitives) */
586
+ /* Colors/Brands/BRAND/Secondary/75-dark - Global (primitives) */
741
587
  --secondary-75-dark: #09090a;
742
- /* Colors/Brands/Century 21/Secondary/85-light - Global (primitives) */
588
+ /* Colors/Brands/BRAND/Secondary/85-light - Global (primitives) */
743
589
  --secondary-85-light: #dedede;
744
590
  /* Shadows/Inner-Shadow-black-100 - Global (primitives) */
745
591
  --shadows-inner-shadow-black-100: #000000;
@@ -873,22 +719,10 @@ body {
873
719
  --spacings-960: 96px;
874
720
  /* Spacings/None - Global (primitives) */
875
721
  --spacings-none: 0;
876
- /* Status/on-error - Theme - Century 21 */
877
- --status-on-error: #ffffff;
878
- /* Status/on-information - Theme - Century 21 */
879
- --status-on-information: #ffffff;
880
- /* Status/on-informational - Theme - Century 21 */
881
- --status-on-informational: #ffffff;
882
- /* Status/on-success - Theme - Century 21 */
883
- --status-on-success: #ffffff;
884
- /* Status/on-warning - Theme - Century 21 */
885
- --status-on-warning: #141414;
886
- /* Stroke/Neutral/focus-on-inverse - Theme - Century 21 */
887
- --stroke-neutral-focus-on-inverse: #ffffff;
888
- /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
889
- --stroke-neutral-interaction-inverse-focus: #ffffff;
890
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - Century 21 */
891
- --stroke-neutral-interactions-inverse-focus: #ffffff;
722
+ /* Stroke/AI-powered/blue - Theme - BRAND */
723
+ --stroke-ai-powered-blue: #000000;
724
+ /* Stroke/AI-powered/pink - Theme - BRAND */
725
+ --stroke-ai-powered-pink: #000000;
892
726
  /* Stroke/none - Borders */
893
727
  --stroke-none: 0;
894
728
  /* Stroke/thick - Borders */
@@ -897,22 +731,24 @@ body {
897
731
  --stroke-thicker: 4px;
898
732
  /* Stroke/thin - Borders */
899
733
  --stroke-thin: 1px;
900
- /* Surface/Neutral/transparent - Theme - Century 21 */
901
- --surface-neutral-transparent: #ffffff00;
902
- /* Colors/Brands/Century 21/Tertiary/00-base - Global (primitives) */
734
+ /* Surface/AI-powered/blue - Theme - BRAND */
735
+ --surface-ai-powered-blue: #000000;
736
+ /* Surface/AI-powered/pink - Theme - BRAND */
737
+ --surface-ai-powered-pink: #000000;
738
+ /* Colors/Brands/BRAND/Tertiary/00-base - Global (primitives) */
903
739
  --tertiary-00-base: #746649;
904
- /* Colors/Brands/Century 21/Tertiary/15-dark - Global (primitives) */
740
+ /* Colors/Brands/BRAND/Tertiary/15-dark - Global (primitives) */
905
741
  --tertiary-15-dark: #63573e;
906
- /* Colors/Brands/Century 21/Tertiary/40-light - Global (primitives) */
742
+ /* Colors/Brands/BRAND/Tertiary/40-light - Global (primitives) */
907
743
  --tertiary-40-light: #aca392;
908
- /* Colors/Brands/Century 21/Tertiary/55-light - Global (primitives) */
744
+ /* Colors/Brands/BRAND/Tertiary/55-light - Global (primitives) */
909
745
  --tertiary-55-light: #c0baad;
910
- /* Colors/Brands/Century 21/Tertiary/75-dark - Global (primitives) */
746
+ /* Colors/Brands/BRAND/Tertiary/75-dark - Global (primitives) */
911
747
  --tertiary-75-dark: #1d1a12;
912
- /* Colors/Brands/Century 21/Tertiary/85-light - Global (primitives) */
748
+ /* Colors/Brands/BRAND/Tertiary/85-light - Global (primitives) */
913
749
  --tertiary-85-light: #eae8e4;
914
750
  /* Typeface - Brand */
915
- --typeface: 'Typold', 'Work Sans', sans-serif;
751
+ --typeface: 'Typold', 'Inter', serif;
916
752
  /* Typography/Line-height/lh-1 - Global (primitives) */
917
753
  --typography-line-height-lh-1: 16px;
918
754
  /* Typography/Line-height/lh-10 - Global (primitives) */
@@ -976,29 +812,29 @@ body {
976
812
  /* Typography/Size/xxxlg - Global (primitives) */
977
813
  --typography-size-xxxlg: 40px;
978
814
  /* Typography/Typeface/Arial - Global (primitives) */
979
- --typography-typeface-arial: 'Arial', sans-serif;
815
+ --typography-typeface-arial: 'Arial';
980
816
  /* Typography/Typeface/Geist - Global (primitives) */
981
- --typography-typeface-geist: 'Geist', sans-serif;
817
+ --typography-typeface-geist: 'Geist';
982
818
  /* Typography/Typeface/Helvetica - Global (primitives) */
983
- --typography-typeface-helvetica: 'Helvetica', sans-serif;
819
+ --typography-typeface-helvetica: 'Helvetica';
984
820
  /* Typography/Typeface/Inter - Global (primitives) */
985
- --typography-typeface-inter: 'Inter', sans-serif;
821
+ --typography-typeface-inter: 'Inter';
986
822
  /* Typography/Typeface/Lato - Global (primitives) */
987
- --typography-typeface-lato: 'Lato', sans-serif;
823
+ --typography-typeface-lato: 'Lato';
988
824
  /* Typography/Typeface/Manrope - Global (primitives) */
989
- --typography-typeface-manrope: 'Manrope', sans-serif;
825
+ --typography-typeface-manrope: 'Manrope';
990
826
  /* Typography/Typeface/Open Sans - Global (primitives) */
991
- --typography-typeface-open-sans: 'Open Sans', sans-serif;
827
+ --typography-typeface-open-sans: 'Open Sans';
992
828
  /* Typography/Typeface/Red Hat Text - Global (primitives) */
993
- --typography-typeface-red-hat-text: 'Red Hat Text', sans-serif;
829
+ --typography-typeface-red-hat-text: 'Red Hat Text';
994
830
  /* Typography/Typeface/Roboto - Global (primitives) */
995
- --typography-typeface-roboto: 'Roboto', sans-serif;
831
+ --typography-typeface-roboto: 'Roboto';
996
832
  /* Typography/Typeface/SF Pro - Global (primitives) */
997
- --typography-typeface-sf-pro: 'SF Pro', sans-serif;
833
+ --typography-typeface-sf-pro: 'SF Pro';
998
834
  /* Typography/Typeface/Typold - Global (primitives) */
999
- --typography-typeface-typold: 'Typold', sans-serif;
835
+ --typography-typeface-typold: 'Typold';
1000
836
  /* Typography/Typeface/Work Sans - Global (primitives) */
1001
- --typography-typeface-work-sans: 'Work Sans', sans-serif;
837
+ --typography-typeface-work-sans: 'Work Sans';
1002
838
  /* Typography/Weight/300 - Global (primitives) */
1003
839
  --typography-weight-300: 300;
1004
840
  /* Typography/Weight/400 - Global (primitives) */
@@ -1009,52 +845,52 @@ body {
1009
845
  --typography-weight-600: 600;
1010
846
  /* Mobile/Display/Regular/Large */
1011
847
  --display-regular-large: 400 56px/72px var(--typeface);
1012
- /* Mobile/Display/Regular/Large - line height */
848
+ /* Mobile/Display/Regular/Large - line height */
1013
849
  --display-regular-large-line-height: 72px;
1014
- /* Mobile/Display/Regular/Large - size */
850
+ /* Mobile/Display/Regular/Large - size */
1015
851
  --display-regular-large-size: 56px;
1016
- /* Mobile/Display/Regular/Large - style */
852
+ /* Mobile/Display/Regular/Large - style */
1017
853
  --display-regular-large-style: regular;
1018
854
  /* Mobile/Display/Regular/Medium */
1019
855
  --display-regular-medium: 400 48px/60px var(--typeface);
1020
- /* Mobile/Display/Regular/Medium - line height */
856
+ /* Mobile/Display/Regular/Medium - line height */
1021
857
  --display-regular-medium-line-height: 60px;
1022
- /* Mobile/Display/Regular/Medium - size */
858
+ /* Mobile/Display/Regular/Medium - size */
1023
859
  --display-regular-medium-size: 48px;
1024
- /* Mobile/Display/Regular/Medium - style */
860
+ /* Mobile/Display/Regular/Medium - style */
1025
861
  --display-regular-medium-style: regular;
1026
862
  /* Mobile/Display/Regular/Small */
1027
863
  --display-regular-small: 400 40px/48px var(--typeface);
1028
- /* Mobile/Display/Regular/Small - line height */
864
+ /* Mobile/Display/Regular/Small - line height */
1029
865
  --display-regular-small-line-height: 48px;
1030
- /* Mobile/Display/Regular/Small - size */
866
+ /* Mobile/Display/Regular/Small - size */
1031
867
  --display-regular-small-size: 40px;
1032
- /* Mobile/Display/Regular/Small - style */
868
+ /* Mobile/Display/Regular/Small - style */
1033
869
  --display-regular-small-style: regular;
1034
870
  /* Mobile/Display/Semibold/Large */
1035
871
  --display-semibold-large: 600 56px/72px var(--typeface);
1036
- /* Mobile/Display/Semibold/Large - line height */
872
+ /* Mobile/Display/Semibold/Large - line height */
1037
873
  --display-semibold-large-line-height: 72px;
1038
- /* Mobile/Display/Semibold/Large - size */
874
+ /* Mobile/Display/Semibold/Large - size */
1039
875
  --display-semibold-large-size: 56px;
1040
- /* Mobile/Display/Semibold/Large - style */
1041
- --display-semibold-large-style: semibold;
876
+ /* Mobile/Display/Semibold/Large - style */
877
+ --display-semibold-large-style: 600;
1042
878
  /* Mobile/Display/Semibold/Medium */
1043
879
  --display-semibold-medium: 600 48px/60px var(--typeface);
1044
- /* Mobile/Display/Semibold/Medium - line height */
880
+ /* Mobile/Display/Semibold/Medium - line height */
1045
881
  --display-semibold-medium-line-height: 60px;
1046
- /* Mobile/Display/Semibold/Medium - size */
882
+ /* Mobile/Display/Semibold/Medium - size */
1047
883
  --display-semibold-medium-size: 48px;
1048
- /* Mobile/Display/Semibold/Medium - style */
1049
- --display-semibold-medium-style: semibold;
884
+ /* Mobile/Display/Semibold/Medium - style */
885
+ --display-semibold-medium-style: 600;
1050
886
  /* Mobile/Display/Semibold/Small */
1051
887
  --display-semibold-small: 600 40px/48px var(--typeface);
1052
- /* Mobile/Display/Semibold/Small - line height */
888
+ /* Mobile/Display/Semibold/Small - line height */
1053
889
  --display-semibold-small-line-height: 48px;
1054
- /* Mobile/Display/Semibold/Small - size */
890
+ /* Mobile/Display/Semibold/Small - size */
1055
891
  --display-semibold-small-size: 40px;
1056
- /* Mobile/Display/Semibold/Small - style */
1057
- --display-semibold-small-style: semibold;
892
+ /* Mobile/Display/Semibold/Small - style */
893
+ --display-semibold-small-style: 600;
1058
894
  /* Mobile/Heading/H1 - Large Headline */
1059
895
  --heading-h1: 600 32px/40px var(--typeface);
1060
896
  /* Mobile/Heading/H1 - Large Headline line height */
@@ -1062,7 +898,7 @@ body {
1062
898
  /* Mobile/Heading/H1 - Large Headline size */
1063
899
  --heading-h1-size: 32px;
1064
900
  /* Mobile/Heading/H1 - Large Headline style */
1065
- --heading-h1-style: semibold;
901
+ --heading-h1-style: 600;
1066
902
  /* Mobile/Heading/H2 - Headline */
1067
903
  --heading-h2: 600 28px/36px var(--typeface);
1068
904
  /* Mobile/Heading/H2 - Headline line height */
@@ -1070,7 +906,7 @@ body {
1070
906
  /* Mobile/Heading/H2 - Headline size */
1071
907
  --heading-h2-size: 28px;
1072
908
  /* Mobile/Heading/H2 - Headline style */
1073
- --heading-h2-style: semibold;
909
+ --heading-h2-style: 600;
1074
910
  /* Mobile/Heading/H3 - Headline */
1075
911
  --heading-h3: 600 24px/32px var(--typeface);
1076
912
  /* Mobile/Heading/H3 - Headline line height */
@@ -1078,7 +914,7 @@ body {
1078
914
  /* Mobile/Heading/H3 - Headline size */
1079
915
  --heading-h3-size: 24px;
1080
916
  /* Mobile/Heading/H3 - Headline style */
1081
- --heading-h3-style: semibold;
917
+ --heading-h3-style: 600;
1082
918
  /* Mobile/Heading/H4 - Headline */
1083
919
  --heading-h4: 600 20px/28px var(--typeface);
1084
920
  /* Mobile/Heading/H4 - Headline line height */
@@ -1086,22 +922,22 @@ body {
1086
922
  /* Mobile/Heading/H4 - Headline size */
1087
923
  --heading-h4-size: 20px;
1088
924
  /* Mobile/Heading/H4 - Headline style */
1089
- --heading-h4-style: semibold;
925
+ --heading-h4-style: 600;
1090
926
  /* Mobile/Heading/H5 */
1091
927
  --heading-h5: 600 18px/24px var(--typeface);
1092
- /* Mobile/Heading/H5 - line height */
928
+ /* Mobile/Heading/H5 - line height */
1093
929
  --heading-h5-line-height: 24px;
1094
- /* Mobile/Heading/H5 - size */
930
+ /* Mobile/Heading/H5 - size */
1095
931
  --heading-h5-size: 18px;
1096
- /* Mobile/Heading/H5 - style */
1097
- --heading-h5-style: semibold;
932
+ /* Mobile/Heading/H5 - style */
933
+ --heading-h5-style: 600;
1098
934
  /* Mobile/Heading/H6 */
1099
935
  --heading-h6: 500 16px/20px var(--typeface);
1100
- /* Mobile/Heading/H6 - line height */
936
+ /* Mobile/Heading/H6 - line height */
1101
937
  --heading-h6-line-height: 20px;
1102
- /* Mobile/Heading/H6 - size */
938
+ /* Mobile/Heading/H6 - size */
1103
939
  --heading-h6-size: 16px;
1104
- /* Mobile/Heading/H6 - style */
940
+ /* Mobile/Heading/H6 - style */
1105
941
  --heading-h6-style: medium;
1106
942
  /* Mobile/Subheader/Large - Headline */
1107
943
  --subheader-large: 400 20px/28px var(--typeface);
@@ -1143,749 +979,826 @@ body {
1143
979
  --subheader-xxx-large-size: 32px;
1144
980
  /* Mobile/Subheader/XXX-Large - Large Headline style */
1145
981
  --subheader-xxx-large-style: regular;
1146
-
1147
- @media (width >= 640px) {
1148
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1149
- --display-regular-large: 400 64px/88px var(--typeface);
1150
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1151
- --display-regular-large-line-height: 88px;
1152
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1153
- --display-regular-large-size: 64px;
1154
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1155
- --display-regular-large-style: regular;
1156
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1157
- --display-regular-medium: 400 56px/72px var(--typeface);
1158
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1159
- --display-regular-medium-line-height: 72px;
1160
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1161
- --display-regular-medium-size: 56px;
1162
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1163
- --display-regular-medium-style: regular;
1164
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1165
- --display-regular-small: 400 48px/60px var(--typeface);
1166
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1167
- --display-regular-small-line-height: 60px;
1168
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1169
- --display-regular-small-size: 48px;
1170
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1171
- --display-regular-small-style: regular;
1172
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1173
- --display-semibold-large: 600 64px/88px var(--typeface);
1174
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1175
- --display-semibold-large-line-height: 88px;
1176
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1177
- --display-semibold-large-size: 64px;
1178
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1179
- --display-semibold-large-style: semibold;
1180
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1181
- --display-semibold-medium: 600 56px/72px var(--typeface);
1182
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1183
- --display-semibold-medium-line-height: 72px;
1184
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1185
- --display-semibold-medium-size: 56px;
1186
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1187
- --display-semibold-medium-style: semibold;
1188
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1189
- --display-semibold-small: 600 48px/60px var(--typeface);
1190
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1191
- --display-semibold-small-line-height: 60px;
1192
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1193
- --display-semibold-small-size: 48px;
1194
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1195
- --display-semibold-small-style: semibold;
1196
- /* Desktop/Heading/H1 */
1197
- --heading-h1: 600 40px/48px var(--typeface);
1198
- /* Desktop/Heading/H1 - line height */
1199
- --heading-h1-line-height: 48px;
1200
- /* Desktop/Heading/H1 - size */
1201
- --heading-h1-size: 40px;
1202
- /* Desktop/Heading/H1 - style */
1203
- --heading-h1-style: semibold;
1204
- /* Desktop/Heading/H2 */
1205
- --heading-h2: 600 32px/40px var(--typeface);
1206
- /* Desktop/Heading/H2 - line height */
1207
- --heading-h2-line-height: 40px;
1208
- /* Desktop/Heading/H2 - size */
1209
- --heading-h2-size: 32px;
1210
- /* Desktop/Heading/H2 - style */
1211
- --heading-h2-style: semibold;
1212
- /* Desktop/Heading/H3 */
1213
- --heading-h3: 600 28px/36px var(--typeface);
1214
- /* Desktop/Heading/H3 - line height */
1215
- --heading-h3-line-height: 36px;
1216
- /* Desktop/Heading/H3 - size */
1217
- --heading-h3-size: 28px;
1218
- /* Desktop/Heading/H3 - style */
1219
- --heading-h3-style: semibold;
1220
- /* Desktop/Heading/H4 */
1221
- --heading-h4: 600 24px/32px var(--typeface);
1222
- /* Desktop/Heading/H4 - line height */
1223
- --heading-h4-line-height: 32px;
1224
- /* Desktop/Heading/H4 - size */
1225
- --heading-h4-size: 24px;
1226
- /* Desktop/Heading/H4 - style */
1227
- --heading-h4-style: semibold;
1228
- /* Desktop/Heading/H5 */
1229
- --heading-h5: 600 20px/28px var(--typeface);
1230
- /* Desktop/Heading/H5 - line height */
1231
- --heading-h5-line-height: 28px;
1232
- /* Desktop/Heading/H5 - size */
1233
- --heading-h5-size: 20px;
1234
- /* Desktop/Heading/H5 - style */
1235
- --heading-h5-style: semibold;
1236
- /* Desktop/Heading/H6 */
1237
- --heading-h6: 500 18px/24px var(--typeface);
1238
- /* Desktop/Heading/H6 - line height */
1239
- --heading-h6-line-height: 24px;
1240
- /* Desktop/Heading/H6 - size */
1241
- --heading-h6-size: 18px;
1242
- /* Desktop/Heading/H6 - style */
1243
- --heading-h6-style: medium;
1244
- /* Desktop/Subheader/Large - Headline */
1245
- --subheader-large: 400 24px/32px var(--typeface);
1246
- /* Desktop/Subheader/Large - Headline line height */
1247
- --subheader-large-line-height: 32px;
1248
- /* Desktop/Subheader/Large - Headline size */
1249
- --subheader-large-size: 24px;
1250
- /* Desktop/Subheader/Large - Headline style */
1251
- --subheader-large-style: regular;
1252
- /* Desktop/Subheader/Medium */
1253
- --subheader-medium: 400 20px/28px var(--typeface);
1254
- /* Desktop/Subheader/Medium - line height */
1255
- --subheader-medium-line-height: 28px;
1256
- /* Desktop/Subheader/Medium - size */
1257
- --subheader-medium-size: 20px;
1258
- /* Desktop/Subheader/Medium - style */
1259
- --subheader-medium-style: regular;
1260
- /* Desktop/Subheader/X-Large - Headline */
1261
- --subheader-x-large: 400 28px/36px var(--typeface);
1262
- /* Desktop/Subheader/X-Large - Headline line height */
1263
- --subheader-x-large-line-height: 36px;
1264
- /* Desktop/Subheader/X-Large - Headline size */
1265
- --subheader-x-large-size: 28px;
1266
- /* Desktop/Subheader/X-Large - Headline style */
1267
- --subheader-x-large-style: regular;
1268
- /* Desktop/Subheader/XX-Large - Headline */
1269
- --subheader-xx-large: 400 32px/40px var(--typeface);
1270
- /* Desktop/Subheader/XX-Large - Headline line height */
1271
- --subheader-xx-large-line-height: 40px;
1272
- /* Desktop/Subheader/XX-Large - Headline size */
1273
- --subheader-xx-large-size: 32px;
1274
- /* Desktop/Subheader/XX-Large - Headline style */
1275
- --subheader-xx-large-style: regular;
1276
- /* Desktop/Subheader/XXX-Large - Large Headline */
1277
- --subheader-xxx-large: 400 40px/48px var(--typeface);
1278
- /* Desktop/Subheader/XXX-Large - Large Headline line height */
1279
- --subheader-xxx-large-line-height: 48px;
1280
- /* Desktop/Subheader/XXX-Large - Large Headline size */
1281
- --subheader-xxx-large-size: 40px;
1282
- /* Desktop/Subheader/XXX-Large - Large Headline style */
1283
- --subheader-xxx-large-style: regular;
1284
- }
1285
-
1286
- /** Light theme (default) **/
1287
- /* Background/base - Theme - Century 21 */
982
+ /* light theme (default) */
983
+ /* Background/base - Theme - BRAND */
1288
984
  --background-base: #ffffff;
1289
- /* Background/scrim - Theme - Century 21 */
985
+ /* Background/scrim - Theme - BRAND */
1290
986
  --background-scrim: #00000040;
1291
- /* Background/shade - Theme - Century 21 */
987
+ /* Background/shade - Theme - BRAND */
1292
988
  --background-shade: #f5f5f5;
1293
- /* Data visual/category-01 - Theme - Century 21 */
989
+ /* Data visual/category-01 - Brand */
1294
990
  --data-visual-category-01: #ab922b;
1295
- /* Data visual/category-01-highlight - Theme - Century 21 */
991
+ /* Data visual/category-01-highlight - Brand */
1296
992
  --data-visual-category-01-highlight: #ab922b4d;
1297
- /* Data visual/category-02 - Theme - Century 21 */
993
+ /* Data visual/category-02 - Brand */
1298
994
  --data-visual-category-02: #7a2a0b;
1299
- /* Data visual/category-02-highlight - Theme - Century 21 */
995
+ /* Data visual/category-02-highlight - Brand */
1300
996
  --data-visual-category-02-highlight: #7a2a0b4d;
1301
- /* Data visual/category-03 - Theme - Century 21 */
997
+ /* Data visual/category-03 - Brand */
1302
998
  --data-visual-category-03: #d67e51;
1303
- /* Data visual/category-03-highlight - Theme - Century 21 */
999
+ /* Data visual/category-03-highlight - Brand */
1304
1000
  --data-visual-category-03-highlight: #d67e514d;
1305
- /* Data visual/category-04 - Theme - Century 21 */
1001
+ /* Data visual/category-04 - Brand */
1306
1002
  --data-visual-category-04: #2d3300;
1307
- /* Data visual/category-04-highlight - Theme - Century 21 */
1003
+ /* Data visual/category-04-highlight - Brand */
1308
1004
  --data-visual-category-04-highlight: #2d33004d;
1309
- /* Data visual/category-05 - Theme - Century 21 */
1005
+ /* Data visual/category-05 - Brand */
1310
1006
  --data-visual-category-05: #794b34;
1311
- /* Data visual/category-05-highlight - Theme - Century 21 */
1007
+ /* Data visual/category-05-highlight - Brand */
1312
1008
  --data-visual-category-05-highlight: #5309094d;
1313
- /* Data visual/category-06 - Theme - Century 21 */
1009
+ /* Data visual/category-06 - Brand */
1314
1010
  --data-visual-category-06: #7f7f7f;
1315
- /* Data visual/category-07 - Theme - Century 21 */
1011
+ /* Data visual/category-06-highlight - Brand */
1012
+ --data-visual-category-06-highlight: #7f7f7f4d;
1013
+ /* Data visual/category-07 - Brand */
1316
1014
  --data-visual-category-07: #530909;
1317
- /* Data visual/category-07-highlight - Theme - Century 21 */
1015
+ /* Data visual/category-07-highlight - Brand */
1318
1016
  --data-visual-category-07-highlight: #794b344d;
1319
- /* Data visual/category-1 - Theme - Century 21 */
1017
+ /* Data visual/category-1 - Theme - BRAND */
1320
1018
  --data-visual-category-1: #7a2a0b;
1321
- /* Data visual/category-1-highlight - Theme - Century 21 */
1019
+ /* Data visual/category-1-highlight - Theme - BRAND */
1322
1020
  --data-visual-category-1-highlight: #7a2a0b4d;
1323
- /* Data visual/category-2 - Theme - Century 21 */
1021
+ /* Data visual/category-2 - Theme - BRAND */
1324
1022
  --data-visual-category-2: #d67e51;
1325
- /* Data visual/category-2-highlight - Theme - Century 21 */
1023
+ /* Data visual/category-2-highlight - Theme - BRAND */
1326
1024
  --data-visual-category-2-highlight: #d67e514d;
1327
- /* Data visual/category-3 - Theme - Century 21 */
1025
+ /* Data visual/category-3 - Theme - BRAND */
1328
1026
  --data-visual-category-3: #2d3300;
1329
- /* Data visual/category-3-highlight - Theme - Century 21 */
1027
+ /* Data visual/category-3-highlight - Theme - BRAND */
1330
1028
  --data-visual-category-3-highlight: #2d33004d;
1331
- /* Data visual/category-4 - Theme - Century 21 */
1029
+ /* Data visual/category-4 - Theme - BRAND */
1332
1030
  --data-visual-category-4: #ab922b;
1333
- /* Data visual/category-4-highlight - Theme - Century 21 */
1031
+ /* Data visual/category-4-highlight - Theme - BRAND */
1334
1032
  --data-visual-category-4-highlight: #ab922b4d;
1335
- /* Data visual/category-5 - Theme - Century 21 */
1033
+ /* Data visual/category-5 - Theme - BRAND */
1336
1034
  --data-visual-category-5: #530909;
1337
- /* Data visual/category-5-highlight - Theme - Century 21 */
1035
+ /* Data visual/category-5-highlight - Theme - BRAND */
1338
1036
  --data-visual-category-5-highlight: #5309094d;
1339
- /* Data visual/category-6 - Theme - Century 21 */
1037
+ /* Data visual/category-6 - Theme - BRAND */
1340
1038
  --data-visual-category-6: #7f7f7f;
1341
- /* Data visual/category-7 - Theme - Century 21 */
1039
+ /* Data visual/category-6-highlight - Theme - BRAND */
1040
+ --data-visual-category-6-highlight: #7f7f7f4d;
1041
+ /* Data visual/category-7 - Theme - BRAND */
1342
1042
  --data-visual-category-7: #794b34;
1343
- /* Data visual/category-7-highlight - Theme - Century 21 */
1043
+ /* Data visual/category-7-highlight - Theme - BRAND */
1344
1044
  --data-visual-category-7-highlight: #794b344d;
1345
- /* Data visual/gradient-end - Theme - Century 21 */
1045
+ /* Data visual/gradient-end - Theme - BRAND */
1346
1046
  --data-visual-gradient-end: #ffffff4d;
1347
- /* Data visual/green - Theme - Century 21 */
1047
+ /* Data visual/green - Theme - BRAND */
1348
1048
  --data-visual-green: #258750;
1349
- /* Data visual/green-highlight - Theme - Century 21 */
1049
+ /* Data visual/green-highlight - Theme - BRAND */
1350
1050
  --data-visual-green-highlight: #deede5;
1351
- /* Data visual/negative - Theme - Cartus */
1051
+ /* Data visual/negative - Brand */
1352
1052
  --data-visual-negative: #d83a52;
1353
- /* Data visual/negative-highlight - Theme - Century 21 */
1053
+ /* Data visual/negative-highlight - Brand */
1354
1054
  --data-visual-negative-highlight: #f9e1e5;
1355
- /* Data visual/positive - Theme - Century 21 */
1055
+ /* Data visual/positive - Brand */
1356
1056
  --data-visual-positive: #258750;
1357
- /* Data visual/positive-highlight - Theme - Century 21 */
1057
+ /* Data visual/positive-highlight - Brand */
1358
1058
  --data-visual-positive-highlight: #deede5;
1359
- /* Data visual/red - Theme - Century 21 */
1059
+ /* Data visual/red - Theme - BRAND */
1360
1060
  --data-visual-red: #d83a52;
1361
- /* Data visual/red-highlight - Theme - Century 21 */
1061
+ /* Data visual/red-highlight - Theme - BRAND */
1362
1062
  --data-visual-red-highlight: #f9e1e5;
1363
- /* Foreground/Brand/on-inverse-primary - Theme - Century 21 */
1063
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1364
1064
  --foreground-brand-on-inverse-primary: #b0a58a;
1365
- /* Foreground/Brand/on-inverse-secondary - Theme - Century 21 */
1065
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1366
1066
  --foreground-brand-on-inverse-secondary: #7c7c7d;
1367
- /* Foreground/Brand/on-brand-primary - Theme - Century 21 */
1067
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1068
+ /* Foreground color used on Brand's primary color (non neutral color) */
1368
1069
  --foreground-brand-on-primary: #ffffff;
1369
- /* Foreground/Brand/on-brand-secondary - Theme - Century 21 */
1070
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1071
+ /* Foreground color used on Brand's primary color (non neutral color) */
1370
1072
  --foreground-brand-on-secondary: #ffffff;
1371
- /* Foreground/Brand/brand-primary - Theme - Century 21 */
1073
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1074
+ /* Foreground text and icons that match the brand's primary color */
1372
1075
  --foreground-brand-primary: #7c693c;
1373
- /* Foreground/Brand/brand-primary-depth - Theme - Century 21 */
1076
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1374
1077
  --foreground-brand-primary-depth: #695933;
1375
- /* Foreground/Brand/brand-secondary - Theme - Century 21 */
1078
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1079
+ /* Foreground text and icons that match the brand's secondary color */
1376
1080
  --foreground-brand-secondary: #252526;
1377
- /* Foreground/Brand/brand-secondary-depth - Theme - Century 21 */
1081
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1378
1082
  --foreground-brand-secondary-depth: #1f1f20;
1379
- /* Foreground/Link text/default - Theme - Century 21 */
1083
+ /* Foreground/Link text/default - Theme - BRAND */
1380
1084
  --foreground-link-text-default: #215ecd;
1381
- /* Foreground/Link text/default-disabled - Theme - Century 21 */
1085
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1382
1086
  --foreground-link-text-default-disabled: #7a9ee1;
1383
- /* Foreground/Link text/default-hovered - Theme - Century 21 */
1087
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1384
1088
  --foreground-link-text-default-hovered: #1e55b9;
1385
- /* Foreground/Link text/default-pressed - Theme - Century 21 */
1089
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1386
1090
  --foreground-link-text-default-pressed: #1a4ba4;
1387
- /* Foreground/Link text/default-visited - Theme - Century 21 */
1091
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1388
1092
  --foreground-link-text-default-visited: #7a3e7a;
1389
- /* Foreground/Link text/subtle-disabled - Theme - Century 21 */
1093
+ /* Foreground/Link text/subtle-disabled - Brand */
1390
1094
  --foreground-link-text-subtle-disabled: #bdbdbd;
1391
- /* Foreground/Link text/subtle-hovered - Theme - Century 21 */
1095
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1392
1096
  --foreground-link-text-subtle-hovered: #292929;
1393
- /* Foreground/Link text/subtle-inversed-disabled - Theme - Coldwell Banker */
1097
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1098
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1099
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1100
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1101
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1394
1102
  --foreground-link-text-subtle-inversed-disabled: #757575;
1395
- /* Foreground/Link text/subtle-pressed - Theme - Century 21 */
1396
- --foreground-link-text-subtle-pressed: #424242;
1397
- /* Foreground/Neutral/disabled-on-color-surface - Theme - Century 21 */
1103
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1104
+ --foreground-link-text-subtle-pressed: #3d3d3d;
1105
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1398
1106
  --foreground-neutral-disabled-on-color-surface: #757575;
1399
- /* Foreground/Neutral/disabled-on-surface - Theme - Century 21 */
1107
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1400
1108
  --foreground-neutral-disabled-on-surface: #bdbdbd;
1401
- /* Foreground/Neutral/on-surface - Theme - Century 21 */
1109
+ /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
1110
+ --foreground-neutral-inverse-on-surface: #fafafa;
1111
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1112
+ /* Interactive controls */
1113
+ --foreground-neutral-on-color: #ffffff;
1114
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1115
+ /* Text and icons against inverse surface */
1116
+ --foreground-neutral-on-inverse-surface: #fafafa;
1117
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1118
+ /* Default foreground text and icons against any surface color */
1402
1119
  --foreground-neutral-on-surface: #141414;
1403
- /* Foreground/Neutral/on-surface-variant-01 - Theme - Century 21 */
1404
- --foreground-neutral-on-surface-variant-01: #474747;
1405
- /* Foreground/Neutral/on-surface-variant-02 - Theme - Century 21 */
1120
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1121
+ /* Secondary foreground color for icons and text */
1122
+ --foreground-neutral-on-surface-variant-01: #707070;
1123
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1124
+ /* Tertiary foreground color for icons and text */
1406
1125
  --foreground-neutral-on-surface-variant-02: #757575;
1407
- /* Foreground/Neutral/on-surface-variant-03 - Theme - Century 21 */
1126
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1127
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1408
1128
  --foreground-neutral-on-surface-variant-03: #8a8a8a;
1409
- /* Foreground/Neutral/skeleton-element - Theme - Century 21 */
1410
- --foreground-neutral-skeleton-element: #c7c7c7;
1411
- /* Foreground/Spectrum/blue - Theme - Century 21 */
1129
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1130
+ --foreground-neutral-skeleton-element: #e0e0e0;
1131
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1412
1132
  --foreground-spectrum-blue: #143778;
1413
- /* Foreground/Spectrum/green - Theme - Century 21 */
1133
+ /* Foreground/Spectrum/green - Theme - BRAND */
1414
1134
  --foreground-spectrum-green: #134428;
1415
- /* Foreground/Spectrum/lime - Theme - Century 21 */
1135
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1416
1136
  --foreground-spectrum-lime: #60651a;
1417
- /* Foreground/Spectrum/magenta - Theme - Century 21 */
1137
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1418
1138
  --foreground-spectrum-magenta: #63076f;
1419
- /* Foreground/Spectrum/orange - Theme - Century 21 */
1139
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1420
1140
  --foreground-spectrum-orange: #773001;
1421
- /* Foreground/Spectrum/pink - Theme - Century 21 */
1141
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1422
1142
  --foreground-spectrum-pink: #6c1240;
1423
- /* Foreground/Spectrum/purple - Theme - Century 21 */
1143
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1424
1144
  --foreground-spectrum-purple: #310077;
1425
- /* Foreground/Spectrum/red - Theme - Century 21 */
1145
+ /* Foreground/Spectrum/red - Theme - BRAND */
1426
1146
  --foreground-spectrum-red: #6c1d29;
1427
- /* Foreground/Spectrum/teal - Theme - Century 21 */
1147
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1428
1148
  --foreground-spectrum-teal: #01413c;
1429
- /* Foreground/Spectrum/yellow - Theme - Century 21 */
1149
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1430
1150
  --foreground-spectrum-yellow: #7b5e18;
1431
- /* Interaction/brand-disabled-opacity - Theme - 3.0 */
1432
- --interaction-brand-disabled-opacity: #0000000f;
1433
- /* Interaction/brand-hover-opacity - Theme - 3.0 */
1434
- --interaction-brand-hover-opacity: #0000001a;
1435
- /* Interaction/brand-press-opacity - Theme - 3.0 */
1436
- --interaction-brand-press-opacity: #00000033;
1437
- /* Interaction/hover-opacity - Theme - 3.0 */
1438
- --interaction-hover-opacity: #00000014;
1439
- /* Interaction/link-active-opacity - Theme - 3.0 */
1440
- --interaction-link-active-opacity: #0000004d;
1441
- /* Interaction/press-opacity - Theme - 3.0 */
1442
- --interaction-press-opacity: #00000029;
1443
- /* Interactions/brand-disabled-opacity - Theme - Century 21 */
1151
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1444
1152
  --interactions-brand-disabled-opacity: #0000000f;
1445
- /* Interactions/brand-hover-opacity - Theme - Century 21 */
1153
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1446
1154
  --interactions-brand-hover-opacity: #0000001a;
1447
- /* Interactions/brand-press-opacity - Theme - Century 21 */
1155
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1448
1156
  --interactions-brand-press-opacity: #00000033;
1449
- /* Interactions/disabled-opacity - Theme - Century 21 */
1157
+ /* Interactions/disabled-opacity - Theme - BRAND */
1450
1158
  --interactions-disabled-opacity: #0000000f;
1451
- /* Interactions/hover-opacity - Theme - Century 21 */
1159
+ /* Interactions/hover-opacity - Theme - BRAND */
1452
1160
  --interactions-hover-opacity: #00000014;
1453
- /* Interactions/link-active-opacity - Theme - Century 21 */
1161
+ /* Interactions/link-active-opacity - Theme - BRAND */
1454
1162
  --interactions-link-active-opacity: #0000004d;
1455
- /* Interactions/neutral-hover-opacity - Theme - Century 21 */
1163
+ /* Interactions/neutral-hover-opacity - Brand */
1164
+ /* surfaces using neutral tones */
1456
1165
  --interactions-neutral-hover-opacity: #00000014;
1457
- /* Interactions/neutral-press-opacity - Theme - Century 21 */
1166
+ /* Interactions/neutral-press-opacity - Brand */
1167
+ /* surfaces using neutral tones */
1458
1168
  --interactions-neutral-press-opacity: #00000029;
1459
- /* Interactions/press-opacity - Theme - Century 21 */
1169
+ /* Interactions/press-opacity - Theme - BRAND */
1460
1170
  --interactions-press-opacity: #00000029;
1461
- /* Interactions/primary-disabled-opacity - Theme - Century 21 */
1171
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1462
1172
  --interactions-primary-disabled-opacity: #7c693c1f;
1463
- /* Interactions/primary-hover-opacity - Theme - Century 21 */
1173
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1464
1174
  --interactions-primary-hover-opacity: #7c693c1a;
1465
- /* Interactions/primary-press-opacity - Theme - Century 21 */
1175
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1466
1176
  --interactions-primary-press-opacity: #7c693c33;
1467
- /* Shadow/shadow-10 - Theme - Century 21 */
1177
+ /* Shadow/shadow-10 - Theme - BRAND */
1468
1178
  --shadow-10: #0000001a;
1469
- /* Shadow/shadow-12 - Theme - Century 21 */
1179
+ /* Shadow/shadow-12 - Theme - BRAND */
1470
1180
  --shadow-12: #0000001f;
1471
- /* Shadow/shadow-15 - Theme - Century 21 */
1181
+ /* Shadow/shadow-15 - Theme - BRAND */
1472
1182
  --shadow-15: #00000026;
1473
- /* Shadow/shadow-25 - Theme - Century 21 */
1183
+ /* Shadow/shadow-25 - Theme - BRAND */
1474
1184
  --shadow-25: #00000040;
1475
- /* Shadow/shadow-32 - Theme - Century 21 */
1185
+ /* Shadow/shadow-32 - Theme - BRAND */
1476
1186
  --shadow-32: #00000052;
1477
- /* Shadow/inner-shadow - Theme - Century 21 */
1187
+ /* Shadow/inner-shadow - Brand */
1478
1188
  --shadow-inner: #ffffff;
1479
- /* Shadow/inner-shadow-100 - Theme - Century 21 */
1189
+ /* Shadow/inner-shadow-100 - Theme - BRAND */
1480
1190
  --shadow-inner-100: #ffffff;
1481
- /* Shadow/variant-01 - Theme - Century 21 */
1191
+ /* Shadow/variant-01 - Brand */
1482
1192
  --shadow-variant-01: #0000001a;
1483
- /* Shadow/variant-02 - Theme - Century 21 */
1193
+ /* Shadow/variant-02 - Brand */
1484
1194
  --shadow-variant-02: #0000001f;
1485
- /* Shadow/variant-03 - Theme - Century 21 */
1195
+ /* Shadow/variant-03 - Brand */
1486
1196
  --shadow-variant-03: #00000026;
1487
- /* Shadow/variant-04 - Theme - Century 21 */
1197
+ /* Shadow/variant-04 - Brand */
1488
1198
  --shadow-variant-04: #00000040;
1489
- /* Shadow/variant-05 - Theme - Century 21 */
1199
+ /* Shadow/variant-05 - Brand */
1490
1200
  --shadow-variant-05: #00000052;
1491
- /* Status/error - Theme - Century 21 */
1201
+ /* Status/error - Theme - BRAND */
1202
+ /* Foreground error text and icons */
1492
1203
  --status-error: #d83a52;
1493
- /* Status/information - Theme - Century 21 */
1204
+ /* Status/information - Theme - BRAND */
1494
1205
  --status-information: #276ef1;
1495
- /* Status/informational - Theme - Century 21 */
1206
+ /* Status/informational - Brand */
1207
+ /* Foreground informational text and icons */
1496
1208
  --status-informational: #276ef1;
1497
- /* Status/success - Theme - Century 21 */
1209
+ /* Status/on-error - Theme - BRAND */
1210
+ /* Foreground error text and icons */
1211
+ --status-on-error: #ffffff;
1212
+ /* Status/on-information - Theme - BRAND */
1213
+ --status-on-information: #ffffff;
1214
+ /* Status/on-informational - Brand */
1215
+ /* Foreground informational text and icons */
1216
+ --status-on-informational: #ffffff;
1217
+ /* Status/on-success - Theme - BRAND */
1218
+ /* Foreground success icons and text */
1219
+ --status-on-success: #ffffff;
1220
+ /* Status/on-warning - Theme - BRAND */
1221
+ /* Foreground warning icons */
1222
+ --status-on-warning: #141414;
1223
+ /* Status/success - Theme - BRAND */
1224
+ /* Foreground success icons and text */
1498
1225
  --status-success: #258750;
1499
- /* Status/warning - Theme - Century 21 */
1226
+ /* Status/warning - Theme - BRAND */
1227
+ /* Foreground warning icons */
1500
1228
  --status-warning: #f6bc2f;
1501
- /* Stroke/Brand/brand-primary - Theme - Century 21 */
1229
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1230
+ /* Outline variant - decorative elements such as dividers */
1502
1231
  --stroke-brand-primary: #7c693c;
1503
- /* Stroke/Brand/brand-primary-depth - Theme - Century 21 */
1232
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1233
+ /* Outline variant - decorative elements such as dividers */
1504
1234
  --stroke-brand-primary-depth: #695933;
1505
- /* Stroke/Brand/brand-secondary - Theme - Century 21 */
1235
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1506
1236
  --stroke-brand-secondary: #252526;
1507
- /* Stroke/Brand/brand-secondary-depth - Theme - Century 21 */
1237
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1508
1238
  --stroke-brand-secondary-depth: #1f1f20;
1509
- /* Stroke/Neutral/neutral-base - Theme - Century 21 */
1239
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1240
+ /* For control components */
1510
1241
  --stroke-neutral-base: #949494;
1511
- /* Stroke/Neutral/disabled-dark - Theme - Century 21 */
1242
+ /* Stroke/Neutral/disabled-dark - Brand */
1243
+ /* Disabled outline separating the fill and surface background */
1512
1244
  --stroke-neutral-disabled-dark: #757575;
1513
- /* Stroke/Neutral/disabled-light - Theme - Century 21 */
1245
+ /* Stroke/Neutral/disabled-light - Brand */
1246
+ /* Disabled outline separating the fill and surface background */
1514
1247
  --stroke-neutral-disabled-light: #bdbdbd;
1515
- /* Stroke/Neutral/focus - Theme - Century 21 */
1248
+ /* Stroke/Neutral/focus - Brand */
1249
+ /* Highlight focus element */
1516
1250
  --stroke-neutral-focus: #000000;
1517
- /* Stroke/Neutral/neutral-high - Theme - Century 21 */
1251
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1252
+ /* Highlight focus element */
1253
+ --stroke-neutral-focus-on-inverse: #ffffff;
1254
+ /* Stroke/Neutral/neutral-high - Brand */
1518
1255
  --stroke-neutral-high: #141414;
1519
- /* Stroke/Neutral/neutral-high-contrast - Theme - Century 21 */
1256
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1520
1257
  --stroke-neutral-high-contrast: #141414;
1521
- /* Stroke/Neutral/Interaction/disabled-dark - Theme - 3.0 */
1522
- --stroke-neutral-interaction-disabled-dark: #48566a;
1523
- /* Stroke/Neutral/Interaction/disabled-light - Theme - 3.0 */
1524
- --stroke-neutral-interaction-disabled-light: #c8d6e5;
1525
- /* Stroke/Neutral/Interaction/focus - Theme - 3.0 */
1526
- --stroke-neutral-interaction-focus: #000000;
1527
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - Century 21 */
1258
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1528
1259
  --stroke-neutral-interactions-disabled-dark: #757575;
1529
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Century 21 */
1260
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1530
1261
  --stroke-neutral-interactions-disabled-light: #bdbdbd;
1531
- /* Stroke/Neutral/Interactions/focus - Theme - Century 21 */
1262
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1532
1263
  --stroke-neutral-interactions-focus: #000000;
1533
- /* Stroke/Neutral/neutral-low - Theme - Century 21 */
1264
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
1265
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1266
+ /* Stroke/Neutral/neutral-low - Brand */
1267
+ /* Outline variant - decorative elements such as dividers */
1534
1268
  --stroke-neutral-low: #e0e0e0;
1535
- /* Stroke/Neutral/neutral-low-contrast - Theme - Century 21 */
1269
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1536
1270
  --stroke-neutral-low-contrast: #e0e0e0;
1537
- /* Surface/Brand/primary - Theme - Century 21 */
1271
+ /* Surface/Brand/primary - Theme - BRAND */
1538
1272
  --surface-brand-primary: #7c693c;
1539
- /* Surface/Brand/primary-highlight - Theme - Century 21 */
1273
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1540
1274
  --surface-brand-primary-highlight: #ebe9e2;
1541
- /* Surface/Brand/secondary - Theme - Century 21 */
1275
+ /* Surface/Brand/secondary - Theme - BRAND */
1542
1276
  --surface-brand-secondary: #252526;
1543
- /* Surface/Brand/secondary-highlight - Theme - Century 21 */
1277
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1544
1278
  --surface-brand-secondary-highlight: #dedede;
1545
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Century 21 */
1279
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1546
1280
  --surface-neutral-interactions-dark-disabled: #d6d6d6;
1547
- /* Surface/Neutral/Interactions/light-disabled - Theme - Century 21 */
1281
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1548
1282
  --surface-neutral-interactions-light-disabled: #f5f5f5;
1549
- /* Surface/Neutral/Interactions/skeleton - Theme - Century 21 */
1550
- --surface-neutral-interactions-skeleton: #e0e0e0;
1551
- /* Surface/Neutral/inverse - Theme - Century 21 */
1283
+ /* Surface/Neutral/inverse - Brand */
1284
+ /* Inverted. Use for toasts notification & snackbars */
1552
1285
  --surface-neutral-inverse: #1f1f1f;
1553
- /* Surface/Neutral/inverse-dark - Theme - Century 21 */
1286
+ /* Surface/Neutral/inverse-dark - Theme - BRAND */
1554
1287
  --surface-neutral-inverse-dark: #1f1f1f;
1555
- /* Surface/Neutral/inverse-light - Theme - Century 21 */
1288
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1556
1289
  --surface-neutral-inverse-light: #ffffff;
1557
- /* Surface/Neutral/skeleton - Theme - Century 21 */
1558
- --surface-neutral-skeleton: #e0e0e0;
1559
- /* Surface/Neutral/T1-base - Theme - Century 21 */
1290
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1560
1291
  --surface-neutral-t1-base: #ffffff;
1561
- /* Surface/Neutral/T2-lowest - Theme - Century 21 */
1292
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1562
1293
  --surface-neutral-t2-lowest: #f5f5f5;
1563
- /* Surface/Neutral/T3-low - Theme - Century 21 */
1294
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1295
+ /* Navigations, app bar etc */
1564
1296
  --surface-neutral-t3-low: #dbdbdb;
1565
- /* Surface/Neutral/T4-high - Theme - Century 21 */
1566
- --surface-neutral-t4-high: #6b6b6b;
1567
- /* Surface/Spectrum/blue - Theme - Century 21 */
1297
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1298
+ /* Navigations, app bar etc */
1299
+ --surface-neutral-t4-high: #8a8a8a;
1300
+ /* Surface/Neutral/transparent - Theme - BRAND */
1301
+ --surface-neutral-transparent: #ffffff00;
1302
+ /* Surface/Spectrum/blue - Theme - BRAND */
1568
1303
  --surface-spectrum-blue: #dfe9fd;
1569
- /* Surface/Spectrum/green - Theme - Century 21 */
1304
+ /* Surface/Spectrum/green - Theme - BRAND */
1570
1305
  --surface-spectrum-green: #deede5;
1571
- /* Surface/Spectrum/lime - Theme - Century 21 */
1306
+ /* Surface/Spectrum/lime - Theme - BRAND */
1572
1307
  --surface-spectrum-lime: #f6f7e0;
1573
- /* Surface/Spectrum/magenta - Theme - Century 21 */
1308
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1574
1309
  --surface-spectrum-magenta: #f6dbfa;
1575
- /* Surface/Spectrum/orange - Theme - Century 21 */
1310
+ /* Surface/Spectrum/orange - Theme - BRAND */
1576
1311
  --surface-spectrum-orange: #fce7d9;
1577
- /* Surface/Spectrum/pink - Theme - Century 21 */
1312
+ /* Surface/Spectrum/pink - Theme - BRAND */
1578
1313
  --surface-spectrum-pink: #f9deec;
1579
- /* Surface/Spectrum/purple - Theme - Century 21 */
1314
+ /* Surface/Spectrum/purple - Theme - BRAND */
1580
1315
  --surface-spectrum-purple: #e7d9fc;
1581
- /* Surface/Spectrum/red - Theme - Century 21 */
1316
+ /* Surface/Spectrum/red - Theme - BRAND */
1582
1317
  --surface-spectrum-red: #f9e1e5;
1583
- /* Surface/Spectrum/teal - Theme - Century 21 */
1318
+ /* Surface/Spectrum/teal - Theme - BRAND */
1584
1319
  --surface-spectrum-teal: #d9eceb;
1585
- /* Surface/Spectrum/yellow - Theme - Century 21 */
1320
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1586
1321
  --surface-spectrum-yellow: #fef5e0;
1587
- }
1588
1322
 
1323
+ @media (width >= 640px) {
1324
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1325
+ --display-regular-large: 400 64px/88px var(--typeface);
1326
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1327
+ --display-regular-large-line-height: 88px;
1328
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1329
+ --display-regular-large-size: 64px;
1330
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1331
+ --display-regular-large-style: regular;
1332
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1333
+ --display-regular-medium: 400 56px/72px var(--typeface);
1334
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1335
+ --display-regular-medium-line-height: 72px;
1336
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1337
+ --display-regular-medium-size: 56px;
1338
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1339
+ --display-regular-medium-style: regular;
1340
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1341
+ --display-regular-small: 400 48px/60px var(--typeface);
1342
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1343
+ --display-regular-small-line-height: 60px;
1344
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1345
+ --display-regular-small-size: 48px;
1346
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1347
+ --display-regular-small-style: regular;
1348
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1349
+ --display-semibold-large: 600 64px/88px var(--typeface);
1350
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1351
+ --display-semibold-large-line-height: 88px;
1352
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1353
+ --display-semibold-large-size: 64px;
1354
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1355
+ --display-semibold-large-style: 600;
1356
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1357
+ --display-semibold-medium: 600 56px/72px var(--typeface);
1358
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1359
+ --display-semibold-medium-line-height: 72px;
1360
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1361
+ --display-semibold-medium-size: 56px;
1362
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1363
+ --display-semibold-medium-style: 600;
1364
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1365
+ --display-semibold-small: 600 48px/60px var(--typeface);
1366
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1367
+ --display-semibold-small-line-height: 60px;
1368
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1369
+ --display-semibold-small-size: 48px;
1370
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1371
+ --display-semibold-small-style: 600;
1372
+ /* Desktop/Heading/H1 */
1373
+ --heading-h1: 600 40px/48px var(--typeface);
1374
+ /* Desktop/Heading/H1 - line height */
1375
+ --heading-h1-line-height: 48px;
1376
+ /* Desktop/Heading/H1 - size */
1377
+ --heading-h1-size: 40px;
1378
+ /* Desktop/Heading/H1 - style */
1379
+ --heading-h1-style: 600;
1380
+ /* Desktop/Heading/H2 */
1381
+ --heading-h2: 600 32px/40px var(--typeface);
1382
+ /* Desktop/Heading/H2 - line height */
1383
+ --heading-h2-line-height: 40px;
1384
+ /* Desktop/Heading/H2 - size */
1385
+ --heading-h2-size: 32px;
1386
+ /* Desktop/Heading/H2 - style */
1387
+ --heading-h2-style: 600;
1388
+ /* Desktop/Heading/H3 */
1389
+ --heading-h3: 600 28px/36px var(--typeface);
1390
+ /* Desktop/Heading/H3 - line height */
1391
+ --heading-h3-line-height: 36px;
1392
+ /* Desktop/Heading/H3 - size */
1393
+ --heading-h3-size: 28px;
1394
+ /* Desktop/Heading/H3 - style */
1395
+ --heading-h3-style: 600;
1396
+ /* Desktop/Heading/H4 */
1397
+ --heading-h4: 600 24px/32px var(--typeface);
1398
+ /* Desktop/Heading/H4 - line height */
1399
+ --heading-h4-line-height: 32px;
1400
+ /* Desktop/Heading/H4 - size */
1401
+ --heading-h4-size: 24px;
1402
+ /* Desktop/Heading/H4 - style */
1403
+ --heading-h4-style: 600;
1404
+ /* Desktop/Heading/H5 */
1405
+ --heading-h5: 600 20px/28px var(--typeface);
1406
+ /* Desktop/Heading/H5 - line height */
1407
+ --heading-h5-line-height: 28px;
1408
+ /* Desktop/Heading/H5 - size */
1409
+ --heading-h5-size: 20px;
1410
+ /* Desktop/Heading/H5 - style */
1411
+ --heading-h5-style: 600;
1412
+ /* Desktop/Heading/H6 */
1413
+ --heading-h6: 500 18px/24px var(--typeface);
1414
+ /* Desktop/Heading/H6 - line height */
1415
+ --heading-h6-line-height: 24px;
1416
+ /* Desktop/Heading/H6 - size */
1417
+ --heading-h6-size: 18px;
1418
+ /* Desktop/Heading/H6 - style */
1419
+ --heading-h6-style: medium;
1420
+ /* Desktop/Subheader/Large - Headline */
1421
+ --subheader-large: 400 24px/32px var(--typeface);
1422
+ /* Desktop/Subheader/Large - Headline line height */
1423
+ --subheader-large-line-height: 32px;
1424
+ /* Desktop/Subheader/Large - Headline size */
1425
+ --subheader-large-size: 24px;
1426
+ /* Desktop/Subheader/Large - Headline style */
1427
+ --subheader-large-style: regular;
1428
+ /* Desktop/Subheader/Medium */
1429
+ --subheader-medium: 400 20px/28px var(--typeface);
1430
+ /* Desktop/Subheader/Medium - line height */
1431
+ --subheader-medium-line-height: 28px;
1432
+ /* Desktop/Subheader/Medium - size */
1433
+ --subheader-medium-size: 20px;
1434
+ /* Desktop/Subheader/Medium - style */
1435
+ --subheader-medium-style: regular;
1436
+ /* Desktop/Subheader/X-Large - Headline */
1437
+ --subheader-x-large: 400 28px/36px var(--typeface);
1438
+ /* Desktop/Subheader/X-Large - Headline line height */
1439
+ --subheader-x-large-line-height: 36px;
1440
+ /* Desktop/Subheader/X-Large - Headline size */
1441
+ --subheader-x-large-size: 28px;
1442
+ /* Desktop/Subheader/X-Large - Headline style */
1443
+ --subheader-x-large-style: regular;
1444
+ /* Desktop/Subheader/XX-Large - Headline */
1445
+ --subheader-xx-large: 400 32px/40px var(--typeface);
1446
+ /* Desktop/Subheader/XX-Large - Headline line height */
1447
+ --subheader-xx-large-line-height: 40px;
1448
+ /* Desktop/Subheader/XX-Large - Headline size */
1449
+ --subheader-xx-large-size: 32px;
1450
+ /* Desktop/Subheader/XX-Large - Headline style */
1451
+ --subheader-xx-large-style: regular;
1452
+ /* Desktop/Subheader/XXX-Large - Large Headline */
1453
+ --subheader-xxx-large: 400 40px/48px var(--typeface);
1454
+ /* Desktop/Subheader/XXX-Large - Large Headline line height */
1455
+ --subheader-xxx-large-line-height: 48px;
1456
+ /* Desktop/Subheader/XXX-Large - Large Headline size */
1457
+ --subheader-xxx-large-size: 40px;
1458
+ /* Desktop/Subheader/XXX-Large - Large Headline style */
1459
+ --subheader-xxx-large-style: regular;
1460
+ }
1461
+ }
1462
+ /* dark theme */
1589
1463
  [data-theme='dark'] {
1590
- /* Background/base - Theme - Century 21 */
1464
+ /* Background/base - Theme - BRAND */
1591
1465
  --background-base: #1f1f1f;
1592
- /* Background/scrim - Theme - Century 21 */
1466
+ /* Background/scrim - Theme - BRAND */
1593
1467
  --background-scrim: #61616180;
1594
- /* Background/shade - Theme - Century 21 */
1468
+ /* Background/shade - Theme - BRAND */
1595
1469
  --background-shade: #292929;
1596
- /* Data visual/category-01 - Theme - Century 21 */
1470
+ /* Data visual/category-01 - Brand */
1597
1471
  --data-visual-category-01: #cdbe80;
1598
- /* Data visual/category-01-highlight - Theme - Century 21 */
1472
+ /* Data visual/category-01-highlight - Brand */
1599
1473
  --data-visual-category-01-highlight: #cdbe804d;
1600
- /* Data visual/category-02 - Theme - Century 21 */
1474
+ /* Data visual/category-02 - Brand */
1601
1475
  --data-visual-category-02: #b68a79;
1602
- /* Data visual/category-02-highlight - Theme - Century 21 */
1476
+ /* Data visual/category-02-highlight - Brand */
1603
1477
  --data-visual-category-02-highlight: #b68a794d;
1604
- /* Data visual/category-03 - Theme - Century 21 */
1478
+ /* Data visual/category-03 - Brand */
1605
1479
  --data-visual-category-03: #e6b297;
1606
- /* Data visual/category-03-highlight - Theme - Century 21 */
1480
+ /* Data visual/category-03-highlight - Brand */
1607
1481
  --data-visual-category-03-highlight: #e6b2974d;
1608
- /* Data visual/category-04 - Theme - Century 21 */
1482
+ /* Data visual/category-04 - Brand */
1609
1483
  --data-visual-category-04: #969980;
1610
- /* Data visual/category-04-highlight - Theme - Century 21 */
1484
+ /* Data visual/category-04-highlight - Brand */
1611
1485
  --data-visual-category-04-highlight: #9699804d;
1612
- /* Data visual/category-05 - Theme - Century 21 */
1486
+ /* Data visual/category-05 - Brand */
1613
1487
  --data-visual-category-05: #af9385;
1614
- /* Data visual/category-05-highlight - Theme - Century 21 */
1488
+ /* Data visual/category-05-highlight - Brand */
1615
1489
  --data-visual-category-05-highlight: #a984844d;
1616
- /* Data visual/category-06 - Theme - Century 21 */
1490
+ /* Data visual/category-06 - Brand */
1617
1491
  --data-visual-category-06: #b2b2b2;
1618
- /* Data visual/category-07 - Theme - Century 21 */
1492
+ /* Data visual/category-06-highlight - Brand */
1493
+ --data-visual-category-06-highlight: #7f7f7f4d;
1494
+ /* Data visual/category-07 - Brand */
1619
1495
  --data-visual-category-07: #a98484;
1620
- /* Data visual/category-07-highlight - Theme - Century 21 */
1496
+ /* Data visual/category-07-highlight - Brand */
1621
1497
  --data-visual-category-07-highlight: #af93854d;
1622
- /* Data visual/category-1 - Theme - Century 21 */
1498
+ /* Data visual/category-1 - Theme - BRAND */
1623
1499
  --data-visual-category-1: #b68a79;
1624
- /* Data visual/category-1-highlight - Theme - Century 21 */
1500
+ /* Data visual/category-1-highlight - Theme - BRAND */
1625
1501
  --data-visual-category-1-highlight: #b68a794d;
1626
- /* Data visual/category-2 - Theme - Century 21 */
1502
+ /* Data visual/category-2 - Theme - BRAND */
1627
1503
  --data-visual-category-2: #e6b297;
1628
- /* Data visual/category-2-highlight - Theme - Century 21 */
1504
+ /* Data visual/category-2-highlight - Theme - BRAND */
1629
1505
  --data-visual-category-2-highlight: #e6b2974d;
1630
- /* Data visual/category-3 - Theme - Century 21 */
1506
+ /* Data visual/category-3 - Theme - BRAND */
1631
1507
  --data-visual-category-3: #969980;
1632
- /* Data visual/category-3-highlight - Theme - Century 21 */
1508
+ /* Data visual/category-3-highlight - Theme - BRAND */
1633
1509
  --data-visual-category-3-highlight: #9699804d;
1634
- /* Data visual/category-4 - Theme - Century 21 */
1510
+ /* Data visual/category-4 - Theme - BRAND */
1635
1511
  --data-visual-category-4: #cdbe80;
1636
- /* Data visual/category-4-highlight - Theme - Century 21 */
1512
+ /* Data visual/category-4-highlight - Theme - BRAND */
1637
1513
  --data-visual-category-4-highlight: #cdbe804d;
1638
- /* Data visual/category-5 - Theme - Century 21 */
1514
+ /* Data visual/category-5 - Theme - BRAND */
1639
1515
  --data-visual-category-5: #a98484;
1640
- /* Data visual/category-5-highlight - Theme - Century 21 */
1516
+ /* Data visual/category-5-highlight - Theme - BRAND */
1641
1517
  --data-visual-category-5-highlight: #a984844d;
1642
- /* Data visual/category-6 - Theme - Century 21 */
1518
+ /* Data visual/category-6 - Theme - BRAND */
1643
1519
  --data-visual-category-6: #b2b2b2;
1644
- /* Data visual/category-7 - Theme - Century 21 */
1520
+ /* Data visual/category-6-highlight - Theme - BRAND */
1521
+ --data-visual-category-6-highlight: #7f7f7f4d;
1522
+ /* Data visual/category-7 - Theme - BRAND */
1645
1523
  --data-visual-category-7: #af9385;
1646
- /* Data visual/category-7-highlight - Theme - Century 21 */
1524
+ /* Data visual/category-7-highlight - Theme - BRAND */
1647
1525
  --data-visual-category-7-highlight: #af93854d;
1648
- /* Data visual/gradient-end - Theme - Century 21 */
1526
+ /* Data visual/gradient-end - Theme - BRAND */
1649
1527
  --data-visual-gradient-end: #1f1f1f4d;
1650
- /* Data visual/green - Theme - Century 21 */
1528
+ /* Data visual/green - Theme - BRAND */
1651
1529
  --data-visual-green: #7cb796;
1652
- /* Data visual/green-highlight - Theme - Century 21 */
1530
+ /* Data visual/green-highlight - Theme - BRAND */
1653
1531
  --data-visual-green-highlight: #0d2f1c;
1654
- /* Data visual/negative - Theme - Cartus */
1532
+ /* Data visual/negative - Brand */
1655
1533
  --data-visual-negative: #e88997;
1656
- /* Data visual/negative-highlight - Theme - Century 21 */
1534
+ /* Data visual/negative-highlight - Brand */
1657
1535
  --data-visual-negative-highlight: #4c141d;
1658
- /* Data visual/positive - Theme - Century 21 */
1536
+ /* Data visual/positive - Brand */
1659
1537
  --data-visual-positive: #7cb796;
1660
- /* Data visual/positive-highlight - Theme - Century 21 */
1538
+ /* Data visual/positive-highlight - Brand */
1661
1539
  --data-visual-positive-highlight: #0d2f1c;
1662
- /* Data visual/red - Theme - Century 21 */
1540
+ /* Data visual/red - Theme - BRAND */
1663
1541
  --data-visual-red: #e88997;
1664
- /* Data visual/red-highlight - Theme - Century 21 */
1542
+ /* Data visual/red-highlight - Theme - BRAND */
1665
1543
  --data-visual-red-highlight: #4c141d;
1666
- /* Foreground/Brand/on-inverse-primary - Theme - Century 21 */
1544
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1667
1545
  --foreground-brand-on-inverse-primary: #b0a58a;
1668
- /* Foreground/Brand/on-inverse-secondary - Brand */
1546
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1669
1547
  --foreground-brand-on-inverse-secondary: #ffffff;
1670
- /* Foreground/Brand/on-brand-primary - Theme - Century 21 */
1548
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1549
+ /* Foreground color used on Brand's primary color (non neutral color) */
1671
1550
  --foreground-brand-on-primary: #141414;
1672
- /* Foreground/Brand/on-brand-secondary - Brand */
1551
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1552
+ /* Foreground color used on Brand's primary color (non neutral color) */
1673
1553
  --foreground-brand-on-secondary: #ffffff;
1674
- /* Foreground/Brand/brand-primary - Theme - Century 21 */
1554
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1555
+ /* Foreground text and icons that match the brand's primary color */
1675
1556
  --foreground-brand-primary: #b0a58a;
1676
- /* Foreground/Brand/brand-primary-depth - Theme - Century 21 */
1557
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1677
1558
  --foreground-brand-primary-depth: #c4bca7;
1678
- /* Foreground/Brand/brand-secondary - Theme - Century 21 */
1559
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1560
+ /* Foreground text and icons that match the brand's secondary color */
1679
1561
  --foreground-brand-secondary: #7c7c7d;
1680
- /* Foreground/Brand/brand-secondary-depth - Theme - Century 21 */
1562
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1681
1563
  --foreground-brand-secondary-depth: #9d9d9d;
1682
- /* Foreground/Link text/default - Theme - Century 21 */
1564
+ /* Foreground/Link text/default - Theme - BRAND */
1683
1565
  --foreground-link-text-default: #7a9ee1;
1684
- /* Foreground/Link text/default-disabled - Theme - Century 21 */
1566
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1685
1567
  --foreground-link-text-default-disabled: #14387b;
1686
- /* Foreground/Link text/default-hovered - Theme - Century 21 */
1568
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1687
1569
  --foreground-link-text-default-hovered: #90afe6;
1688
- /* Foreground/Link text/default-pressed - Theme - Century 21 */
1570
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1689
1571
  --foreground-link-text-default-pressed: #a6bfeb;
1690
- /* Foreground/Link text/default-visited - Theme - Century 21 */
1572
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1691
1573
  --foreground-link-text-default-visited: #af8baf;
1692
- /* Foreground/Link text/subtle-disabled - Theme - Century 21 */
1574
+ /* Foreground/Link text/subtle-disabled - Brand */
1693
1575
  --foreground-link-text-subtle-disabled: #4d4d4d;
1694
- /* Foreground/Link text/subtle-hovered - Theme - Century 21 */
1576
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1695
1577
  --foreground-link-text-subtle-hovered: #e6e6e6;
1696
- /* Foreground/Link text/subtle-inversed-disabled - Theme - Coldwell Banker */
1697
- --foreground-link-text-subtle-inversed-disabled: #424242;
1698
- /* Foreground/Link text/subtle-pressed - Theme - Century 21 */
1578
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1579
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1580
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1581
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1582
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1583
+ --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
1584
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1699
1585
  --foreground-link-text-subtle-pressed: #d1d1d1;
1700
- /* Foreground/Neutral/disabled-on-color-surface - Theme - Century 21 */
1701
- --foreground-neutral-disabled-on-color-surface: #424242;
1702
- /* Foreground/Neutral/disabled-on-surface - Theme - Century 21 */
1586
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1587
+ --foreground-neutral-disabled-on-color-surface: #3d3d3d;
1588
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1703
1589
  --foreground-neutral-disabled-on-surface: #4d4d4d;
1704
- /* Foreground/Neutral/on-surface - Theme - Century 21 */
1590
+ /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
1591
+ --foreground-neutral-inverse-on-surface: #fafafa;
1592
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1593
+ /* Interactive controls */
1594
+ --foreground-neutral-on-color: #ffffff;
1595
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1596
+ /* Text and icons against inverse surface */
1597
+ --foreground-neutral-on-inverse-surface: #fafafa;
1598
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1599
+ /* Default foreground text and icons against any surface color */
1705
1600
  --foreground-neutral-on-surface: #fafafa;
1706
- /* Foreground/Neutral/on-surface-variant-01 - Theme - Century 21 */
1601
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1602
+ /* Secondary foreground color for icons and text */
1707
1603
  --foreground-neutral-on-surface-variant-01: #c2c2c2;
1708
- /* Foreground/Neutral/on-surface-variant-02 - Theme - Century 21 */
1604
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1605
+ /* Tertiary foreground color for icons and text */
1709
1606
  --foreground-neutral-on-surface-variant-02: #9e9e9e;
1710
- /* Foreground/Neutral/on-surface-variant-03 - Theme - Century 21 */
1607
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1608
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1711
1609
  --foreground-neutral-on-surface-variant-03: #757575;
1712
- /* Foreground/Neutral/skeleton-element - Theme - Century 21 */
1713
- --foreground-neutral-skeleton-element: #4d4d4d;
1714
- /* Foreground/Spectrum/blue - Theme - Century 21 */
1610
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1611
+ --foreground-neutral-skeleton-element: #333333;
1612
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1715
1613
  --foreground-spectrum-blue: #88aff7;
1716
- /* Foreground/Spectrum/green - Theme - Century 21 */
1614
+ /* Foreground/Spectrum/green - Theme - BRAND */
1717
1615
  --foreground-spectrum-green: #87bd9f;
1718
- /* Foreground/Spectrum/lime - Theme - Century 21 */
1616
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1719
1617
  --foreground-spectrum-lime: #dce28f;
1720
- /* Foreground/Spectrum/magenta - Theme - Century 21 */
1618
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1721
1619
  --foreground-spectrum-magenta: #e07aed;
1722
- /* Foreground/Spectrum/orange - Theme - Century 21 */
1620
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1723
1621
  --foreground-spectrum-orange: #f6a874;
1724
- /* Foreground/Spectrum/pink - Theme - Century 21 */
1622
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1725
1623
  --foreground-spectrum-pink: #ea86b9;
1726
- /* Foreground/Spectrum/purple - Theme - Century 21 */
1624
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1727
1625
  --foreground-spectrum-purple: #c8a6f9;
1728
- /* Foreground/Spectrum/red - Theme - Century 21 */
1626
+ /* Foreground/Spectrum/red - Theme - BRAND */
1729
1627
  --foreground-spectrum-red: #ea93a0;
1730
- /* Foreground/Spectrum/teal - Theme - Century 21 */
1628
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1731
1629
  --foreground-spectrum-teal: #74bbb4;
1732
- /* Foreground/Spectrum/yellow - Theme - Century 21 */
1630
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1733
1631
  --foreground-spectrum-yellow: #fada8d;
1734
- /* Interaction/brand-disabled-opacity - Theme - 3.0 */
1735
- --interaction-brand-disabled-opacity: #ffffff0f;
1736
- /* Interaction/brand-hover-opacity - Theme - 3.0 */
1737
- --interaction-brand-hover-opacity: #ffffff1a;
1738
- /* Interaction/brand-press-opacity - Theme - 3.0 */
1739
- --interaction-brand-press-opacity: #ffffff33;
1740
- /* Interaction/hover-opacity - Theme - 3.0 */
1741
- --interaction-hover-opacity: #ffffff14;
1742
- /* Interaction/link-active-opacity - Theme - 3.0 */
1743
- --interaction-link-active-opacity: #ffffff4d;
1744
- /* Interaction/press-opacity - Theme - 3.0 */
1745
- --interaction-press-opacity: #ffffff29;
1746
- /* Interactions/brand-disabled-opacity - Theme - Century 21 */
1632
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1747
1633
  --interactions-brand-disabled-opacity: #ffffff0f;
1748
- /* Interactions/brand-hover-opacity - Theme - Century 21 */
1634
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1749
1635
  --interactions-brand-hover-opacity: #ffffff1a;
1750
- /* Interactions/brand-press-opacity - Theme - Century 21 */
1636
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1751
1637
  --interactions-brand-press-opacity: #ffffff33;
1752
- /* Interactions/disabled-opacity - Theme - Century 21 */
1638
+ /* Interactions/disabled-opacity - Theme - BRAND */
1753
1639
  --interactions-disabled-opacity: #ffffff0f;
1754
- /* Interactions/hover-opacity - Theme - Century 21 */
1640
+ /* Interactions/hover-opacity - Theme - BRAND */
1755
1641
  --interactions-hover-opacity: #ffffff14;
1756
- /* Interactions/link-active-opacity - Theme - Century 21 */
1642
+ /* Interactions/link-active-opacity - Theme - BRAND */
1757
1643
  --interactions-link-active-opacity: #ffffff4d;
1758
- /* Interactions/neutral-hover-opacity - Theme - Century 21 */
1644
+ /* Interactions/neutral-hover-opacity - Brand */
1645
+ /* surfaces using neutral tones */
1759
1646
  --interactions-neutral-hover-opacity: #ffffff14;
1760
- /* Interactions/neutral-press-opacity - Theme - Century 21 */
1647
+ /* Interactions/neutral-press-opacity - Brand */
1648
+ /* surfaces using neutral tones */
1761
1649
  --interactions-neutral-press-opacity: #ffffff29;
1762
- /* Interactions/press-opacity - Theme - Century 21 */
1650
+ /* Interactions/press-opacity - Theme - BRAND */
1763
1651
  --interactions-press-opacity: #ffffff29;
1764
- /* Interactions/primary-disabled-opacity - Theme - Century 21 */
1652
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1765
1653
  --interactions-primary-disabled-opacity: #b0a58a1f;
1766
- /* Interactions/primary-hover-opacity - Theme - Century 21 */
1654
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1767
1655
  --interactions-primary-hover-opacity: #b0a58a1a;
1768
- /* Interactions/primary-press-opacity - Theme - Century 21 */
1656
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1769
1657
  --interactions-primary-press-opacity: #b0a58a33;
1770
- /* Shadow/shadow-10 - Theme - Century 21 */
1658
+ /* Shadow/shadow-10 - Theme - BRAND */
1771
1659
  --shadow-10: #6161611a;
1772
- /* Shadow/shadow-12 - Theme - Century 21 */
1660
+ /* Shadow/shadow-12 - Theme - BRAND */
1773
1661
  --shadow-12: #6161611f;
1774
- /* Shadow/shadow-15 - Theme - Century 21 */
1662
+ /* Shadow/shadow-15 - Theme - BRAND */
1775
1663
  --shadow-15: #61616126;
1776
- /* Shadow/shadow-25 - Theme - Century 21 */
1664
+ /* Shadow/shadow-25 - Theme - BRAND */
1777
1665
  --shadow-25: #61616140;
1778
- /* Shadow/shadow-32 - Theme - Century 21 */
1666
+ /* Shadow/shadow-32 - Theme - BRAND */
1779
1667
  --shadow-32: #61616152;
1780
- /* Shadow/inner-shadow - Theme - Century 21 */
1668
+ /* Shadow/inner-shadow - Brand */
1781
1669
  --shadow-inner: #000000;
1782
- /* Shadow/inner-shadow-100 - Theme - Century 21 */
1670
+ /* Shadow/inner-shadow-100 - Theme - BRAND */
1783
1671
  --shadow-inner-100: #000000;
1784
- /* Shadow/variant-01 - Theme - Century 21 */
1672
+ /* Shadow/variant-01 - Brand */
1785
1673
  --shadow-variant-01: #6161611a;
1786
- /* Shadow/variant-02 - Theme - Century 21 */
1674
+ /* Shadow/variant-02 - Brand */
1787
1675
  --shadow-variant-02: #6161611f;
1788
- /* Shadow/variant-03 - Theme - Century 21 */
1676
+ /* Shadow/variant-03 - Brand */
1789
1677
  --shadow-variant-03: #61616126;
1790
- /* Shadow/variant-04 - Theme - Century 21 */
1678
+ /* Shadow/variant-04 - Brand */
1791
1679
  --shadow-variant-04: #61616140;
1792
- /* Shadow/variant-05 - Theme - Century 21 */
1680
+ /* Shadow/variant-05 - Brand */
1793
1681
  --shadow-variant-05: #61616152;
1794
- /* Status/error - Theme - Century 21 */
1682
+ /* Status/error - Theme - BRAND */
1683
+ /* Foreground error text and icons */
1795
1684
  --status-error: #e26b7d;
1796
- /* Status/information - Theme - Century 21 */
1685
+ /* Status/information - Theme - BRAND */
1797
1686
  --status-information: #5d92f5;
1798
- /* Status/informational - Theme - Century 21 */
1687
+ /* Status/informational - Brand */
1688
+ /* Foreground informational text and icons */
1799
1689
  --status-informational: #5d92f5;
1800
- /* Status/success - Theme - Century 21 */
1690
+ /* Status/on-error - Theme - BRAND */
1691
+ /* Foreground error text and icons */
1692
+ --status-on-error: #ffffff;
1693
+ /* Status/on-information - Theme - BRAND */
1694
+ --status-on-information: #ffffff;
1695
+ /* Status/on-informational - Brand */
1696
+ /* Foreground informational text and icons */
1697
+ --status-on-informational: #ffffff;
1698
+ /* Status/on-success - Theme - BRAND */
1699
+ /* Foreground success icons and text */
1700
+ --status-on-success: #ffffff;
1701
+ /* Status/on-warning - Theme - BRAND */
1702
+ /* Foreground warning icons */
1703
+ --status-on-warning: #141414;
1704
+ /* Status/success - Theme - BRAND */
1705
+ /* Foreground success icons and text */
1801
1706
  --status-success: #519f73;
1802
- /* Status/warning - Theme - Century 21 */
1707
+ /* Status/warning - Theme - BRAND */
1708
+ /* Foreground warning icons */
1803
1709
  --status-warning: #f8cd63;
1804
- /* Stroke/Brand/brand-primary - Brand */
1710
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1711
+ /* Outline variant - decorative elements such as dividers */
1805
1712
  --stroke-brand-primary: #ffffff;
1806
- /* Stroke/Brand/brand-primary-depth - Theme - Century 21 */
1713
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1714
+ /* Outline variant - decorative elements such as dividers */
1807
1715
  --stroke-brand-primary-depth: #c4bca7;
1808
- /* Stroke/Brand/brand-secondary - Brand */
1716
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1809
1717
  --stroke-brand-secondary: #ffffff;
1810
- /* Stroke/Brand/brand-secondary-depth - Theme - Century 21 */
1718
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1811
1719
  --stroke-brand-secondary-depth: #9d9d9d;
1812
- /* Stroke/Neutral/neutral-base - Theme - Century 21 */
1720
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1721
+ /* For control components */
1813
1722
  --stroke-neutral-base: #6b6b6b;
1814
- /* Stroke/Neutral/disabled-dark - Theme - Century 21 */
1815
- --stroke-neutral-disabled-dark: #424242;
1816
- /* Stroke/Neutral/disabled-light - Theme - Century 21 */
1723
+ /* Stroke/Neutral/disabled-dark - Brand */
1724
+ /* Disabled outline separating the fill and surface background */
1725
+ --stroke-neutral-disabled-dark: #3d3d3d;
1726
+ /* Stroke/Neutral/disabled-light - Brand */
1727
+ /* Disabled outline separating the fill and surface background */
1817
1728
  --stroke-neutral-disabled-light: #4d4d4d;
1818
- /* Stroke/Neutral/focus - Theme - Century 21 */
1729
+ /* Stroke/Neutral/focus - Brand */
1730
+ /* Highlight focus element */
1819
1731
  --stroke-neutral-focus: #ffffff;
1820
- /* Stroke/Neutral/neutral-high - Theme - Century 21 */
1732
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1733
+ /* Highlight focus element */
1734
+ --stroke-neutral-focus-on-inverse: #ffffff;
1735
+ /* Stroke/Neutral/neutral-high - Brand */
1821
1736
  --stroke-neutral-high: #fafafa;
1822
- /* Stroke/Neutral/neutral-high-contrast - Theme - Century 21 */
1737
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1823
1738
  --stroke-neutral-high-contrast: #fafafa;
1824
- /* Stroke/Neutral/Interaction/disabled-dark - Theme - 3.0 */
1825
- --stroke-neutral-interaction-disabled-dark: #b1c0d2;
1826
- /* Stroke/Neutral/Interaction/disabled-light - Theme - 3.0 */
1827
- --stroke-neutral-interaction-disabled-light: #323b49;
1828
- /* Stroke/Neutral/Interaction/focus - Theme - 3.0 */
1829
- --stroke-neutral-interaction-focus: #ffffff;
1830
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - Century 21 */
1831
- --stroke-neutral-interactions-disabled-dark: #424242;
1832
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Century 21 */
1739
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1740
+ --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1741
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1833
1742
  --stroke-neutral-interactions-disabled-light: #4d4d4d;
1834
- /* Stroke/Neutral/Interactions/focus - Theme - Century 21 */
1743
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1835
1744
  --stroke-neutral-interactions-focus: #ffffff;
1836
- /* Stroke/Neutral/neutral-low - Theme - Century 21 */
1745
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
1746
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1747
+ /* Stroke/Neutral/neutral-low - Brand */
1748
+ /* Outline variant - decorative elements such as dividers */
1837
1749
  --stroke-neutral-low: #4d4d4d;
1838
- /* Stroke/Neutral/neutral-low-contrast - Theme - Century 21 */
1750
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1839
1751
  --stroke-neutral-low-contrast: #4d4d4d;
1840
- /* Surface/Brand/primary - Theme - Century 21 */
1752
+ /* Surface/Brand/primary - Theme - BRAND */
1841
1753
  --surface-brand-primary: #b0a58a;
1842
- /* Surface/Brand/primary-highlight - Theme - Century 21 */
1754
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1843
1755
  --surface-brand-primary-highlight: #1f1a0f;
1844
- /* Surface/Brand/secondary - Theme - Century 21 */
1756
+ /* Surface/Brand/secondary - Theme - BRAND */
1845
1757
  --surface-brand-secondary: #7c7c7d;
1846
- /* Surface/Brand/secondary-highlight - Theme - Century 21 */
1758
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1847
1759
  --surface-brand-secondary-highlight: #09090a;
1848
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Century 21 */
1760
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1849
1761
  --surface-neutral-interactions-dark-disabled: #474747;
1850
- /* Surface/Neutral/Interactions/light-disabled - Theme - Century 21 */
1762
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1851
1763
  --surface-neutral-interactions-light-disabled: #292929;
1852
- /* Surface/Neutral/Interactions/skeleton - Theme - Century 21 */
1853
- --surface-neutral-interactions-skeleton: #333333;
1854
- /* Surface/Neutral/inverse - Theme - Century 21 */
1764
+ /* Surface/Neutral/inverse - Brand */
1765
+ /* Inverted. Use for toasts notification & snackbars */
1855
1766
  --surface-neutral-inverse: #383838;
1856
- /* Surface/Neutral/inverse-dark - Theme - Century 21 */
1767
+ /* Surface/Neutral/inverse-dark - Theme - BRAND */
1857
1768
  --surface-neutral-inverse-dark: #383838;
1858
- /* Surface/Neutral/inverse-light - Theme - Century 21 */
1769
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1859
1770
  --surface-neutral-inverse-light: #575757;
1860
- /* Surface/Neutral/skeleton - Theme - Century 21 */
1861
- --surface-neutral-skeleton: #333333;
1862
- /* Surface/Neutral/T1-base - Theme - Century 21 */
1771
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1863
1772
  --surface-neutral-t1-base: #1f1f1f;
1864
- /* Surface/Neutral/T2-lowest - Theme - Century 21 */
1773
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1865
1774
  --surface-neutral-t2-lowest: #2e2e2e;
1866
- /* Surface/Neutral/T3-low - Theme - Century 21 */
1775
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1776
+ /* Navigations, app bar etc */
1867
1777
  --surface-neutral-t3-low: #383838;
1868
- /* Surface/Neutral/T4-high - Theme - Century 21 */
1869
- --surface-neutral-t4-high: #474747;
1870
- /* Surface/Spectrum/blue - Theme - Century 21 */
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 */
1871
1784
  --surface-spectrum-blue: #0e2754;
1872
- /* Surface/Spectrum/green - Theme - Century 21 */
1785
+ /* Surface/Spectrum/green - Theme - BRAND */
1873
1786
  --surface-spectrum-green: #0d2f1c;
1874
- /* Surface/Spectrum/lime - Theme - Century 21 */
1787
+ /* Surface/Spectrum/lime - Theme - BRAND */
1875
1788
  --surface-spectrum-lime: #434712;
1876
- /* Surface/Spectrum/magenta - Theme - Century 21 */
1789
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1877
1790
  --surface-spectrum-magenta: #45054e;
1878
- /* Surface/Spectrum/orange - Theme - Century 21 */
1791
+ /* Surface/Spectrum/orange - Theme - BRAND */
1879
1792
  --surface-spectrum-orange: #532201;
1880
- /* Surface/Spectrum/pink - Theme - Century 21 */
1793
+ /* Surface/Spectrum/pink - Theme - BRAND */
1881
1794
  --surface-spectrum-pink: #4c0c2d;
1882
- /* Surface/Spectrum/purple - Theme - Century 21 */
1795
+ /* Surface/Spectrum/purple - Theme - BRAND */
1883
1796
  --surface-spectrum-purple: #220053;
1884
- /* Surface/Spectrum/red - Theme - Century 21 */
1797
+ /* Surface/Spectrum/red - Theme - BRAND */
1885
1798
  --surface-spectrum-red: #4c141d;
1886
- /* Surface/Spectrum/teal - Theme - Century 21 */
1799
+ /* Surface/Spectrum/teal - Theme - BRAND */
1887
1800
  --surface-spectrum-teal: #012e2a;
1888
- /* Surface/Spectrum/yellow - Theme - Century 21 */
1801
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1889
1802
  --surface-spectrum-yellow: #564210;
1890
1803
  }
1891
1804
  `));