@common-origin/design-system 3.0.0 → 3.2.0

package/dist/tokens.css

@@ -29,6 +29,7 @@
   --co-base-shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   --co-base-shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   --co-base-shadow-none: none;
+  --co-base-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /** A sunken well or pressed state. A shadow, so the theme scales it with the others (decision 0056). */
   --co-base-z-index-0: 0;
   --co-base-z-index-1: 10;
   --co-base-z-index-2: 20;
@@ -121,6 +122,18 @@
   --co-base-color-gray-alpha-1000: rgba(34, 34, 34, 0.606); /** Solid fill on hover. Composites to gray.1000 over white. */
   --co-base-color-gray-alpha-1100: rgba(34, 34, 34, 0.706); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to gray.1100 over white. */
   --co-base-color-gray-alpha-1200: rgba(34, 34, 34, 1); /** Primary text, and the darkest step. Composites to gray.1200 over white. */
+  --co-base-color-gray-alpha-inverse-100: rgba(252, 252, 252, 0.014); /** Page background. gray.100 at gray-alpha.100's opacity. */
+  --co-base-color-gray-alpha-inverse-200: rgba(252, 252, 252, 0.027); /** Subtle background. gray.100 at gray-alpha.200's opacity. */
+  --co-base-color-gray-alpha-inverse-300: rgba(252, 252, 252, 0.059); /** Component fill at rest. gray.100 at gray-alpha.300's opacity. */
+  --co-base-color-gray-alpha-inverse-400: rgba(252, 252, 252, 0.09); /** Component fill on hover. gray.100 at gray-alpha.400's opacity. */
+  --co-base-color-gray-alpha-inverse-500: rgba(252, 252, 252, 0.122); /** Component fill pressed or selected. gray.100 at gray-alpha.500's opacity. */
+  --co-base-color-gray-alpha-inverse-600: rgba(252, 252, 252, 0.158); /** Subtle border. gray.100 at gray-alpha.600's opacity. */
+  --co-base-color-gray-alpha-inverse-700: rgba(252, 252, 252, 0.208); /** Default border, for dividers and decorative outlines. gray.100 at gray-alpha.700's opacity. */
+  --co-base-color-gray-alpha-inverse-800: rgba(252, 252, 252, 0.502); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). gray.100 at gray-alpha.800's opacity. */
+  --co-base-color-gray-alpha-inverse-900: rgba(252, 252, 252, 0.557); /** Solid fill. gray.100 at gray-alpha.900's opacity. */
+  --co-base-color-gray-alpha-inverse-1000: rgba(252, 252, 252, 0.606); /** Solid fill on hover. gray.100 at gray-alpha.1000's opacity. */
+  --co-base-color-gray-alpha-inverse-1100: rgba(252, 252, 252, 0.706); /** Secondary text: at least 4.5:1 on 100 to 500 and white. gray.100 at gray-alpha.1100's opacity. */
+  --co-base-color-gray-alpha-inverse-1200: rgba(252, 252, 252, 1); /** Primary text, and the darkest step. gray.100 at gray-alpha.1200's opacity. */
   --co-base-color-accent-100: #fbfcfd; /** Page background. oklch(0.991 0.002 248), 1.03:1 on white. */
   --co-base-color-accent-200: #f7f9fc; /** Subtle background. oklch(0.981 0.005 258), 1.05:1 on white. */
   --co-base-color-accent-300: #edf3fa; /** Component fill at rest. oklch(0.962 0.011 252), 1.12:1 on white. */
@@ -423,12 +436,19 @@
   --co-base-easing-ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
   --co-base-easing-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
   --co-base-easing-ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
-  --co-semantic-elevation-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /** Sunken/pressed states, input fields, wells */
-  --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(34, 34, 34, 0.5); /** Backdrop behind a modal surface: Modal, Sheet, ActionSheet. */
+  --co-base-opacity-scrim: var(--co-base-opacity-50); /** How strongly the scrim dims the page: a theme parameter, 0.5 in light (decision 0056). */
+  --co-base-color-surface-page: var(--co-base-color-gray-100); /** The page. */
+  --co-base-color-surface-raised: var(--co-base-color-white); /** One level above the page: cards, inputs, code blocks. */
+  --co-base-color-surface-overlay: var(--co-base-color-white); /** Two levels above the page: menus, dialogs, sheets. */
+  --co-base-color-ink-light: var(--co-base-color-gray-100); /** The light end of the neutral ramp. */
+  --co-base-color-ink-dark: var(--co-base-color-gray-1200); /** The dark end of the neutral ramp. */
+  --co-base-color-accent-solid: var(--co-base-color-accent-1100); /** Solid fill that carries a label: where the light ink reads at the contrast secondary text has with the page (decision 0056). In light that is step 1100; the dark theme generates its own. */
+  --co-base-color-success-solid: var(--co-base-color-success-1100); /** Solid fill that carries a label: where the light ink reads at the contrast secondary text has with the page (decision 0056). In light that is step 1100; the dark theme generates its own. */
+  --co-base-color-warning-solid: var(--co-base-color-warning-1100); /** Solid fill that carries a label: where the light ink reads at the contrast secondary text has with the page (decision 0056). In light that is step 1100; the dark theme generates its own. */
+  --co-base-color-serious-solid: var(--co-base-color-serious-1100); /** Solid fill that carries a label: where the light ink reads at the contrast secondary text has with the page (decision 0056). In light that is step 1100; the dark theme generates its own. */
+  --co-base-color-danger-solid: var(--co-base-color-danger-1100); /** Solid fill that carries a label: where the light ink reads at the contrast secondary text has with the page (decision 0056). In light that is step 1100; the dark theme generates its own. */
   --co-semantic-elevation-none: var(--co-base-shadow-none); /** No elevation - flat surfaces, default state */
+  --co-semantic-elevation-inset: var(--co-base-shadow-inset); /** Sunken/pressed states, input fields, wells */
   --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 */
   --co-semantic-elevation-overlay: var(--co-base-shadow-5); /** High lift - modals, dialogs, action sheets */
@@ -460,9 +480,9 @@
   --co-semantic-letter-spacing-normal: var(--co-base-letter-spacing-2); /** 0: default tracking (h5, h6 and text). */
   --co-semantic-letter-spacing-wide: var(--co-base-letter-spacing-4); /** Wide tracking for small uppercase labels, such as SearchField section headers. */
   --co-semantic-font-weight-regular: var(--co-base-font-weight-2); /** 400. Body text, captions, most UI text. */
-  --co-semantic-font-weight-medium: var(--co-base-font-weight-3); /** 500. Subheadings (h5, h6, subtitle), buttons, emphasis within UI text. */
-  --co-semantic-font-weight-semibold: var(--co-base-font-weight-4); /** 600. Labels and short titles that need more weight than medium (label, Alert title). */
-  --co-semantic-font-weight-bold: var(--co-base-font-weight-5); /** 700. Headings (display to h4), overline, strong indicators such as the required-field asterisk. */
+  --co-semantic-font-weight-medium: var(--co-base-font-weight-3); /** 500. Subtitle, buttons, emphasis within UI text. */
+  --co-semantic-font-weight-semibold: var(--co-base-font-weight-4); /** 600. Headings (h1 to h6), labels and short titles (label, Alert title). */
+  --co-semantic-font-weight-bold: var(--co-base-font-weight-5); /** 700. The display heading, overline, strong indicators such as the required-field asterisk. */
   --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-width-thin: var(--co-base-border-width-1); /** Hairline border: dividers, control edges and rings. */
@@ -476,21 +496,27 @@
   --co-semantic-size-600: var(--co-base-dimension-6); /** Size step for the medium label height, used by chips and StatusLabel. */
   --co-semantic-size-800: var(--co-base-dimension-8); /** Size step for compact rows and large labels, such as the Checkbox row. */
   --co-semantic-size-1200: var(--co-base-dimension-12); /** Size step for headers and indents, such as the AccountCard header. */
+  --co-semantic-size-1400: var(--co-base-dimension-14); /** Size step for the collapsed SidebarNav rail: one icon row with an inset on each side. */
   --co-semantic-size-1500: var(--co-base-dimension-15); /** Size step for the comfortable ListItem expanded indent. */
   --co-semantic-size-1800: var(--co-base-dimension-18); /** Size step for tall rows, such as the TransactionListItem minimum height. */
   --co-semantic-size-2000: var(--co-base-dimension-20); /** Size step for small illustrations, such as the small EmptyState image. */
   --co-semantic-size-3000: var(--co-base-dimension-30); /** Size step for medium illustrations and multi-line inputs: EmptyState, TextArea. */
   --co-semantic-size-4500: var(--co-base-dimension-45); /** Size step for truncation widths, such as a Breadcrumbs label. */
   --co-semantic-size-5000: var(--co-base-dimension-50); /** Size step for large illustrations, such as the large EmptyState image. */
-  --co-semantic-size-7500: var(--co-base-dimension-75); /** Size step for narrow column widths: AccountCard, EmptyState actions. */
+  --co-semantic-size-5600: var(--co-base-dimension-56); /** Size step for a narrow navigation column: the narrow SidebarNav. */
+  --co-semantic-size-6400: var(--co-base-dimension-64); /** Size step for a standard navigation column: the default SidebarNav. */
+  --co-semantic-size-7500: var(--co-base-dimension-75); /** Size step for narrow column widths: AccountCard, EmptyState actions, the wide SidebarNav, the widest a Tooltip grows. */
   --co-semantic-size-9000: var(--co-base-dimension-90); /** Size step for readable text widths, such as EmptyState copy. */
   --co-semantic-size-10000: var(--co-base-dimension-100); /** Size step for compact panel widths, such as the EmptyState block. */
   --co-semantic-size-19200: var(--co-base-dimension-192); /** Size step for wide content columns, such as CardLarge. */
   --co-semantic-size-pointer-target: var(--co-base-dimension-6); /** Minimum pointer target for a control that's smaller to look at: its invisible hit area (WCAG 2.5.8, decision 0039). On touch screens, use touchTarget. */
-  --co-semantic-size-touch-target: var(--co-base-dimension-11); /** Minimum height of a tappable row or control on touch screens. */
+  --co-semantic-size-touch-target: var(--co-base-dimension-11); /** Invisible hit area of a small control on touch screens, such as the Slider thumb. Not a row or control height: those follow density down to pointerTarget (decision 0051). */
   --co-semantic-size-control-sm: var(--co-base-dimension-8); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
   --co-semantic-size-control-md: var(--co-base-dimension-10); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
   --co-semantic-size-control-lg: var(--co-base-dimension-12); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
+  --co-semantic-size-row-sm: var(--co-base-dimension-8); /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+  --co-semantic-size-row-md: var(--co-base-dimension-12); /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+  --co-semantic-size-row-lg: var(--co-base-dimension-18); /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
   --co-semantic-size-overlay-sm: var(--co-base-dimension-100); /** Width of a small Modal, and the default width or height of a Sheet. */
   --co-semantic-size-overlay-md: var(--co-base-dimension-140); /** Width of a medium overlay panel, such as a medium Modal. */
   --co-semantic-size-overlay-lg: var(--co-base-dimension-180); /** Width of a large overlay panel, such as a large Modal. */
@@ -511,7 +537,7 @@
   --co-semantic-size-avatar-xl: var(--co-base-dimension-16); /** Extra-large avatar, on profile pages. */
   --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-gray-1200); /** Primary text: body copy, labels and headings. 15.91:1 on white, 15.51:1 on the page. */
-  --co-semantic-color-text-inverse: var(--co-base-color-gray-100); /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.51:1 on fill.emphasis. */
+  --co-semantic-color-text-inverse: var(--co-base-color-gray-100); /** Text on the emphasis and inverse fills, such as the primary Button, the emphasis Tag and Tooltip. 15.51:1 on fill.emphasis. Text on a coloured fill uses text.on-fill. */
   --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. */
@@ -533,7 +559,7 @@
   --co-semantic-color-border-ai: var(--co-base-color-ai-800); /** Purple border for AI-generated content and agent actions, always with the AI icon and a label (0043). 3.20:1 on white. */
   --co-semantic-color-icon-default: var(--co-base-color-gray-1200); /** Default icon colour, matching text.default. 15.91:1 on white. */
   --co-semantic-color-icon-disabled: var(--co-base-color-gray-alpha-700); /** Icons and other foreground marks in disabled controls, matching text.disabled. 1.53:1 on white. */
-  --co-semantic-color-icon-inverse: var(--co-base-color-gray-100); /** Icons on dark or coloured fills, matching text.inverse. */
+  --co-semantic-color-icon-inverse: var(--co-base-color-gray-100); /** Icons on the emphasis and inverse fills, matching text.inverse. */
   --co-semantic-color-icon-success: var(--co-base-color-success-1100); /** Success icons, such as in Alert and EmptyState. 5.99:1 on white. (InlineAlert’s icon takes the text colour instead.) */
   --co-semantic-color-icon-warning: var(--co-base-color-warning-1100); /** Warning icons, such as in Alert. 6.01:1 on white. (InlineAlert’s icon takes the text colour instead.) */
   --co-semantic-color-icon-muted: var(--co-base-color-gray-1100); /** Secondary icons, such as list item and empty-state icons, matching text.muted. 6.01:1 on white. */
@@ -544,44 +570,42 @@
   --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-gray-muted: var(--co-base-color-gray-alpha-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-olive-muted: var(--co-base-color-olive-alpha-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-periwinkle-muted: var(--co-base-color-periwinkle-alpha-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-rose-muted: var(--co-base-color-rose-alpha-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-category-magenta-muted: var(--co-base-color-magenta-alpha-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-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-muted: var(--co-base-color-gray-alpha-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-accent-muted: var(--co-base-color-accent-alpha-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-alpha-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-alpha-500); /** Fill of a pressed selected item, such as a selected filter chip. */
+  --co-semantic-color-fill-danger-muted: var(--co-base-color-danger-alpha-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-muted: var(--co-base-color-success-alpha-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-muted: var(--co-base-color-warning-alpha-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-alpha-300); /** Fill of a disabled control, such as a disabled Button or Switch. */
+  --co-semantic-color-fill-default: var(--co-base-color-gray-alpha-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-alpha-400); /** Fill of a hovered neutral control, such as the secondary Button. */
+  --co-semantic-color-fill-default-pressed: var(--co-base-color-gray-alpha-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-fill-none-hover: var(--co-base-color-gray-alpha-400); /** Hover tint for a fill-less control over any background, such as a chip close button. */
+  --co-semantic-color-fill-none-pressed: var(--co-base-color-gray-alpha-600); /** Pressed tint for a fill-less control over any background, such as a chip close button. */
+  --co-semantic-color-fill-inverse-none-hover: var(--co-base-color-gray-alpha-inverse-700); /** Hover tint for a fill-less element on a dark background, such as a count on a dark tab. */
+  --co-semantic-color-fill-serious-muted: var(--co-base-color-serious-alpha-300); /** Light orange tint behind serious-warning messages. */
+  --co-semantic-color-fill-ai-muted: var(--co-base-color-ai-alpha-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. */
@@ -603,6 +627,7 @@
   --co-semantic-motion-duration-slow: var(--co-base-duration-moderate); /** The longest duration (P6): larger movements, such as a Sheet sliding in. */
   --co-semantic-motion-duration-instant: var(--co-base-duration-instant); /** No duration: changes that should happen at once, such as movement under reduced motion. */
   --co-semantic-motion-duration-moderate: var(--co-base-duration-normal); /** The default duration for state changes and short movements, such as a menu opening. */
+  --co-semantic-motion-delay-hint: var(--co-base-duration-slow); /** How long the pointer rests on a control before its Tooltip opens, so passing pointers don't open it. A wait before anything moves, not an animation duration. */
   --co-semantic-motion-easing-standard: var(--co-base-easing-ease-in-out); /** Easing for change on screen: something moving or resizing in place. */
   --co-semantic-motion-easing-decelerate: var(--co-base-easing-ease-out); /** Easing for things arriving or responding: entrances, hover and press. */
   --co-semantic-motion-easing-accelerate: var(--co-base-easing-ease-in); /** Easing for things leaving: exits and dismissals speed up as they go (decision 0037). */
@@ -615,14 +640,14 @@
   --co-semantic-layer-overlay: var(--co-base-z-index-7); /** Stacking layer for panels that slide over the page and their backdrop, such as Sheet. */
   --co-semantic-layer-modal: var(--co-base-z-index-8); /** Stacking layer for blocking dialogs and their backdrop: Modal, ActionSheet. */
   --co-semantic-radius-none: var(--co-base-dimension-0); /** No rounding: tables, dividers and sharp-edged containers. */
-  --co-semantic-radius-xs: var(--co-base-border-radius-1); /** Minimal rounding: small badges, checkboxes, compact tags. */
-  --co-semantic-radius-sm: var(--co-base-border-radius-2); /** Subtle rounding: buttons, inputs and other form controls. */
-  --co-semantic-radius-md: var(--co-base-border-radius-3); /** Standard rounding: cards, dropdown menus, popovers. */
-  --co-semantic-radius-lg: var(--co-base-border-radius-4); /** Generous rounding: modals, action sheets and feature cards. */
-  --co-semantic-radius-xl: var(--co-base-border-radius-5); /** Large rounding: pill buttons and prominent search bars. */
-  --co-semantic-radius-2xl: var(--co-base-border-radius-6); /** Extra-large rounding: hero elements and decorative containers. */
-  --co-semantic-radius-3xl: var(--co-base-border-radius-7); /** Maximum rounding short of a circle: decorative cards and marketing elements. */
-  --co-semantic-radius-full: var(--co-base-border-radius-circle); /** Fully round: avatars, round icon buttons, status dots and chips. */
+  --co-semantic-radius-xs: var(--co-base-border-radius-1); /** Minimal rounding for thin bars: ProgressBar and AgentInput's level meter. */
+  --co-semantic-radius-sm: var(--co-base-border-radius-2); /** Subtle rounding for small elements that aren't controls: Tag, Tooltip, CodeBlock, Slider's value label, small images (CardSmall, Picture) and the Checkbox box. */
+  --co-semantic-radius-md: var(--co-base-border-radius-3); /** The control radius: Button, IconButton, inputs, rows and tabs, and the menus and popovers they open. */
+  --co-semantic-radius-lg: var(--co-base-border-radius-4); /** Generous rounding for containers that hold controls: Alert and cards. */
+  --co-semantic-radius-xl: var(--co-base-border-radius-5); /** Large rounding: large cards such as AccountCard. */
+  --co-semantic-radius-2xl: var(--co-base-border-radius-6); /** Overlays that hold controls (Modal, ActionSheet and the drawer Sheet), so their corners nest around the control radius, and large image cards (CardLarge, FeatureBlock). */
+  --co-semantic-radius-3xl: var(--co-base-border-radius-7); /** Maximum rounding short of a circle: AgentInput's input shell, which holds round buttons. */
+  --co-semantic-radius-full: var(--co-base-border-radius-circle); /** Fully round: avatars, chips, badges, round icon buttons and status dots. */
   --co-semantic-space-0: var(--co-base-dimension-0); /** No space, for explicit resets of padding, margin or gap. */
   --co-semantic-space-100: var(--co-base-dimension-1); /** The tightest gap, such as between a label and its required indicator. */
   --co-semantic-space-200: var(--co-base-dimension-2); /** A small gap, such as between a field's label, control and helper text. */
@@ -645,11 +670,9 @@
   --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-gray-100); /** The page: the off-white background everything else sits on (decision 0006). */
-  --co-semantic-surface-raised: var(--co-base-color-white); /** Content raised off the page: cards, inputs, sheets, dialogs, code blocks. */
   --co-component-button-primary-background-color: var(--co-semantic-color-fill-emphasis); /** Primary Button fill at rest. */
   --co-component-button-primary-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the primary Button. */
-  --co-component-button-primary-border-radius: var(--co-semantic-radius-sm); /** Corner radius of every Button (visual language: Button uses sm). */
+  --co-component-button-primary-border-radius: var(--co-semantic-radius-md); /** Corner radius of every Button (visual language: Button uses md). */
   --co-component-button-primary-font: var(--co-semantic-font-weight-medium) var(--co-semantic-font-size-md)/var(--co-semantic-line-height-normal) var(--co-semantic-font-family-body); /** Button label typography, the same as sizes.large.font. */
   --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. */
@@ -668,12 +691,8 @@
   --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-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-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-font-weight: var(--co-semantic-font-weight-medium); /** Weight of small Button text, set after the font: medium, as the other sizes. */
@@ -682,18 +701,14 @@
   --co-component-chip-close-button-size: var(--co-semantic-size-500); /** Width and height of a chip's close button, which fits inside the chip with room around it. */
   --co-component-chip-default-background-color: var(--co-semantic-color-fill-muted); /** Default chip fill at rest. */
   --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-border-radius: var(--co-semantic-radius-full); /** Corner radius of every chip: fully round, so a chip never shares Button's shape and the two read as different jobs (decision 0016). */
   --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-subtle-background-color: var(--co-semantic-surface-raised); /** Subtle chip fill at rest. */
   --co-component-chip-variants-subtle-text-color: var(--co-semantic-color-text-default); /** Subtle chip text and icon colour. */
-  --co-component-chip-variants-subtle-hover-background-color: var(--co-semantic-surface-base); /** Subtle chip fill on hover, when it's clickable. */
   --co-component-chip-variants-subtle-active-background-color: var(--co-semantic-color-fill-muted); /** Subtle chip fill while pressed, when it's clickable. */
-  --co-component-chip-variants-subtle-disabled-background-color: var(--co-semantic-surface-raised); /** Disabled subtle chip fill. */
   --co-component-chip-variants-subtle-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled subtle chip text and icon colour. */
-  --co-component-icon-button-primary-border-radius: var(--co-semantic-radius-sm); /** Corner radius of every IconButton, matching Button. */
-  --co-component-input-focus-border-color: var(--co-semantic-color-border-focus); /** Text input border while focused. */
+  --co-component-icon-button-primary-border-radius: var(--co-semantic-radius-md); /** Corner radius of every IconButton, matching Button. */
   --co-component-icon-button-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every IconButton. */
   --co-component-separator-border: var(--co-semantic-border-default); /** Divider line, the same as variants.default.border. */
   --co-component-separator-variants-default-border: var(--co-semantic-border-default); /** Default Divider line. */
@@ -704,13 +719,13 @@
   --co-component-progress-bar-sizes-md-height: var(--co-semantic-size-200); /** Thickness of the medium ProgressBar, the default. */
   --co-component-progress-bar-sizes-lg-height: var(--co-semantic-size-400); /** Thickness of the large ProgressBar, for prominent progress. */
   --co-component-progress-bar-sizes-xl-height: var(--co-semantic-size-500); /** Thickness of the extra-large ProgressBar, the thickest size. */
-  --co-component-input-default-background-color: var(--co-semantic-surface-raised); /** Text input fill: TextField, PasswordField, NumberInput, Dropdown, SearchField, and the Checkbox box. */
   --co-component-input-default-text-color: var(--co-semantic-color-text-default); /** Text input value colour. */
   --co-component-input-default-border-color: var(--co-semantic-color-border-input); /** Text input, Dropdown and Checkbox border at rest. At least 3:1 on white (decision 0025). */
-  --co-component-input-default-border-radius: var(--co-semantic-radius-sm); /** Corner radius of text inputs and the Checkbox box. */
+  --co-component-input-default-border-radius: var(--co-semantic-radius-md); /** Corner radius of text inputs, Dropdown and SearchField, matching Button. */
   --co-component-input-default-border-width: var(--co-semantic-border-width-thin); /** Border width of text inputs and the Checkbox box. */
   --co-component-input-placeholder-text-color: var(--co-semantic-color-text-muted); /** Placeholder text in every text input (TextField, PasswordField, NumberInput, SearchField, AgentInput). 8.18:1 on the white input fill: placeholders aren't exempt from the contrast minimum (WCAG 1.4.3), unlike disabled text. */
   --co-component-input-hover-border-color: var(--co-semantic-color-border-input-hover); /** Text input border on hover. */
+  --co-component-input-focus-border-color: var(--co-semantic-color-border-focus); /** Text input border while focused. */
   --co-component-input-focus-outline: var(--co-semantic-border-focus); /** Focus ring on text inputs and the Checkbox box. */
   --co-component-input-error-border-color: var(--co-semantic-color-border-danger); /** Text input border when invalid. */
   --co-component-input-error-focus-border-color: var(--co-semantic-color-border-danger); /** Invalid text input border while focused. */
@@ -749,7 +764,7 @@
   --co-component-alert-appearance-borderless-border-color-warning: var(--co-semantic-color-border-none); /** Borderless warning alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
   --co-component-alert-appearance-borderless-border-color-info: var(--co-semantic-color-border-none); /** Borderless info alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
   --co-component-alert-appearance-borderless-border-color-success: var(--co-semantic-color-border-none); /** Borderless success alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
-  --co-component-alert-title-font-weight: var(--co-semantic-font-weight-semibold); /** Alert titles are semibold, heavier than h6's medium. */
+  --co-component-alert-title-font-weight: var(--co-semantic-font-weight-semibold); /** Deprecated: h6 is semibold since decision 0050, so the title takes its weight from title.typography. Use semantic.fontWeight.semibold. Removed in 4.0. */
   --co-component-alert-title-line-height: var(--co-semantic-line-height-tight); /** Alert titles use a tighter line height than h6. */
   --co-component-alert-message-line-height: var(--co-semantic-line-height-tight); /** Alert messages use a tighter line height than body. */
   --co-component-tab-bar-badge-font-weight: var(--co-semantic-font-weight-bold); /** Tab count badges are bold, heavier than caption. */
@@ -767,15 +782,19 @@
   --co-component-code-block-font-family: var(--co-semantic-font-family-monospace); /** Code font. */
   --co-component-code-block-font-size: var(--co-semantic-font-size-xs); /** Code text size. */
   --co-component-code-block-line-height: var(--co-semantic-line-height-tight); /** Code line height. */
+  --co-component-sidebar-nav-width-rail: var(--co-semantic-size-1400); /** Width of a collapsed SidebarNav, the icon rail: the tallest dense row (size.row.sm, in comfortable) with an inset on each side. */
+  --co-component-sidebar-nav-width-narrow: var(--co-semantic-size-5600); /** Width of an expanded SidebarNav with width="narrow": short labels. */
+  --co-component-sidebar-nav-width-default: var(--co-semantic-size-6400); /** Width of an expanded SidebarNav with the default width: labels with a trailing count. */
+  --co-component-sidebar-nav-width-wide: var(--co-semantic-size-7500); /** Width of an expanded SidebarNav with width="wide": long titles, such as chat history. */
   --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-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-box-border-radius: var(--co-semantic-radius-sm); /** Corner radius of the Checkbox box: one step tighter than the control radius, so the small box stays square and never reads as a Radio. */
   --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. */
   --co-component-empty-state-illustration-small: var(--co-semantic-size-2000); /** Size of the small EmptyState illustration, for empty panels and cards. */
   --co-component-empty-state-illustration-medium: var(--co-semantic-size-3000); /** Size of the medium EmptyState illustration, the default. */
@@ -785,7 +804,7 @@
   --co-component-empty-state-actions-max-width: var(--co-semantic-size-7500); /** Widest EmptyState's actions area grows, so buttons don't stretch. */
   --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-transaction-list-item-min-height: var(--co-semantic-size-1800); /** Deprecated: Two-line rows share semantic.size.row.lg, which follows density (decision 0051). Removed in 4.0. */
   --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. */
@@ -799,59 +818,86 @@
   --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-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-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-component-overlay-border-radius: var(--co-semantic-radius-2xl); /** Corner radius of every overlay that holds controls: Modal, ActionSheet's top corners and the drawer Sheet, so they share one shape that nests around the control radius (decision 0055). */
+  --co-semantic-color-text-on-fill: var(--co-base-color-ink-light); /** Text on solid coloured fills: the accent, danger, success, warning and serious fills (issue 355). The light ink, in every theme; text.inverse is for the emphasis and inverse fills. 6.00:1 on fill.accent. */
+  --co-semantic-color-icon-on-fill: var(--co-base-color-ink-light); /** Icons on coloured fills, matching text.on-fill. */
+  --co-semantic-color-fill-accent: var(--co-base-color-accent-solid); /** Blue fill for the accent Button and other deliberate highlights (0003), with text.on-fill on it at 6.00:1. */
+  --co-semantic-color-fill-danger: var(--co-base-color-danger-solid); /** Strong red fill for destructive actions, such as the danger Button, with text.on-fill on it at 6.03:1. */
+  --co-semantic-color-fill-success: var(--co-base-color-success-solid); /** Strong green fill for success states, such as a success indicator, with text.on-fill on it at 5.99:1. */
+  --co-semantic-color-fill-warning: var(--co-base-color-warning-solid); /** Strong yellow fill for warning states, such as a warning indicator, with text.on-fill on it at 6.01:1. */
+  --co-semantic-color-fill-serious: var(--co-base-color-serious-solid); /** Strong orange fill for serious-warning states, with text.on-fill on it at 6.04:1. */
   --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. */
-  --co-semantic-typography-h3: var(--co-semantic-font-weight-bold) var(--co-base-font-size-7)/var(--co-base-line-height-7) var(--co-base-font-family-heading); /** Heading 3: the third heading level in a page outline. */
-  --co-semantic-typography-h4: var(--co-semantic-font-weight-bold) var(--co-base-font-size-6)/var(--co-base-line-height-6) var(--co-base-font-family-heading); /** Heading 4: the fourth heading level in a page outline. */
-  --co-semantic-typography-h5: var(--co-semantic-font-weight-medium) var(--co-base-font-size-5)/var(--co-base-line-height-5) var(--co-base-font-family-heading); /** Heading 5: the fifth heading level in a page outline. */
-  --co-semantic-typography-h6: var(--co-semantic-font-weight-medium) var(--co-base-font-size-4)/var(--co-base-line-height-4) var(--co-base-font-family-heading); /** The smallest heading; Alert's title builds on it. */
+  --co-semantic-typography-h1: var(--co-semantic-font-weight-semibold) 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-semibold) 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. */
+  --co-semantic-typography-h3: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-7)/var(--co-base-line-height-7) var(--co-base-font-family-heading); /** Heading 3: the third heading level in a page outline. */
+  --co-semantic-typography-h4: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-6)/var(--co-base-line-height-6) var(--co-base-font-family-heading); /** Heading 4: the fourth heading level in a page outline. */
+  --co-semantic-typography-h5: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-5)/var(--co-base-line-height-5) var(--co-base-font-family-heading); /** Heading 5: the fifth heading level in a page outline. */
+  --co-semantic-typography-h6: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-4)/var(--co-base-line-height-4) var(--co-base-font-family-heading); /** The smallest heading; Alert's title builds on it. */
   --co-semantic-typography-subtitle: var(--co-semantic-font-weight-medium) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Subtitle: a short line under a heading. */
   --co-semantic-typography-body: var(--co-semantic-font-weight-regular) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Body text: paragraphs and input values. The default text style. */
   --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-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-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-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-semantic-surface-base: var(--co-base-color-surface-page); /** The page: the off-white background everything else sits on (decision 0006). */
+  --co-semantic-surface-raised: var(--co-base-color-surface-raised); /** Content raised off the page: cards, inputs, code blocks. Floating layers use surface.overlay. */
+  --co-semantic-surface-overlay: var(--co-base-color-surface-overlay); /** Floating layers above raised content: Menu, the Dropdown and SearchField lists, ActionSheet, Modal and Sheet (issue 356). White in light, the same as raised; in the dark theme one step lighter than raised, because shadows barely show on a dark page. */
+  --co-semantic-surface-scrim: color-mix(in srgb, var(--co-base-color-ink-dark) calc(var(--co-base-opacity-scrim) * 100%), transparent); /** Backdrop behind a modal surface: Modal, Sheet, ActionSheet. The dark ink at opacity.scrim, so it stays dark in every theme. */
+  --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-on-fill); /** Text and icon colour on the accent Button. */
+  --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-on-fill); /** Text and icon colour on the danger Button. */
   --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-subtle-background-color: var(--co-semantic-surface-raised); /** Subtle chip fill at rest. */
+  --co-component-chip-variants-subtle-hover-background-color: var(--co-semantic-surface-base); /** Subtle chip fill on hover, when it's clickable. */
+  --co-component-chip-variants-subtle-disabled-background-color: var(--co-semantic-surface-raised); /** Disabled subtle chip fill. */
   --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-input-default-background-color: var(--co-semantic-surface-raised); /** Text input fill: TextField, PasswordField, NumberInput, Dropdown, SearchField, and the Checkbox box. */
   --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 (StatusLabel small, CategoryLabel medium, 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 (StatusLabel medium, CategoryLabel large). Combine with label.fontWeight. */
   --co-component-field-label-typography: var(--co-semantic-typography-label); /** Field label text. */
   --co-component-field-helper-text-typography: var(--co-semantic-typography-caption); /** Helper and error text under a field (TextField, PasswordField, NumberInput, Dropdown, Checkbox). One step below the label. */
-  --co-component-alert-title-typography: var(--co-semantic-typography-h6); /** Alert title style (h6), adjusted by title.fontWeight and title.lineHeight. */
+  --co-component-alert-title-typography: var(--co-semantic-typography-h6); /** Alert title style (h6), adjusted by title.lineHeight. */
   --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-slider-thumb-background: var(--co-semantic-surface-raised); /** Fill of the Slider thumb: the raised surface, white. */
+  --co-semantic-color-fill-accent-hover: color-mix(in srgb, var(--co-semantic-color-fill-accent), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-hover) * 100%)); /** Blue fill of a hovered accent control: fill.accent with text.on-fill 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-on-fill) calc(var(--co-semantic-opacity-state-pressed) * 100%)); /** Blue fill of a pressed accent control: fill.accent with text.on-fill 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-on-fill) calc(var(--co-semantic-opacity-state-hover) * 100%)); /** Fill of a hovered destructive control: fill.danger with text.on-fill 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-on-fill) calc(var(--co-semantic-opacity-state-pressed) * 100%)); /** Fill of a pressed destructive control: fill.danger with text.on-fill mixed in at opacity.state.pressed (decision 0048). */
+  --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-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. */
 }
 
-/* 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. */
+/* Mode: density (decision 0032). Control heights, control insets and row heights for a region, set with data-co-density on any element (decisions 0032, 0034 and 0051). Layout spacing doesn't change. */
 
 [data-co-density="default"] {
-  --co-semantic-size-control-sm: var(--co-base-dimension-8); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
-  --co-semantic-size-control-md: var(--co-base-dimension-10); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
-  --co-semantic-size-control-lg: var(--co-base-dimension-12); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
-  --co-semantic-space-inset-xs: var(--co-base-dimension-1); /** Tightest padding inside a component, such as around an icon in a small control. */
-  --co-semantic-space-inset-sm: var(--co-base-dimension-2); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
-  --co-semantic-space-inset-md: var(--co-base-dimension-3); /** Medium padding inside a component: form field insides, medium IconButtons. */
-  --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-size-control-sm: var(--co-base-dimension-8);
+  --co-semantic-size-control-md: var(--co-base-dimension-10);
+  --co-semantic-size-control-lg: var(--co-base-dimension-12);
+  --co-semantic-size-row-sm: var(--co-base-dimension-8);
+  --co-semantic-size-row-md: var(--co-base-dimension-12);
+  --co-semantic-size-row-lg: var(--co-base-dimension-18);
+  --co-semantic-space-inset-xs: var(--co-base-dimension-1);
+  --co-semantic-space-inset-sm: var(--co-base-dimension-2);
+  --co-semantic-space-inset-md: var(--co-base-dimension-3);
+  --co-semantic-space-inset-lg: var(--co-base-dimension-4);
+  --co-semantic-space-inset-xl: var(--co-base-dimension-5);
+  --co-semantic-space-inset-2xl: var(--co-base-dimension-6);
 }
 
 [data-co-density="compact"] {
   --co-semantic-size-control-sm: var(--co-base-dimension-6); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
   --co-semantic-size-control-md: var(--co-base-dimension-8); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
   --co-semantic-size-control-lg: var(--co-base-dimension-10); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
+  --co-semantic-size-row-sm: var(--co-base-dimension-6); /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+  --co-semantic-size-row-md: var(--co-base-dimension-10); /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+  --co-semantic-size-row-lg: var(--co-base-dimension-16); /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
   --co-semantic-space-inset-xs: var(--co-base-dimension-1); /** Tightest padding inside a component, such as around an icon in a small control. */
   --co-semantic-space-inset-sm: var(--co-base-dimension-1); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
   --co-semantic-space-inset-md: var(--co-base-dimension-2); /** Medium padding inside a component: form field insides, medium IconButtons. */
@@ -864,6 +910,9 @@
   --co-semantic-size-control-sm: var(--co-base-dimension-10); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
   --co-semantic-size-control-md: var(--co-base-dimension-12); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
   --co-semantic-size-control-lg: var(--co-base-dimension-14); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
+  --co-semantic-size-row-sm: var(--co-base-dimension-10); /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+  --co-semantic-size-row-md: var(--co-base-dimension-14); /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+  --co-semantic-size-row-lg: var(--co-base-dimension-20); /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
   --co-semantic-space-inset-xs: var(--co-base-dimension-2); /** Tightest padding inside a component, such as around an icon in a small control. */
   --co-semantic-space-inset-sm: var(--co-base-dimension-3); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
   --co-semantic-space-inset-md: var(--co-base-dimension-4); /** Medium padding inside a component: form field insides, medium IconButtons. */
@@ -871,3 +920,1005 @@
   --co-semantic-space-inset-xl: var(--co-base-dimension-6); /** Generous padding inside a component, such as a prominent call to action. */
   --co-semantic-space-inset-2xl: var(--co-base-dimension-7); /** Largest padding inside a component: large cards, spacious form sections. */
 }
+
+/* Mode: theme (decision 0032). Light or dark colour for a region, set with data-co-theme on any element (decision 0054). Changes colour and shadow only. Each ramp step keeps its job, so the dark context is generated base values only (scripts/generate-palette.mjs): semantic tokens read the same paths in both themes (decision 0056). A product that doesn't set it stays light: tokens.css never follows prefers-color-scheme by itself (#358). */
+
+[data-co-theme="light"] {
+  color-scheme: light;
+  --co-base-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --co-base-shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --co-base-shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --co-base-shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --co-base-shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --co-base-shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --co-base-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --co-base-color-gray-100: #fcfcfc;
+  --co-base-color-gray-200: #f9f9f9;
+  --co-base-color-gray-300: #f2f2f2;
+  --co-base-color-gray-400: #ebebeb;
+  --co-base-color-gray-500: #e4e4e4;
+  --co-base-color-gray-600: #dcdcdc;
+  --co-base-color-gray-700: #d1d1d1;
+  --co-base-color-gray-800: #909090;
+  --co-base-color-gray-900: #848484;
+  --co-base-color-gray-1000: #797979;
+  --co-base-color-gray-1100: #636363;
+  --co-base-color-gray-1200: #222222;
+  --co-base-color-gray-alpha-100: rgba(34, 34, 34, 0.014);
+  --co-base-color-gray-alpha-200: rgba(34, 34, 34, 0.027);
+  --co-base-color-gray-alpha-300: rgba(34, 34, 34, 0.059);
+  --co-base-color-gray-alpha-400: rgba(34, 34, 34, 0.09);
+  --co-base-color-gray-alpha-500: rgba(34, 34, 34, 0.122);
+  --co-base-color-gray-alpha-600: rgba(34, 34, 34, 0.158);
+  --co-base-color-gray-alpha-700: rgba(34, 34, 34, 0.208);
+  --co-base-color-gray-alpha-800: rgba(34, 34, 34, 0.502);
+  --co-base-color-gray-alpha-900: rgba(34, 34, 34, 0.557);
+  --co-base-color-gray-alpha-1000: rgba(34, 34, 34, 0.606);
+  --co-base-color-gray-alpha-1100: rgba(34, 34, 34, 0.706);
+  --co-base-color-gray-alpha-1200: rgba(34, 34, 34, 1);
+  --co-base-color-gray-alpha-inverse-100: rgba(252, 252, 252, 0.014);
+  --co-base-color-gray-alpha-inverse-200: rgba(252, 252, 252, 0.027);
+  --co-base-color-gray-alpha-inverse-300: rgba(252, 252, 252, 0.059);
+  --co-base-color-gray-alpha-inverse-400: rgba(252, 252, 252, 0.09);
+  --co-base-color-gray-alpha-inverse-500: rgba(252, 252, 252, 0.122);
+  --co-base-color-gray-alpha-inverse-600: rgba(252, 252, 252, 0.158);
+  --co-base-color-gray-alpha-inverse-700: rgba(252, 252, 252, 0.208);
+  --co-base-color-gray-alpha-inverse-800: rgba(252, 252, 252, 0.502);
+  --co-base-color-gray-alpha-inverse-900: rgba(252, 252, 252, 0.557);
+  --co-base-color-gray-alpha-inverse-1000: rgba(252, 252, 252, 0.606);
+  --co-base-color-gray-alpha-inverse-1100: rgba(252, 252, 252, 0.706);
+  --co-base-color-gray-alpha-inverse-1200: rgba(252, 252, 252, 1);
+  --co-base-color-accent-100: #fbfcfd;
+  --co-base-color-accent-200: #f7f9fc;
+  --co-base-color-accent-300: #edf3fa;
+  --co-base-color-accent-400: #e3ecf8;
+  --co-base-color-accent-500: #d8e5f6;
+  --co-base-color-accent-600: #cbdef7;
+  --co-base-color-accent-700: #b9d3f5;
+  --co-base-color-accent-800: #3190fe;
+  --co-base-color-accent-900: #0082fc;
+  --co-base-color-accent-1000: #0278e7;
+  --co-base-color-accent-1100: #0162bf;
+  --co-base-color-accent-1200: #0f2339;
+  --co-base-color-accent-alpha-100: rgba(5, 68, 130, 0.016);
+  --co-base-color-accent-alpha-200: rgba(5, 68, 161, 0.032);
+  --co-base-color-accent-alpha-300: rgba(1, 86, 185, 0.071);
+  --co-base-color-accent-alpha-400: rgba(0, 82, 191, 0.11);
+  --co-base-color-accent-alpha-500: rgba(0, 85, 196, 0.153);
+  --co-base-color-accent-alpha-600: rgba(0, 93, 216, 0.204);
+  --co-base-color-accent-alpha-700: rgba(0, 95, 219, 0.275);
+  --co-base-color-accent-alpha-800: rgba(0, 118, 254, 0.808);
+  --co-base-color-accent-alpha-900: rgba(0, 130, 252, 1);
+  --co-base-color-accent-alpha-1000: rgba(0, 119, 231, 0.993);
+  --co-base-color-accent-alpha-1100: rgba(0, 98, 191, 0.997);
+  --co-base-color-accent-alpha-1200: rgba(0, 21, 45, 0.942);
+  --co-base-color-success-100: #f9fdfa;
+  --co-base-color-success-200: #f0fcf5;
+  --co-base-color-success-300: #dbf9e8;
+  --co-base-color-success-400: #c4f7da;
+  --co-base-color-success-500: #aff3ce;
+  --co-base-color-success-600: #98eec0;
+  --co-base-color-success-700: #77e6af;
+  --co-base-color-success-800: #02a56c;
+  --co-base-color-success-900: #009762;
+  --co-base-color-success-1000: #018b5a;
+  --co-base-color-success-1100: #017249;
+  --co-base-color-success-1200: #12261b;
+  --co-base-color-success-alpha-100: rgba(5, 172, 47, 0.024);
+  --co-base-color-success-alpha-200: rgba(1, 204, 86, 0.059);
+  --co-base-color-success-alpha-300: rgba(1, 213, 93, 0.142);
+  --co-base-color-success-alpha-400: rgba(1, 221, 96, 0.232);
+  --co-base-color-success-alpha-500: rgba(0, 217, 99, 0.314);
+  --co-base-color-success-alpha-600: rgba(0, 213, 99, 0.404);
+  --co-base-color-success-alpha-700: rgba(0, 208, 105, 0.534);
+  --co-base-color-success-alpha-800: rgba(0, 164, 107, 0.993);
+  --co-base-color-success-alpha-900: rgba(0, 151, 98, 1);
+  --co-base-color-success-alpha-1000: rgba(0, 139, 90, 0.997);
+  --co-base-color-success-alpha-1100: rgba(0, 114, 72, 0.997);
+  --co-base-color-success-alpha-1200: rgba(0, 22, 10, 0.93);
+  --co-base-color-warning-100: #fdfcfa;
+  --co-base-color-warning-200: #fcf9f4;
+  --co-base-color-warning-300: #faf1e3;
+  --co-base-color-warning-400: #f8e9d1;
+  --co-base-color-warning-500: #f7e1be;
+  --co-base-color-warning-600: #f7d8a5;
+  --co-base-color-warning-700: #f7cb80;
+  --co-base-color-warning-800: #bd8600;
+  --co-base-color-warning-900: #ad7b00;
+  --co-base-color-warning-1000: #9f7102;
+  --co-base-color-warning-1100: #835c00;
+  --co-base-color-warning-1200: #292111;
+  --co-base-color-warning-alpha-100: rgba(155, 105, 5, 0.02);
+  --co-base-color-warning-alpha-200: rgba(187, 119, 5, 0.044);
+  --co-base-color-warning-alpha-300: rgba(210, 128, 0, 0.11);
+  --co-base-color-warning-alpha-400: rgba(216, 133, 1, 0.181);
+  --co-base-color-warning-alpha-500: rgba(224, 137, 0, 0.255);
+  --co-base-color-warning-alpha-600: rgba(232, 145, 0, 0.353);
+  --co-base-color-warning-alpha-700: rgba(239, 151, 0, 0.499);
+  --co-base-color-warning-alpha-800: rgba(189, 134, 0, 1);
+  --co-base-color-warning-alpha-900: rgba(173, 123, 0, 1);
+  --co-base-color-warning-alpha-1000: rgba(158, 112, 0, 0.993);
+  --co-base-color-warning-alpha-1100: rgba(131, 92, 0, 1);
+  --co-base-color-warning-alpha-1200: rgba(26, 17, 0, 0.934);
+  --co-base-color-serious-100: #fefcfb;
+  --co-base-color-serious-200: #fcf8f6;
+  --co-base-color-serious-300: #faf0eb;
+  --co-base-color-serious-400: #f8e8e0;
+  --co-base-color-serious-500: #f7dfd4;
+  --co-base-color-serious-600: #f6d5c5;
+  --co-base-color-serious-700: #f7c7b0;
+  --co-base-color-serious-800: #ed6800;
+  --co-base-color-serious-900: #da5f00;
+  --co-base-color-serious-1000: #c85701;
+  --co-base-color-serious-1100: #a54703;
+  --co-base-color-serious-1200: #341c10;
+  --co-base-color-serious-alpha-100: rgba(193, 68, 5, 0.016);
+  --co-base-color-serious-alpha-200: rgba(172, 61, 5, 0.036);
+  --co-base-color-serious-alpha-300: rgba(192, 65, 2, 0.079);
+  --co-base-color-serious-alpha-400: rgba(198, 66, 1, 0.122);
+  --co-base-color-serious-alpha-500: rgba(208, 66, 1, 0.169);
+  --co-base-color-serious-alpha-600: rgba(216, 71, 1, 0.228);
+  --co-base-color-serious-alpha-700: rgba(229, 74, 0, 0.31);
+  --co-base-color-serious-alpha-800: rgba(237, 104, 0, 1);
+  --co-base-color-serious-alpha-900: rgba(218, 95, 0, 1);
+  --co-base-color-serious-alpha-1000: rgba(200, 86, 0, 0.997);
+  --co-base-color-serious-alpha-1100: rgba(164, 69, 0, 0.989);
+  --co-base-color-serious-alpha-1200: rgba(39, 13, 0, 0.938);
+  --co-base-color-danger-100: #fefcfc;
+  --co-base-color-danger-200: #fcf8f7;
+  --co-base-color-danger-300: #faf0ee;
+  --co-base-color-danger-400: #f8e7e4;
+  --co-base-color-danger-500: #f8dfdb;
+  --co-base-color-danger-600: #f7d4ce;
+  --co-base-color-danger-700: #f7c6be;
+  --co-base-color-danger-800: #ff5444;
+  --co-base-color-danger-900: #ff2b21;
+  --co-base-color-danger-1000: #f30004;
+  --co-base-color-danger-1100: #c90002;
+  --co-base-color-danger-1200: #3d1611;
+  --co-base-color-danger-alpha-100: rgba(172, 5, 5, 0.012);
+  --co-base-color-danger-alpha-200: rgba(161, 36, 5, 0.032);
+  --co-base-color-danger-alpha-300: rgba(180, 31, 1, 0.067);
+  --co-base-color-danger-alpha-400: rgba(189, 29, 0, 0.106);
+  --co-base-color-danger-alpha-500: rgba(206, 30, 1, 0.142);
+  --co-base-color-danger-alpha-600: rgba(214, 32, 1, 0.193);
+  --co-base-color-danger-alpha-700: rgba(224, 31, 0, 0.255);
+  --co-base-color-danger-alpha-800: rgba(255, 22, 0, 0.734);
+  --co-base-color-danger-alpha-900: rgba(255, 12, 0, 0.871);
+  --co-base-color-danger-alpha-1000: rgba(243, 0, 4, 1);
+  --co-base-color-danger-alpha-1100: rgba(201, 0, 2, 1);
+  --co-base-color-danger-alpha-1200: rgba(47, 6, 0, 0.934);
+  --co-base-color-ai-100: #fdfcfe;
+  --co-base-color-ai-200: #faf8fc;
+  --co-base-color-ai-300: #f4f0fa;
+  --co-base-color-ai-400: #efe8f8;
+  --co-base-color-ai-500: #eae0f7;
+  --co-base-color-ai-600: #e4d6f6;
+  --co-base-color-ai-700: #ddc9f7;
+  --co-base-color-ai-800: #b76bff;
+  --co-base-color-ai-900: #b056ff;
+  --co-base-color-ai-1000: #aa3dff;
+  --co-base-color-ai-1100: #9602eb;
+  --co-base-color-ai-1200: #2e1743;
+  --co-base-color-ai-alpha-100: rgba(88, 5, 172, 0.012);
+  --co-base-color-ai-alpha-200: rgba(76, 5, 148, 0.028);
+  --co-base-color-ai-alpha-300: rgba(69, 1, 170, 0.059);
+  --co-base-color-ai-alpha-400: rgba(79, 2, 178, 0.091);
+  --co-base-color-ai-alpha-500: rgba(83, 1, 189, 0.122);
+  --co-base-color-ai-alpha-600: rgba(87, 0, 199, 0.161);
+  --co-base-color-ai-alpha-700: rgba(95, 0, 217, 0.212);
+  --co-base-color-ai-alpha-800: rgba(131, 0, 255, 0.581);
+  --co-base-color-ai-alpha-900: rgba(136, 0, 255, 0.663);
+  --co-base-color-ai-alpha-1000: rgba(143, 0, 255, 0.761);
+  --co-base-color-ai-alpha-1100: rgba(149, 0, 235, 0.993);
+  --co-base-color-ai-alpha-1200: rgba(25, 0, 48, 0.91);
+  --co-base-color-olive-100: #fbfdf4;
+  --co-base-color-olive-200: #f7fbe8;
+  --co-base-color-olive-300: #eff6d4;
+  --co-base-color-olive-400: #e6f0bf;
+  --co-base-color-olive-500: #deebaa;
+  --co-base-color-olive-600: #d5e493;
+  --co-base-color-olive-700: #c9da73;
+  --co-base-color-olive-800: #889903;
+  --co-base-color-olive-900: #7d8c02;
+  --co-base-color-olive-1000: #738000;
+  --co-base-color-olive-1100: #5d6900;
+  --co-base-color-olive-1200: #202410;
+  --co-base-color-olive-alpha-100: rgba(164, 210, 5, 0.044);
+  --co-base-color-olive-alpha-200: rgba(167, 211, 2, 0.091);
+  --co-base-color-olive-alpha-300: rgba(160, 202, 1, 0.169);
+  --co-base-color-olive-alpha-400: rgba(155, 195, 0, 0.251);
+  --co-base-color-olive-alpha-500: rgba(156, 195, 1, 0.334);
+  --co-base-color-olive-alpha-600: rgba(156, 191, 0, 0.424);
+  --co-base-color-olive-alpha-700: rgba(157, 188, 0, 0.55);
+  --co-base-color-olive-alpha-800: rgba(135, 152, 0, 0.989);
+  --co-base-color-olive-alpha-900: rgba(124, 139, 0, 0.993);
+  --co-base-color-olive-alpha-1000: rgba(115, 128, 0, 1);
+  --co-base-color-olive-alpha-1100: rgba(93, 105, 0, 1);
+  --co-base-color-olive-alpha-1200: rgba(17, 22, 0, 0.938);
+  --co-base-color-periwinkle-100: #fcfcfd;
+  --co-base-color-periwinkle-200: #f8f9fc;
+  --co-base-color-periwinkle-300: #f0f2fa;
+  --co-base-color-periwinkle-400: #e8ebf9;
+  --co-base-color-periwinkle-500: #dfe3f7;
+  --co-base-color-periwinkle-600: #d6dbf7;
+  --co-base-color-periwinkle-700: #c8cff6;
+  --co-base-color-periwinkle-800: #7a84ff;
+  --co-base-color-periwinkle-900: #6e74fe;
+  --co-base-color-periwinkle-1000: #6464ff;
+  --co-base-color-periwinkle-1100: #533eff;
+  --co-base-color-periwinkle-1200: #1a1b51;
+  --co-base-color-periwinkle-alpha-100: rgba(5, 5, 88, 0.012);
+  --co-base-color-periwinkle-alpha-200: rgba(5, 41, 148, 0.028);
+  --co-base-color-periwinkle-alpha-300: rgba(1, 35, 170, 0.059);
+  --co-base-color-periwinkle-alpha-400: rgba(2, 35, 189, 0.091);
+  --co-base-color-periwinkle-alpha-500: rgba(1, 33, 192, 0.126);
+  --co-base-color-periwinkle-alpha-600: rgba(0, 31, 205, 0.161);
+  --co-base-color-periwinkle-alpha-700: rgba(0, 33, 213, 0.216);
+  --co-base-color-periwinkle-alpha-800: rgba(0, 19, 255, 0.522);
+  --co-base-color-periwinkle-alpha-900: rgba(0, 11, 253, 0.569);
+  --co-base-color-periwinkle-alpha-1000: rgba(0, 0, 255, 0.608);
+  --co-base-color-periwinkle-alpha-1100: rgba(28, 0, 255, 0.757);
+  --co-base-color-periwinkle-alpha-1200: rgba(0, 1, 61, 0.899);
+  --co-base-color-rose-100: #fefcfc;
+  --co-base-color-rose-200: #fcf8f9;
+  --co-base-color-rose-300: #faeff1;
+  --co-base-color-rose-400: #f8e7ea;
+  --co-base-color-rose-500: #f8dee3;
+  --co-base-color-rose-600: #f7d3da;
+  --co-base-color-rose-700: #f7c4cf;
+  --co-base-color-rose-800: #ff4989;
+  --co-base-color-rose-900: #ff0f7c;
+  --co-base-color-rose-1000: #ec0071;
+  --co-base-color-rose-1100: #c4005d;
+  --co-base-color-rose-1200: #3c1520;
+  --co-base-color-rose-alpha-100: rgba(172, 5, 5, 0.012);
+  --co-base-color-rose-alpha-200: rgba(148, 5, 41, 0.028);
+  --co-base-color-rose-alpha-300: rgba(176, 1, 33, 0.063);
+  --co-base-color-rose-alpha-400: rgba(181, 2, 34, 0.095);
+  --co-base-color-rose-alpha-500: rgba(201, 1, 40, 0.13);
+  --co-base-color-rose-alpha-600: rgba(209, 1, 41, 0.173);
+  --co-base-color-rose-alpha-700: rgba(221, 1, 48, 0.232);
+  --co-base-color-rose-alpha-800: rgba(255, 0, 90, 0.714);
+  --co-base-color-rose-alpha-900: rgba(255, 0, 116, 0.942);
+  --co-base-color-rose-alpha-1000: rgba(236, 0, 113, 1);
+  --co-base-color-rose-alpha-1100: rgba(196, 0, 93, 1);
+  --co-base-color-rose-alpha-1200: rgba(43, 0, 12, 0.918);
+  --co-base-color-magenta-100: #fdfbfd;
+  --co-base-color-magenta-200: #fdf8fc;
+  --co-base-color-magenta-300: #faeff9;
+  --co-base-color-magenta-400: #f9e6f7;
+  --co-base-color-magenta-500: #f8dcf5;
+  --co-base-color-magenta-600: #f7d0f3;
+  --co-base-color-magenta-700: #f7bff2;
+  --co-base-color-magenta-800: #fd00fa;
+  --co-base-color-magenta-900: #e900e6;
+  --co-base-color-magenta-1000: #d700d4;
+  --co-base-color-magenta-1100: #b100af;
+  --co-base-color-magenta-1200: #371535;
+  --co-base-color-magenta-alpha-100: rgba(130, 5, 130, 0.016);
+  --co-base-color-magenta-alpha-200: rgba(184, 5, 148, 0.028);
+  --co-base-color-magenta-alpha-300: rgba(176, 1, 160, 0.063);
+  --co-base-color-magenta-alpha-400: rgba(194, 2, 174, 0.099);
+  --co-base-color-magenta-alpha-500: rgba(204, 1, 183, 0.138);
+  --co-base-color-magenta-alpha-600: rgba(212, 1, 190, 0.185);
+  --co-base-color-magenta-alpha-700: rgba(223, 0, 203, 0.251);
+  --co-base-color-magenta-alpha-800: rgba(253, 0, 250, 1);
+  --co-base-color-magenta-alpha-900: rgba(233, 0, 230, 1);
+  --co-base-color-magenta-alpha-1000: rgba(215, 0, 212, 1);
+  --co-base-color-magenta-alpha-1100: rgba(177, 0, 175, 1);
+  --co-base-color-magenta-alpha-1200: rgba(37, 0, 35, 0.918);
+  --co-base-opacity-scrim: var(--co-base-opacity-50);
+  --co-base-color-surface-page: var(--co-base-color-gray-100);
+  --co-base-color-surface-raised: var(--co-base-color-white);
+  --co-base-color-surface-overlay: var(--co-base-color-white);
+  --co-base-color-ink-light: var(--co-base-color-gray-100);
+  --co-base-color-ink-dark: var(--co-base-color-gray-1200);
+  --co-base-color-accent-solid: var(--co-base-color-accent-1100);
+  --co-base-color-success-solid: var(--co-base-color-success-1100);
+  --co-base-color-warning-solid: var(--co-base-color-warning-1100);
+  --co-base-color-serious-solid: var(--co-base-color-serious-1100);
+  --co-base-color-danger-solid: var(--co-base-color-danger-1100);
+  --co-semantic-elevation-inset: var(--co-base-shadow-inset);
+  --co-semantic-elevation-raised: var(--co-base-shadow-2);
+  --co-semantic-elevation-floating: var(--co-base-shadow-4);
+  --co-semantic-elevation-overlay: var(--co-base-shadow-5);
+  --co-semantic-elevation-sticky: var(--co-base-shadow-3);
+  --co-semantic-border-default: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-default);
+  --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-focus);
+  --co-semantic-border-input-hover: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-input-hover);
+  --co-semantic-color-text-default: var(--co-base-color-gray-1200);
+  --co-semantic-color-text-inverse: var(--co-base-color-gray-100);
+  --co-semantic-color-text-disabled: var(--co-base-color-gray-alpha-700);
+  --co-semantic-color-text-success: var(--co-base-color-success-1100);
+  --co-semantic-color-text-warning: var(--co-base-color-warning-1100);
+  --co-semantic-color-text-muted: var(--co-base-color-gray-1100);
+  --co-semantic-color-text-accent: var(--co-base-color-accent-1100);
+  --co-semantic-color-text-danger: var(--co-base-color-danger-1100);
+  --co-semantic-color-text-ai: var(--co-base-color-ai-1100);
+  --co-semantic-color-text-serious: var(--co-base-color-serious-1100);
+  --co-semantic-color-border-default: var(--co-base-color-gray-700);
+  --co-semantic-color-border-success: var(--co-base-color-success-800);
+  --co-semantic-color-border-warning: var(--co-base-color-warning-800);
+  --co-semantic-color-border-input: var(--co-base-color-gray-800);
+  --co-semantic-color-border-input-hover: var(--co-base-color-gray-1100);
+  --co-semantic-color-border-focus: var(--co-base-color-gray-1200);
+  --co-semantic-color-border-accent: var(--co-base-color-accent-800);
+  --co-semantic-color-border-danger: var(--co-base-color-danger-800);
+  --co-semantic-color-border-serious: var(--co-base-color-serious-800);
+  --co-semantic-color-border-ai: var(--co-base-color-ai-800);
+  --co-semantic-color-icon-default: var(--co-base-color-gray-1200);
+  --co-semantic-color-icon-disabled: var(--co-base-color-gray-alpha-700);
+  --co-semantic-color-icon-inverse: var(--co-base-color-gray-100);
+  --co-semantic-color-icon-success: var(--co-base-color-success-1100);
+  --co-semantic-color-icon-warning: var(--co-base-color-warning-1100);
+  --co-semantic-color-icon-muted: var(--co-base-color-gray-1100);
+  --co-semantic-color-icon-accent: var(--co-base-color-accent-1100);
+  --co-semantic-color-icon-danger: var(--co-base-color-danger-1100);
+  --co-semantic-color-icon-ai: var(--co-base-color-ai-1100);
+  --co-semantic-color-icon-serious: var(--co-base-color-serious-1100);
+  --co-semantic-color-category-gray: var(--co-base-color-gray-800);
+  --co-semantic-color-category-gray-strong: var(--co-base-color-gray-1100);
+  --co-semantic-color-category-gray-text: var(--co-base-color-gray-1100);
+  --co-semantic-color-category-gray-muted: var(--co-base-color-gray-alpha-300);
+  --co-semantic-color-category-olive: var(--co-base-color-olive-800);
+  --co-semantic-color-category-olive-strong: var(--co-base-color-olive-1100);
+  --co-semantic-color-category-olive-text: var(--co-base-color-olive-1100);
+  --co-semantic-color-category-olive-muted: var(--co-base-color-olive-alpha-300);
+  --co-semantic-color-category-periwinkle: var(--co-base-color-periwinkle-800);
+  --co-semantic-color-category-periwinkle-strong: var(--co-base-color-periwinkle-1100);
+  --co-semantic-color-category-periwinkle-text: var(--co-base-color-periwinkle-1100);
+  --co-semantic-color-category-periwinkle-muted: var(--co-base-color-periwinkle-alpha-300);
+  --co-semantic-color-category-rose: var(--co-base-color-rose-800);
+  --co-semantic-color-category-rose-strong: var(--co-base-color-rose-1100);
+  --co-semantic-color-category-rose-text: var(--co-base-color-rose-1100);
+  --co-semantic-color-category-rose-muted: var(--co-base-color-rose-alpha-300);
+  --co-semantic-color-category-magenta: var(--co-base-color-magenta-800);
+  --co-semantic-color-category-magenta-strong: var(--co-base-color-magenta-1100);
+  --co-semantic-color-category-magenta-text: var(--co-base-color-magenta-1100);
+  --co-semantic-color-category-magenta-muted: var(--co-base-color-magenta-alpha-300);
+  --co-semantic-color-fill-emphasis: var(--co-base-color-gray-1200);
+  --co-semantic-color-fill-muted: var(--co-base-color-gray-alpha-300);
+  --co-semantic-color-fill-inverse: var(--co-base-color-gray-1200);
+  --co-semantic-color-fill-accent-muted: var(--co-base-color-accent-alpha-300);
+  --co-semantic-color-fill-accent-muted-hover: var(--co-base-color-accent-alpha-400);
+  --co-semantic-color-fill-accent-muted-pressed: var(--co-base-color-accent-alpha-500);
+  --co-semantic-color-fill-danger-muted: var(--co-base-color-danger-alpha-300);
+  --co-semantic-color-fill-success-muted: var(--co-base-color-success-alpha-300);
+  --co-semantic-color-fill-warning-muted: var(--co-base-color-warning-alpha-300);
+  --co-semantic-color-fill-disabled: var(--co-base-color-gray-alpha-300);
+  --co-semantic-color-fill-default: var(--co-base-color-gray-alpha-300);
+  --co-semantic-color-fill-default-hover: var(--co-base-color-gray-alpha-400);
+  --co-semantic-color-fill-default-pressed: var(--co-base-color-gray-alpha-500);
+  --co-semantic-color-fill-none-hover: var(--co-base-color-gray-alpha-400);
+  --co-semantic-color-fill-none-pressed: var(--co-base-color-gray-alpha-600);
+  --co-semantic-color-fill-inverse-none-hover: var(--co-base-color-gray-alpha-inverse-700);
+  --co-semantic-color-fill-serious-muted: var(--co-base-color-serious-alpha-300);
+  --co-semantic-color-fill-ai-muted: var(--co-base-color-ai-alpha-300);
+  --co-semantic-color-data-positive: var(--co-base-color-success-900);
+  --co-semantic-color-data-negative: var(--co-base-color-danger-900);
+  --co-semantic-color-data-categorical-1: var(--co-base-color-olive-1100);
+  --co-semantic-color-data-categorical-2: var(--co-base-color-periwinkle-800);
+  --co-semantic-color-data-categorical-3: var(--co-base-color-rose-800);
+  --co-semantic-color-data-categorical-4: var(--co-base-color-magenta-1100);
+  --co-semantic-color-data-categorical-other: var(--co-base-color-gray-800);
+  --co-semantic-color-data-diverging-balance-1: var(--co-base-color-olive-1100);
+  --co-semantic-color-data-diverging-balance-2: var(--co-base-color-olive-800);
+  --co-semantic-color-data-diverging-balance-3: var(--co-base-color-gray-300);
+  --co-semantic-color-data-diverging-balance-4: var(--co-base-color-magenta-800);
+  --co-semantic-color-data-diverging-balance-5: var(--co-base-color-magenta-1100);
+  --co-semantic-color-data-sequential-periwinkle-1: var(--co-base-color-periwinkle-300);
+  --co-semantic-color-data-sequential-periwinkle-2: var(--co-base-color-periwinkle-600);
+  --co-semantic-color-data-sequential-periwinkle-3: var(--co-base-color-periwinkle-800);
+  --co-semantic-color-data-sequential-periwinkle-4: var(--co-base-color-periwinkle-1000);
+  --co-semantic-color-data-sequential-periwinkle-5: var(--co-base-color-periwinkle-1200);
+  --co-component-button-primary-background-color: var(--co-semantic-color-fill-emphasis);
+  --co-component-button-primary-text-color: var(--co-semantic-color-text-inverse);
+  --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%));
+  --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%));
+  --co-component-button-focus-outline: var(--co-semantic-border-focus);
+  --co-component-button-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-button-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-button-variants-secondary-background-color: var(--co-semantic-color-fill-default);
+  --co-component-button-variants-secondary-text-color: var(--co-semantic-color-text-default);
+  --co-component-button-variants-secondary-hover-background-color: var(--co-semantic-color-fill-default-hover);
+  --co-component-button-variants-secondary-active-background-color: var(--co-semantic-color-fill-default-pressed);
+  --co-component-button-variants-secondary-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-button-variants-secondary-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-button-variants-naked-text-color: var(--co-semantic-color-text-default);
+  --co-component-button-variants-naked-hover-background-color: var(--co-semantic-color-fill-default);
+  --co-component-button-variants-naked-active-background-color: var(--co-semantic-color-fill-default-hover);
+  --co-component-button-variants-naked-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-button-variants-accent-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-button-variants-accent-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-button-variants-danger-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-button-variants-danger-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-chip-default-background-color: var(--co-semantic-color-fill-muted);
+  --co-component-chip-default-text-color: var(--co-semantic-color-text-default);
+  --co-component-chip-focus-outline: var(--co-semantic-border-focus);
+  --co-component-chip-disabled-background-color: var(--co-semantic-color-fill-muted);
+  --co-component-chip-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-chip-variants-subtle-text-color: var(--co-semantic-color-text-default);
+  --co-component-chip-variants-subtle-active-background-color: var(--co-semantic-color-fill-muted);
+  --co-component-chip-variants-subtle-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-icon-button-focus-outline: var(--co-semantic-border-focus);
+  --co-component-separator-border: var(--co-semantic-border-default);
+  --co-component-separator-variants-default-border: var(--co-semantic-border-default);
+  --co-component-separator-variants-strong-border: var(--co-semantic-border-input-hover);
+  --co-component-separator-variants-minimal-border: var(--co-semantic-border-default);
+  --co-component-progress-bar-background-color: var(--co-semantic-color-fill-default);
+  --co-component-input-default-text-color: var(--co-semantic-color-text-default);
+  --co-component-input-default-border-color: var(--co-semantic-color-border-input);
+  --co-component-input-placeholder-text-color: var(--co-semantic-color-text-muted);
+  --co-component-input-hover-border-color: var(--co-semantic-color-border-input-hover);
+  --co-component-input-focus-border-color: var(--co-semantic-color-border-focus);
+  --co-component-input-focus-outline: var(--co-semantic-border-focus);
+  --co-component-input-error-border-color: var(--co-semantic-color-border-danger);
+  --co-component-input-error-focus-border-color: var(--co-semantic-color-border-danger);
+  --co-component-input-error-focus-outline: var(--co-semantic-border-focus);
+  --co-component-input-error-hover-border-color: var(--co-semantic-color-border-danger);
+  --co-component-input-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-input-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-input-disabled-border-color: var(--co-semantic-color-border-default);
+  --co-component-field-label-color: var(--co-semantic-color-text-default);
+  --co-component-field-label-color-disabled: var(--co-semantic-color-text-disabled);
+  --co-component-field-required-indicator-color: var(--co-semantic-color-text-danger);
+  --co-component-field-helper-text-color: var(--co-semantic-color-text-muted);
+  --co-component-field-helper-text-color-error: var(--co-semantic-color-text-danger);
+  --co-component-alert-severity-error-background: var(--co-semantic-color-fill-danger-muted);
+  --co-component-alert-severity-error-text: var(--co-semantic-color-text-danger);
+  --co-component-alert-severity-warning-background: var(--co-semantic-color-fill-warning-muted);
+  --co-component-alert-severity-warning-text: var(--co-semantic-color-text-warning);
+  --co-component-alert-severity-info-background: var(--co-semantic-color-fill-accent-muted);
+  --co-component-alert-severity-info-text: var(--co-semantic-color-text-accent);
+  --co-component-alert-severity-success-background: var(--co-semantic-color-fill-success-muted);
+  --co-component-alert-severity-success-text: var(--co-semantic-color-text-success);
+  --co-component-alert-appearance-outlined-border-color-error: var(--co-semantic-color-border-danger);
+  --co-component-alert-appearance-outlined-border-color-warning: var(--co-semantic-color-border-warning);
+  --co-component-alert-appearance-outlined-border-color-info: var(--co-semantic-color-border-accent);
+  --co-component-alert-appearance-outlined-border-color-success: var(--co-semantic-color-border-success);
+  --co-component-slider-thumb-shadow-default: var(--co-semantic-elevation-raised);
+  --co-component-slider-thumb-shadow-hover: var(--co-semantic-elevation-sticky);
+  --co-component-slider-thumb-shadow-active: var(--co-semantic-elevation-floating);
+  --co-component-status-pending-text: var(--co-semantic-color-text-muted);
+  --co-component-status-pending-background: var(--co-semantic-color-fill-muted);
+  --co-component-status-completed-text: var(--co-semantic-color-text-success);
+  --co-component-status-completed-background: var(--co-semantic-color-fill-success-muted);
+  --co-component-status-failed-text: var(--co-semantic-color-text-danger);
+  --co-component-status-failed-background: var(--co-semantic-color-fill-danger-muted);
+  --co-component-status-cancelled-text: var(--co-semantic-color-text-muted);
+  --co-component-status-cancelled-background: var(--co-semantic-color-fill-muted);
+  --co-component-status-processing-text: var(--co-semantic-color-text-accent);
+  --co-component-status-processing-background: var(--co-semantic-color-fill-accent-muted);
+  --co-component-status-scheduled-text: var(--co-semantic-color-text-muted);
+  --co-component-status-scheduled-background: var(--co-semantic-color-fill-muted);
+  --co-component-track-background: var(--co-semantic-color-fill-default);
+  --co-semantic-color-text-on-fill: var(--co-base-color-ink-light);
+  --co-semantic-color-icon-on-fill: var(--co-base-color-ink-light);
+  --co-semantic-color-fill-accent: var(--co-base-color-accent-solid);
+  --co-semantic-color-fill-danger: var(--co-base-color-danger-solid);
+  --co-semantic-color-fill-success: var(--co-base-color-success-solid);
+  --co-semantic-color-fill-warning: var(--co-base-color-warning-solid);
+  --co-semantic-color-fill-serious: var(--co-base-color-serious-solid);
+  --co-semantic-surface-base: var(--co-base-color-surface-page);
+  --co-semantic-surface-raised: var(--co-base-color-surface-raised);
+  --co-semantic-surface-overlay: var(--co-base-color-surface-overlay);
+  --co-semantic-surface-scrim: color-mix(in srgb, var(--co-base-color-ink-dark) calc(var(--co-base-opacity-scrim) * 100%), transparent);
+  --co-component-button-variants-accent-background-color: var(--co-semantic-color-fill-accent);
+  --co-component-button-variants-accent-text-color: var(--co-semantic-color-text-on-fill);
+  --co-component-button-variants-danger-background-color: var(--co-semantic-color-fill-danger);
+  --co-component-button-variants-danger-text-color: var(--co-semantic-color-text-on-fill);
+  --co-component-chip-variants-subtle-background-color: var(--co-semantic-surface-raised);
+  --co-component-chip-variants-subtle-hover-background-color: var(--co-semantic-surface-base);
+  --co-component-chip-variants-subtle-disabled-background-color: var(--co-semantic-surface-raised);
+  --co-component-input-default-background-color: var(--co-semantic-surface-raised);
+  --co-component-slider-thumb-background: var(--co-semantic-surface-raised);
+  --co-semantic-color-fill-accent-hover: color-mix(in srgb, var(--co-semantic-color-fill-accent), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-hover) * 100%));
+  --co-semantic-color-fill-accent-pressed: color-mix(in srgb, var(--co-semantic-color-fill-accent), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-pressed) * 100%));
+  --co-semantic-color-fill-danger-hover: color-mix(in srgb, var(--co-semantic-color-fill-danger), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-hover) * 100%));
+  --co-semantic-color-fill-danger-pressed: color-mix(in srgb, var(--co-semantic-color-fill-danger), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-pressed) * 100%));
+  --co-component-button-variants-accent-hover-background-color: var(--co-semantic-color-fill-accent-hover);
+  --co-component-button-variants-accent-active-background-color: var(--co-semantic-color-fill-accent-pressed);
+  --co-component-button-variants-danger-hover-background-color: var(--co-semantic-color-fill-danger-hover);
+  --co-component-button-variants-danger-active-background-color: var(--co-semantic-color-fill-danger-pressed);
+}
+
+[data-co-theme="dark"] {
+  color-scheme: dark;
+  --co-base-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.1); /** Light shadow 1 at 2× the opacity: shadows barely show on a dark page. */
+  --co-base-shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12); /** Light shadow 2 at 2× the opacity: shadows barely show on a dark page. */
+  --co-base-shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12); /** Light shadow 3 at 2× the opacity: shadows barely show on a dark page. */
+  --co-base-shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); /** Light shadow 4 at 2× the opacity: shadows barely show on a dark page. */
+  --co-base-shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08); /** Light shadow 5 at 2× the opacity: shadows barely show on a dark page. */
+  --co-base-shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /** Light shadow 6 at 2× the opacity: shadows barely show on a dark page. */
+  --co-base-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.12); /** Light shadow inset at 2× the opacity: shadows barely show on a dark page. */
+  --co-base-opacity-scrim: 0.7; /** How strongly the scrim dims the dark page. */
+  --co-base-color-gray-100: #0f0f0f; /** Page background. oklch(0.168 0.000 0), 1.00:1 on the dark page. */
+  --co-base-color-gray-200: #171717; /** Subtle background. oklch(0.205 0.000 0), 1.07:1 on the dark page. */
+  --co-base-color-gray-300: #1e1e1e; /** Component fill at rest. oklch(0.235 0.000 0), 1.15:1 on the dark page. */
+  --co-base-color-gray-400: #252525; /** Component fill on hover. oklch(0.264 0.000 0), 1.25:1 on the dark page. */
+  --co-base-color-gray-500: #2c2c2c; /** Component fill pressed or selected. oklch(0.293 0.000 0), 1.37:1 on the dark page. */
+  --co-base-color-gray-600: #333333; /** Subtle border. oklch(0.321 0.000 0), 1.52:1 on the dark page. */
+  --co-base-color-gray-700: #414141; /** Default border, for dividers and decorative outlines. oklch(0.375 0.000 0), 1.88:1 on the dark page. */
+  --co-base-color-gray-800: #696969; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.521 0.000 0), 3.49:1 on the dark page. */
+  --co-base-color-gray-900: #7a7a7a; /** Solid fill. oklch(0.580 0.000 0), 4.47:1 on the dark page. */
+  --co-base-color-gray-1000: #898989; /** Solid fill on hover. oklch(0.630 0.000 0), 5.48:1 on the dark page. */
+  --co-base-color-gray-1100: #ababab; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.741 0.000 0), 8.35:1 on the dark page. */
+  --co-base-color-gray-1200: #ebebeb; /** Primary text, and the darkest step. oklch(0.940 0.000 0), 16.08:1 on the dark page. */
+  --co-base-color-gray-alpha-100: rgba(235, 235, 235, 0); /** Page background. Composites to gray.100 over the dark page. */
+  --co-base-color-gray-alpha-200: rgba(235, 235, 235, 0.036); /** Subtle background. Composites to gray.200 over the dark page. */
+  --co-base-color-gray-alpha-300: rgba(235, 235, 235, 0.068); /** Component fill at rest. Composites to gray.300 over the dark page. */
+  --co-base-color-gray-alpha-400: rgba(235, 235, 235, 0.1); /** Component fill on hover. Composites to gray.400 over the dark page. */
+  --co-base-color-gray-alpha-500: rgba(235, 235, 235, 0.132); /** Component fill pressed or selected. Composites to gray.500 over the dark page. */
+  --co-base-color-gray-alpha-600: rgba(235, 235, 235, 0.164); /** Subtle border. Composites to gray.600 over the dark page. */
+  --co-base-color-gray-alpha-700: rgba(235, 235, 235, 0.227); /** Default border, for dividers and decorative outlines. Composites to gray.700 over the dark page. */
+  --co-base-color-gray-alpha-800: rgba(235, 235, 235, 0.409); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to gray.800 over the dark page. */
+  --co-base-color-gray-alpha-900: rgba(235, 235, 235, 0.486); /** Solid fill. Composites to gray.900 over the dark page. */
+  --co-base-color-gray-alpha-1000: rgba(235, 235, 235, 0.555); /** Solid fill on hover. Composites to gray.1000 over the dark page. */
+  --co-base-color-gray-alpha-1100: rgba(235, 235, 235, 0.709); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to gray.1100 over the dark page. */
+  --co-base-color-gray-alpha-1200: rgba(235, 235, 235, 1); /** Primary text, and the darkest step. Composites to gray.1200 over the dark page. */
+  --co-base-color-gray-alpha-inverse-100: rgba(15, 15, 15, 0.014); /** Page background. The dark page's grey at gray-alpha.100's opacity. */
+  --co-base-color-gray-alpha-inverse-200: rgba(15, 15, 15, 0.027); /** Subtle background. The dark page's grey at gray-alpha.200's opacity. */
+  --co-base-color-gray-alpha-inverse-300: rgba(15, 15, 15, 0.059); /** Component fill at rest. The dark page's grey at gray-alpha.300's opacity. */
+  --co-base-color-gray-alpha-inverse-400: rgba(15, 15, 15, 0.09); /** Component fill on hover. The dark page's grey at gray-alpha.400's opacity. */
+  --co-base-color-gray-alpha-inverse-500: rgba(15, 15, 15, 0.122); /** Component fill pressed or selected. The dark page's grey at gray-alpha.500's opacity. */
+  --co-base-color-gray-alpha-inverse-600: rgba(15, 15, 15, 0.158); /** Subtle border. The dark page's grey at gray-alpha.600's opacity. */
+  --co-base-color-gray-alpha-inverse-700: rgba(15, 15, 15, 0.208); /** Default border, for dividers and decorative outlines. The dark page's grey at gray-alpha.700's opacity. */
+  --co-base-color-gray-alpha-inverse-800: rgba(15, 15, 15, 0.502); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). The dark page's grey at gray-alpha.800's opacity. */
+  --co-base-color-gray-alpha-inverse-900: rgba(15, 15, 15, 0.557); /** Solid fill. The dark page's grey at gray-alpha.900's opacity. */
+  --co-base-color-gray-alpha-inverse-1000: rgba(15, 15, 15, 0.606); /** Solid fill on hover. The dark page's grey at gray-alpha.1000's opacity. */
+  --co-base-color-gray-alpha-inverse-1100: rgba(15, 15, 15, 0.706); /** Secondary text: at least 4.5:1 on 100 to 500 and white. The dark page's grey at gray-alpha.1100's opacity. */
+  --co-base-color-gray-alpha-inverse-1200: rgba(15, 15, 15, 1); /** Primary text, and the darkest step. The dark page's grey at gray-alpha.1200's opacity. */
+  --co-base-color-accent-100: #0e0f10; /** Page background. oklch(0.168 0.003 248), 1.00:1 on the dark page. */
+  --co-base-color-accent-200: #161719; /** Subtle background. oklch(0.204 0.004 264), 1.07:1 on the dark page. */
+  --co-base-color-accent-300: #1b1e23; /** Component fill at rest. oklch(0.234 0.011 261), 1.15:1 on the dark page. */
+  --co-base-color-accent-400: #1f262e; /** Component fill on hover. oklch(0.265 0.018 252), 1.26:1 on the dark page. */
+  --co-base-color-accent-500: #232d39; /** Component fill pressed or selected. oklch(0.293 0.026 253), 1.37:1 on the dark page. */
+  --co-base-color-accent-600: #253447; /** Subtle border. oklch(0.321 0.040 255), 1.52:1 on the dark page. */
+  --co-base-color-accent-700: #2d425e; /** Default border, for dividers and decorative outlines. oklch(0.375 0.055 256), 1.87:1 on the dark page. */
+  --co-base-color-accent-800: #0068ca; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.525 0.172 255), 3.50:1 on the dark page. */
+  --co-base-color-accent-900: #0079e9; /** Solid fill. oklch(0.584 0.192 255), 4.48:1 on the dark page. */
+  --co-base-color-accent-1000: #1688ff; /** Solid fill on hover. oklch(0.634 0.200 255), 5.48:1 on the dark page. */
+  --co-base-color-accent-1100: #6eaeff; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.742 0.135 255), 8.36:1 on the dark page. */
+  --co-base-color-accent-1200: #e3ecf7; /** Primary text, and the darkest step. oklch(0.940 0.018 253), 16.07:1 on the dark page. */
+  --co-base-color-accent-solid: #0058ae; /** Solid fill that carries a label: the light ink reads on it at 5.86:1, the light theme's secondary-text contrast. */
+  --co-base-color-accent-alpha-100: rgba(0, 15, 30, 0.067); /** Page background. Composites to accent.100 over the dark page. */
+  --co-base-color-accent-alpha-200: rgba(182, 205, 253, 0.042); /** Subtle background. Composites to accent.200 over the dark page. */
+  --co-base-color-accent-alpha-300: rgba(158, 194, 253, 0.084); /** Component fill at rest. Composites to accent.300 over the dark page. */
+  --co-base-color-accent-alpha-400: rgba(138, 192, 253, 0.13); /** Component fill on hover. Composites to accent.400 over the dark page. */
+  --co-base-color-accent-alpha-500: rgba(129, 186, 255, 0.175); /** Component fill pressed or selected. Composites to accent.500 over the dark page. */
+  --co-base-color-accent-alpha-600: rgba(109, 173, 254, 0.234); /** Subtle border. Composites to accent.600 over the dark page. */
+  --co-base-color-accent-alpha-700: rgba(106, 170, 254, 0.33); /** Default border, for dividers and decorative outlines. Composites to accent.700 over the dark page. */
+  --co-base-color-accent-alpha-800: rgba(0, 104, 202, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to accent.800 over the dark page. */
+  --co-base-color-accent-alpha-900: rgba(0, 121, 233, 1); /** Solid fill. Composites to accent.900 over the dark page. */
+  --co-base-color-accent-alpha-1000: rgba(22, 136, 255, 1); /** Solid fill on hover. Composites to accent.1000 over the dark page. */
+  --co-base-color-accent-alpha-1100: rgba(110, 174, 255, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to accent.1100 over the dark page. */
+  --co-base-color-accent-alpha-1200: rgba(234, 244, 255, 0.967); /** Primary text, and the darkest step. Composites to accent.1200 over the dark page. */
+  --co-base-color-success-100: #0d100e; /** Page background. oklch(0.169 0.006 156), 1.00:1 on the dark page. */
+  --co-base-color-success-200: #101914; /** Subtle background. oklch(0.203 0.017 160), 1.07:1 on the dark page. */
+  --co-base-color-success-300: #0a2317; /** Component fill at rest. oklch(0.232 0.039 160), 1.16:1 on the dark page. */
+  --co-base-color-success-400: #002c19; /** Component fill on hover. oklch(0.258 0.059 159), 1.25:1 on the dark page. */
+  --co-base-color-success-500: #00341f; /** Component fill pressed or selected. oklch(0.287 0.065 160), 1.38:1 on the dark page. */
+  --co-base-color-success-600: #003c24; /** Subtle border. oklch(0.314 0.072 160), 1.53:1 on the dark page. */
+  --co-base-color-success-700: #004b2f; /** Default border, for dividers and decorative outlines. oklch(0.364 0.082 160), 1.87:1 on the dark page. */
+  --co-base-color-success-800: #00794e; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.508 0.115 160), 3.51:1 on the dark page. */
+  --co-base-color-success-900: #008c5b; /** Solid fill. oklch(0.565 0.128 160), 4.47:1 on the dark page. */
+  --co-base-color-success-1000: #009d67; /** Solid fill on hover. oklch(0.614 0.139 160), 5.49:1 on the dark page. */
+  --co-base-color-success-1100: #00c381; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.721 0.163 160), 8.33:1 on the dark page. */
+  --co-base-color-success-1200: #c5f6da; /** Primary text, and the darkest step. oklch(0.931 0.063 160), 16.04:1 on the dark page. */
+  --co-base-color-success-solid: #006742; /** Solid fill that carries a label: the light ink reads on it at 5.84:1, the light theme's secondary-text contrast. */
+  --co-base-color-success-alpha-100: rgba(0, 22, 8, 0.134); /** Page background. Composites to success.100 over the dark page. */
+  --co-base-color-success-alpha-200: rgba(39, 253, 134, 0.042); /** Subtle background. Composites to success.200 over the dark page. */
+  --co-base-color-success-alpha-300: rgba(0, 75, 39, 0.334); /** Component fill at rest. Composites to success.300 over the dark page. */
+  --co-base-color-success-alpha-400: rgba(0, 44, 25, 1); /** Component fill on hover. Composites to success.400 over the dark page. */
+  --co-base-color-success-alpha-500: rgba(0, 52, 31, 1); /** Component fill pressed or selected. Composites to success.500 over the dark page. */
+  --co-base-color-success-alpha-600: rgba(0, 60, 36, 1); /** Subtle border. Composites to success.600 over the dark page. */
+  --co-base-color-success-alpha-700: rgba(0, 75, 47, 1); /** Default border, for dividers and decorative outlines. Composites to success.700 over the dark page. */
+  --co-base-color-success-alpha-800: rgba(0, 121, 78, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to success.800 over the dark page. */
+  --co-base-color-success-alpha-900: rgba(0, 140, 91, 1); /** Solid fill. Composites to success.900 over the dark page. */
+  --co-base-color-success-alpha-1000: rgba(0, 157, 103, 1); /** Solid fill on hover. Composites to success.1000 over the dark page. */
+  --co-base-color-success-alpha-1100: rgba(0, 195, 129, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to success.1100 over the dark page. */
+  --co-base-color-success-alpha-1200: rgba(204, 255, 226, 0.963); /** Primary text, and the darkest step. Composites to success.1200 over the dark page. */
+  --co-base-color-warning-100: #100f0e; /** Page background. oklch(0.169 0.003 68), 1.00:1 on the dark page. */
+  --co-base-color-warning-200: #191714; /** Subtle background. oklch(0.206 0.007 78), 1.07:1 on the dark page. */
+  --co-base-color-warning-300: #231d13; /** Component fill at rest. oklch(0.234 0.020 80), 1.15:1 on the dark page. */
+  --co-base-color-warning-400: #2f2310; /** Component fill on hover. oklch(0.265 0.036 78), 1.25:1 on the dark page. */
+  --co-base-color-warning-500: #3a2909; /** Component fill pressed or selected. oklch(0.294 0.052 80), 1.37:1 on the dark page. */
+  --co-base-color-warning-600: #452f00; /** Subtle border. oklch(0.323 0.067 80), 1.51:1 on the dark page. */
+  --co-base-color-warning-700: #573c00; /** Default border, for dividers and decorative outlines. oklch(0.377 0.078 80), 1.87:1 on the dark page. */
+  --co-base-color-warning-800: #8b6200; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.525 0.109 80), 3.51:1 on the dark page. */
+  --co-base-color-warning-900: #a07200; /** Solid fill. oklch(0.584 0.121 80), 4.47:1 on the dark page. */
+  --co-base-color-warning-1000: #b48000; /** Solid fill on hover. oklch(0.635 0.132 80), 5.50:1 on the dark page. */
+  --co-base-color-warning-1100: #dfa000; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.747 0.155 80), 8.37:1 on the dark page. */
+  --co-base-color-warning-1200: #f7e9d3; /** Primary text, and the darkest step. oklch(0.939 0.033 79), 16.02:1 on the dark page. */
+  --co-base-color-warning-solid: #765300; /** Solid fill that carries a label: the light ink reads on it at 5.86:1, the light theme's secondary-text contrast. */
+  --co-base-color-warning-alpha-100: rgba(30, 15, 0, 0.067); /** Page background. Composites to warning.100 over the dark page. */
+  --co-base-color-warning-alpha-200: rgba(253, 205, 134, 0.042); /** Subtle background. Composites to warning.200 over the dark page. */
+  --co-base-color-warning-alpha-300: rgba(253, 182, 63, 0.084); /** Component fill at rest. Composites to warning.300 over the dark page. */
+  --co-base-color-warning-alpha-400: rgba(254, 164, 22, 0.134); /** Component fill on hover. Composites to warning.400 over the dark page. */
+  --co-base-color-warning-alpha-500: rgba(123, 80, 0, 0.4); /** Component fill pressed or selected. Composites to warning.500 over the dark page. */
+  --co-base-color-warning-alpha-600: rgba(69, 47, 0, 1); /** Subtle border. Composites to warning.600 over the dark page. */
+  --co-base-color-warning-alpha-700: rgba(87, 60, 0, 1); /** Default border, for dividers and decorative outlines. Composites to warning.700 over the dark page. */
+  --co-base-color-warning-alpha-800: rgba(139, 98, 0, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to warning.800 over the dark page. */
+  --co-base-color-warning-alpha-900: rgba(160, 114, 0, 1); /** Solid fill. Composites to warning.900 over the dark page. */
+  --co-base-color-warning-alpha-1000: rgba(180, 128, 0, 1); /** Solid fill on hover. Composites to warning.1000 over the dark page. */
+  --co-base-color-warning-alpha-1100: rgba(223, 160, 0, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to warning.1100 over the dark page. */
+  --co-base-color-warning-alpha-1200: rgba(255, 240, 218, 0.967); /** Primary text, and the darkest step. Composites to warning.1200 over the dark page. */
+  --co-base-color-serious-100: #100f0e; /** Page background. oklch(0.169 0.003 68), 1.00:1 on the dark page. */
+  --co-base-color-serious-200: #191615; /** Subtle background. oklch(0.203 0.005 39), 1.07:1 on the dark page. */
+  --co-base-color-serious-300: #241d19; /** Component fill at rest. oklch(0.238 0.013 52), 1.15:1 on the dark page. */
+  --co-base-color-serious-400: #2e231d; /** Component fill on hover. oklch(0.267 0.020 50), 1.25:1 on the dark page. */
+  --co-base-color-serious-500: #392820; /** Component fill pressed or selected. oklch(0.295 0.029 46), 1.37:1 on the dark page. */
+  --co-base-color-serious-600: #462d21; /** Subtle border. oklch(0.324 0.042 46), 1.51:1 on the dark page. */
+  --co-base-color-serious-700: #5e3824; /** Default border, for dividers and decorative outlines. oklch(0.382 0.063 48), 1.89:1 on the dark page. */
+  --co-base-color-serious-800: #af4b00; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.535 0.148 47), 3.50:1 on the dark page. */
+  --co-base-color-serious-900: #ca5800; /** Solid fill. oklch(0.596 0.164 47), 4.48:1 on the dark page. */
+  --co-base-color-serious-1000: #e26300; /** Solid fill on hover. oklch(0.648 0.179 47), 5.49:1 on the dark page. */
+  --co-base-color-serious-1100: #ff8c50; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.755 0.158 47), 8.32:1 on the dark page. */
+  --co-base-color-serious-1200: #f7e8e1; /** Primary text, and the darkest step. oklch(0.941 0.019 47), 16.05:1 on the dark page. */
+  --co-base-color-serious-solid: #963f00; /** Solid fill that carries a label: the light ink reads on it at 5.86:1, the light theme's secondary-text contrast. */
+  --co-base-color-serious-alpha-100: rgba(30, 15, 0, 0.067); /** Page background. Composites to serious.100 over the dark page. */
+  --co-base-color-serious-alpha-200: rgba(253, 182, 158, 0.042); /** Subtle background. Composites to serious.200 over the dark page. */
+  --co-base-color-serious-alpha-300: rgba(254, 174, 129, 0.088); /** Component fill at rest. Composites to serious.300 over the dark page. */
+  --co-base-color-serious-alpha-400: rgba(253, 169, 123, 0.13); /** Component fill on hover. Composites to serious.400 over the dark page. */
+  --co-base-color-serious-alpha-500: rgba(255, 158, 112, 0.175); /** Component fill pressed or selected. Composites to serious.500 over the dark page. */
+  --co-base-color-serious-alpha-600: rgba(254, 145, 93, 0.23); /** Subtle border. Composites to serious.600 over the dark page. */
+  --co-base-color-serious-alpha-700: rgba(254, 139, 79, 0.33); /** Default border, for dividers and decorative outlines. Composites to serious.700 over the dark page. */
+  --co-base-color-serious-alpha-800: rgba(175, 75, 0, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to serious.800 over the dark page. */
+  --co-base-color-serious-alpha-900: rgba(202, 88, 0, 1); /** Solid fill. Composites to serious.900 over the dark page. */
+  --co-base-color-serious-alpha-1000: rgba(226, 99, 0, 1); /** Solid fill on hover. Composites to serious.1000 over the dark page. */
+  --co-base-color-serious-alpha-1100: rgba(255, 140, 80, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to serious.1100 over the dark page. */
+  --co-base-color-serious-alpha-1200: rgba(255, 239, 232, 0.967); /** Primary text, and the darkest step. Composites to serious.1200 over the dark page. */
+  --co-base-color-danger-100: #100f0f; /** Page background. oklch(0.170 0.002 17), 1.00:1 on the dark page. */
+  --co-base-color-danger-200: #191616; /** Subtle background. oklch(0.204 0.005 18), 1.07:1 on the dark page. */
+  --co-base-color-danger-300: #231c1b; /** Component fill at rest. oklch(0.234 0.011 28), 1.14:1 on the dark page. */
+  --co-base-color-danger-400: #2e2220; /** Component fill on hover. oklch(0.266 0.019 29), 1.25:1 on the dark page. */
+  --co-base-color-danger-500: #3a2825; /** Component fill pressed or selected. oklch(0.297 0.028 29), 1.38:1 on the dark page. */
+  --co-base-color-danger-600: #472c28; /** Subtle border. oklch(0.325 0.041 29), 1.51:1 on the dark page. */
+  --co-base-color-danger-700: #5e3731; /** Default border, for dividers and decorative outlines. oklch(0.383 0.057 29), 1.89:1 on the dark page. */
+  --co-base-color-danger-800: #d50003; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.548 0.225 29), 3.50:1 on the dark page. */
+  --co-base-color-danger-900: #f50004; /** Solid fill. oklch(0.609 0.250 29), 4.46:1 on the dark page. */
+  --co-base-color-danger-1000: #ff3f31; /** Solid fill on hover. oklch(0.657 0.229 29), 5.48:1 on the dark page. */
+  --co-base-color-danger-1100: #ff8a7a; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.758 0.145 29), 8.37:1 on the dark page. */
+  --co-base-color-danger-1200: #f7e8e5; /** Primary text, and the darkest step. oklch(0.942 0.017 31), 16.09:1 on the dark page. */
+  --co-base-color-danger-solid: #b70002; /** Solid fill that carries a label: the light ink reads on it at 5.84:1, the light theme's secondary-text contrast. */
+  --co-base-color-danger-alpha-100: rgba(215, 15, 15, 0.005); /** Page background. Composites to danger.100 over the dark page. */
+  --co-base-color-danger-alpha-200: rgba(253, 182, 182, 0.042); /** Subtle background. Composites to danger.200 over the dark page. */
+  --co-base-color-danger-alpha-300: rgba(253, 170, 158, 0.084); /** Component fill at rest. Composites to danger.300 over the dark page. */
+  --co-base-color-danger-alpha-400: rgba(253, 161, 146, 0.13); /** Component fill on hover. Composites to danger.400 over the dark page. */
+  --co-base-color-danger-alpha-500: rgba(254, 154, 137, 0.18); /** Component fill pressed or selected. Composites to danger.500 over the dark page. */
+  --co-base-color-danger-alpha-600: rgba(254, 139, 122, 0.234); /** Subtle border. Composites to danger.600 over the dark page. */
+  --co-base-color-danger-alpha-700: rgba(254, 136, 118, 0.33); /** Default border, for dividers and decorative outlines. Composites to danger.700 over the dark page. */
+  --co-base-color-danger-alpha-800: rgba(213, 0, 3, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to danger.800 over the dark page. */
+  --co-base-color-danger-alpha-900: rgba(245, 0, 4, 1); /** Solid fill. Composites to danger.900 over the dark page. */
+  --co-base-color-danger-alpha-1000: rgba(255, 63, 49, 1); /** Solid fill on hover. Composites to danger.1000 over the dark page. */
+  --co-base-color-danger-alpha-1100: rgba(255, 138, 122, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to danger.1100 over the dark page. */
+  --co-base-color-danger-alpha-1200: rgba(255, 239, 236, 0.967); /** Primary text, and the darkest step. Composites to danger.1200 over the dark page. */
+  --co-base-color-ai-100: #0f0f10; /** Page background. oklch(0.169 0.002 286), 1.00:1 on the dark page. */
+  --co-base-color-ai-200: #181719; /** Subtle background. oklch(0.207 0.004 308), 1.07:1 on the dark page. */
+  --co-base-color-ai-300: #201d24; /** Component fill at rest. oklch(0.237 0.014 305), 1.15:1 on the dark page. */
+  --co-base-color-ai-400: #28232f; /** Component fill on hover. oklch(0.267 0.023 304), 1.25:1 on the dark page. */
+  --co-base-color-ai-500: #31293a; /** Component fill pressed or selected. oklch(0.297 0.032 306), 1.38:1 on the dark page. */
+  --co-base-color-ai-600: #3a2e47; /** Subtle border. oklch(0.325 0.046 306), 1.52:1 on the dark page. */
+  --co-base-color-ai-700: #4b395f; /** Default border, for dividers and decorative outlines. oklch(0.381 0.067 305), 1.87:1 on the dark page. */
+  --co-base-color-ai-800: #9f00f8; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.561 0.291 305), 3.50:1 on the dark page. */
+  --co-base-color-ai-900: #ab40ff; /** Solid fill. oklch(0.614 0.265 305), 4.48:1 on the dark page. */
+  --co-base-color-ai-1000: #b35fff; /** Solid fill on hover. oklch(0.657 0.231 305), 5.47:1 on the dark page. */
+  --co-base-color-ai-1100: #c794ff; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.756 0.157 305), 8.31:1 on the dark page. */
+  --co-base-color-ai-1200: #efe9f7; /** Primary text, and the darkest step. oklch(0.943 0.020 305), 16.13:1 on the dark page. */
+  --co-base-color-ai-alpha-100: rgba(15, 15, 215, 0.005); /** Page background. Composites to ai.100 over the dark page. */
+  --co-base-color-ai-alpha-200: rgba(229, 205, 253, 0.042); /** Subtle background. Composites to ai.200 over the dark page. */
+  --co-base-color-ai-alpha-300: rgba(208, 174, 254, 0.088); /** Component fill at rest. Composites to ai.300 over the dark page. */
+  --co-base-color-ai-alpha-400: rgba(202, 164, 254, 0.134); /** Component fill on hover. Composites to ai.400 over the dark page. */
+  --co-base-color-ai-alpha-500: rgba(204, 159, 254, 0.18); /** Component fill pressed or selected. Composites to ai.500 over the dark page. */
+  --co-base-color-ai-alpha-600: rgba(199, 147, 254, 0.234); /** Subtle border. Composites to ai.600 over the dark page. */
+  --co-base-color-ai-alpha-700: rgba(195, 141, 255, 0.334); /** Default border, for dividers and decorative outlines. Composites to ai.700 over the dark page. */
+  --co-base-color-ai-alpha-800: rgba(159, 0, 248, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to ai.800 over the dark page. */
+  --co-base-color-ai-alpha-900: rgba(171, 64, 255, 1); /** Solid fill. Composites to ai.900 over the dark page. */
+  --co-base-color-ai-alpha-1000: rgba(179, 95, 255, 1); /** Solid fill on hover. Composites to ai.1000 over the dark page. */
+  --co-base-color-ai-alpha-1100: rgba(199, 148, 255, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to ai.1100 over the dark page. */
+  --co-base-color-ai-alpha-1200: rgba(247, 240, 255, 0.967); /** Primary text, and the darkest step. Composites to ai.1200 over the dark page. */
+  --co-base-color-olive-100: #0e100a; /** Page background. oklch(0.168 0.012 123), 1.00:1 on the dark page. */
+  --co-base-color-olive-200: #16180b; /** Subtle background. oklch(0.203 0.024 116), 1.07:1 on the dark page. */
+  --co-base-color-olive-300: #1c2005; /** Component fill at rest. oklch(0.232 0.045 117), 1.15:1 on the dark page. */
+  --co-base-color-olive-400: #232800; /** Component fill on hover. oklch(0.263 0.060 117), 1.26:1 on the dark page. */
+  --co-base-color-olive-500: #292f00; /** Component fill pressed or selected. oklch(0.289 0.067 117), 1.37:1 on the dark page. */
+  --co-base-color-olive-600: #303700; /** Subtle border. oklch(0.319 0.074 117), 1.53:1 on the dark page. */
+  --co-base-color-olive-700: #3d4500; /** Default border, for dividers and decorative outlines. oklch(0.370 0.085 117), 1.87:1 on the dark page. */
+  --co-base-color-olive-800: #636f00; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.514 0.118 117), 3.47:1 on the dark page. */
+  --co-base-color-olive-900: #738100; /** Solid fill. oklch(0.572 0.132 117), 4.44:1 on the dark page. */
+  --co-base-color-olive-1000: #829100; /** Solid fill on hover. oklch(0.623 0.143 117), 5.48:1 on the dark page. */
+  --co-base-color-olive-1100: #a2b500; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.733 0.169 117), 8.35:1 on the dark page. */
+  --co-base-color-olive-1200: #e3f48d; /** Primary text, and the darkest step. oklch(0.932 0.129 117), 16.06:1 on the dark page. */
+  --co-base-color-olive-alpha-100: rgba(12, 18, 0, 0.334); /** Page background. Composites to olive.100 over the dark page. */
+  --co-base-color-olive-alpha-200: rgba(41, 49, 0, 0.267); /** Subtle background. Composites to olive.200 over the dark page. */
+  --co-base-color-olive-alpha-300: rgba(34, 40, 0, 0.667); /** Component fill at rest. Composites to olive.300 over the dark page. */
+  --co-base-color-olive-alpha-400: rgba(35, 40, 0, 1); /** Component fill on hover. Composites to olive.400 over the dark page. */
+  --co-base-color-olive-alpha-500: rgba(41, 47, 0, 1); /** Component fill pressed or selected. Composites to olive.500 over the dark page. */
+  --co-base-color-olive-alpha-600: rgba(48, 55, 0, 1); /** Subtle border. Composites to olive.600 over the dark page. */
+  --co-base-color-olive-alpha-700: rgba(61, 69, 0, 1); /** Default border, for dividers and decorative outlines. Composites to olive.700 over the dark page. */
+  --co-base-color-olive-alpha-800: rgba(99, 111, 0, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to olive.800 over the dark page. */
+  --co-base-color-olive-alpha-900: rgba(115, 129, 0, 1); /** Solid fill. Composites to olive.900 over the dark page. */
+  --co-base-color-olive-alpha-1000: rgba(130, 145, 0, 1); /** Solid fill on hover. Composites to olive.1000 over the dark page. */
+  --co-base-color-olive-alpha-1100: rgba(162, 181, 0, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to olive.1100 over the dark page. */
+  --co-base-color-olive-alpha-1200: rgba(237, 255, 147, 0.955); /** Primary text, and the darkest step. Composites to olive.1200 over the dark page. */
+  --co-base-color-periwinkle-100: #0f0f0f; /** Page background. oklch(0.168 0.000 0), 1.00:1 on the dark page. */
+  --co-base-color-periwinkle-200: #171719; /** Subtle background. oklch(0.205 0.004 286), 1.07:1 on the dark page. */
+  --co-base-color-periwinkle-300: #1d1e23; /** Component fill at rest. oklch(0.236 0.010 277), 1.15:1 on the dark page. */
+  --co-base-color-periwinkle-400: #23252f; /** Component fill on hover. oklch(0.267 0.019 276), 1.26:1 on the dark page. */
+  --co-base-color-periwinkle-500: #292b3a; /** Component fill pressed or selected. oklch(0.294 0.027 279), 1.37:1 on the dark page. */
+  --co-base-color-periwinkle-600: #2e3248; /** Subtle border. oklch(0.323 0.040 276), 1.52:1 on the dark page. */
+  --co-base-color-periwinkle-700: #3a3f5f; /** Default border, for dividers and decorative outlines. oklch(0.378 0.055 277), 1.88:1 on the dark page. */
+  --co-base-color-periwinkle-800: #574aff; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.546 0.255 277), 3.49:1 on the dark page. */
+  --co-base-color-periwinkle-900: #6566ff; /** Solid fill. oklch(0.597 0.221 277), 4.47:1 on the dark page. */
+  --co-base-color-periwinkle-1000: #737bff; /** Solid fill on hover. oklch(0.643 0.193 277), 5.48:1 on the dark page. */
+  --co-base-color-periwinkle-1100: #99a5ff; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.749 0.130 277), 8.38:1 on the dark page. */
+  --co-base-color-periwinkle-1200: #e8ebf7; /** Primary text, and the darkest step. oklch(0.941 0.016 275), 16.12:1 on the dark page. */
+  --co-base-color-periwinkle-alpha-100: rgba(15, 15, 15, 0); /** Page background. Composites to periwinkle.100 over the dark page. */
+  --co-base-color-periwinkle-alpha-200: rgba(205, 205, 253, 0.042); /** Subtle background. Composites to periwinkle.200 over the dark page. */
+  --co-base-color-periwinkle-alpha-300: rgba(182, 194, 253, 0.084); /** Component fill at rest. Composites to periwinkle.300 over the dark page. */
+  --co-base-color-periwinkle-alpha-400: rgba(164, 179, 254, 0.134); /** Component fill on hover. Composites to periwinkle.400 over the dark page. */
+  --co-base-color-periwinkle-alpha-500: rgba(159, 171, 254, 0.18); /** Component fill pressed or selected. Composites to periwinkle.500 over the dark page. */
+  --co-base-color-periwinkle-alpha-600: rgba(145, 162, 254, 0.238); /** Subtle border. Composites to periwinkle.600 over the dark page. */
+  --co-base-color-periwinkle-alpha-700: rgba(144, 159, 255, 0.334); /** Default border, for dividers and decorative outlines. Composites to periwinkle.700 over the dark page. */
+  --co-base-color-periwinkle-alpha-800: rgba(87, 74, 255, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to periwinkle.800 over the dark page. */
+  --co-base-color-periwinkle-alpha-900: rgba(101, 102, 255, 1); /** Solid fill. Composites to periwinkle.900 over the dark page. */
+  --co-base-color-periwinkle-alpha-1000: rgba(115, 123, 255, 1); /** Solid fill on hover. Composites to periwinkle.1000 over the dark page. */
+  --co-base-color-periwinkle-alpha-1100: rgba(153, 165, 255, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to periwinkle.1100 over the dark page. */
+  --co-base-color-periwinkle-alpha-1200: rgba(239, 243, 255, 0.967); /** Primary text, and the darkest step. Composites to periwinkle.1200 over the dark page. */
+  --co-base-color-rose-100: #100f0f; /** Page background. oklch(0.170 0.002 17), 1.00:1 on the dark page. */
+  --co-base-color-rose-200: #191617; /** Subtle background. oklch(0.204 0.005 355), 1.07:1 on the dark page. */
+  --co-base-color-rose-300: #241c1e; /** Component fill at rest. oklch(0.237 0.013 1), 1.15:1 on the dark page. */
+  --co-base-color-rose-400: #2e2225; /** Component fill on hover. oklch(0.267 0.019 2), 1.25:1 on the dark page. */
+  --co-base-color-rose-500: #3a272b; /** Component fill pressed or selected. oklch(0.297 0.029 5), 1.37:1 on the dark page. */
+  --co-base-color-rose-600: #462b32; /** Subtle border. oklch(0.325 0.041 3), 1.51:1 on the dark page. */
+  --co-base-color-rose-700: #5e353f; /** Default border, for dividers and decorative outlines. oklch(0.383 0.060 5), 1.88:1 on the dark page. */
+  --co-base-color-rose-800: #cf0063; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.550 0.222 4), 3.50:1 on the dark page. */
+  --co-base-color-rose-900: #ee0073; /** Solid fill. oklch(0.611 0.246 4), 4.46:1 on the dark page. */
+  --co-base-color-rose-1000: #ff3182; /** Solid fill on hover. oklch(0.662 0.241 4), 5.49:1 on the dark page. */
+  --co-base-color-rose-1100: #ff85a6; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.761 0.151 4), 8.36:1 on the dark page. */
+  --co-base-color-rose-1200: #f7e7ea; /** Primary text, and the darkest step. oklch(0.942 0.018 5), 16.04:1 on the dark page. */
+  --co-base-color-rose-alpha-100: rgba(215, 15, 15, 0.005); /** Page background. Composites to rose.100 over the dark page. */
+  --co-base-color-rose-alpha-200: rgba(253, 182, 205, 0.042); /** Subtle background. Composites to rose.200 over the dark page. */
+  --co-base-color-rose-alpha-300: rgba(254, 163, 185, 0.088); /** Component fill at rest. Composites to rose.300 over the dark page. */
+  --co-base-color-rose-alpha-400: rgba(253, 161, 184, 0.13); /** Component fill on hover. Composites to rose.400 over the dark page. */
+  --co-base-color-rose-alpha-500: rgba(254, 148, 171, 0.18); /** Component fill pressed or selected. Composites to rose.500 over the dark page. */
+  --co-base-color-rose-alpha-600: rgba(254, 137, 167, 0.23); /** Subtle border. Composites to rose.600 over the dark page. */
+  --co-base-color-rose-alpha-700: rgba(254, 130, 160, 0.33); /** Default border, for dividers and decorative outlines. Composites to rose.700 over the dark page. */
+  --co-base-color-rose-alpha-800: rgba(207, 0, 99, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to rose.800 over the dark page. */
+  --co-base-color-rose-alpha-900: rgba(238, 0, 115, 1); /** Solid fill. Composites to rose.900 over the dark page. */
+  --co-base-color-rose-alpha-1000: rgba(255, 49, 130, 1); /** Solid fill on hover. Composites to rose.1000 over the dark page. */
+  --co-base-color-rose-alpha-1100: rgba(255, 133, 166, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to rose.1100 over the dark page. */
+  --co-base-color-rose-alpha-1200: rgba(255, 238, 241, 0.967); /** Primary text, and the darkest step. Composites to rose.1200 over the dark page. */
+  --co-base-color-magenta-100: #100f10; /** Page background. oklch(0.170 0.003 326), 1.00:1 on the dark page. */
+  --co-base-color-magenta-200: #191619; /** Subtle background. oklch(0.205 0.007 326), 1.07:1 on the dark page. */
+  --co-base-color-magenta-300: #241c23; /** Component fill at rest. oklch(0.239 0.018 330), 1.16:1 on the dark page. */
+  --co-base-color-magenta-400: #2e212d; /** Component fill on hover. oklch(0.268 0.029 329), 1.25:1 on the dark page. */
+  --co-base-color-magenta-500: #3a2539; /** Component fill pressed or selected. oklch(0.299 0.046 328), 1.37:1 on the dark page. */
+  --co-base-color-magenta-600: #472945; /** Subtle border. oklch(0.330 0.062 329), 1.53:1 on the dark page. */
+  --co-base-color-magenta-700: #5e305c; /** Default border, for dividers and decorative outlines. oklch(0.386 0.092 329), 1.87:1 on the dark page. */
+  --co-base-color-magenta-800: #bb00b9; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.555 0.254 329), 3.48:1 on the dark page. */
+  --co-base-color-magenta-900: #d800d6; /** Solid fill. oklch(0.618 0.283 329), 4.46:1 on the dark page. */
+  --co-base-color-magenta-1000: #f200ef; /** Solid fill on hover. oklch(0.673 0.308 329), 5.50:1 on the dark page. */
+  --co-base-color-magenta-1100: #ff74fa; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.770 0.228 329), 8.33:1 on the dark page. */
+  --co-base-color-magenta-1200: #f8e6f6; /** Primary text, and the darkest step. oklch(0.944 0.029 329), 16.10:1 on the dark page. */
+  --co-base-color-magenta-alpha-100: rgba(215, 15, 215, 0.005); /** Page background. Composites to magenta.100 over the dark page. */
+  --co-base-color-magenta-alpha-200: rgba(253, 182, 253, 0.042); /** Subtle background. Composites to magenta.200 over the dark page. */
+  --co-base-color-magenta-alpha-300: rgba(254, 163, 242, 0.088); /** Component fill at rest. Composites to magenta.300 over the dark page. */
+  --co-base-color-magenta-alpha-400: rgba(253, 153, 246, 0.13); /** Component fill on hover. Composites to magenta.400 over the dark page. */
+  --co-base-color-magenta-alpha-500: rgba(254, 137, 248, 0.18); /** Component fill pressed or selected. Composites to magenta.500 over the dark page. */
+  --co-base-color-magenta-alpha-600: rgba(254, 126, 246, 0.234); /** Subtle border. Composites to magenta.600 over the dark page. */
+  --co-base-color-magenta-alpha-700: rgba(254, 115, 248, 0.33); /** Default border, for dividers and decorative outlines. Composites to magenta.700 over the dark page. */
+  --co-base-color-magenta-alpha-800: rgba(187, 0, 185, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to magenta.800 over the dark page. */
+  --co-base-color-magenta-alpha-900: rgba(216, 0, 214, 1); /** Solid fill. Composites to magenta.900 over the dark page. */
+  --co-base-color-magenta-alpha-1000: rgba(242, 0, 239, 1); /** Solid fill on hover. Composites to magenta.1000 over the dark page. */
+  --co-base-color-magenta-alpha-1100: rgba(255, 116, 250, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to magenta.1100 over the dark page. */
+  --co-base-color-magenta-alpha-1200: rgba(255, 236, 253, 0.971); /** Primary text, and the darkest step. Composites to magenta.1200 over the dark page. */
+  --co-base-color-surface-page: var(--co-base-color-gray-100); /** Surface page: higher surfaces are lighter. */
+  --co-base-color-surface-raised: var(--co-base-color-gray-200); /** Surface raised: higher surfaces are lighter. */
+  --co-base-color-surface-overlay: var(--co-base-color-gray-300); /** Surface overlay: higher surfaces are lighter. */
+  --co-base-color-ink-light: var(--co-base-color-gray-1200); /** The light end of the neutral ramp. */
+  --co-base-color-ink-dark: var(--co-base-color-gray-100); /** The dark end of the neutral ramp. */
+  --co-semantic-elevation-inset: var(--co-base-shadow-inset);
+  --co-semantic-elevation-raised: var(--co-base-shadow-2);
+  --co-semantic-elevation-floating: var(--co-base-shadow-4);
+  --co-semantic-elevation-overlay: var(--co-base-shadow-5);
+  --co-semantic-elevation-sticky: var(--co-base-shadow-3);
+  --co-semantic-border-default: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-default);
+  --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-focus);
+  --co-semantic-border-input-hover: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-input-hover);
+  --co-semantic-color-text-default: var(--co-base-color-gray-1200);
+  --co-semantic-color-text-inverse: var(--co-base-color-gray-100);
+  --co-semantic-color-text-disabled: var(--co-base-color-gray-alpha-700);
+  --co-semantic-color-text-success: var(--co-base-color-success-1100);
+  --co-semantic-color-text-warning: var(--co-base-color-warning-1100);
+  --co-semantic-color-text-muted: var(--co-base-color-gray-1100);
+  --co-semantic-color-text-accent: var(--co-base-color-accent-1100);
+  --co-semantic-color-text-danger: var(--co-base-color-danger-1100);
+  --co-semantic-color-text-ai: var(--co-base-color-ai-1100);
+  --co-semantic-color-text-serious: var(--co-base-color-serious-1100);
+  --co-semantic-color-border-default: var(--co-base-color-gray-700);
+  --co-semantic-color-border-success: var(--co-base-color-success-800);
+  --co-semantic-color-border-warning: var(--co-base-color-warning-800);
+  --co-semantic-color-border-input: var(--co-base-color-gray-800);
+  --co-semantic-color-border-input-hover: var(--co-base-color-gray-1100);
+  --co-semantic-color-border-focus: var(--co-base-color-gray-1200);
+  --co-semantic-color-border-accent: var(--co-base-color-accent-800);
+  --co-semantic-color-border-danger: var(--co-base-color-danger-800);
+  --co-semantic-color-border-serious: var(--co-base-color-serious-800);
+  --co-semantic-color-border-ai: var(--co-base-color-ai-800);
+  --co-semantic-color-icon-default: var(--co-base-color-gray-1200);
+  --co-semantic-color-icon-disabled: var(--co-base-color-gray-alpha-700);
+  --co-semantic-color-icon-inverse: var(--co-base-color-gray-100);
+  --co-semantic-color-icon-success: var(--co-base-color-success-1100);
+  --co-semantic-color-icon-warning: var(--co-base-color-warning-1100);
+  --co-semantic-color-icon-muted: var(--co-base-color-gray-1100);
+  --co-semantic-color-icon-accent: var(--co-base-color-accent-1100);
+  --co-semantic-color-icon-danger: var(--co-base-color-danger-1100);
+  --co-semantic-color-icon-ai: var(--co-base-color-ai-1100);
+  --co-semantic-color-icon-serious: var(--co-base-color-serious-1100);
+  --co-semantic-color-category-gray: var(--co-base-color-gray-800);
+  --co-semantic-color-category-gray-strong: var(--co-base-color-gray-1100);
+  --co-semantic-color-category-gray-text: var(--co-base-color-gray-1100);
+  --co-semantic-color-category-gray-muted: var(--co-base-color-gray-alpha-300);
+  --co-semantic-color-category-olive: var(--co-base-color-olive-800);
+  --co-semantic-color-category-olive-strong: var(--co-base-color-olive-1100);
+  --co-semantic-color-category-olive-text: var(--co-base-color-olive-1100);
+  --co-semantic-color-category-olive-muted: var(--co-base-color-olive-alpha-300);
+  --co-semantic-color-category-periwinkle: var(--co-base-color-periwinkle-800);
+  --co-semantic-color-category-periwinkle-strong: var(--co-base-color-periwinkle-1100);
+  --co-semantic-color-category-periwinkle-text: var(--co-base-color-periwinkle-1100);
+  --co-semantic-color-category-periwinkle-muted: var(--co-base-color-periwinkle-alpha-300);
+  --co-semantic-color-category-rose: var(--co-base-color-rose-800);
+  --co-semantic-color-category-rose-strong: var(--co-base-color-rose-1100);
+  --co-semantic-color-category-rose-text: var(--co-base-color-rose-1100);
+  --co-semantic-color-category-rose-muted: var(--co-base-color-rose-alpha-300);
+  --co-semantic-color-category-magenta: var(--co-base-color-magenta-800);
+  --co-semantic-color-category-magenta-strong: var(--co-base-color-magenta-1100);
+  --co-semantic-color-category-magenta-text: var(--co-base-color-magenta-1100);
+  --co-semantic-color-category-magenta-muted: var(--co-base-color-magenta-alpha-300);
+  --co-semantic-color-fill-emphasis: var(--co-base-color-gray-1200);
+  --co-semantic-color-fill-muted: var(--co-base-color-gray-alpha-300);
+  --co-semantic-color-fill-inverse: var(--co-base-color-gray-1200);
+  --co-semantic-color-fill-accent: var(--co-base-color-accent-solid);
+  --co-semantic-color-fill-accent-muted: var(--co-base-color-accent-alpha-300);
+  --co-semantic-color-fill-accent-muted-hover: var(--co-base-color-accent-alpha-400);
+  --co-semantic-color-fill-accent-muted-pressed: var(--co-base-color-accent-alpha-500);
+  --co-semantic-color-fill-danger: var(--co-base-color-danger-solid);
+  --co-semantic-color-fill-danger-muted: var(--co-base-color-danger-alpha-300);
+  --co-semantic-color-fill-success: var(--co-base-color-success-solid);
+  --co-semantic-color-fill-success-muted: var(--co-base-color-success-alpha-300);
+  --co-semantic-color-fill-warning: var(--co-base-color-warning-solid);
+  --co-semantic-color-fill-warning-muted: var(--co-base-color-warning-alpha-300);
+  --co-semantic-color-fill-disabled: var(--co-base-color-gray-alpha-300);
+  --co-semantic-color-fill-default: var(--co-base-color-gray-alpha-300);
+  --co-semantic-color-fill-default-hover: var(--co-base-color-gray-alpha-400);
+  --co-semantic-color-fill-default-pressed: var(--co-base-color-gray-alpha-500);
+  --co-semantic-color-fill-none-hover: var(--co-base-color-gray-alpha-400);
+  --co-semantic-color-fill-none-pressed: var(--co-base-color-gray-alpha-600);
+  --co-semantic-color-fill-inverse-none-hover: var(--co-base-color-gray-alpha-inverse-700);
+  --co-semantic-color-fill-serious: var(--co-base-color-serious-solid);
+  --co-semantic-color-fill-serious-muted: var(--co-base-color-serious-alpha-300);
+  --co-semantic-color-fill-ai-muted: var(--co-base-color-ai-alpha-300);
+  --co-semantic-color-data-positive: var(--co-base-color-success-900);
+  --co-semantic-color-data-negative: var(--co-base-color-danger-900);
+  --co-semantic-color-data-categorical-1: var(--co-base-color-olive-1100);
+  --co-semantic-color-data-categorical-2: var(--co-base-color-periwinkle-800);
+  --co-semantic-color-data-categorical-3: var(--co-base-color-rose-800);
+  --co-semantic-color-data-categorical-4: var(--co-base-color-magenta-1100);
+  --co-semantic-color-data-categorical-other: var(--co-base-color-gray-800);
+  --co-semantic-color-data-diverging-balance-1: var(--co-base-color-olive-1100);
+  --co-semantic-color-data-diverging-balance-2: var(--co-base-color-olive-800);
+  --co-semantic-color-data-diverging-balance-3: var(--co-base-color-gray-300);
+  --co-semantic-color-data-diverging-balance-4: var(--co-base-color-magenta-800);
+  --co-semantic-color-data-diverging-balance-5: var(--co-base-color-magenta-1100);
+  --co-semantic-color-data-sequential-periwinkle-1: var(--co-base-color-periwinkle-300);
+  --co-semantic-color-data-sequential-periwinkle-2: var(--co-base-color-periwinkle-600);
+  --co-semantic-color-data-sequential-periwinkle-3: var(--co-base-color-periwinkle-800);
+  --co-semantic-color-data-sequential-periwinkle-4: var(--co-base-color-periwinkle-1000);
+  --co-semantic-color-data-sequential-periwinkle-5: var(--co-base-color-periwinkle-1200);
+  --co-component-button-primary-background-color: var(--co-semantic-color-fill-emphasis);
+  --co-component-button-primary-text-color: var(--co-semantic-color-text-inverse);
+  --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%));
+  --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%));
+  --co-component-button-focus-outline: var(--co-semantic-border-focus);
+  --co-component-button-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-button-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-button-variants-secondary-background-color: var(--co-semantic-color-fill-default);
+  --co-component-button-variants-secondary-text-color: var(--co-semantic-color-text-default);
+  --co-component-button-variants-secondary-hover-background-color: var(--co-semantic-color-fill-default-hover);
+  --co-component-button-variants-secondary-active-background-color: var(--co-semantic-color-fill-default-pressed);
+  --co-component-button-variants-secondary-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-button-variants-secondary-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-button-variants-naked-text-color: var(--co-semantic-color-text-default);
+  --co-component-button-variants-naked-hover-background-color: var(--co-semantic-color-fill-default);
+  --co-component-button-variants-naked-active-background-color: var(--co-semantic-color-fill-default-hover);
+  --co-component-button-variants-naked-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-button-variants-accent-background-color: var(--co-semantic-color-fill-accent);
+  --co-component-button-variants-accent-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-button-variants-accent-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-button-variants-danger-background-color: var(--co-semantic-color-fill-danger);
+  --co-component-button-variants-danger-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-button-variants-danger-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-chip-default-background-color: var(--co-semantic-color-fill-muted);
+  --co-component-chip-default-text-color: var(--co-semantic-color-text-default);
+  --co-component-chip-focus-outline: var(--co-semantic-border-focus);
+  --co-component-chip-disabled-background-color: var(--co-semantic-color-fill-muted);
+  --co-component-chip-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-chip-variants-subtle-text-color: var(--co-semantic-color-text-default);
+  --co-component-chip-variants-subtle-active-background-color: var(--co-semantic-color-fill-muted);
+  --co-component-chip-variants-subtle-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-icon-button-focus-outline: var(--co-semantic-border-focus);
+  --co-component-separator-border: var(--co-semantic-border-default);
+  --co-component-separator-variants-default-border: var(--co-semantic-border-default);
+  --co-component-separator-variants-strong-border: var(--co-semantic-border-input-hover);
+  --co-component-separator-variants-minimal-border: var(--co-semantic-border-default);
+  --co-component-progress-bar-background-color: var(--co-semantic-color-fill-default);
+  --co-component-input-default-text-color: var(--co-semantic-color-text-default);
+  --co-component-input-default-border-color: var(--co-semantic-color-border-input);
+  --co-component-input-placeholder-text-color: var(--co-semantic-color-text-muted);
+  --co-component-input-hover-border-color: var(--co-semantic-color-border-input-hover);
+  --co-component-input-focus-border-color: var(--co-semantic-color-border-focus);
+  --co-component-input-focus-outline: var(--co-semantic-border-focus);
+  --co-component-input-error-border-color: var(--co-semantic-color-border-danger);
+  --co-component-input-error-focus-border-color: var(--co-semantic-color-border-danger);
+  --co-component-input-error-focus-outline: var(--co-semantic-border-focus);
+  --co-component-input-error-hover-border-color: var(--co-semantic-color-border-danger);
+  --co-component-input-disabled-background-color: var(--co-semantic-color-fill-disabled);
+  --co-component-input-disabled-text-color: var(--co-semantic-color-text-disabled);
+  --co-component-input-disabled-border-color: var(--co-semantic-color-border-default);
+  --co-component-field-label-color: var(--co-semantic-color-text-default);
+  --co-component-field-label-color-disabled: var(--co-semantic-color-text-disabled);
+  --co-component-field-required-indicator-color: var(--co-semantic-color-text-danger);
+  --co-component-field-helper-text-color: var(--co-semantic-color-text-muted);
+  --co-component-field-helper-text-color-error: var(--co-semantic-color-text-danger);
+  --co-component-alert-severity-error-background: var(--co-semantic-color-fill-danger-muted);
+  --co-component-alert-severity-error-text: var(--co-semantic-color-text-danger);
+  --co-component-alert-severity-warning-background: var(--co-semantic-color-fill-warning-muted);
+  --co-component-alert-severity-warning-text: var(--co-semantic-color-text-warning);
+  --co-component-alert-severity-info-background: var(--co-semantic-color-fill-accent-muted);
+  --co-component-alert-severity-info-text: var(--co-semantic-color-text-accent);
+  --co-component-alert-severity-success-background: var(--co-semantic-color-fill-success-muted);
+  --co-component-alert-severity-success-text: var(--co-semantic-color-text-success);
+  --co-component-alert-appearance-outlined-border-color-error: var(--co-semantic-color-border-danger);
+  --co-component-alert-appearance-outlined-border-color-warning: var(--co-semantic-color-border-warning);
+  --co-component-alert-appearance-outlined-border-color-info: var(--co-semantic-color-border-accent);
+  --co-component-alert-appearance-outlined-border-color-success: var(--co-semantic-color-border-success);
+  --co-component-slider-thumb-shadow-default: var(--co-semantic-elevation-raised);
+  --co-component-slider-thumb-shadow-hover: var(--co-semantic-elevation-sticky);
+  --co-component-slider-thumb-shadow-active: var(--co-semantic-elevation-floating);
+  --co-component-status-pending-text: var(--co-semantic-color-text-muted);
+  --co-component-status-pending-background: var(--co-semantic-color-fill-muted);
+  --co-component-status-completed-text: var(--co-semantic-color-text-success);
+  --co-component-status-completed-background: var(--co-semantic-color-fill-success-muted);
+  --co-component-status-failed-text: var(--co-semantic-color-text-danger);
+  --co-component-status-failed-background: var(--co-semantic-color-fill-danger-muted);
+  --co-component-status-cancelled-text: var(--co-semantic-color-text-muted);
+  --co-component-status-cancelled-background: var(--co-semantic-color-fill-muted);
+  --co-component-status-processing-text: var(--co-semantic-color-text-accent);
+  --co-component-status-processing-background: var(--co-semantic-color-fill-accent-muted);
+  --co-component-status-scheduled-text: var(--co-semantic-color-text-muted);
+  --co-component-status-scheduled-background: var(--co-semantic-color-fill-muted);
+  --co-component-track-background: var(--co-semantic-color-fill-default);
+  --co-semantic-color-text-on-fill: var(--co-base-color-ink-light);
+  --co-semantic-color-icon-on-fill: var(--co-base-color-ink-light);
+  --co-semantic-color-fill-accent-hover: color-mix(in srgb, var(--co-semantic-color-fill-accent), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-hover) * 100%));
+  --co-semantic-color-fill-accent-pressed: color-mix(in srgb, var(--co-semantic-color-fill-accent), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-pressed) * 100%));
+  --co-semantic-color-fill-danger-hover: color-mix(in srgb, var(--co-semantic-color-fill-danger), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-hover) * 100%));
+  --co-semantic-color-fill-danger-pressed: color-mix(in srgb, var(--co-semantic-color-fill-danger), var(--co-semantic-color-text-on-fill) calc(var(--co-semantic-opacity-state-pressed) * 100%));
+  --co-semantic-surface-base: var(--co-base-color-surface-page);
+  --co-semantic-surface-raised: var(--co-base-color-surface-raised);
+  --co-semantic-surface-overlay: var(--co-base-color-surface-overlay);
+  --co-semantic-surface-scrim: color-mix(in srgb, var(--co-base-color-ink-dark) calc(var(--co-base-opacity-scrim) * 100%), transparent);
+  --co-component-button-variants-accent-text-color: var(--co-semantic-color-text-on-fill);
+  --co-component-button-variants-danger-text-color: var(--co-semantic-color-text-on-fill);
+  --co-component-button-variants-accent-hover-background-color: var(--co-semantic-color-fill-accent-hover);
+  --co-component-button-variants-accent-active-background-color: var(--co-semantic-color-fill-accent-pressed);
+  --co-component-button-variants-danger-hover-background-color: var(--co-semantic-color-fill-danger-hover);
+  --co-component-button-variants-danger-active-background-color: var(--co-semantic-color-fill-danger-pressed);
+  --co-component-chip-variants-subtle-background-color: var(--co-semantic-surface-raised);
+  --co-component-chip-variants-subtle-hover-background-color: var(--co-semantic-surface-base);
+  --co-component-chip-variants-subtle-disabled-background-color: var(--co-semantic-surface-raised);
+  --co-component-input-default-background-color: var(--co-semantic-surface-raised);
+  --co-component-slider-thumb-background: var(--co-semantic-surface-raised);
+}