@common-origin/design-system 2.21.0 → 2.23.0

package/dist/tokens.css

@@ -40,7 +40,9 @@
   --co-base-z-index-8: 1020;
   --co-base-opacity-0: 0;
   --co-base-opacity-5: 0.05;
+  --co-base-opacity-8: 0.08;
   --co-base-opacity-10: 0.1;
+  --co-base-opacity-12: 0.12;
   --co-base-opacity-20: 0.2;
   --co-base-opacity-25: 0.25;
   --co-base-opacity-30: 0.3;
@@ -94,6 +96,7 @@
   --co-base-size-max: max-content;
   --co-base-size-fit: fit-content;
   --co-base-color-transparent: transparent; /** Fully transparent. For colour values that must not show, such as a border that keeps its width (semantic.color.border.none). */
+  --co-base-color-white: #ffffff; /** Pure white, outside the ramps: raised surfaces (semantic.surface.raised) that sit on the gray.100 page. The ramps' contrast is measured against it (decision 0049). */
   --co-base-color-gray-100: #fcfcfc; /** Page background. oklch(0.991 0 0), 1.03:1 on white. */
   --co-base-color-gray-200: #f9f9f9; /** Subtle background. oklch(0.982 0 0), 1.05:1 on white. */
   --co-base-color-gray-300: #f2f2f2; /** Component fill at rest. oklch(0.961 0 0), 1.12:1 on white. */
@@ -358,108 +361,108 @@
   --co-base-color-magenta-alpha-1000: rgba(215, 0, 212, 1); /** Solid fill on hover. Composites to magenta.1000 over white. */
   --co-base-color-magenta-alpha-1100: rgba(177, 0, 175, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to magenta.1100 over white. */
   --co-base-color-magenta-alpha-1200: rgba(37, 0, 35, 0.918); /** Primary text, and the darkest step. Composites to magenta.1200 over white. */
-  --co-base-color-neutral-100: #f8f9fa;
-  --co-base-color-neutral-200: #e9ecef;
-  --co-base-color-neutral-300: #dee2e6;
-  --co-base-color-neutral-400: #ced4da;
-  --co-base-color-neutral-500: #adb5bd;
-  --co-base-color-neutral-600: #6c757d;
-  --co-base-color-neutral-700: #495057;
-  --co-base-color-neutral-800: #343a40;
-  --co-base-color-neutral-900: #212529;
-  --co-base-color-neutral-1000: #16191C;
-  --co-base-color-neutral-000: #ffffff;
-  --co-base-color-green-100: #CEF8E0;
-  --co-base-color-green-200: #ADF4CE;
-  --co-base-color-green-300: #89ECBC;
-  --co-base-color-green-400: #67DEA8;
-  --co-base-color-green-500: #49CC93;
-  --co-base-color-green-600: #2FB880;
-  --co-base-color-green-700: #15A46E;
-  --co-base-color-green-800: #008F5D;
-  --co-base-color-green-900: #007A4D;
-  --co-base-color-green-1000: #00653E;
-  --co-base-color-green-1100: #005132;
-  --co-base-color-green-1200: #053F27;
-  --co-base-color-green-1300: #0A2E1D;
-  --co-base-color-orange-100: #FFECCC;
-  --co-base-color-orange-200: #FFDFAD;
-  --co-base-color-orange-300: #FDD291;
-  --co-base-color-orange-400: #FFBB63;
-  --co-base-color-orange-500: #FFA037;
-  --co-base-color-orange-600: #F68511;
-  --co-base-color-orange-700: #E46F00;
-  --co-base-color-orange-800: #CB5D00;
-  --co-base-color-orange-900: #B14C00;
-  --co-base-color-orange-1000: #953D00;
-  --co-base-color-orange-1100: #7A2F00;
-  --co-base-color-orange-1200: #612300;
-  --co-base-color-orange-1300: #491901;
-  --co-base-color-red-100: #FFEBE7;
-  --co-base-color-red-200: #FFDDD6;
-  --co-base-color-red-300: #FFCDC3;
-  --co-base-color-red-400: #FFB7A9;
-  --co-base-color-red-500: #FF9B88;
-  --co-base-color-red-600: #FF7C65;
-  --co-base-color-red-700: #F75C46;
-  --co-base-color-red-800: #EA3829;
-  --co-base-color-red-900: #D31510;
-  --co-base-color-red-1000: #B40000;
-  --co-base-color-red-1100: #930000;
-  --co-base-color-red-1200: #740000;
-  --co-base-color-red-1300: #590000;
-  --co-base-color-blue-100: #E0F2FF;
-  --co-base-color-blue-200: #CAE8FF;
-  --co-base-color-blue-300: #B5DEFF;
-  --co-base-color-blue-400: #96CEFD;
-  --co-base-color-blue-500: #78BBFA;
-  --co-base-color-blue-600: #59A7F6;
-  --co-base-color-blue-700: #3892F3;
-  --co-base-color-blue-800: #147AF3;
-  --co-base-color-blue-900: #0265DC;
-  --co-base-color-blue-1000: #0054B6;
-  --co-base-color-blue-1100: #004491;
-  --co-base-color-blue-1200: #003571;
-  --co-base-color-blue-1300: #002754;
-  --co-base-color-purple-100: #F9F0FF;
-  --co-base-color-purple-200: #F4E1FF;
-  --co-base-color-purple-300: #EDD0FF;
-  --co-base-color-purple-400: #E3B8FF;
-  --co-base-color-purple-500: #D59DFF;
-  --co-base-color-purple-600: #C27EF7;
-  --co-base-color-purple-700: #AD5FE8;
-  --co-base-color-purple-800: #9644D4;
-  --co-base-color-purple-900: #7E2EBD;
-  --co-base-color-purple-1000: #67229F;
-  --co-base-color-purple-1100: #511882;
-  --co-base-color-purple-1200: #3D1066;
-  --co-base-color-purple-1300: #2B0A4D;
-  --co-base-color-pink-100: #FFEFF9;
-  --co-base-color-pink-200: #FFDFF4;
-  --co-base-color-pink-300: #FFCBED;
-  --co-base-color-pink-400: #FFB0E3;
-  --co-base-color-pink-500: #FF8ED4;
-  --co-base-color-pink-600: #FF69C1;
-  --co-base-color-pink-700: #FF42AB;
-  --co-base-color-pink-800: #F31A93;
-  --co-base-color-pink-900: #DC007B;
-  --co-base-color-pink-1000: #B90064;
-  --co-base-color-pink-1100: #97004E;
-  --co-base-color-pink-1200: #78003A;
-  --co-base-color-pink-1300: #5C0029;
-  --co-base-color-yellow-100: #FFF3D6;
-  --co-base-color-yellow-200: #FFE9B3;
-  --co-base-color-yellow-300: #FFDE8F;
-  --co-base-color-yellow-400: #FFD162;
-  --co-base-color-yellow-500: #FFC233;
-  --co-base-color-yellow-600: #EDAD0A;
-  --co-base-color-yellow-700: #D39700;
-  --co-base-color-yellow-800: #B88100;
-  --co-base-color-yellow-900: #9D6C00;
-  --co-base-color-yellow-1000: #825800;
-  --co-base-color-yellow-1100: #694600;
-  --co-base-color-yellow-1200: #523600;
-  --co-base-color-yellow-1300: #3D2800;
+  --co-base-color-neutral-100: #f8f9fa; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-200: #e9ecef; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-300: #dee2e6; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-400: #ced4da; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-500: #adb5bd; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-600: #6c757d; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-700: #495057; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-800: #343a40; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-900: #212529; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-1000: #16191C; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp, whose steps have different values and jobs (decision 0040). Removed in 3.0. */
+  --co-base-color-neutral-000: #ffffff; /** Deprecated: The Bootstrap neutral ramp is replaced by the gray ramp (decision 0040); its white is base.color.white (decision 0049). Removed in 3.0. */
+  --co-base-color-green-100: #CEF8E0; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-200: #ADF4CE; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-300: #89ECBC; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-400: #67DEA8; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-500: #49CC93; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-600: #2FB880; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-700: #15A46E; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-800: #008F5D; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-900: #007A4D; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-1000: #00653E; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-1100: #005132; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-1200: #053F27; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-green-1300: #0A2E1D; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-100: #FFECCC; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-200: #FFDFAD; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-300: #FDD291; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-400: #FFBB63; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-500: #FFA037; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-600: #F68511; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-700: #E46F00; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-800: #CB5D00; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-900: #B14C00; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-1000: #953D00; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-1100: #7A2F00; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-1200: #612300; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-orange-1300: #491901; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-100: #FFEBE7; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-200: #FFDDD6; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-300: #FFCDC3; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-400: #FFB7A9; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-500: #FF9B88; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-600: #FF7C65; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-700: #F75C46; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-800: #EA3829; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-900: #D31510; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-1000: #B40000; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-1100: #930000; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-1200: #740000; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-red-1300: #590000; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-100: #E0F2FF; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-200: #CAE8FF; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-300: #B5DEFF; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-400: #96CEFD; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-500: #78BBFA; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-600: #59A7F6; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-700: #3892F3; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-800: #147AF3; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-900: #0265DC; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-1000: #0054B6; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-1100: #004491; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-1200: #003571; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-blue-1300: #002754; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-100: #F9F0FF; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-200: #F4E1FF; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-300: #EDD0FF; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-400: #E3B8FF; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-500: #D59DFF; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-600: #C27EF7; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-700: #AD5FE8; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-800: #9644D4; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-900: #7E2EBD; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-1000: #67229F; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-1100: #511882; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-1200: #3D1066; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-purple-1300: #2B0A4D; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-100: #FFEFF9; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-200: #FFDFF4; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-300: #FFCBED; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-400: #FFB0E3; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-500: #FF8ED4; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-600: #FF69C1; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-700: #FF42AB; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-800: #F31A93; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-900: #DC007B; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-1000: #B90064; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-1100: #97004E; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-1200: #78003A; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-pink-1300: #5C0029; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-100: #FFF3D6; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-200: #FFE9B3; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-300: #FFDE8F; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-400: #FFD162; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-500: #FFC233; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-600: #EDAD0A; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-700: #D39700; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-800: #B88100; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-900: #9D6C00; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-1000: #825800; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-1100: #694600; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-1200: #523600; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
+  --co-base-color-yellow-1300: #3D2800; /** Deprecated: The Spectrum 1 hue ramps are replaced by the role ramps (accent, success, warning, serious, danger, ai) and the display ramps (olive, periwinkle, rose, magenta), with different values (decisions 0040, 0043, 0044). Removed in 3.0. */
   --co-base-spacing-auto: auto;
   --co-base-font-family-heading: 'Inter', sans-serif;
   --co-base-font-family-body: 'Inter', sans-serif;
@@ -542,14 +545,11 @@
   --co-component-input-disabled-cursor: not-allowed; /** Deprecated: Behaviour, not a design decision, stays in component code (decision 0014, rule 5); inputs set cursor: not-allowed themselves. Removed in 3.0. */
   --co-semantic-elevation-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /** Sunken/pressed states, input fields, wells */
   --co-semantic-border-radius-none: 0; /** Deprecated: Renamed to semantic.radius.none by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-overlay: rgba(33, 37, 41, 0.5); /** Deprecated: Renamed to semantic.surface.scrim by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-hover-overlay: rgba(33, 37, 41, 0.1); /** Deprecated: Renamed to semantic.color.fill.none-hover by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-active-overlay: rgba(33, 37, 41, 0.15); /** Deprecated: Renamed to semantic.color.fill.none-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-color-background-inverse-overlay: rgba(255, 255, 255, 0.2); /** Deprecated: Renamed to semantic.color.fill.inverse-none-hover by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-fill-none-hover: rgba(33, 37, 41, 0.1); /** Hover tint for a fill-less control over any background, such as a chip close button. */
-  --co-semantic-color-fill-none-pressed: rgba(33, 37, 41, 0.15); /** Pressed tint for a fill-less control over any background, such as a chip close button. */
+  --co-semantic-color-fill-none-hover: rgba(34, 34, 34, 0.1); /** Hover tint for a fill-less control over any background, such as a chip close button. */
+  --co-semantic-color-fill-none-pressed: rgba(34, 34, 34, 0.15); /** Pressed tint for a fill-less control over any background, such as a chip close button. */
   --co-semantic-color-fill-inverse-none-hover: rgba(255, 255, 255, 0.2); /** Hover tint for a fill-less element on a dark background, such as a count on a dark tab. */
-  --co-semantic-surface-scrim: rgba(33, 37, 41, 0.5); /** Backdrop behind a modal surface: Modal, Sheet, ActionSheet. */
+  --co-semantic-surface-scrim: rgba(34, 34, 34, 0.5); /** Backdrop behind a modal surface: Modal, Sheet, ActionSheet. */
   --co-base-size-0: var(--co-base-dimension-0); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
   --co-base-size-1: var(--co-base-dimension-1); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
   --co-base-size-2: var(--co-base-dimension-2); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
@@ -606,20 +606,6 @@
   --co-base-spacing-48: var(--co-base-dimension-48); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
   --co-base-spacing-56: var(--co-base-dimension-56); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
   --co-base-spacing-64: var(--co-base-dimension-64); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
-  --co-component-slider-thumb-background: var(--co-base-color-neutral-000); /** Fill of Slider's thumb: white, so it reads on both the track and the fill. */
-  --co-component-status-pending-text: var(--co-base-color-yellow-1000); /** Text and icon of a pending StatusLabel, on its pending background. */
-  --co-component-status-pending-background: var(--co-base-color-yellow-100); /** Fill of a pending StatusLabel, behind its pending text. */
-  --co-component-status-processing-text: var(--co-base-color-blue-900); /** Text and icon of a processing StatusLabel, on its processing background. */
-  --co-component-status-processing-background: var(--co-base-color-blue-100); /** Fill of a processing StatusLabel, behind its processing text. */
-  --co-component-status-scheduled-text: var(--co-base-color-purple-900); /** Text and icon of a scheduled StatusLabel, on its scheduled background. */
-  --co-component-status-scheduled-background: var(--co-base-color-purple-100); /** Fill of a scheduled StatusLabel, behind its scheduled text. */
-  --co-component-transaction-credit: var(--co-base-color-green-700); /** Positive amounts and credits in MoneyDisplay and TransactionListItem. */
-  --co-component-transaction-credit-hover: var(--co-base-color-green-800); /** A credit amount on a hovered interactive row. */
-  --co-component-transaction-debit: var(--co-base-color-red-900); /** Negative amounts and debits in MoneyDisplay and TransactionListItem. */
-  --co-component-transaction-debit-hover: var(--co-base-color-red-1000); /** A debit amount on a hovered interactive row. */
-  --co-component-transaction-pending: var(--co-base-color-orange-600); /** Amounts of pending or processing transactions. */
-  --co-component-transaction-neutral: var(--co-base-color-neutral-600); /** Informational amounts that are neither credit nor debit. */
-  --co-component-track-background: var(--co-base-color-neutral-300); /** Unfilled track of ProgressBar and Slider; the fill and thumb show the value (decision 0026). */
   --co-semantic-elevation-none: var(--co-base-shadow-none); /** No elevation - flat surfaces, default state */
   --co-semantic-elevation-raised: var(--co-base-shadow-2); /** Subtle lift - cards, buttons with depth */
   --co-semantic-elevation-floating: var(--co-base-shadow-4); /** Moderate lift - tooltips, popovers, dropdowns */
@@ -635,6 +621,8 @@
   --co-semantic-opacity-full: var(--co-base-opacity-100); /** 1: fully opaque (the enabled counterpart of disabled). */
   --co-semantic-opacity-hover: var(--co-base-opacity-80); /** Content that fades to answer hover, such as a clickable card's image. */
   --co-semantic-opacity-pressed: var(--co-base-opacity-70); /** Content that fades while pressed, one step further than hover. */
+  --co-semantic-opacity-state-hover: var(--co-base-opacity-8); /** State layer for a hovered solid fill: its content colour mixed in at 8%, as in Material 3 (decision 0048). */
+  --co-semantic-opacity-state-pressed: var(--co-base-opacity-12); /** State layer for a pressed solid fill: its content colour mixed in at 12% (decision 0048). */
   --co-semantic-font-family-body: var(--co-base-font-family-body); /** UI text (Inter). Use a typography style where one fits; this is for components that set the family on its own. */
   --co-semantic-font-family-monospace: var(--co-base-font-family-monospace); /** Code and other fixed-width text (CodeBlock). */
   --co-semantic-font-size-xs: var(--co-base-font-size-1); /** Smallest text size: captions, metadata and small labels. */
@@ -657,11 +645,8 @@
   --co-semantic-z-index-dropdown: var(--co-base-z-index-6); /** Deprecated: Renamed to semantic.layer.dropdown by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-z-index-overlay: var(--co-base-z-index-7); /** Deprecated: Renamed to semantic.layer.overlay by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-z-index-modal: var(--co-base-z-index-8); /** Deprecated: Renamed to semantic.layer.modal by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-border-default: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-default); /** Hairline in the default border colour: dividers that separate content, such as Breadcrumbs. 1.19:1 on white, so never a control's edge (decision 0025). */
-  --co-semantic-border-subtle: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-subtle); /** Deprecated: Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-border-strong: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** Deprecated: Renamed to semantic.border.input-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-border-default: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-default); /** Hairline in the default border colour: dividers and decorative outlines, such as Breadcrumbs, CodeBlock and Divider. 1.53:1 on white, so never a control edge (decision 0025). */
   --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-focus); /** The focus ring every component draws, with border.focusOffset; never blue (decision 0029). */
-  --co-semantic-border-tooltip: var(--co-base-border-width-2) var(--co-base-border-style-dotted) var(--co-semantic-color-border-emphasis); /** Deprecated: Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0. */
   --co-semantic-border-width-thin: var(--co-base-border-width-1); /** Hairline border: dividers, control edges and rings. */
   --co-semantic-border-width-thick: var(--co-base-border-width-2); /** Thick border: focus rings, emphasised outlines and selected states. */
   --co-semantic-border-focus-offset: var(--co-base-border-width-2); /** Gap between an element and its focus ring; negate it to inset the ring inside the element. */
@@ -673,7 +658,6 @@
   --co-semantic-border-radius-2xl: var(--co-base-border-radius-6); /** Deprecated: Renamed to semantic.radius.2xl by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-border-radius-3xl: var(--co-base-border-radius-7); /** Deprecated: Renamed to semantic.radius.3xl by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-border-radius-circle: var(--co-base-border-radius-circle); /** Deprecated: Renamed to semantic.radius.full by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-border-emphasis: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-emphasis); /** Hairline for dividers and decorative outlines, such as CodeBlock and Divider; never a control edge. */
   --co-semantic-border-input-hover: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-input-hover); /** Firm hairline that must read as a boundary, such as a hovered text input. */
   --co-semantic-size-100: var(--co-base-dimension-1); /** Size step for thin bars: the TabBar scrollbar, the small ProgressBar. */
   --co-semantic-size-200: var(--co-base-dimension-2); /** Size step for small marks: the Badge dot, the medium ProgressBar. */
@@ -759,165 +743,105 @@
   --co-semantic-spacing-layout-10xl: var(--co-base-dimension-20); /** Deprecated: Renamed to semantic.space.2000 by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-spacing-layout-11xl: var(--co-base-dimension-24); /** Deprecated: Renamed to semantic.space.2400 by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-spacing-layout-auto: var(--co-base-spacing-auto); /** auto: lets the browser compute the space, such as margin: auto to centre or push an element. */
-  --co-semantic-color-text-default: var(--co-base-color-neutral-900); /** Primary text: body copy, labels and headings. 15.43:1 on white, 14.63:1 on the page. */
-  --co-semantic-color-text-emphasis: var(--co-base-color-neutral-1000); /** Emphasised text: one step darker than text.default, so it reads stronger (decision 0029). 17.65:1 on white. */
-  --co-semantic-color-text-subdued: var(--co-base-color-neutral-700); /** Deprecated: Renamed to semantic.color.text.muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-text-inverse: var(--co-base-color-neutral-000); /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.43:1 on background.emphasis, 5.39:1 on background.interactive. */
-  --co-semantic-color-text-disabled: var(--co-base-color-neutral-500); /** Text of disabled controls. 2.07:1 on white: disabled text is exempt from the contrast minimum (WCAG 1.4.3), so never use it for text people need to read, including placeholders. */
-  --co-semantic-color-text-interactive: var(--co-base-color-blue-900); /** Deprecated: Renamed to semantic.color.text.accent by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-text-interactive-hover: var(--co-base-color-blue-1000); /** Deprecated: Renamed to semantic.color.text.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-text-interactive-active: var(--co-base-color-blue-1100); /** Deprecated: Renamed to semantic.color.text.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-text-error: var(--co-base-color-red-900); /** Deprecated: Renamed to semantic.color.text.danger by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-text-success: var(--co-base-color-green-900); /** Success text, such as InlineAlert success messages. 5.40:1 on white, 5.12:1 on the page. */
-  --co-semantic-color-text-warning: var(--co-base-color-orange-900); /** Warning text, such as InlineAlert warnings. 5.38:1 on white, 5.10:1 on the page. */
-  --co-semantic-color-text-muted: var(--co-base-color-neutral-700); /** Secondary text: helper text, metadata, timestamps. */
-  --co-semantic-color-text-accent: var(--co-base-color-blue-900); /** Blue text for links and selected items; never decoration, see 0003. */
-  --co-semantic-color-text-accent-hover: var(--co-base-color-blue-1000); /** Text of a hovered selected item, on the accent-muted-hover fill. */
-  --co-semantic-color-text-accent-pressed: var(--co-base-color-blue-1100); /** Text of a pressed selected item, on the accent-muted-pressed fill. */
-  --co-semantic-color-text-danger: var(--co-base-color-red-900); /** Error text: field error messages, InlineAlert errors. */
+  --co-semantic-color-text-default: var(--co-base-color-gray-1200); /** Primary text: body copy, labels and headings. 15.91:1 on white, 15.51:1 on the page. */
+  --co-semantic-color-text-inverse: var(--co-base-color-gray-100); /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.51:1 on fill.emphasis. */
+  --co-semantic-color-text-disabled: var(--co-base-color-gray-alpha-700); /** Text of disabled controls, translucent so it stays right on tinted surfaces. 1.53:1 on white: disabled text is exempt from the contrast minimum (WCAG 1.4.3), so never use it for text people need to read, including placeholders. */
+  --co-semantic-color-text-success: var(--co-base-color-success-1100); /** Success text, such as InlineAlert success messages. 5.99:1 on white. */
+  --co-semantic-color-text-warning: var(--co-base-color-warning-1100); /** Warning text, such as InlineAlert warnings (0043: warning is yellow). 6.01:1 on white. */
+  --co-semantic-color-text-muted: var(--co-base-color-gray-1100); /** Secondary text: helper text, metadata, timestamps. 6.01:1 on white, and at least 4.5:1 on every background and fill step (decision 0040). */
+  --co-semantic-color-text-accent: var(--co-base-color-accent-1100); /** Blue text for links and selected items, in every state: the fill shows hover and pressed. Never decoration (0003). 6.00:1 on white. */
+  --co-semantic-color-text-danger: var(--co-base-color-danger-1100); /** Error text: field error messages, InlineAlert errors. 6.03:1 on white. */
   --co-semantic-color-text-ai: var(--co-base-color-ai-1100); /** AI-generated content and agent actions, such as the label on proposed content (0046); always with the AI icon and a label, never colour alone (0043). 5.99:1 on white, 5.68:1 on the page. */
-  --co-semantic-color-background-default: var(--co-base-color-neutral-100); /** Deprecated: Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-subtle: var(--co-base-color-neutral-000); /** Deprecated: Split by use (decision 0031): semantic.surface.raised for surfaces such as cards, inputs and sheets; component.slider.thumb.background for Slider's thumb. Removed in 3.0. */
-  --co-semantic-color-background-emphasis: var(--co-base-color-neutral-900); /** Deprecated: Renamed to semantic.color.fill.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-text-serious: var(--co-base-color-serious-1100); /** Serious-warning text: between warning and danger (decisions 0043, 0045). 6.04:1 on white. */
+  --co-semantic-color-background-subtle: var(--co-base-color-white); /** Deprecated: Split by use (decision 0031): semantic.surface.raised for surfaces such as cards, inputs and sheets; component.slider.thumb.background for Slider's thumb. Removed in 3.0. */
   --co-semantic-color-background-emphasis-hover: var(--co-base-color-neutral-800); /** Deprecated: Renamed to semantic.color.fill.emphasis-hover by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-color-background-emphasis-active: var(--co-base-color-neutral-1000); /** Deprecated: Renamed to semantic.color.fill.emphasis-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-surface: var(--co-base-color-neutral-200); /** Deprecated: Renamed to semantic.color.fill.muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-inverse: var(--co-base-color-neutral-800); /** Deprecated: Renamed to semantic.color.fill.inverse by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-interactive: var(--co-base-color-blue-900); /** Deprecated: Renamed to semantic.color.fill.accent by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-interactive-subtle: var(--co-base-color-blue-100); /** Deprecated: Renamed to semantic.color.fill.accent-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-interactive-subtle-hover: var(--co-base-color-blue-200); /** Deprecated: Renamed to semantic.color.fill.accent-muted-hover by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-interactive-subtle-active: var(--co-base-color-blue-300); /** Deprecated: Renamed to semantic.color.fill.accent-muted-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-interactive-hover: var(--co-base-color-blue-1000); /** Deprecated: Renamed to semantic.color.fill.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-interactive-active: var(--co-base-color-blue-1100); /** Deprecated: Renamed to semantic.color.fill.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-error: var(--co-base-color-red-900); /** Deprecated: Renamed to semantic.color.fill.danger by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-error-hover: var(--co-base-color-red-1000); /** Deprecated: Renamed to semantic.color.fill.danger-hover by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-error-active: var(--co-base-color-red-1100); /** Deprecated: Renamed to semantic.color.fill.danger-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-error-subtle: var(--co-base-color-red-100); /** Deprecated: Renamed to semantic.color.fill.danger-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-success: var(--co-base-color-green-900); /** Deprecated: Renamed to semantic.color.fill.success by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-success-subtle: var(--co-base-color-green-100); /** Deprecated: Renamed to semantic.color.fill.success-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-warning: var(--co-base-color-orange-900); /** Deprecated: Renamed to semantic.color.fill.warning by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-warning-subtle: var(--co-base-color-orange-100); /** Deprecated: Renamed to semantic.color.fill.warning-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-disabled: var(--co-base-color-neutral-300); /** Deprecated: Renamed to semantic.color.fill.disabled by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-neutral: var(--co-base-color-neutral-300); /** Deprecated: Renamed to semantic.color.fill.default by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-neutral-hover: var(--co-base-color-neutral-400); /** Deprecated: Renamed to semantic.color.fill.default-hover by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-neutral-active: var(--co-base-color-neutral-500); /** Deprecated: Renamed to semantic.color.fill.default-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-color-background-transparent: var(--co-base-color-transparent); /** Deprecated: Renamed to semantic.color.fill.none by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-background-progress-track: var(--co-base-color-neutral-300); /** Deprecated: Moved to the component tier as component.track.background (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-background-page: var(--co-base-color-neutral-100); /** Deprecated: Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-border-default: var(--co-base-color-neutral-200); /** Default border colour for dividers and decorative outlines only. 1.19:1 on white, below the 3:1 a control's edge needs (WCAG 1.4.11); use color.border.control for that (decision 0025). */
-  --co-semantic-color-border-subtle: var(--co-base-color-neutral-300); /** Deprecated: Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-border-control: var(--co-base-color-neutral-600); /** Deprecated: Renamed to semantic.color.border.input by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-overlay: var(--co-semantic-surface-scrim); /** Deprecated: Renamed to semantic.surface.scrim by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-hover-overlay: var(--co-semantic-color-fill-none-hover); /** Deprecated: Renamed to semantic.color.fill.none-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-active-overlay: var(--co-semantic-color-fill-none-pressed); /** Deprecated: Renamed to semantic.color.fill.none-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-border-default: var(--co-base-color-gray-700); /** Default border colour for dividers and decorative outlines only (decision 0040). 1.53:1 on white, below the 3:1 a control edge needs; use color.border.input for that (decision 0025). */
   --co-semantic-color-border-strong: var(--co-base-color-neutral-800); /** Deprecated: Split by use (decision 0031): semantic.color.border.input-hover for a hovered control, semantic.color.border.focus for the focus ring and CardSmall's ring, semantic.color.fill.inverse for drag handles. Removed in 3.0. */
-  --co-semantic-color-border-interactive: var(--co-base-color-blue-900); /** Deprecated: Renamed to semantic.color.border.accent by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-border-error: var(--co-base-color-red-900); /** Deprecated: Renamed to semantic.color.border.danger by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-border-success: var(--co-base-color-green-900); /** Green border for success outlines, such as an outlined success Alert. */
-  --co-semantic-color-border-warning: var(--co-base-color-orange-900); /** Orange border for warning outlines, such as an outlined warning Alert. */
+  --co-semantic-color-border-success: var(--co-base-color-success-800); /** Green border for success outlines, such as an outlined success Alert. 3.18:1 on white (decision 0025). */
+  --co-semantic-color-border-warning: var(--co-base-color-warning-800); /** Yellow border for warning outlines, such as an outlined warning Alert. 3.19:1 on white (decision 0025). */
   --co-semantic-color-border-none: var(--co-base-color-transparent); /** An invisible border that keeps its width, so a borderless state takes the same space as a bordered one (for example Alert's borderless appearance, decision 0019). */
-  --co-semantic-color-border-emphasis: var(--co-base-color-neutral-300); /** Border for dividers, decorative outlines and disabled controls; never a resting control edge. */
-  --co-semantic-color-border-input: var(--co-base-color-neutral-600); /** Resting edge of a control that must show where it is: text inputs, Dropdown, Checkbox. */
-  --co-semantic-color-border-input-hover: var(--co-base-color-neutral-800); /** Edge of a hovered control, such as a hovered text input or Dropdown. */
-  --co-semantic-color-border-focus: var(--co-base-color-neutral-800); /** The focus ring, and rings that mark the current item, such as on CardSmall (0029). */
-  --co-semantic-color-border-accent: var(--co-base-color-blue-900); /** Blue border for selected items; never decoration, see 0003. */
-  --co-semantic-color-border-danger: var(--co-base-color-red-900); /** Border of an invalid field and other error outlines. */
-  --co-semantic-color-icon-default: var(--co-base-color-neutral-900); /** Default icon colour, matching text.default. 15.43:1 on white. */
-  --co-semantic-color-icon-emphasis: var(--co-base-color-neutral-1000); /** Emphasised icons, matching text.emphasis: one step darker than icon.default (decision 0029). */
-  --co-semantic-color-icon-subdued: var(--co-base-color-neutral-600); /** Deprecated: Renamed to semantic.color.icon.muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-icon-disabled: var(--co-base-color-neutral-500); /** Icons and other foreground marks in disabled controls, such as a disabled Slider's fill and thumb ring. Exempt from the contrast minimum, like text.disabled. */
-  --co-semantic-color-icon-inverse: var(--co-base-color-neutral-000); /** Icons on dark or coloured fills, matching text.inverse. */
-  --co-semantic-color-icon-interactive: var(--co-base-color-blue-900); /** Deprecated: Renamed to semantic.color.icon.accent by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-icon-interactive-hover: var(--co-base-color-blue-1000); /** Deprecated: Renamed to semantic.color.icon.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-icon-interactive-active: var(--co-base-color-blue-1100); /** Deprecated: Renamed to semantic.color.icon.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-icon-error: var(--co-base-color-red-900); /** Deprecated: Renamed to semantic.color.icon.danger by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-icon-success: var(--co-base-color-green-900); /** Success icons, such as in Alert and EmptyState. 5.40:1 on white. (InlineAlert's icon takes the text colour instead.) */
-  --co-semantic-color-icon-warning: var(--co-base-color-orange-900); /** Warning icons, such as in Alert. 5.38:1 on white. (InlineAlert's icon takes the text colour instead.) */
-  --co-semantic-color-icon-muted: var(--co-base-color-neutral-600); /** Secondary icons, such as list item and empty-state icons. */
-  --co-semantic-color-icon-accent: var(--co-base-color-blue-900); /** Blue icons in links and selected items, matching color.text.accent. */
-  --co-semantic-color-icon-accent-hover: var(--co-base-color-blue-1000); /** Icon of a hovered selected item, matching color.text.accent-hover. */
-  --co-semantic-color-icon-accent-pressed: var(--co-base-color-blue-1100); /** Icon of a pressed selected item, matching color.text.accent-pressed. */
-  --co-semantic-color-icon-danger: var(--co-base-color-red-900); /** Error icons, such as in Alert and EmptyState. */
+  --co-semantic-color-border-input: var(--co-base-color-gray-800); /** Resting edge of a control that must show where it is: text inputs, Dropdown, Checkbox. 3.19:1 on white and the page (decision 0025). */
+  --co-semantic-color-border-input-hover: var(--co-base-color-gray-1100); /** Edge of a hovered control, such as a hovered text input or Dropdown. 6.01:1 on white, a clear step from rest that stays apart from the focus ring. */
+  --co-semantic-color-border-focus: var(--co-base-color-gray-1200); /** The focus ring, and rings that mark the current item, such as on CardSmall (0029). 15.91:1 on white. */
+  --co-semantic-color-border-accent: var(--co-base-color-accent-800); /** Blue border for selected items; never decoration (0003). 3.21:1 on white (decision 0025). */
+  --co-semantic-color-border-danger: var(--co-base-color-danger-800); /** Border of an invalid field and other error outlines. 3.18:1 on white (decision 0025). */
+  --co-semantic-color-border-serious: var(--co-base-color-serious-800); /** Orange border for serious-warning outlines. 3.21:1 on white (decision 0025). */
+  --co-semantic-color-border-ai: var(--co-base-color-ai-800); /** Purple border for AI-generated content and agent actions, always with the AI icon and a label (0043). 3.20:1 on white. */
+  --co-semantic-color-icon-default: var(--co-base-color-gray-1200); /** Default icon colour, matching text.default. 15.91:1 on white. */
+  --co-semantic-color-icon-disabled: var(--co-base-color-gray-alpha-700); /** Icons and other foreground marks in disabled controls, matching text.disabled. 1.53:1 on white. */
+  --co-semantic-color-icon-inverse: var(--co-base-color-gray-100); /** Icons on dark or coloured fills, matching text.inverse. */
+  --co-semantic-color-icon-success: var(--co-base-color-success-1100); /** Success icons, such as in Alert and EmptyState. 5.99:1 on white. (InlineAlert’s icon takes the text colour instead.) */
+  --co-semantic-color-icon-warning: var(--co-base-color-warning-1100); /** Warning icons, such as in Alert. 6.01:1 on white. (InlineAlert’s icon takes the text colour instead.) */
+  --co-semantic-color-icon-muted: var(--co-base-color-gray-1100); /** Secondary icons, such as list item and empty-state icons, matching text.muted. 6.01:1 on white. */
+  --co-semantic-color-icon-accent: var(--co-base-color-accent-1100); /** Blue icons in links and selected items, in every state, matching color.text.accent. 6.00:1 on white. */
+  --co-semantic-color-icon-danger: var(--co-base-color-danger-1100); /** Error icons, such as in Alert and EmptyState. 6.03:1 on white. */
   --co-semantic-color-icon-ai: var(--co-base-color-ai-1100); /** The AI icon on AI-generated content and agent actions (0043, 0046), next to its label. 5.99:1 on white, 5.68:1 on the page. */
-  --co-semantic-color-financial-credit: var(--co-base-color-green-700); /** Deprecated: Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-financial-credit-hover: var(--co-base-color-green-800); /** Deprecated: Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-financial-debit: var(--co-base-color-red-900); /** Deprecated: Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-financial-debit-hover: var(--co-base-color-red-1000); /** Deprecated: Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-financial-pending: var(--co-base-color-orange-600); /** Deprecated: Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-financial-neutral: var(--co-base-color-neutral-600); /** Deprecated: Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-category-blue: var(--co-base-color-blue-700); /** Blue category color for general/miscellaneous */
-  --co-semantic-color-category-blue-strong: var(--co-base-color-blue-900); /** Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029). */
-  --co-semantic-color-category-blue-subtle: var(--co-base-color-blue-100); /** Deprecated: Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-category-purple: var(--co-base-color-purple-700); /** Purple category color for entertainment */
-  --co-semantic-color-category-purple-strong: var(--co-base-color-purple-900); /** Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029). */
-  --co-semantic-color-category-purple-subtle: var(--co-base-color-purple-100); /** Deprecated: Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-category-pink: var(--co-base-color-pink-700); /** Pink category color for health/wellness */
-  --co-semantic-color-category-pink-strong: var(--co-base-color-pink-900); /** Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029). */
-  --co-semantic-color-category-pink-subtle: var(--co-base-color-pink-100); /** Deprecated: Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-category-yellow: var(--co-base-color-yellow-700); /** Yellow category color for utilities */
-  --co-semantic-color-category-yellow-strong: var(--co-base-color-yellow-900); /** Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029). */
-  --co-semantic-color-category-yellow-subtle: var(--co-base-color-yellow-100); /** Deprecated: Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-category-green: var(--co-base-color-green-700); /** Green category color for income */
-  --co-semantic-color-category-green-strong: var(--co-base-color-green-900); /** Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029). */
-  --co-semantic-color-category-green-subtle: var(--co-base-color-green-100); /** Deprecated: Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-category-red: var(--co-base-color-red-700); /** Red category color for expenses */
-  --co-semantic-color-category-red-strong: var(--co-base-color-red-900); /** Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029). */
-  --co-semantic-color-category-red-subtle: var(--co-base-color-red-100); /** Deprecated: Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-category-orange: var(--co-base-color-orange-700); /** Orange category color for food & dining */
-  --co-semantic-color-category-orange-strong: var(--co-base-color-orange-900); /** Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029). */
-  --co-semantic-color-category-orange-subtle: var(--co-base-color-orange-100); /** Deprecated: Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-category-gray: var(--co-base-color-neutral-700); /** Gray category color for uncategorized */
-  --co-semantic-color-category-gray-strong: var(--co-base-color-neutral-900); /** Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029). */
-  --co-semantic-color-category-gray-subtle: var(--co-base-color-neutral-200); /** Deprecated: Renamed to semantic.color.category.gray-muted by the semantic grammar (decision 0031). Removed in 3.0. */
-  --co-semantic-color-category-blue-text: var(--co-base-color-blue-900); /** Text and icons of an outlined or minimal blue CategoryLabel, on white or blue-muted. */
-  --co-semantic-color-category-purple-text: var(--co-base-color-purple-900); /** Text and icons of an outlined or minimal purple CategoryLabel, on white or purple-muted. */
-  --co-semantic-color-category-pink-text: var(--co-base-color-pink-1000); /** Text and icons of an outlined or minimal pink CategoryLabel, on white or pink-muted. */
-  --co-semantic-color-category-yellow-text: var(--co-base-color-yellow-1000); /** Text and icons of an outlined or minimal yellow CategoryLabel, on white or yellow-muted. */
-  --co-semantic-color-category-green-text: var(--co-base-color-green-900); /** Text and icons of an outlined or minimal green CategoryLabel, on white or green-muted. */
-  --co-semantic-color-category-red-text: var(--co-base-color-red-900); /** Text and icons of an outlined or minimal red CategoryLabel, on white or red-muted. */
-  --co-semantic-color-category-orange-text: var(--co-base-color-orange-900); /** Text and icons of an outlined or minimal orange CategoryLabel, on white or orange-muted. */
-  --co-semantic-color-category-gray-text: var(--co-base-color-neutral-900); /** Text and icons of an outlined or minimal gray CategoryLabel, on white or gray-muted. */
-  --co-semantic-color-category-blue-muted: var(--co-base-color-blue-100); /** Light blue fill of a blue CategoryLabel, behind the blue-text colour. */
-  --co-semantic-color-category-purple-muted: var(--co-base-color-purple-100); /** Light purple fill of a purple CategoryLabel, behind the purple-text colour. */
-  --co-semantic-color-category-pink-muted: var(--co-base-color-pink-100); /** Light pink fill of a pink CategoryLabel, behind the pink-text colour. */
-  --co-semantic-color-category-yellow-muted: var(--co-base-color-yellow-100); /** Light yellow fill of a yellow CategoryLabel, behind the yellow-text colour. */
-  --co-semantic-color-category-green-muted: var(--co-base-color-green-100); /** Light green fill of a green CategoryLabel, behind the green-text colour. */
-  --co-semantic-color-category-red-muted: var(--co-base-color-red-100); /** Light red fill of a red CategoryLabel, behind the red-text colour. */
-  --co-semantic-color-category-orange-muted: var(--co-base-color-orange-100); /** Light orange fill of a orange CategoryLabel, behind the orange-text colour. */
-  --co-semantic-color-category-gray-muted: var(--co-base-color-neutral-200); /** Light gray fill of a gray CategoryLabel, behind the gray-text colour. */
-  --co-semantic-color-status-pending: var(--co-base-color-yellow-1000); /** Deprecated: Moved to the component tier as component.status.pending.text (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-pending-bg: var(--co-base-color-yellow-100); /** Deprecated: Moved to the component tier as component.status.pending.background (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-completed: var(--co-base-color-green-900); /** Deprecated: Moved to the component tier as component.status.completed.text (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-completed-bg: var(--co-base-color-green-100); /** Deprecated: Moved to the component tier as component.status.completed.background (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-failed: var(--co-base-color-red-900); /** Deprecated: Moved to the component tier as component.status.failed.text (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-failed-bg: var(--co-base-color-red-100); /** Deprecated: Moved to the component tier as component.status.failed.background (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-cancelled: var(--co-base-color-neutral-700); /** Deprecated: Moved to the component tier as component.status.cancelled.text (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-cancelled-bg: var(--co-base-color-neutral-200); /** Deprecated: Moved to the component tier as component.status.cancelled.background (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-processing: var(--co-base-color-blue-900); /** Deprecated: Moved to the component tier as component.status.processing.text (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-processing-bg: var(--co-base-color-blue-100); /** Deprecated: Moved to the component tier as component.status.processing.background (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-scheduled: var(--co-base-color-purple-900); /** Deprecated: Moved to the component tier as component.status.scheduled.text (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-status-scheduled-bg: var(--co-base-color-purple-100); /** Deprecated: Moved to the component tier as component.status.scheduled.background (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-color-fill-emphasis: var(--co-base-color-neutral-900); /** Near-black fill for emphasis controls, such as the primary Button and IconButton. */
-  --co-semantic-color-fill-emphasis-hover: var(--co-base-color-neutral-800); /** Fill of a hovered emphasis control, such as the primary Button. */
-  --co-semantic-color-fill-emphasis-pressed: var(--co-base-color-neutral-1000); /** Fill of a pressed emphasis control, such as the primary Button. */
-  --co-semantic-color-fill-muted: var(--co-base-color-neutral-200); /** Light grey fill for quiet grouped content, such as the default Chip. */
-  --co-semantic-color-fill-inverse: var(--co-base-color-neutral-800); /** Dark fill for inverse elements: a checked Checkbox, Modal and Sheet drag handles. */
-  --co-semantic-color-fill-accent: var(--co-base-color-blue-900); /** Blue fill for the accent Button and other deliberate highlights; see 0003. */
-  --co-semantic-color-fill-accent-muted: var(--co-base-color-blue-100); /** Light blue fill for selected items: a selected chip, tab or row; see 0016. */
-  --co-semantic-color-fill-accent-muted-hover: var(--co-base-color-blue-200); /** Fill of a hovered selected item, such as a selected filter chip. */
-  --co-semantic-color-fill-accent-muted-pressed: var(--co-base-color-blue-300); /** Fill of a pressed selected item, such as a selected filter chip. */
-  --co-semantic-color-fill-accent-hover: var(--co-base-color-blue-1000); /** Blue fill of a hovered accent control, such as the accent Button. */
-  --co-semantic-color-fill-accent-pressed: var(--co-base-color-blue-1100); /** Blue fill of a pressed accent control, such as the accent Button. */
-  --co-semantic-color-fill-danger: var(--co-base-color-red-900); /** Strong red fill for destructive actions, such as the danger Button. */
-  --co-semantic-color-fill-danger-hover: var(--co-base-color-red-1000); /** Fill of a hovered destructive control, such as the danger Button. */
-  --co-semantic-color-fill-danger-pressed: var(--co-base-color-red-1100); /** Fill of a pressed destructive control, such as the danger Button. */
-  --co-semantic-color-fill-danger-muted: var(--co-base-color-red-100); /** Light red tint behind error messages, such as an error Alert. */
-  --co-semantic-color-fill-success: var(--co-base-color-green-900); /** Strong green fill for success states, such as a success indicator. */
-  --co-semantic-color-fill-success-muted: var(--co-base-color-green-100); /** Light green tint behind success messages, such as a success Alert. */
-  --co-semantic-color-fill-warning: var(--co-base-color-orange-900); /** Strong orange fill for warning states, such as a warning indicator. */
-  --co-semantic-color-fill-warning-muted: var(--co-base-color-orange-100); /** Light orange tint behind warning messages, such as a warning Alert. */
-  --co-semantic-color-fill-disabled: var(--co-base-color-neutral-300); /** Fill of a disabled control, such as a disabled Button or Switch. */
-  --co-semantic-color-fill-default: var(--co-base-color-neutral-300); /** Fill of a neutral control at rest, such as the secondary Button. */
-  --co-semantic-color-fill-default-hover: var(--co-base-color-neutral-400); /** Fill of a hovered neutral control, such as the secondary Button. */
-  --co-semantic-color-fill-default-pressed: var(--co-base-color-neutral-500); /** Fill of a pressed neutral control, such as the secondary Button. */
+  --co-semantic-color-icon-serious: var(--co-base-color-serious-1100); /** Serious-warning icons, matching color.text.serious. 6.04:1 on white. */
+  --co-semantic-color-category-gray: var(--co-base-color-gray-800); /** Gray category (decision 0043: neutral, for uncategorised or "other"): the outline of an outlined CategoryLabel. 3.19:1 on white. */
+  --co-semantic-color-category-gray-strong: var(--co-base-color-gray-1100); /** Strong step of the gray category: the fill of a filled CategoryLabel, with white text at 6.01:1. */
+  --co-semantic-color-category-gray-text: var(--co-base-color-gray-1100); /** Text and icons of an outlined or minimal gray CategoryLabel. 6.01:1 on white, 5.37:1 on gray-muted. */
+  --co-semantic-color-category-gray-muted: var(--co-base-color-gray-300); /** Light gray fill of a minimal CategoryLabel, behind the gray-text colour. */
+  --co-semantic-color-category-olive: var(--co-base-color-olive-800); /** Olive category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.18:1 on white. */
+  --co-semantic-color-category-olive-strong: var(--co-base-color-olive-1100); /** Strong step of the olive category: the fill of a filled CategoryLabel, with white text at 6.02:1. */
+  --co-semantic-color-category-olive-text: var(--co-base-color-olive-1100); /** Text and icons of an outlined or minimal olive CategoryLabel. 6.02:1 on white, 5.39:1 on olive-muted. */
+  --co-semantic-color-category-olive-muted: var(--co-base-color-olive-300); /** Light olive fill of a minimal CategoryLabel, behind the olive-text colour. */
+  --co-semantic-color-category-periwinkle: var(--co-base-color-periwinkle-800); /** Periwinkle category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
+  --co-semantic-color-category-periwinkle-strong: var(--co-base-color-periwinkle-1100); /** Strong step of the periwinkle category: the fill of a filled CategoryLabel, with white text at 6.00:1. */
+  --co-semantic-color-category-periwinkle-text: var(--co-base-color-periwinkle-1100); /** Text and icons of an outlined or minimal periwinkle CategoryLabel. 6.00:1 on white, 5.37:1 on periwinkle-muted. */
+  --co-semantic-color-category-periwinkle-muted: var(--co-base-color-periwinkle-300); /** Light periwinkle fill of a minimal CategoryLabel, behind the periwinkle-text colour. */
+  --co-semantic-color-category-rose: var(--co-base-color-rose-800); /** Rose category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
+  --co-semantic-color-category-rose-strong: var(--co-base-color-rose-1100); /** Strong step of the rose category: the fill of a filled CategoryLabel, with white text at 5.99:1. */
+  --co-semantic-color-category-rose-text: var(--co-base-color-rose-1100); /** Text and icons of an outlined or minimal rose CategoryLabel. 5.99:1 on white, 5.33:1 on rose-muted. */
+  --co-semantic-color-category-rose-muted: var(--co-base-color-rose-300); /** Light rose fill of a minimal CategoryLabel, behind the rose-text colour. */
+  --co-semantic-color-category-magenta: var(--co-base-color-magenta-800); /** Magenta category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.20:1 on white. */
+  --co-semantic-color-category-magenta-strong: var(--co-base-color-magenta-1100); /** Strong step of the magenta category: the fill of a filled CategoryLabel, with white text at 6.02:1. */
+  --co-semantic-color-category-magenta-text: var(--co-base-color-magenta-1100); /** Text and icons of an outlined or minimal magenta CategoryLabel. 6.02:1 on white, 5.38:1 on magenta-muted. */
+  --co-semantic-color-category-magenta-muted: var(--co-base-color-magenta-300); /** Light magenta fill of a minimal CategoryLabel, behind the magenta-text colour. */
+  --co-semantic-color-fill-emphasis: var(--co-base-color-gray-1200); /** Strong near-black fill for the primary Button and IconButton and the emphasis Chip, with text.inverse on it (15.91:1). Hover and pressed mix in text.inverse at opacity.state (decision 0048). */
+  --co-semantic-color-fill-emphasis-hover: var(--co-base-color-neutral-800); /** Deprecated: Strong-fill states mix text.inverse into fill.emphasis at opacity.state.hover and opacity.state.pressed (decision 0048). Removed in 3.0. */
+  --co-semantic-color-fill-emphasis-pressed: var(--co-base-color-neutral-1000); /** Deprecated: Strong-fill states mix text.inverse into fill.emphasis at opacity.state.hover and opacity.state.pressed (decision 0048). Removed in 3.0. */
+  --co-semantic-color-fill-muted: var(--co-base-color-gray-300); /** Light grey fill for quiet grouped content, such as the default Chip. The resting fill step, so it shows on the page. */
+  --co-semantic-color-fill-inverse: var(--co-base-color-gray-1200); /** Dark fill for inverse elements: a checked Checkbox, Modal and Sheet drag handles. */
+  --co-semantic-color-fill-accent: var(--co-base-color-accent-1100); /** Blue fill for the accent Button and other deliberate highlights (0003), with text.inverse on it at 6.00:1. */
+  --co-semantic-color-fill-accent-muted: var(--co-base-color-accent-300); /** Light blue fill for selected items: a selected chip, tab or row (0016). Accent text on it is 5.37:1. */
+  --co-semantic-color-fill-accent-muted-hover: var(--co-base-color-accent-400); /** Fill of a hovered selected item, such as a selected filter chip. */
+  --co-semantic-color-fill-accent-muted-pressed: var(--co-base-color-accent-500); /** Fill of a pressed selected item, such as a selected filter chip. */
+  --co-semantic-color-fill-danger: var(--co-base-color-danger-1100); /** Strong red fill for destructive actions, such as the danger Button, with text.inverse on it at 6.03:1. */
+  --co-semantic-color-fill-danger-muted: var(--co-base-color-danger-300); /** Light red tint behind error messages, such as an error Alert. Danger text on it is 5.39:1. */
+  --co-semantic-color-fill-success: var(--co-base-color-success-1100); /** Strong green fill for success states, such as a success indicator, with text.inverse on it at 5.99:1. */
+  --co-semantic-color-fill-success-muted: var(--co-base-color-success-300); /** Light green tint behind success messages, such as a success Alert. Success text on it is 5.34:1. */
+  --co-semantic-color-fill-warning: var(--co-base-color-warning-1100); /** Strong yellow fill for warning states, such as a warning indicator, with text.inverse on it at 6.01:1. */
+  --co-semantic-color-fill-warning-muted: var(--co-base-color-warning-300); /** Light yellow tint behind warning messages, such as a warning Alert. Warning text on it is 5.37:1. */
+  --co-semantic-color-fill-disabled: var(--co-base-color-gray-300); /** Fill of a disabled control, such as a disabled Button or Switch. */
+  --co-semantic-color-fill-default: var(--co-base-color-gray-300); /** Fill of a neutral control at rest, such as the secondary Button (decision 0040). */
+  --co-semantic-color-fill-default-hover: var(--co-base-color-gray-400); /** Fill of a hovered neutral control, such as the secondary Button. */
+  --co-semantic-color-fill-default-pressed: var(--co-base-color-gray-500); /** Fill of a pressed neutral control, such as the secondary Button. */
   --co-semantic-color-fill-none: var(--co-base-color-transparent); /** No fill, for controls without a background at rest: the naked Button and IconButton. */
+  --co-semantic-color-fill-serious: var(--co-base-color-serious-1100); /** Strong orange fill for serious-warning states, with text.inverse on it at 6.04:1. */
+  --co-semantic-color-fill-serious-muted: var(--co-base-color-serious-300); /** Light orange tint behind serious-warning messages. */
+  --co-semantic-color-fill-ai-muted: var(--co-base-color-ai-300); /** Light purple tint behind AI-generated content and agent proposals, always with the AI icon and a label (0043). */
+  --co-semantic-color-data-positive: var(--co-base-color-success-900); /** Good values and money in: gains, rises, credits. Always with a sign or arrow. 3.75:1 on white, the same step as negative so neither looks heavier. */
+  --co-semantic-color-data-negative: var(--co-base-color-danger-900); /** Bad values and money out: losses, falls, debits. Always with a sign or arrow. 3.74:1 on white, 0.118 apart from positive under every kind of colour vision. */
+  --co-semantic-color-data-categorical-1: var(--co-base-color-olive-1100); /** Category series 1 (olive). 6.02:1 on white. */
+  --co-semantic-color-data-categorical-2: var(--co-base-color-periwinkle-800); /** Category series 2 (periwinkle). 3.20:1 on white. */
+  --co-semantic-color-data-categorical-3: var(--co-base-color-rose-800); /** Category series 3 (rose). 3.20:1 on white. */
+  --co-semantic-color-data-categorical-4: var(--co-base-color-magenta-1100); /** Category series 4 (magenta). 6.02:1 on white. */
+  --co-semantic-color-data-categorical-other: var(--co-base-color-gray-800); /** The other or remaining series, always last and labelled. 3.19:1 on white. */
+  --co-semantic-color-data-diverging-balance-1: var(--co-base-color-olive-1100); /** Diverging step 1 of 5. The strongest olive end. 6.02:1 on white. */
+  --co-semantic-color-data-diverging-balance-2: var(--co-base-color-olive-800); /** Diverging step 2 of 5. The lighter olive side. 3.18:1 on white. */
+  --co-semantic-color-data-diverging-balance-3: var(--co-base-color-gray-300); /** Diverging step 3 of 5. The neutral centre: no difference. */
+  --co-semantic-color-data-diverging-balance-4: var(--co-base-color-magenta-800); /** Diverging step 4 of 5. The lighter magenta side. 3.20:1 on white. */
+  --co-semantic-color-data-diverging-balance-5: var(--co-base-color-magenta-1100); /** Diverging step 5 of 5. The strongest magenta end. 6.02:1 on white. */
+  --co-semantic-color-data-sequential-periwinkle-1: var(--co-base-color-periwinkle-300); /** Sequential step 1 of 5. 1.12:1 on white. */
+  --co-semantic-color-data-sequential-periwinkle-2: var(--co-base-color-periwinkle-600); /** Sequential step 2 of 5. 1.37:1 on white. */
+  --co-semantic-color-data-sequential-periwinkle-3: var(--co-base-color-periwinkle-800); /** Sequential step 3 of 5. 3.20:1 on white. */
+  --co-semantic-color-data-sequential-periwinkle-4: var(--co-base-color-periwinkle-1000); /** Sequential step 4 of 5. 4.37:1 on white. */
+  --co-semantic-color-data-sequential-periwinkle-5: var(--co-base-color-periwinkle-1200); /** Sequential step 5 of 5. 15.91:1 on white. */
   --co-semantic-motion-duration-normal: var(--co-base-duration-normal); /** Deprecated: Renamed to semantic.motion.duration.moderate by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0. */
   --co-semantic-motion-duration-fast: var(--co-base-duration-fast); /** Quick responses to input: hover, press, focus and small indicators. */
   --co-semantic-motion-duration-slow: var(--co-base-duration-moderate); /** The longest duration (P6): larger movements, such as a Sheet sliding in. */
@@ -973,14 +897,14 @@
   --co-semantic-space-inset-lg: var(--co-base-dimension-4); /** Large padding inside a component: button and input sides, card insides. */
   --co-semantic-space-inset-xl: var(--co-base-dimension-5); /** Generous padding inside a component, such as a prominent call to action. */
   --co-semantic-space-inset-2xl: var(--co-base-dimension-6); /** Largest padding inside a component: large cards, spacious form sections. */
-  --co-semantic-surface-base: var(--co-base-color-neutral-100); /** The page: the off-white background everything else sits on (decision 0006). */
-  --co-semantic-surface-raised: var(--co-base-color-neutral-000); /** Content raised off the page: cards, inputs, sheets, dialogs, code blocks. */
+  --co-semantic-surface-base: var(--co-base-color-gray-100); /** The page: the off-white background everything else sits on (decision 0006). */
+  --co-semantic-surface-raised: var(--co-base-color-white); /** Content raised off the page: cards, inputs, sheets, dialogs, code blocks. */
   --co-component-button-primary-background-color: var(--co-semantic-color-fill-emphasis); /** Primary Button fill at rest. */
   --co-component-button-primary-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the primary Button. */
   --co-component-button-primary-border-radius: var(--co-semantic-radius-sm); /** Corner radius of every Button (visual language: Button uses sm). */
   --co-component-button-primary-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
-  --co-component-button-hover-background-color: var(--co-semantic-color-fill-emphasis-hover); /** Primary Button fill on hover. */
-  --co-component-button-active-background-color: var(--co-semantic-color-fill-emphasis-pressed); /** Primary Button fill while pressed. */
+  --co-component-button-hover-background-color: color-mix(in srgb, var(--co-semantic-color-fill-emphasis), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-hover) * 100%)); /** Primary Button fill on hover. */
+  --co-component-button-active-background-color: color-mix(in srgb, var(--co-semantic-color-fill-emphasis), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-pressed) * 100%)); /** Primary Button fill while pressed. */
   --co-component-button-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every Button. */
   --co-component-button-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled primary Button fill. */
   --co-component-button-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled primary Button text and icon colour. */
@@ -992,24 +916,20 @@
   --co-component-button-variants-secondary-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled secondary Button text and icon colour. */
   --co-component-button-variants-naked-background-color: var(--co-semantic-color-fill-none); /** Naked Button has no fill at rest. */
   --co-component-button-variants-naked-text-color: var(--co-semantic-color-text-default); /** Text and icon colour on the naked Button. */
-  --co-component-button-variants-naked-hover-background-color: var(--co-semantic-color-fill-muted); /** Naked Button fill on hover. */
-  --co-component-button-variants-naked-active-background-color: var(--co-semantic-color-fill-default); /** Naked Button fill while pressed. */
+  --co-component-button-variants-naked-hover-background-color: var(--co-semantic-color-fill-default); /** Naked Button fill on hover. */
+  --co-component-button-variants-naked-active-background-color: var(--co-semantic-color-fill-default-hover); /** Naked Button fill while pressed. */
   --co-component-button-variants-naked-disabled-background-color: var(--co-semantic-color-fill-none); /** Disabled naked Button has no fill. */
   --co-component-button-variants-naked-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled naked Button text and icon colour. */
   --co-component-button-variants-accent-background-color: var(--co-semantic-color-fill-accent); /** Fill of the accent Button: the blue call to action above primary, at most one per view (decision 0016). */
   --co-component-button-variants-accent-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the accent Button. */
-  --co-component-button-variants-accent-hover-background-color: var(--co-semantic-color-fill-accent-hover); /** Accent Button fill on hover. */
-  --co-component-button-variants-accent-active-background-color: var(--co-semantic-color-fill-accent-pressed); /** Accent Button fill while pressed. */
   --co-component-button-variants-accent-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled accent Button fill. */
   --co-component-button-variants-accent-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled accent Button text and icon colour. */
   --co-component-button-variants-danger-background-color: var(--co-semantic-color-fill-danger); /** Danger Button fill at rest, for destructive actions. */
   --co-component-button-variants-danger-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the danger Button. */
-  --co-component-button-variants-danger-hover-background-color: var(--co-semantic-color-fill-danger-hover); /** Danger Button fill on hover. */
-  --co-component-button-variants-danger-active-background-color: var(--co-semantic-color-fill-danger-pressed); /** Danger Button fill while pressed. */
   --co-component-button-variants-danger-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled danger Button fill. */
   --co-component-button-variants-danger-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled danger Button text and icon colour. */
   --co-component-button-sizes-small-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
-  --co-component-button-sizes-small-font: var(--co-semantic-font-weight-medium) var(--co-semantic-font-size-xs)/var(--co-base-line-height-1) var(--co-semantic-font-family-body); /** Small Button label typography. */
+  --co-component-button-sizes-small-font-weight: var(--co-semantic-font-weight-medium); /** Weight of small Button text, set after the font: medium, as the other sizes. */
   --co-component-button-sizes-medium-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .lg. Removed in 3.0. */
   --co-component-button-sizes-medium-font: var(--co-semantic-font-weight-medium) var(--co-semantic-font-size-sm)/var(--co-semantic-line-height-normal) var(--co-semantic-font-family-body); /** Medium Button label typography. */
   --co-component-button-sizes-large-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
@@ -1019,15 +939,15 @@
   --co-component-chip-default-text-color: var(--co-semantic-color-text-default); /** Default chip text and icon colour. */
   --co-component-chip-default-border-radius: var(--co-semantic-radius-lg); /** Corner radius of every chip: rounder than Button, to signal a different job (decision 0016). */
   --co-component-chip-default-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). No chip reads it; chips take padding per size. Removed in 3.0. */
-  --co-component-chip-hover-background-color: var(--co-semantic-color-fill-default); /** Default chip fill on hover, when it's clickable. */
-  --co-component-chip-active-background-color: var(--co-semantic-color-fill-default-hover); /** Default chip fill while pressed, when it's clickable. */
+  --co-component-chip-hover-background-color: var(--co-semantic-color-fill-default-hover); /** Default chip fill on hover, when it's clickable. */
+  --co-component-chip-active-background-color: var(--co-semantic-color-fill-default-pressed); /** Default chip fill while pressed, when it's clickable. */
   --co-component-chip-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every chip and its close button. */
   --co-component-chip-disabled-background-color: var(--co-semantic-color-fill-muted); /** Disabled default chip fill. */
   --co-component-chip-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled default chip text and icon colour. */
   --co-component-chip-variants-emphasis-background-color: var(--co-semantic-color-fill-emphasis); /** Emphasis chip fill at rest. */
   --co-component-chip-variants-emphasis-text-color: var(--co-semantic-color-text-inverse); /** Emphasis chip text and icon colour. */
-  --co-component-chip-variants-emphasis-hover-background-color: var(--co-semantic-color-fill-emphasis-hover); /** Emphasis chip fill on hover, when it's clickable. */
-  --co-component-chip-variants-emphasis-active-background-color: var(--co-semantic-color-fill-emphasis-pressed); /** Emphasis chip fill while pressed, when it's clickable. */
+  --co-component-chip-variants-emphasis-hover-background-color: color-mix(in srgb, var(--co-semantic-color-fill-emphasis), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-hover) * 100%)); /** Emphasis chip fill on hover, when it's clickable. */
+  --co-component-chip-variants-emphasis-active-background-color: color-mix(in srgb, var(--co-semantic-color-fill-emphasis), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-pressed) * 100%)); /** Emphasis chip fill while pressed, when it's clickable. */
   --co-component-chip-variants-emphasis-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled emphasis chip fill. */
   --co-component-chip-variants-emphasis-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled emphasis chip text and icon colour. */
   --co-component-chip-variants-subtle-background-color: var(--co-semantic-surface-raised); /** Subtle chip fill at rest. */
@@ -1038,8 +958,6 @@
   --co-component-chip-variants-subtle-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled subtle chip text and icon colour. */
   --co-component-chip-variants-interactive-background-color: var(--co-semantic-color-fill-accent); /** Interactive chip fill at rest. */
   --co-component-chip-variants-interactive-text-color: var(--co-semantic-color-text-inverse); /** Interactive chip text and icon colour. */
-  --co-component-chip-variants-interactive-hover-background-color: var(--co-semantic-color-fill-accent-hover); /** Interactive chip fill on hover, when it's clickable. */
-  --co-component-chip-variants-interactive-active-background-color: var(--co-semantic-color-fill-accent-pressed); /** Interactive chip fill while pressed, when it's clickable. */
   --co-component-chip-variants-interactive-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled interactive chip fill. */
   --co-component-chip-variants-interactive-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled interactive chip text and icon colour. */
   --co-component-chip-sizes-small-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
@@ -1047,8 +965,8 @@
   --co-component-chip-sizes-large-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
   --co-component-icon-button-primary-background-color: var(--co-semantic-color-fill-emphasis); /** Deprecated: IconButton reads component.button.primary.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
   --co-component-icon-button-primary-border-radius: var(--co-semantic-radius-sm); /** Corner radius of every IconButton, matching Button. */
-  --co-component-icon-button-hover-background-color: var(--co-semantic-color-fill-emphasis-hover); /** Deprecated: IconButton reads component.button.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
-  --co-component-icon-button-active-background-color: var(--co-semantic-color-fill-emphasis-pressed); /** Deprecated: IconButton reads component.button.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
+  --co-component-icon-button-hover-background-color: color-mix(in srgb, var(--co-semantic-color-fill-emphasis), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-hover) * 100%)); /** Deprecated: IconButton reads component.button.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
+  --co-component-icon-button-active-background-color: color-mix(in srgb, var(--co-semantic-color-fill-emphasis), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-pressed) * 100%)); /** Deprecated: IconButton reads component.button.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
   --co-component-icon-button-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every IconButton. */
   --co-component-icon-button-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Deprecated: IconButton reads component.button.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
   --co-component-icon-button-variants-secondary-background-color: var(--co-semantic-color-fill-muted); /** Deprecated: IconButton reads component.button.variants.secondary.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
@@ -1062,19 +980,18 @@
   --co-component-icon-button-sizes-small-padding: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
   --co-component-icon-button-sizes-medium-padding: var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.sm. Removed in 3.0. */
   --co-component-icon-button-sizes-large-padding: var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.md. Removed in 3.0. */
-  --co-component-separator-border: var(--co-semantic-border-emphasis); /** Divider line, the same as variants.default.border. */
+  --co-component-separator-border: var(--co-semantic-border-default); /** Divider line, the same as variants.default.border. */
   --co-component-separator-margin: var(--co-semantic-space-800) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0. */
-  --co-component-separator-variants-default-border: var(--co-semantic-border-emphasis); /** Default Divider line. */
+  --co-component-separator-variants-default-border: var(--co-semantic-border-default); /** Default Divider line. */
   --co-component-separator-variants-default-margin: var(--co-semantic-space-800) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0. */
   --co-component-separator-variants-strong-border: var(--co-semantic-border-input-hover); /** Strong Divider line, for a firmer break. */
   --co-component-separator-variants-strong-margin: var(--co-semantic-space-800) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0. */
-  --co-component-separator-variants-minimal-border: var(--co-semantic-border-emphasis); /** Minimal Divider line. */
+  --co-component-separator-variants-minimal-border: var(--co-semantic-border-default); /** Minimal Divider line. */
   --co-component-separator-variants-minimal-margin: var(--co-semantic-space-600) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.600 (vertical margin). Removed in 3.0. */
   --co-component-separator-sizes-small-margin: var(--co-semantic-space-400) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.400 (vertical margin). Removed in 3.0. */
   --co-component-separator-sizes-medium-margin: var(--co-semantic-space-600) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.600 (vertical margin). Removed in 3.0. */
   --co-component-separator-sizes-large-margin: var(--co-semantic-space-800) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0. */
   --co-component-separator-sizes-xlarge-margin: var(--co-semantic-space-1200) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.1200 (vertical margin). Removed in 3.0. */
-  --co-component-progress-bar-background-color: var(--co-semantic-color-background-progress-track); /** ProgressBar track, behind the filled part. */
   --co-component-progress-bar-border-radius: var(--co-semantic-radius-sm); /** Deprecated: ProgressBar never read it; its track and fill use semantic.radius.xs. Removed in 3.0. */
   --co-component-progress-bar-sizes-sm-height: var(--co-semantic-size-100); /** Thickness of the small ProgressBar, the thinnest size. */
   --co-component-progress-bar-sizes-md-height: var(--co-semantic-size-200); /** Thickness of the medium ProgressBar, the default. */
@@ -1096,7 +1013,7 @@
   --co-component-input-error-hover-border-color: var(--co-semantic-color-border-danger); /** Invalid text input border on hover. */
   --co-component-input-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled text input fill. */
   --co-component-input-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled text input value colour. */
-  --co-component-input-disabled-border-color: var(--co-semantic-color-border-emphasis); /** Disabled text input, Dropdown and Checkbox border. Stays light: WCAG 1.4.11 exempts inactive controls (decision 0025). */
+  --co-component-input-disabled-border-color: var(--co-semantic-color-border-default); /** Disabled text input, Dropdown and Checkbox border. Stays light: WCAG 1.4.11 exempts inactive controls (decision 0025). */
   --co-component-input-textarea-min-height: var(--co-semantic-size-3000); /** Minimum height of TextArea, tall enough for a few lines of entry (decision 0034). */
   --co-component-badge-dot-size: var(--co-semantic-size-200); /** Width and height of the dot Badge indicator on a button, tab or icon. */
   --co-component-badge-count-min-width: var(--co-semantic-size-400); /** Minimum width of the count Badge, so a single digit sits in a circle. */
@@ -1151,10 +1068,10 @@
   --co-component-slider-thumb-shadow-default: var(--co-semantic-elevation-raised); /** Slider thumb at rest. */
   --co-component-slider-thumb-shadow-hover: var(--co-semantic-elevation-sticky); /** Slider thumb on hover: one step deeper. */
   --co-component-slider-thumb-shadow-active: var(--co-semantic-elevation-floating); /** Slider thumb while dragging: deepest. */
+  --co-component-slider-thumb-background: var(--co-semantic-surface-raised); /** Fill of the Slider thumb: the raised surface, white. */
   --co-component-account-card-header-min-height: var(--co-semantic-size-1200); /** Minimum height of AccountCard's header row, so cards in a grid line up. */
   --co-component-account-card-min-width: var(--co-semantic-size-7500); /** Narrowest an AccountCard may get before its content wraps badly. */
   --co-component-breadcrumbs-item-max-width: var(--co-semantic-size-4500); /** Width at which a long Breadcrumbs label truncates with an ellipsis. */
-  --co-component-breadcrumbs-font: var(--co-semantic-font-weight-regular) var(--co-semantic-font-size-xs)/var(--co-base-line-height-2) var(--co-semantic-font-family-body); /** Breadcrumb-sized text; Breadcrumbs uses typography.caption for its links today. */
   --co-component-card-large-max-width: var(--co-semantic-size-19200); /** Widest a CardLarge grows, so its text keeps a readable measure. */
   --co-component-checkbox-box-size: var(--co-semantic-size-500); /** Width and height of the Checkbox and Radio box. */
   --co-component-checkbox-row-min-height: var(--co-semantic-size-800); /** Minimum height of a Checkbox or Radio row, so the whole row is easy to hit. */
@@ -1167,21 +1084,137 @@
   --co-component-list-item-expanded-indent-compact: var(--co-semantic-size-1200); /** Indent of a compact ListItem's expanded content, aligning it with the label. */
   --co-component-list-item-expanded-indent-comfortable: var(--co-semantic-size-1500); /** Left indent of a comfortable ListItem's expanded content. */
   --co-component-transaction-list-item-min-height: var(--co-semantic-size-1800); /** Minimum height of a TransactionListItem row, so rows line up in a list. */
+  --co-component-status-pending-text: var(--co-semantic-color-text-muted); /** Text and icon of a pending StatusLabel: neutral, because waiting needs no attention (decision 0045). 6.01:1 on white. */
+  --co-component-status-pending-background: var(--co-semantic-color-fill-muted); /** Fill of a pending StatusLabel (decision 0045). */
   --co-component-status-completed-text: var(--co-semantic-color-text-success); /** Text and icon of a completed StatusLabel, on its completed background. */
   --co-component-status-completed-background: var(--co-semantic-color-fill-success-muted); /** Fill of a completed StatusLabel, behind its completed text. */
   --co-component-status-failed-text: var(--co-semantic-color-text-danger); /** Text and icon of a failed StatusLabel, on its failed background. */
   --co-component-status-failed-background: var(--co-semantic-color-fill-danger-muted); /** Fill of a failed StatusLabel, behind its failed text. */
   --co-component-status-cancelled-text: var(--co-semantic-color-text-muted); /** Text and icon of a cancelled StatusLabel, on its cancelled background. */
   --co-component-status-cancelled-background: var(--co-semantic-color-fill-muted); /** Fill of a cancelled StatusLabel, behind its cancelled text. */
-  --co-component-tooltip-border: var(--co-semantic-border-width-thick) var(--co-base-border-style-dotted) var(--co-semantic-color-border-emphasis); /** Dotted underline marking text that has a tooltip. */
-  --co-semantic-color-category-blue-emphasis: var(--co-semantic-color-category-blue-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0. */
-  --co-semantic-color-category-purple-emphasis: var(--co-semantic-color-category-purple-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0. */
-  --co-semantic-color-category-pink-emphasis: var(--co-semantic-color-category-pink-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0. */
-  --co-semantic-color-category-yellow-emphasis: var(--co-semantic-color-category-yellow-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0. */
-  --co-semantic-color-category-green-emphasis: var(--co-semantic-color-category-green-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0. */
-  --co-semantic-color-category-red-emphasis: var(--co-semantic-color-category-red-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0. */
-  --co-semantic-color-category-orange-emphasis: var(--co-semantic-color-category-orange-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0. */
+  --co-component-status-processing-text: var(--co-semantic-color-text-accent); /** Text and icon of a processing StatusLabel: in progress is accent (decisions 0043, 0045). 6.00:1 on white. */
+  --co-component-status-processing-background: var(--co-semantic-color-fill-accent-muted); /** Fill of a processing StatusLabel (decision 0045). */
+  --co-component-status-scheduled-text: var(--co-semantic-color-text-muted); /** Text and icon of a scheduled StatusLabel: neutral, because a future item needs no attention (decision 0045). 6.01:1 on white. */
+  --co-component-status-scheduled-background: var(--co-semantic-color-fill-muted); /** Fill of a scheduled StatusLabel (decision 0045). */
+  --co-component-transaction-credit: var(--co-semantic-color-data-positive); /** Deprecated: Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. */
+  --co-component-transaction-credit-hover: var(--co-semantic-color-data-positive); /** Deprecated: Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. */
+  --co-component-transaction-debit: var(--co-semantic-color-data-negative); /** Deprecated: Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. */
+  --co-component-transaction-debit-hover: var(--co-semantic-color-data-negative); /** Deprecated: Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. */
+  --co-component-transaction-pending: var(--co-semantic-color-text-muted); /** Deprecated: Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. */
+  --co-component-transaction-neutral: var(--co-semantic-color-text-muted); /** Deprecated: Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. */
+  --co-component-track-background: var(--co-semantic-color-fill-default); /** Unfilled track of ProgressBar and Slider: light, so the fill and thumb show the value (decision 0026). The resting fill step, 1.12:1 on white. */
+  --co-component-tooltip-border: var(--co-semantic-border-default); /** Deprecated: Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. */
+  --co-semantic-border-subtle: var(--co-semantic-border-default); /** Deprecated: Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-border-strong: var(--co-semantic-border-input-hover); /** Deprecated: Renamed to semantic.border.input-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-border-tooltip: var(--co-semantic-border-default); /** Deprecated: Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-border-emphasis: var(--co-semantic-border-default); /** Deprecated: Dividers have one border (decision 0048). Removed in 3.0. */
+  --co-semantic-color-text-emphasis: var(--co-semantic-color-text-default); /** Deprecated: Emphasis comes from weight and scale, not a darker colour (decision 0048). Removed in 3.0. */
+  --co-semantic-color-text-subdued: var(--co-semantic-color-text-muted); /** Deprecated: Renamed to semantic.color.text.muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-text-interactive: var(--co-semantic-color-text-accent); /** Deprecated: Renamed to semantic.color.text.accent by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-text-interactive-hover: var(--co-semantic-color-text-accent); /** Deprecated: Renamed to semantic.color.text.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-text-interactive-active: var(--co-semantic-color-text-accent); /** Deprecated: Renamed to semantic.color.text.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-text-error: var(--co-semantic-color-text-danger); /** Deprecated: Renamed to semantic.color.text.danger by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-text-accent-hover: var(--co-semantic-color-text-accent); /** Deprecated: Accent text keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. */
+  --co-semantic-color-text-accent-pressed: var(--co-semantic-color-text-accent); /** Deprecated: Accent text keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. */
+  --co-semantic-color-background-default: var(--co-semantic-surface-base); /** Deprecated: Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-emphasis: var(--co-semantic-color-fill-emphasis); /** Deprecated: Renamed to semantic.color.fill.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-surface: var(--co-semantic-color-fill-muted); /** Deprecated: Renamed to semantic.color.fill.muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-inverse: var(--co-semantic-color-fill-inverse); /** Deprecated: Renamed to semantic.color.fill.inverse by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-interactive: var(--co-semantic-color-fill-accent); /** Deprecated: Renamed to semantic.color.fill.accent by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-interactive-subtle: var(--co-semantic-color-fill-accent-muted); /** Deprecated: Renamed to semantic.color.fill.accent-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-interactive-subtle-hover: var(--co-semantic-color-fill-accent-muted-hover); /** Deprecated: Renamed to semantic.color.fill.accent-muted-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-interactive-subtle-active: var(--co-semantic-color-fill-accent-muted-pressed); /** Deprecated: Renamed to semantic.color.fill.accent-muted-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-error: var(--co-semantic-color-fill-danger); /** Deprecated: Renamed to semantic.color.fill.danger by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-error-subtle: var(--co-semantic-color-fill-danger-muted); /** Deprecated: Renamed to semantic.color.fill.danger-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-success: var(--co-semantic-color-fill-success); /** Deprecated: Renamed to semantic.color.fill.success by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-success-subtle: var(--co-semantic-color-fill-success-muted); /** Deprecated: Renamed to semantic.color.fill.success-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-warning: var(--co-semantic-color-fill-warning); /** Deprecated: Renamed to semantic.color.fill.warning by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-warning-subtle: var(--co-semantic-color-fill-warning-muted); /** Deprecated: Renamed to semantic.color.fill.warning-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-disabled: var(--co-semantic-color-fill-disabled); /** Deprecated: Renamed to semantic.color.fill.disabled by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-neutral: var(--co-semantic-color-fill-default); /** Deprecated: Renamed to semantic.color.fill.default by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-neutral-hover: var(--co-semantic-color-fill-default-hover); /** Deprecated: Renamed to semantic.color.fill.default-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-neutral-active: var(--co-semantic-color-fill-default-pressed); /** Deprecated: Renamed to semantic.color.fill.default-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-progress-track: var(--co-semantic-color-fill-default); /** Deprecated: Moved to the component tier as component.track.background (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-background-page: var(--co-semantic-surface-base); /** Deprecated: Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-border-subtle: var(--co-semantic-color-border-default); /** Deprecated: Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-border-control: var(--co-semantic-color-border-input); /** Deprecated: Renamed to semantic.color.border.input by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-border-interactive: var(--co-semantic-color-border-accent); /** Deprecated: Renamed to semantic.color.border.accent by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-border-error: var(--co-semantic-color-border-danger); /** Deprecated: Renamed to semantic.color.border.danger by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-border-emphasis: var(--co-semantic-color-border-default); /** Deprecated: Dividers have one border colour (decision 0048). Removed in 3.0. */
+  --co-semantic-color-icon-emphasis: var(--co-semantic-color-icon-default); /** Deprecated: Emphasis comes from weight and scale, not a darker colour (decision 0048). Removed in 3.0. */
+  --co-semantic-color-icon-subdued: var(--co-semantic-color-icon-muted); /** Deprecated: Renamed to semantic.color.icon.muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-icon-interactive: var(--co-semantic-color-icon-accent); /** Deprecated: Renamed to semantic.color.icon.accent by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-icon-interactive-hover: var(--co-semantic-color-icon-accent); /** Deprecated: Renamed to semantic.color.icon.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-icon-interactive-active: var(--co-semantic-color-icon-accent); /** Deprecated: Renamed to semantic.color.icon.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-icon-error: var(--co-semantic-color-icon-danger); /** Deprecated: Renamed to semantic.color.icon.danger by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-icon-accent-hover: var(--co-semantic-color-icon-accent); /** Deprecated: Accent icons keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. */
+  --co-semantic-color-icon-accent-pressed: var(--co-semantic-color-icon-accent); /** Deprecated: Accent icons keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. */
+  --co-semantic-color-financial-credit: var(--co-semantic-color-data-positive); /** Deprecated: Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-financial-credit-hover: var(--co-semantic-color-data-positive); /** Deprecated: Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-financial-debit: var(--co-semantic-color-data-negative); /** Deprecated: Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-financial-debit-hover: var(--co-semantic-color-data-negative); /** Deprecated: Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-financial-pending: var(--co-semantic-color-text-muted); /** Deprecated: Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-financial-neutral: var(--co-semantic-color-text-muted); /** Deprecated: Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-category-blue: var(--co-semantic-color-category-periwinkle); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. */
+  --co-semantic-color-category-blue-strong: var(--co-semantic-color-category-periwinkle-strong); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. */
+  --co-semantic-color-category-blue-emphasis: var(--co-semantic-color-category-periwinkle-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0. */
+  --co-semantic-color-category-blue-subtle: var(--co-semantic-color-category-periwinkle-muted); /** Deprecated: Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-category-purple: var(--co-semantic-color-category-magenta); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. */
+  --co-semantic-color-category-purple-strong: var(--co-semantic-color-category-magenta-strong); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. */
+  --co-semantic-color-category-purple-emphasis: var(--co-semantic-color-category-magenta-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0. */
+  --co-semantic-color-category-purple-subtle: var(--co-semantic-color-category-magenta-muted); /** Deprecated: Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-category-pink: var(--co-semantic-color-category-rose); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. */
+  --co-semantic-color-category-pink-strong: var(--co-semantic-color-category-rose-strong); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. */
+  --co-semantic-color-category-pink-emphasis: var(--co-semantic-color-category-rose-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0. */
+  --co-semantic-color-category-pink-subtle: var(--co-semantic-color-category-rose-muted); /** Deprecated: Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-category-yellow: var(--co-semantic-color-category-olive); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. */
+  --co-semantic-color-category-yellow-strong: var(--co-semantic-color-category-olive-strong); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. */
+  --co-semantic-color-category-yellow-emphasis: var(--co-semantic-color-category-olive-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0. */
+  --co-semantic-color-category-yellow-subtle: var(--co-semantic-color-category-olive-muted); /** Deprecated: Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-category-green: var(--co-semantic-color-category-olive); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. */
+  --co-semantic-color-category-green-strong: var(--co-semantic-color-category-olive-strong); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. */
+  --co-semantic-color-category-green-emphasis: var(--co-semantic-color-category-olive-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0. */
+  --co-semantic-color-category-green-subtle: var(--co-semantic-color-category-olive-muted); /** Deprecated: Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-category-red: var(--co-semantic-color-category-rose); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. */
+  --co-semantic-color-category-red-strong: var(--co-semantic-color-category-rose-strong); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. */
+  --co-semantic-color-category-red-emphasis: var(--co-semantic-color-category-rose-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0. */
+  --co-semantic-color-category-red-subtle: var(--co-semantic-color-category-rose-muted); /** Deprecated: Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-category-orange: var(--co-semantic-color-category-rose); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. */
+  --co-semantic-color-category-orange-strong: var(--co-semantic-color-category-rose-strong); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. */
+  --co-semantic-color-category-orange-emphasis: var(--co-semantic-color-category-rose-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0. */
+  --co-semantic-color-category-orange-subtle: var(--co-semantic-color-category-rose-muted); /** Deprecated: Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-color-category-gray-emphasis: var(--co-semantic-color-category-gray-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.gray-strong (decision 0029). Removed in 3.0. */
+  --co-semantic-color-category-gray-subtle: var(--co-semantic-color-category-gray-muted); /** Deprecated: Renamed to semantic.color.category.gray-muted by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-category-blue-text: var(--co-semantic-color-category-periwinkle-text); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. */
+  --co-semantic-color-category-purple-text: var(--co-semantic-color-category-magenta-text); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. */
+  --co-semantic-color-category-pink-text: var(--co-semantic-color-category-rose-text); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. */
+  --co-semantic-color-category-yellow-text: var(--co-semantic-color-category-olive-text); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. */
+  --co-semantic-color-category-green-text: var(--co-semantic-color-category-olive-text); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. */
+  --co-semantic-color-category-red-text: var(--co-semantic-color-category-rose-text); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. */
+  --co-semantic-color-category-orange-text: var(--co-semantic-color-category-rose-text); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. */
+  --co-semantic-color-category-blue-muted: var(--co-semantic-color-category-periwinkle-muted); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. */
+  --co-semantic-color-category-purple-muted: var(--co-semantic-color-category-magenta-muted); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. */
+  --co-semantic-color-category-pink-muted: var(--co-semantic-color-category-rose-muted); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. */
+  --co-semantic-color-category-yellow-muted: var(--co-semantic-color-category-olive-muted); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. */
+  --co-semantic-color-category-green-muted: var(--co-semantic-color-category-olive-muted); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. */
+  --co-semantic-color-category-red-muted: var(--co-semantic-color-category-rose-muted); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. */
+  --co-semantic-color-category-orange-muted: var(--co-semantic-color-category-rose-muted); /** Deprecated: Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. */
+  --co-semantic-color-status-pending: var(--co-semantic-color-text-muted); /** Deprecated: Moved to the component tier as component.status.pending.text (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-pending-bg: var(--co-semantic-color-fill-muted); /** Deprecated: Moved to the component tier as component.status.pending.background (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-completed: var(--co-semantic-color-text-success); /** Deprecated: Moved to the component tier as component.status.completed.text (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-completed-bg: var(--co-semantic-color-fill-success-muted); /** Deprecated: Moved to the component tier as component.status.completed.background (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-failed: var(--co-semantic-color-text-danger); /** Deprecated: Moved to the component tier as component.status.failed.text (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-failed-bg: var(--co-semantic-color-fill-danger-muted); /** Deprecated: Moved to the component tier as component.status.failed.background (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-cancelled: var(--co-semantic-color-text-muted); /** Deprecated: Moved to the component tier as component.status.cancelled.text (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-cancelled-bg: var(--co-semantic-color-fill-muted); /** Deprecated: Moved to the component tier as component.status.cancelled.background (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-processing: var(--co-semantic-color-text-accent); /** Deprecated: Moved to the component tier as component.status.processing.text (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-processing-bg: var(--co-semantic-color-fill-accent-muted); /** Deprecated: Moved to the component tier as component.status.processing.background (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-scheduled: var(--co-semantic-color-text-muted); /** Deprecated: Moved to the component tier as component.status.scheduled.text (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-status-scheduled-bg: var(--co-semantic-color-fill-muted); /** Deprecated: Moved to the component tier as component.status.scheduled.background (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-color-fill-accent-hover: color-mix(in srgb, var(--co-semantic-color-fill-accent), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-hover) * 100%)); /** Blue fill of a hovered accent control: fill.accent with text.inverse mixed in at opacity.state.hover (decision 0048). */
+  --co-semantic-color-fill-accent-pressed: color-mix(in srgb, var(--co-semantic-color-fill-accent), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-pressed) * 100%)); /** Blue fill of a pressed accent control: fill.accent with text.inverse mixed in at opacity.state.pressed (decision 0048). */
+  --co-semantic-color-fill-danger-hover: color-mix(in srgb, var(--co-semantic-color-fill-danger), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-hover) * 100%)); /** Fill of a hovered destructive control: fill.danger with text.inverse mixed in at opacity.state.hover (decision 0048). */
+  --co-semantic-color-fill-danger-pressed: color-mix(in srgb, var(--co-semantic-color-fill-danger), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-pressed) * 100%)); /** Fill of a pressed destructive control: fill.danger with text.inverse mixed in at opacity.state.pressed (decision 0048). */
   --co-semantic-typography-display: var(--co-semantic-font-weight-bold) var(--co-base-font-size-10)/var(--co-base-line-height-10) var(--co-base-font-family-heading); /** The largest heading, for hero titles. */
   --co-semantic-typography-h1: var(--co-semantic-font-weight-bold) var(--co-base-font-size-9)/var(--co-base-line-height-9) var(--co-base-font-family-heading); /** Heading 1: the page title, one per page. */
   --co-semantic-typography-h2: var(--co-semantic-font-weight-bold) var(--co-base-font-size-8)/var(--co-base-line-height-8) var(--co-base-font-family-heading); /** Heading 2: major sections of a page. */
@@ -1194,22 +1227,26 @@
   --co-semantic-typography-small: var(--co-semantic-font-weight-regular) var(--co-base-font-size-2)/var(--co-base-line-height-3) var(--co-base-font-family-body); /** Small text: secondary copy and compact controls. */
   --co-semantic-typography-overline: var(--co-semantic-font-weight-bold) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** A short uppercase label above a heading. */
   --co-semantic-typography-caption: var(--co-semantic-font-weight-regular) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** Captions: helper text, metadata and image captions. */
-  --co-semantic-typography-button1: var(--co-semantic-font-weight-medium) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Deprecated: Moved to the component tier as component.button.sizes.large.font (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-typography-button2: var(--co-semantic-font-weight-medium) var(--co-base-font-size-2)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Deprecated: Moved to the component tier as component.button.sizes.medium.font (decision 0031 §6). Removed in 3.0. */
-  --co-semantic-typography-button3: var(--co-semantic-font-weight-medium) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** Deprecated: Moved to the component tier as component.button.sizes.small.font (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-typography-button1: var(--co-semantic-font-weight-medium) var(--co-semantic-font-size-md)/var(--co-semantic-line-height-normal) var(--co-semantic-font-family-body); /** Deprecated: Moved to the component tier as component.button.sizes.large.font (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-typography-button2: var(--co-semantic-font-weight-medium) var(--co-semantic-font-size-sm)/var(--co-semantic-line-height-normal) var(--co-semantic-font-family-body); /** Deprecated: Moved to the component tier as component.button.sizes.medium.font (decision 0031 §6). Removed in 3.0. */
   --co-semantic-typography-label: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-2)/var(--co-base-line-height-3) var(--co-base-font-family-body); /** Form labels for fields such as TextField and Slider. */
-  --co-semantic-typography-breadcrumb: var(--co-semantic-font-weight-regular) var(--co-base-font-size-1)/var(--co-base-line-height-2) var(--co-base-font-family-body); /** Deprecated: Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0. */
   --co-component-button-primary-font: var(--co-semantic-typography-button1); /** Button label typography, the same as sizes.large.font. */
+  --co-component-button-variants-accent-hover-background-color: var(--co-semantic-color-fill-accent-hover); /** Accent Button fill on hover. */
+  --co-component-button-variants-accent-active-background-color: var(--co-semantic-color-fill-accent-pressed); /** Accent Button fill while pressed. */
   --co-component-button-variants-emphasis-background-color: var(--co-component-button-variants-accent-background-color); /** Deprecated: Use component.button.variants.accent.backgroundColor. Alias kept until 3.0 (decision 0016). */
   --co-component-button-variants-emphasis-text-color: var(--co-component-button-variants-accent-text-color); /** Deprecated: Use component.button.variants.accent.textColor. Alias kept until 3.0 (decision 0016). */
-  --co-component-button-variants-emphasis-hover-background-color: var(--co-component-button-variants-accent-hover-background-color); /** Deprecated: Use component.button.variants.accent.hover.backgroundColor. Alias kept until 3.0 (decision 0016). */
-  --co-component-button-variants-emphasis-active-background-color: var(--co-component-button-variants-accent-active-background-color); /** Deprecated: Use component.button.variants.accent.active.backgroundColor. Alias kept until 3.0 (decision 0016). */
   --co-component-button-variants-emphasis-disabled-background-color: var(--co-component-button-variants-accent-disabled-background-color); /** Deprecated: Use component.button.variants.accent.disabled.backgroundColor. Alias kept until 3.0 (decision 0016). */
   --co-component-button-variants-emphasis-disabled-text-color: var(--co-component-button-variants-accent-disabled-text-color); /** Deprecated: Use component.button.variants.accent.disabled.textColor. Alias kept until 3.0 (decision 0016). */
+  --co-component-button-variants-danger-hover-background-color: var(--co-semantic-color-fill-danger-hover); /** Danger Button fill on hover. */
+  --co-component-button-variants-danger-active-background-color: var(--co-semantic-color-fill-danger-pressed); /** Danger Button fill while pressed. */
+  --co-component-button-sizes-small-font: var(--co-semantic-typography-caption); /** Small Button text: the caption style, with button.sizes.small.fontWeight after it. */
   --co-component-chip-default-font: var(--co-semantic-typography-body); /** Chip label typography, the same as sizes.large.font. */
+  --co-component-chip-variants-interactive-hover-background-color: var(--co-semantic-color-fill-accent-hover); /** Interactive chip fill on hover, when it's clickable. */
+  --co-component-chip-variants-interactive-active-background-color: var(--co-semantic-color-fill-accent-pressed); /** Interactive chip fill while pressed, when it's clickable. */
   --co-component-chip-sizes-small-font: var(--co-semantic-typography-caption); /** Deprecated: Chips have one size (decision 0035). Use component.chip.sizes.medium.font. Removed in 3.0. */
   --co-component-chip-sizes-medium-font: var(--co-semantic-typography-small); /** Chip label typography. Every chip uses it: chips have one size (decision 0035). */
   --co-component-chip-sizes-large-font: var(--co-semantic-typography-body); /** Deprecated: Chips have one size (decision 0035). Use component.chip.sizes.medium.font. Removed in 3.0. */
+  --co-component-progress-bar-background-color: var(--co-semantic-color-background-progress-track); /** ProgressBar track, behind the filled part. */
   --co-component-input-default-font: var(--co-semantic-typography-body); /** Text input value typography. */
   --co-component-badge-label-typography-small: var(--co-semantic-typography-caption); /** Typography for small labels in the badge-like family (StatusBadge, CategoryBadge small; Tag). Combine with label.fontWeight. */
   --co-component-badge-label-typography-medium: var(--co-semantic-typography-small); /** Typography for medium labels in the badge-like family (StatusBadge, CategoryBadge medium). Combine with label.fontWeight. */
@@ -1219,6 +1256,15 @@
   --co-component-alert-message-typography: var(--co-semantic-typography-body); /** Alert message style (body), adjusted by message.lineHeight. */
   --co-component-tab-bar-badge-typography: var(--co-semantic-typography-caption); /** Tab count badge text. */
   --co-component-search-field-section-header-typography: var(--co-semantic-typography-caption); /** Suggestion-list section header text (shown uppercase). */
+  --co-component-breadcrumbs-font: var(--co-semantic-typography-caption); /** Deprecated: Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. */
+  --co-semantic-color-background-interactive-hover: var(--co-semantic-color-fill-accent-hover); /** Deprecated: Renamed to semantic.color.fill.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-interactive-active: var(--co-semantic-color-fill-accent-pressed); /** Deprecated: Renamed to semantic.color.fill.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-error-hover: var(--co-semantic-color-fill-danger-hover); /** Deprecated: Renamed to semantic.color.fill.danger-hover by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-color-background-error-active: var(--co-semantic-color-fill-danger-pressed); /** Deprecated: Renamed to semantic.color.fill.danger-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
+  --co-semantic-typography-button3: var(--co-semantic-typography-caption); /** Deprecated: Moved to the component tier as component.button.sizes.small.font (decision 0031 §6). Removed in 3.0. */
+  --co-semantic-typography-breadcrumb: var(--co-semantic-typography-caption); /** Deprecated: Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0. */
+  --co-component-button-variants-emphasis-hover-background-color: var(--co-component-button-variants-accent-hover-background-color); /** Deprecated: Use component.button.variants.accent.hover.backgroundColor. Alias kept until 3.0 (decision 0016). */
+  --co-component-button-variants-emphasis-active-background-color: var(--co-component-button-variants-accent-active-background-color); /** Deprecated: Use component.button.variants.accent.active.backgroundColor. Alias kept until 3.0 (decision 0016). */
 }
 
 /* Mode: density (decision 0032). Control heights and control insets for a region, set with data-co-density on any element (decisions 0032 and 0034, #191). Rows and layout spacing don't change. */