@common-origin/design-system 2.21.0 → 2.22.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;
@@ -542,14 +544,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 +605,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 +620,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 +644,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 +657,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 +742,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-neutral-000); /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.91: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-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-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-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-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-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-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 +896,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-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-neutral-000); /** 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 +915,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 +938,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 +957,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 +964,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 +979,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 +1012,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 +1067,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 +1083,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 +1226,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 +1255,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. */