@bspk/ui 1.3.30 → 1.4.1

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