@common-origin/design-system 2.14.0 → 2.16.0

package/dist/tokens.css

@@ -0,0 +1,769 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --co-base-border-radius-1: 0.125rem;
+  --co-base-border-radius-2: 0.25rem;
+  --co-base-border-radius-3: 0.5rem;
+  --co-base-border-radius-4: 0.75rem;
+  --co-base-border-radius-5: 1rem;
+  --co-base-border-radius-6: 1.5rem;
+  --co-base-border-radius-7: 2rem;
+  --co-base-border-radius-circle: 10rem;
+  --co-base-border-style-solid: solid;
+  --co-base-border-style-dashed: dashed;
+  --co-base-border-style-dotted: dotted;
+  --co-base-border-width-0: 0;
+  --co-base-border-width-1: 0.0625rem;
+  --co-base-border-width-2: 0.125rem;
+  --co-base-border-width-3: 0.1875rem;
+  --co-base-border-width-4: 0.25rem;
+  --co-base-border-width-5: 0.3125rem;
+  --co-base-border-width-6: 0.375rem;
+  --co-base-border-width-8: 0.5rem;
+  --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-none: none;
+  --co-base-z-index-0: 0;
+  --co-base-z-index-1: 10;
+  --co-base-z-index-2: 20;
+  --co-base-z-index-3: 30;
+  --co-base-z-index-4: 40;
+  --co-base-z-index-5: 50;
+  --co-base-z-index-6: 1000;
+  --co-base-z-index-7: 1010;
+  --co-base-z-index-8: 1020;
+  --co-base-opacity-0: 0;
+  --co-base-opacity-5: 0.05;
+  --co-base-opacity-10: 0.1;
+  --co-base-opacity-20: 0.2;
+  --co-base-opacity-25: 0.25;
+  --co-base-opacity-30: 0.3;
+  --co-base-opacity-40: 0.4;
+  --co-base-opacity-50: 0.5;
+  --co-base-opacity-60: 0.6;
+  --co-base-opacity-70: 0.7;
+  --co-base-opacity-75: 0.75;
+  --co-base-opacity-80: 0.8;
+  --co-base-opacity-90: 0.9;
+  --co-base-opacity-95: 0.95;
+  --co-base-opacity-100: 1;
+  --co-base-size-0: 0;
+  --co-base-size-1: 0.25rem;
+  --co-base-size-2: 0.5rem;
+  --co-base-size-3: 0.75rem;
+  --co-base-size-4: 1rem;
+  --co-base-size-5: 1.25rem;
+  --co-base-size-6: 1.5rem;
+  --co-base-size-7: 1.75rem;
+  --co-base-size-8: 2rem;
+  --co-base-size-9: 2.25rem;
+  --co-base-size-10: 2.5rem;
+  --co-base-size-11: 2.75rem;
+  --co-base-size-12: 3rem;
+  --co-base-size-14: 3.5rem;
+  --co-base-size-15: 3.75rem;
+  --co-base-size-16: 4rem;
+  --co-base-size-18: 4.5rem;
+  --co-base-size-20: 5rem;
+  --co-base-size-24: 6rem;
+  --co-base-size-28: 7rem;
+  --co-base-size-30: 7.5rem;
+  --co-base-size-32: 8rem;
+  --co-base-size-40: 10rem;
+  --co-base-size-45: 11.25rem;
+  --co-base-size-48: 12rem;
+  --co-base-size-50: 12.5rem;
+  --co-base-size-56: 14rem;
+  --co-base-size-64: 16rem;
+  --co-base-size-75: 18.75rem;
+  --co-base-size-90: 22.5rem;
+  --co-base-size-100: 25rem;
+  --co-base-size-140: 35rem;
+  --co-base-size-180: 45rem;
+  --co-base-size-192: 48rem;
+  --co-base-size-auto: auto;
+  --co-base-size-full: 100%;
+  --co-base-size-screen: 100vh;
+  --co-base-size-min: min-content;
+  --co-base-size-max: max-content;
+  --co-base-size-fit: fit-content;
+  --co-base-color-transparent: transparent; /** Fully transparent. For colour values that must not show, such as a border that keeps its width (semantic.color.border.none). */
+  --co-base-color-neutral-100: #f8f9fa;
+  --co-base-color-neutral-200: #e9ecef;
+  --co-base-color-neutral-300: #dee2e6;
+  --co-base-color-neutral-400: #ced4da;
+  --co-base-color-neutral-500: #adb5bd;
+  --co-base-color-neutral-600: #6c757d;
+  --co-base-color-neutral-700: #495057;
+  --co-base-color-neutral-800: #343a40;
+  --co-base-color-neutral-900: #212529;
+  --co-base-color-neutral-1000: #16191C;
+  --co-base-color-neutral-000: #ffffff;
+  --co-base-color-green-100: #CEF8E0;
+  --co-base-color-green-200: #ADF4CE;
+  --co-base-color-green-300: #89ECBC;
+  --co-base-color-green-400: #67DEA8;
+  --co-base-color-green-500: #49CC93;
+  --co-base-color-green-600: #2FB880;
+  --co-base-color-green-700: #15A46E;
+  --co-base-color-green-800: #008F5D;
+  --co-base-color-green-900: #007A4D;
+  --co-base-color-green-1000: #00653E;
+  --co-base-color-green-1100: #005132;
+  --co-base-color-green-1200: #053F27;
+  --co-base-color-green-1300: #0A2E1D;
+  --co-base-color-orange-100: #FFECCC;
+  --co-base-color-orange-200: #FFDFAD;
+  --co-base-color-orange-300: #FDD291;
+  --co-base-color-orange-400: #FFBB63;
+  --co-base-color-orange-500: #FFA037;
+  --co-base-color-orange-600: #F68511;
+  --co-base-color-orange-700: #E46F00;
+  --co-base-color-orange-800: #CB5D00;
+  --co-base-color-orange-900: #B14C00;
+  --co-base-color-orange-1000: #953D00;
+  --co-base-color-orange-1100: #7A2F00;
+  --co-base-color-orange-1200: #612300;
+  --co-base-color-orange-1300: #491901;
+  --co-base-color-red-100: #FFEBE7;
+  --co-base-color-red-200: #FFDDD6;
+  --co-base-color-red-300: #FFCDC3;
+  --co-base-color-red-400: #FFB7A9;
+  --co-base-color-red-500: #FF9B88;
+  --co-base-color-red-600: #FF7C65;
+  --co-base-color-red-700: #F75C46;
+  --co-base-color-red-800: #EA3829;
+  --co-base-color-red-900: #D31510;
+  --co-base-color-red-1000: #B40000;
+  --co-base-color-red-1100: #930000;
+  --co-base-color-red-1200: #740000;
+  --co-base-color-red-1300: #590000;
+  --co-base-color-blue-100: #E0F2FF;
+  --co-base-color-blue-200: #CAE8FF;
+  --co-base-color-blue-300: #B5DEFF;
+  --co-base-color-blue-400: #96CEFD;
+  --co-base-color-blue-500: #78BBFA;
+  --co-base-color-blue-600: #59A7F6;
+  --co-base-color-blue-700: #3892F3;
+  --co-base-color-blue-800: #147AF3;
+  --co-base-color-blue-900: #0265DC;
+  --co-base-color-blue-1000: #0054B6;
+  --co-base-color-blue-1100: #004491;
+  --co-base-color-blue-1200: #003571;
+  --co-base-color-blue-1300: #002754;
+  --co-base-color-purple-100: #F9F0FF;
+  --co-base-color-purple-200: #F4E1FF;
+  --co-base-color-purple-300: #EDD0FF;
+  --co-base-color-purple-400: #E3B8FF;
+  --co-base-color-purple-500: #D59DFF;
+  --co-base-color-purple-600: #C27EF7;
+  --co-base-color-purple-700: #AD5FE8;
+  --co-base-color-purple-800: #9644D4;
+  --co-base-color-purple-900: #7E2EBD;
+  --co-base-color-purple-1000: #67229F;
+  --co-base-color-purple-1100: #511882;
+  --co-base-color-purple-1200: #3D1066;
+  --co-base-color-purple-1300: #2B0A4D;
+  --co-base-color-pink-100: #FFEFF9;
+  --co-base-color-pink-200: #FFDFF4;
+  --co-base-color-pink-300: #FFCBED;
+  --co-base-color-pink-400: #FFB0E3;
+  --co-base-color-pink-500: #FF8ED4;
+  --co-base-color-pink-600: #FF69C1;
+  --co-base-color-pink-700: #FF42AB;
+  --co-base-color-pink-800: #F31A93;
+  --co-base-color-pink-900: #DC007B;
+  --co-base-color-pink-1000: #B90064;
+  --co-base-color-pink-1100: #97004E;
+  --co-base-color-pink-1200: #78003A;
+  --co-base-color-pink-1300: #5C0029;
+  --co-base-color-yellow-100: #FFF3D6;
+  --co-base-color-yellow-200: #FFE9B3;
+  --co-base-color-yellow-300: #FFDE8F;
+  --co-base-color-yellow-400: #FFD162;
+  --co-base-color-yellow-500: #FFC233;
+  --co-base-color-yellow-600: #EDAD0A;
+  --co-base-color-yellow-700: #D39700;
+  --co-base-color-yellow-800: #B88100;
+  --co-base-color-yellow-900: #9D6C00;
+  --co-base-color-yellow-1000: #825800;
+  --co-base-color-yellow-1100: #694600;
+  --co-base-color-yellow-1200: #523600;
+  --co-base-color-yellow-1300: #3D2800;
+  --co-base-spacing-0: 0;
+  --co-base-spacing-1: 0.25rem;
+  --co-base-spacing-2: 0.5rem;
+  --co-base-spacing-3: 0.75rem;
+  --co-base-spacing-4: 1rem;
+  --co-base-spacing-5: 1.25rem;
+  --co-base-spacing-6: 1.5rem;
+  --co-base-spacing-7: 1.75rem;
+  --co-base-spacing-8: 2rem;
+  --co-base-spacing-9: 2.25rem;
+  --co-base-spacing-10: 2.5rem;
+  --co-base-spacing-12: 3rem;
+  --co-base-spacing-14: 3.5rem;
+  --co-base-spacing-16: 4rem;
+  --co-base-spacing-20: 5rem;
+  --co-base-spacing-24: 6rem;
+  --co-base-spacing-28: 7rem;
+  --co-base-spacing-32: 8rem;
+  --co-base-spacing-40: 10rem;
+  --co-base-spacing-48: 12rem;
+  --co-base-spacing-56: 14rem;
+  --co-base-spacing-64: 16rem;
+  --co-base-spacing-auto: auto;
+  --co-base-font-family-heading: 'Inter', sans-serif;
+  --co-base-font-family-body: 'Inter', sans-serif;
+  --co-base-font-family-monospace: Menlo, Monaco, Consolas, Courier New, monospace;
+  --co-base-font-size-1: 0.75rem;
+  --co-base-font-size-2: 0.875rem;
+  --co-base-font-size-3: 1rem;
+  --co-base-font-size-4: 1.125rem;
+  --co-base-font-size-5: 1.25rem;
+  --co-base-font-size-6: 1.5rem;
+  --co-base-font-size-7: 1.75rem;
+  --co-base-font-size-8: 2rem;
+  --co-base-font-size-9: 3rem;
+  --co-base-font-size-10: 5rem;
+  --co-base-font-weight-1: 300;
+  --co-base-font-weight-2: 400;
+  --co-base-font-weight-3: 500;
+  --co-base-font-weight-4: 600;
+  --co-base-font-weight-5: 700;
+  --co-base-font-weight-6: 800; /** Extra Bold — for page titles and primary display headings per VDL (800–900 weight range) */
+  --co-base-font-weight-7: 900; /** Black/Ultra Bold — maximum heading weight for the most dominant display headings per VDL */
+  --co-base-line-height-1: 1rem;
+  --co-base-line-height-2: 1.125rem;
+  --co-base-line-height-3: 1.25rem;
+  --co-base-line-height-4: 1.5rem;
+  --co-base-line-height-5: 1.75rem;
+  --co-base-line-height-6: 2rem;
+  --co-base-line-height-7: 2.25rem;
+  --co-base-line-height-8: 2.5rem;
+  --co-base-line-height-9: 3rem;
+  --co-base-line-height-10: 4.5rem;
+  --co-base-line-height-11: 5rem;
+  --co-base-line-height-none: 1;
+  --co-base-letter-spacing-0: -0.125rem;
+  --co-base-letter-spacing-1: -0.0625rem;
+  --co-base-letter-spacing-2: 0rem;
+  --co-base-letter-spacing-3: 0.0625rem;
+  --co-base-letter-spacing-4: 0.125rem;
+  --co-base-breakpoint-xs: 0px;
+  --co-base-breakpoint-sm: 640px;
+  --co-base-breakpoint-md: 768px;
+  --co-base-breakpoint-lg: 1024px;
+  --co-base-breakpoint-xl: 1280px;
+  --co-base-breakpoint-2xl: 1536px;
+  --co-base-duration-instant: 0ms;
+  --co-base-duration-fast: 150ms;
+  --co-base-duration-normal: 200ms;
+  --co-base-duration-moderate: 300ms;
+  --co-base-duration-slow: 500ms;
+  --co-base-duration-slower: 750ms;
+  --co-base-duration-slowest: 1000ms;
+  --co-base-easing-linear: linear;
+  --co-base-easing-ease: ease;
+  --co-base-easing-ease-in: ease-in;
+  --co-base-easing-ease-out: ease-out;
+  --co-base-easing-ease-in-out: ease-in-out;
+  --co-base-easing-ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
+  --co-base-easing-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+  --co-base-easing-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
+  --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-component-button-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
+  --co-component-chip-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
+  --co-component-icon-button-primary-min-width: 40px; /** Same as sizes.medium.minWidth, and not read by IconButton. Raw px until control sizes are decided in #129. */
+  --co-component-icon-button-primary-min-height: 40px; /** Same as sizes.medium.minHeight, and not read by IconButton. Raw px until control sizes are decided in #129. */
+  --co-component-icon-button-primary-display: flex; /** Deprecated: layout mechanics stay in component code (decision 0014, rule 5); IconButton sets display: flex itself. Removed in 3.0. */
+  --co-component-icon-button-primary-align-items: center; /** Deprecated: layout mechanics stay in component code (decision 0014, rule 5); IconButton sets align-items: center itself. Removed in 3.0. */
+  --co-component-icon-button-primary-justify-content: center; /** Deprecated: layout mechanics stay in component code (decision 0014, rule 5); IconButton sets justify-content: center itself. Removed in 3.0. */
+  --co-component-icon-button-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
+  --co-component-icon-button-sizes-small-min-width: 32px; /** Minimum width of the small IconButton. Raw px until control sizes are decided in #129. */
+  --co-component-icon-button-sizes-small-min-height: 32px; /** Minimum height of the small IconButton. Raw px until control sizes are decided in #129. */
+  --co-component-icon-button-sizes-medium-min-width: 40px; /** Minimum width of the medium IconButton. Raw px until control sizes are decided in #129. */
+  --co-component-icon-button-sizes-medium-min-height: 40px; /** Minimum height of the medium IconButton. Raw px until control sizes are decided in #129. */
+  --co-component-icon-button-sizes-large-min-width: 48px; /** Minimum width of the large IconButton. Raw px until control sizes are decided in #129. */
+  --co-component-icon-button-sizes-large-min-height: 48px; /** Minimum height of the large IconButton. Raw px until control sizes are decided in #129. */
+  --co-component-input-default-padding-y: 11px; /** Deprecated (decision 0022): no component spacing tokens. The 11px is off-grid and has no semantic step, so inputs keep reading this until #129 decides how controls get their heights. Removed in 3.0. */
+  --co-component-input-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
+  --co-component-input-error-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
+  --co-component-input-disabled-cursor: not-allowed; /** Deprecated: behaviour, not a design decision, stays in component code (decision 0014, rule 5); inputs set cursor: not-allowed themselves. Removed in 3.0. */
+  --co-semantic-elevation-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /** Sunken/pressed states, input fields, wells */
+  --co-semantic-border-radius-none: 0; /** No rounding - tables, dividers, inline code blocks, sharp-edged containers */
+  --co-semantic-color-background-overlay: rgba(33, 37, 41, 0.5); /** Semi-transparent scrim for modal, sheet, drawer, and action-sheet backdrops. Uses brand near-black (#212529) at 50% opacity. Sits below the overlay surface and above page content. */
+  --co-semantic-color-background-hover-overlay: rgba(33, 37, 41, 0.1); /** Subtle transparent dark overlay for hover states on components that sit over variable-colour backgrounds (e.g. chip close-button hover). Uses brand near-black (#212529) — never pure #000000 per VDL. */
+  --co-semantic-color-background-active-overlay: rgba(33, 37, 41, 0.15); /** Slightly stronger transparent dark overlay for active/pressed states on components over variable-colour backgrounds (e.g. chip close-button active). Uses brand near-black (#212529). Pair with hover-overlay for consistent press depth. */
+  --co-semantic-color-background-inverse-overlay: rgba(255, 255, 255, 0.2); /** Subtle transparent light overlay for elements that sit on a strong or dark background (e.g. the count badge on an active pills tab in TabBar). The light counterpart of hover-overlay; pair with text.inverse. */
+  --co-semantic-elevation-none: var(--co-base-shadow-none); /** No elevation - flat surfaces, default state */
+  --co-semantic-elevation-raised: var(--co-base-shadow-2); /** Subtle lift - cards, buttons with depth */
+  --co-semantic-elevation-floating: var(--co-base-shadow-4); /** Moderate lift - tooltips, popovers, dropdowns */
+  --co-semantic-elevation-overlay: var(--co-base-shadow-5); /** High lift - modals, dialogs, action sheets */
+  --co-semantic-elevation-sticky: var(--co-base-shadow-3); /** Fixed headers, sticky navigation, bottom bars */
+  --co-semantic-breakpoint-xs: var(--co-base-breakpoint-xs); /** 0px: smallest viewport. */
+  --co-semantic-breakpoint-sm: var(--co-base-breakpoint-sm); /** 640px: large phones. */
+  --co-semantic-breakpoint-md: var(--co-base-breakpoint-md); /** 768px: tablets; below this, mobile layouts (e.g. fullscreen Modal). */
+  --co-semantic-breakpoint-lg: var(--co-base-breakpoint-lg); /** 1024px: small desktops. */
+  --co-semantic-breakpoint-xl: var(--co-base-breakpoint-xl); /** 1280px: desktops. */
+  --co-semantic-breakpoint-2xl: var(--co-base-breakpoint-2xl); /** 1536px: wide desktops. */
+  --co-semantic-opacity-disabled: var(--co-base-opacity-50); /** 0.5: disabled controls and items. */
+  --co-semantic-opacity-full: var(--co-base-opacity-100); /** 1: fully opaque (the enabled counterpart of disabled). */
+  --co-semantic-font-family-body: var(--co-base-font-family-body); /** UI text (Inter). Use a typography style where one fits; this is for components that set the family on its own. */
+  --co-semantic-font-family-monospace: var(--co-base-font-family-monospace); /** Code and other fixed-width text (CodeBlock). */
+  --co-semantic-font-size-xs: var(--co-base-font-size-1); /** 0.75rem. */
+  --co-semantic-font-size-sm: var(--co-base-font-size-2); /** 0.875rem. */
+  --co-semantic-font-size-md: var(--co-base-font-size-3); /** 1rem. */
+  --co-semantic-font-size-lg: var(--co-base-font-size-4); /** 1.125rem. */
+  --co-semantic-font-size-xl: var(--co-base-font-size-5); /** 1.25rem. */
+  --co-semantic-line-height-none: var(--co-base-line-height-none); /** 1 (unitless): line box equals the font size. For single-line glyphs such as avatar initials and count indicators. */
+  --co-semantic-line-height-tight: var(--co-base-line-height-3); /** 1.25rem: compact multi-line text (Alert, CodeBlock). */
+  --co-semantic-line-height-normal: var(--co-base-line-height-4); /** 1.5rem: body-text line height (TextArea). */
+  --co-semantic-letter-spacing-tighter: var(--co-base-letter-spacing-0); /** -0.125rem: tracking for the largest headings (display, h1). */
+  --co-semantic-letter-spacing-tight: var(--co-base-letter-spacing-1); /** -0.0625rem: tracking for h2 to h4. */
+  --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); /** 0.125rem: tracking for small uppercase labels (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-z-index-sticky: var(--co-base-z-index-1); /** Sticky and fixed chrome that stays visible while scrolling: sticky headers, section headers, navigation bars. Pair with elevation.sticky. Sits below dropdowns, overlays and modals. */
+  --co-semantic-z-index-dropdown: var(--co-base-z-index-6); /** Floating menus anchored to a control: dropdown menus, select and autocomplete lists (Dropdown, SearchField). Pair with elevation.floating. Sits above sticky, below overlays. */
+  --co-semantic-z-index-overlay: var(--co-base-z-index-7); /** Panels that slide over the page and their backdrop: sheets, drawers (Sheet). The backdrop uses the same value and comes before the panel in the DOM. Pair with elevation.overlay. Sits below modals. */
+  --co-semantic-z-index-modal: var(--co-base-z-index-8); /** Blocking dialogs and their backdrop: modals, action sheets (Modal, ActionSheet). The backdrop uses the same value and comes before the dialog in the DOM. Pair with elevation.overlay. Topmost layer in the system. */
+  --co-semantic-border-default: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-default); /** Hairline in the default border colour: dividers that separate content, such as Breadcrumbs. 1.19:1 on white, so never a control's edge (decision 0025). */
+  --co-semantic-border-subtle: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-subtle); /** Hairline in the subtle border colour: dividers and decorative outlines, such as CodeBlock and Separator. 1.30:1 on white, so never a control's edge (decision 0025). */
+  --co-semantic-border-strong: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** Hairline in near-black: a firm outline that must read as a boundary, such as a hovered or focused text input. 11.51:1 on white. */
+  --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** The standard focus ring: 2px solid near-black, used with border.focusOffset for visible keyboard focus (P2). Some components draw a blue ring instead, from border.width.thick and color.border.interactive (Box, ListItem, Slider, TransactionListItem). */
+  --co-semantic-border-tooltip: var(--co-base-border-width-2) var(--co-base-border-style-dotted) var(--co-semantic-color-border-subtle); /** 2px dotted underline marking text that has a tooltip. */
+  --co-semantic-border-width-thin: var(--co-base-border-width-1); /** 0.0625rem: default hairline borders and rings. */
+  --co-semantic-border-width-thick: var(--co-base-border-width-2); /** 0.125rem: emphasised borders, focus outlines and selected states. */
+  --co-semantic-border-focus-offset: var(--co-base-border-width-2); /** 0.125rem: magnitude of the gap between an element and its focus outline. Use it as outline-offset directly to draw the outline outside the element, or negated (calc(-1 * …)) to inset it, as TransactionListItem does. */
+  --co-semantic-border-radius-xs: var(--co-base-border-radius-1); /** Minimal rounding - small badges, compact tags, inline buttons, checkboxes */
+  --co-semantic-border-radius-sm: var(--co-base-border-radius-2); /** Subtle rounding - buttons, inputs, chips, form controls, list items */
+  --co-semantic-border-radius-md: var(--co-base-border-radius-3); /** Standard rounding - cards, containers, dropdowns, popovers, menus */
+  --co-semantic-border-radius-lg: var(--co-base-border-radius-4); /** Generous rounding - modals, action sheets, dialogs, feature cards, panels */
+  --co-semantic-border-radius-xl: var(--co-base-border-radius-5); /** Large rounding - pills, pill buttons, prominent CTAs, search bars */
+  --co-semantic-border-radius-2xl: var(--co-base-border-radius-6); /** Extra large rounding - hero elements, decorative containers, large pills */
+  --co-semantic-border-radius-3xl: var(--co-base-border-radius-7); /** Maximum rounding - decorative elements, marketing components, large decorative cards */
+  --co-semantic-border-radius-circle: var(--co-base-border-radius-circle); /** Fully circular - avatars, round icon buttons, status indicators, FABs */
+  --co-semantic-size-touch-target: var(--co-base-size-11); /** 2.75rem (44px): minimum height of a tappable row or control. */
+  --co-semantic-size-overlay-sm: var(--co-base-size-100); /** 25rem (400px): small overlay panel dimension: Modal small width, and the default Sheet width (left and right sheets) and height (top and bottom sheets). */
+  --co-semantic-size-overlay-md: var(--co-base-size-140); /** 35rem (560px): medium overlay panel width (Modal medium). */
+  --co-semantic-size-overlay-lg: var(--co-base-size-180); /** 45rem (720px): large overlay panel width (Modal large). */
+  --co-semantic-size-label-small: var(--co-base-size-5); /** 20px label height: StatusLabel small and Tag small. Decision 0018 size scale. */
+  --co-semantic-size-label-medium: var(--co-base-size-6); /** 24px label height: StatusLabel, Tag and CategoryLabel medium. Decision 0018 size scale. */
+  --co-semantic-size-label-large: var(--co-base-size-8); /** 32px label height: CategoryLabel large. Decision 0018 size scale. */
+  --co-semantic-size-menu-max-height: var(--co-base-size-75); /** 18.75rem (300px): maximum height of a floating menu before it scrolls (Dropdown, SearchField). */
+  --co-semantic-size-dimension-1: var(--co-base-size-1); /** 0.25rem (4px): TabBar scrollbar height; small ProgressBar height (via component tokens). */
+  --co-semantic-size-dimension-2: var(--co-base-size-2); /** 0.5rem (8px): medium ProgressBar height; Badge dot (via component tokens). Approved under decision 0022. */
+  --co-semantic-size-dimension-4: var(--co-base-size-4); /** 1rem (16px): large ProgressBar height; Badge count minimum width and height (via component tokens). Approved under decision 0022. */
+  --co-semantic-size-dimension-5: var(--co-base-size-5); /** 1.25rem (20px): checkbox box; TabBar count badge; extra-large ProgressBar height (via component tokens); small label height (via size.label.small). */
+  --co-semantic-size-dimension-6: var(--co-base-size-6); /** 1.5rem (24px): medium label height (via size.label.medium). */
+  --co-semantic-size-dimension-8: var(--co-base-size-8); /** 2rem (32px): checkbox row minimum height (via component tokens); large label height (via size.label.large). */
+  --co-semantic-size-dimension-12: var(--co-base-size-12); /** 3rem (48px): AccountCard header minimum height; compact ListItem expanded indent (via component tokens). */
+  --co-semantic-size-dimension-15: var(--co-base-size-15); /** 3.75rem (60px): comfortable ListItem expanded indent (via component tokens). */
+  --co-semantic-size-dimension-18: var(--co-base-size-18); /** 4.5rem (72px): TransactionListItem minimum height (via component tokens). */
+  --co-semantic-size-dimension-20: var(--co-base-size-20); /** 5rem (80px): small EmptyState illustration (via component tokens). */
+  --co-semantic-size-dimension-30: var(--co-base-size-30); /** 7.5rem (120px): medium EmptyState illustration; TextArea minimum height (via component tokens). */
+  --co-semantic-size-dimension-45: var(--co-base-size-45); /** 11.25rem (180px): Breadcrumbs label truncation width (via component tokens). */
+  --co-semantic-size-dimension-50: var(--co-base-size-50); /** 12.5rem (200px): large EmptyState illustration (via component tokens). */
+  --co-semantic-size-dimension-75: var(--co-base-size-75); /** 18.75rem (300px): AccountCard minimum width; EmptyState actions maximum width (via component tokens). */
+  --co-semantic-size-dimension-90: var(--co-base-size-90); /** 22.5rem (360px): EmptyState text maximum width (via component tokens). */
+  --co-semantic-size-dimension-100: var(--co-base-size-100); /** 25rem (400px): EmptyState maximum width (via component tokens). */
+  --co-semantic-size-dimension-192: var(--co-base-size-192); /** 48rem (768px): CardLarge maximum width (via component tokens). */
+  --co-semantic-size-icon-xs: var(--co-base-size-3); /** 0.75rem (12px): the smallest icon, for dense inline indicators. */
+  --co-semantic-size-icon-sm: var(--co-base-size-4); /** 1rem (16px): small icons in compact controls, such as the dismiss icon in Alert and small icon buttons. */
+  --co-semantic-size-icon-md: var(--co-base-size-5); /** 1.25rem (20px): icons beside body text, such as Alert's severity icon. */
+  --co-semantic-size-icon-lg: var(--co-base-size-6); /** 1.5rem (24px): the Icon component's default size; also list item icons. */
+  --co-semantic-size-icon-xl: var(--co-base-size-8); /** 2rem (32px): extra-large standalone icons. */
+  --co-semantic-size-icon-2xl: var(--co-base-size-10); /** 2.5rem (40px): the largest icon size, for prominent standalone icons. */
+  --co-semantic-size-avatar-xs: var(--co-base-size-6); /** 1.5rem (24px): extra-small avatar, inline with text. */
+  --co-semantic-size-avatar-sm: var(--co-base-size-8); /** 2rem (32px): small avatar, in dense lists. */
+  --co-semantic-size-avatar-md: var(--co-base-size-10); /** 2.5rem (40px): the default avatar size. */
+  --co-semantic-size-avatar-lg: var(--co-base-size-12); /** 3rem (48px): large avatar, in headers and cards. */
+  --co-semantic-size-avatar-xl: var(--co-base-size-16); /** 4rem (64px): extra-large avatar, on profile pages. */
+  --co-semantic-spacing-separator-sm: var(--co-base-spacing-4); /** 1rem: space around a small Divider, above and below when horizontal, either side when vertical. */
+  --co-semantic-spacing-separator-md: var(--co-base-spacing-6); /** 1.5rem: space around a medium or minimal Divider, above and below when horizontal, either side when vertical. */
+  --co-semantic-spacing-separator-lg: var(--co-base-spacing-8); /** 2rem: space around a large (the default) Divider, above and below when horizontal, either side when vertical. */
+  --co-semantic-spacing-separator-xl: var(--co-base-spacing-12); /** 3rem: space around an extra-large Divider, above and below when horizontal, either side when vertical. */
+  --co-semantic-spacing-component-xs: var(--co-base-spacing-1); /** Extra-small component internal spacing (0.25rem / 4px). Use for tight gaps within compound elements, icon-to-label spacing in small chips. */
+  --co-semantic-spacing-component-sm: var(--co-base-spacing-2); /** Small component internal spacing (0.5rem / 8px). Use for standard icon-to-label gaps, chip padding, compact button inner spacing. */
+  --co-semantic-spacing-component-md: var(--co-base-spacing-3); /** Medium component internal spacing (0.75rem / 12px). Use for standard button vertical padding, form field inner padding. */
+  --co-semantic-spacing-component-lg: var(--co-base-spacing-4); /** Large component internal spacing (1rem / 16px). Use for button horizontal padding, input horizontal padding, card inner spacing. */
+  --co-semantic-spacing-component-xl: var(--co-base-spacing-5); /** Extra-large component internal spacing (1.25rem / 20px). Use for generous button padding, prominent CTAs. */
+  --co-semantic-spacing-component-2xl: var(--co-base-spacing-6); /** 2x extra-large component internal spacing (1.5rem / 24px). Use for large card inner padding, spacious form sections. */
+  --co-semantic-spacing-layout-none: var(--co-base-spacing-0); /** 0: no space, for explicit resets. */
+  --co-semantic-spacing-layout-xs: var(--co-base-spacing-1); /** 0.25rem: the tightest gap, such as between a label and its required indicator. */
+  --co-semantic-spacing-layout-sm: var(--co-base-spacing-2); /** 0.5rem: a small gap, such as between a field's label, control and helper text. */
+  --co-semantic-spacing-layout-md: var(--co-base-spacing-3); /** 0.75rem: the default gap between related elements. */
+  --co-semantic-spacing-layout-lg: var(--co-base-spacing-4); /** 1rem: space between groups of elements, and padding inside containers. */
+  --co-semantic-spacing-layout-xl: var(--co-base-spacing-5); /** 1.25rem: generous padding inside larger containers. */
+  --co-semantic-spacing-layout-2xl: var(--co-base-spacing-6); /** 1.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
+  --co-semantic-spacing-layout-3xl: var(--co-base-spacing-7); /** 1.75rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
+  --co-semantic-spacing-layout-4xl: var(--co-base-spacing-8); /** 2rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
+  --co-semantic-spacing-layout-5xl: var(--co-base-spacing-9); /** 2.25rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
+  --co-semantic-spacing-layout-6xl: var(--co-base-spacing-10); /** 2.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
+  --co-semantic-spacing-layout-7xl: var(--co-base-spacing-12); /** 3rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
+  --co-semantic-spacing-layout-8xl: var(--co-base-spacing-14); /** 3.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
+  --co-semantic-spacing-layout-9xl: var(--co-base-spacing-16); /** 4rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
+  --co-semantic-spacing-layout-10xl: var(--co-base-spacing-20); /** 5rem: a larger step on the layout spacing scale, for space between blocks and sections. Second-largest, after 11xl. */
+  --co-semantic-spacing-layout-11xl: var(--co-base-spacing-24); /** 6rem: the largest layout gap (FeatureBlock at wide breakpoints). */
+  --co-semantic-spacing-layout-auto: var(--co-base-spacing-auto); /** auto: lets the browser compute the space, such as margin: auto to centre or push an element. */
+  --co-semantic-color-text-default: var(--co-base-color-neutral-900); /** Primary text: body copy, labels and headings. 15.43:1 on white, 14.63:1 on the page. */
+  --co-semantic-color-text-emphasis: var(--co-base-color-neutral-800); /** Slightly softer near-black text for emphasis without full weight. 11.51:1 on white. */
+  --co-semantic-color-text-subdued: var(--co-base-color-neutral-700); /** Secondary text: helper text, metadata and supporting copy. 8.18:1 on white, 7.76:1 on the page. */
+  --co-semantic-color-text-inverse: var(--co-base-color-neutral-000); /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.43:1 on background.emphasis, 5.39:1 on background.interactive. */
+  --co-semantic-color-text-disabled: var(--co-base-color-neutral-500); /** Text of disabled controls. 2.07:1 on white: disabled text is exempt from the contrast minimum (WCAG 1.4.3), so never use it for text people need to read, including placeholders. */
+  --co-semantic-color-text-interactive: var(--co-base-color-blue-900); /** Blue text for links and selected items (decision 0003). 5.39:1 on white, 5.11:1 on the page. */
+  --co-semantic-color-text-interactive-hover: var(--co-base-color-blue-1000); /** Blue text on a hovered selected item (interactive-subtle-hover fill, 5.60:1). Decision 0016. */
+  --co-semantic-color-text-interactive-active: var(--co-base-color-blue-1100); /** Blue text on a pressed selected item (interactive-subtle-active fill, 6.65:1). Decision 0016. */
+  --co-semantic-color-text-error: var(--co-base-color-red-900); /** Error text, such as field error messages and InlineAlert errors. 5.41:1 on white, 5.13:1 on the page. */
+  --co-semantic-color-text-success: var(--co-base-color-green-900); /** Success text, such as InlineAlert success messages. 5.40:1 on white, 5.12:1 on the page. */
+  --co-semantic-color-text-warning: var(--co-base-color-orange-900); /** Warning text, such as InlineAlert warnings. 5.38:1 on white, 5.10:1 on the page. */
+  --co-semantic-color-background-default: var(--co-base-color-neutral-100); /** Page background: a cool off-white (#f8f9fa), never pure white (decision 0006). */
+  --co-semantic-color-background-subtle: var(--co-base-color-neutral-000); /** White: inputs, sheets and other surfaces that sit on the page background. */
+  --co-semantic-color-background-emphasis: var(--co-base-color-neutral-900); /** Near-black fill for emphasis controls: the primary Button, IconButton and the emphasis Chip. */
+  --co-semantic-color-background-emphasis-hover: var(--co-base-color-neutral-800); /** Fill of a hovered emphasis control: the primary Button and IconButton, and the emphasis Chip. Approved under decision 0022. */
+  --co-semantic-color-background-emphasis-active: var(--co-base-color-neutral-1000); /** Fill of a pressed emphasis control. Approved under decision 0022. */
+  --co-semantic-color-background-surface: var(--co-base-color-neutral-200); /** Light grey fill for quiet surfaces and grouped content, such as the default Chip. */
+  --co-semantic-color-background-inverse: var(--co-base-color-neutral-800); /** Dark grey fill for inverse surfaces, such as a checked Checkbox box. */
+  --co-semantic-color-background-interactive: var(--co-base-color-blue-900); /** Blue fill for the accent Button and other deliberate highlights (decision 0003). Pair with text.inverse (5.39:1). */
+  --co-semantic-color-background-interactive-subtle: var(--co-base-color-blue-100); /** Light blue fill for selected items, such as a selected filter chip or tab (decision 0016). Pair with text.interactive. */
+  --co-semantic-color-background-interactive-subtle-hover: var(--co-base-color-blue-200); /** Fill of a hovered selected item, such as a selected filter chip. Pair with text.interactive-hover. Decision 0016. */
+  --co-semantic-color-background-interactive-subtle-active: var(--co-base-color-blue-300); /** Fill of a pressed selected item. Pair with text.interactive-active. Decision 0016. */
+  --co-semantic-color-background-interactive-hover: var(--co-base-color-blue-1000); /** Blue fill on hover, for controls that use background.interactive. */
+  --co-semantic-color-background-interactive-active: var(--co-base-color-blue-1100); /** Blue fill while pressed, for controls that use background.interactive. */
+  --co-semantic-color-background-error: var(--co-base-color-red-900); /** Strong red fill for destructive actions, such as the danger Button. Pair with text.inverse (5.41:1). */
+  --co-semantic-color-background-error-hover: var(--co-base-color-red-1000); /** Fill of a hovered error control, such as the danger Button. Approved under decision 0022. */
+  --co-semantic-color-background-error-active: var(--co-base-color-red-1100); /** Fill of a pressed error control. Approved under decision 0022. */
+  --co-semantic-color-background-error-subtle: var(--co-base-color-red-100); /** Light red tint behind error messages, such as an error Alert. */
+  --co-semantic-color-background-success: var(--co-base-color-green-900); /** Strong green fill for success states. */
+  --co-semantic-color-background-success-subtle: var(--co-base-color-green-100); /** Light green tint behind success messages, such as a success Alert. */
+  --co-semantic-color-background-warning: var(--co-base-color-orange-900); /** Strong orange fill for warning states. */
+  --co-semantic-color-background-warning-subtle: var(--co-base-color-orange-100); /** Light orange tint behind warning messages, such as a warning Alert. */
+  --co-semantic-color-background-disabled: var(--co-base-color-neutral-300); /** Fill of disabled controls. */
+  --co-semantic-color-background-neutral: var(--co-base-color-neutral-300); /** Fill of a neutral control at rest, such as the secondary Button. Not the disabled fill, though the value matches today. Approved under decision 0022. */
+  --co-semantic-color-background-neutral-hover: var(--co-base-color-neutral-400); /** Fill of a hovered neutral control. Approved under decision 0022. */
+  --co-semantic-color-background-neutral-active: var(--co-base-color-neutral-500); /** Fill of a pressed neutral control. Approved under decision 0022. */
+  --co-semantic-color-background-transparent: var(--co-base-color-transparent); /** No fill, for controls without a background at rest, such as the naked Button and IconButton. Approved under decision 0022. */
+  --co-semantic-color-background-progress-track: var(--co-base-color-neutral-300); /** Unfilled track of ProgressBar and Slider. 1.30:1 on white: the filled part and the thumb show the value, so the track doesn't need 3:1 (decision 0026). */
+  --co-semantic-color-background-page: var(--co-base-color-neutral-100); /** The same cool off-white as background.default (#f8f9fa). Decision 0006 makes background.default the page background token, so use that. */
+  --co-semantic-color-border-default: var(--co-base-color-neutral-200); /** Default border colour for dividers and decorative outlines only. 1.19:1 on white, below the 3:1 a control's edge needs (WCAG 1.4.11); use color.border.control for that (decision 0025). */
+  --co-semantic-color-border-subtle: var(--co-base-color-neutral-300); /** Subtle border colour for dividers and decorative outlines, and for the borders of disabled controls, which WCAG 1.4.11 exempts. 1.30:1 on white, below the 3:1 a control's edge needs; use color.border.control for that (decision 0025). */
+  --co-semantic-color-border-control: var(--co-base-color-neutral-600); /** Resting border of a control whose edge shows where it is, such as a text input, Dropdown or the Checkbox box. 4.69:1 on white, 4.45:1 on the page, above the 3:1 WCAG 1.4.11 asks for (decision 0025). */
+  --co-semantic-color-border-strong: var(--co-base-color-neutral-800); /** Near-black border colour for firm boundaries, such as a hovered or focused input. 11.51:1 on white. */
+  --co-semantic-color-border-interactive: var(--co-base-color-blue-900); /** Blue border for selected and interactive states (decision 0003). 5.39:1 on white. */
+  --co-semantic-color-border-error: var(--co-base-color-red-900); /** Red border for invalid fields and error outlines. 5.41:1 on white. */
+  --co-semantic-color-border-success: var(--co-base-color-green-900); /** Green border for success outlines, such as an outlined success Alert. */
+  --co-semantic-color-border-warning: var(--co-base-color-orange-900); /** Orange border for warning outlines, such as an outlined warning Alert. */
+  --co-semantic-color-border-none: var(--co-base-color-transparent); /** An invisible border that keeps its width, so a borderless state takes the same space as a bordered one (for example Alert's borderless appearance, decision 0019). */
+  --co-semantic-color-icon-default: var(--co-base-color-neutral-900); /** Default icon colour, matching text.default. 15.43:1 on white. */
+  --co-semantic-color-icon-emphasis: var(--co-base-color-neutral-800); /** Slightly softer near-black icon colour, matching text.emphasis. */
+  --co-semantic-color-icon-subdued: var(--co-base-color-neutral-600); /** Secondary icons, such as list item and empty-state icons. 4.69:1 on white, 4.45:1 on the page (icons need 3:1). */
+  --co-semantic-color-icon-disabled: var(--co-base-color-neutral-500); /** Icons and other foreground marks in disabled controls, such as a disabled Slider's fill and thumb ring. Exempt from the contrast minimum, like text.disabled. */
+  --co-semantic-color-icon-inverse: var(--co-base-color-neutral-000); /** Icons on dark or coloured fills, matching text.inverse. */
+  --co-semantic-color-icon-interactive: var(--co-base-color-blue-900); /** Blue icons in links and selected items, matching text.interactive. 5.39:1 on white. */
+  --co-semantic-color-icon-interactive-hover: var(--co-base-color-blue-1000); /** Blue icon on hover, matching text.interactive-hover. */
+  --co-semantic-color-icon-interactive-active: var(--co-base-color-blue-1100); /** Blue icon while pressed, matching text.interactive-active. */
+  --co-semantic-color-icon-error: var(--co-base-color-red-900); /** Error icons, such as in Alert and EmptyState. 5.41:1 on white. (InlineAlert's icon takes the text colour instead.) */
+  --co-semantic-color-icon-success: var(--co-base-color-green-900); /** Success icons, such as in Alert and EmptyState. 5.40:1 on white. (InlineAlert's icon takes the text colour instead.) */
+  --co-semantic-color-icon-warning: var(--co-base-color-orange-900); /** Warning icons, such as in Alert. 5.38:1 on white. (InlineAlert's icon takes the text colour instead.) */
+  --co-semantic-color-financial-credit: var(--co-base-color-green-700); /** Color for positive monetary values, credits, income */
+  --co-semantic-color-financial-credit-hover: var(--co-base-color-green-800); /** Hover state for credit-colored interactive elements */
+  --co-semantic-color-financial-debit: var(--co-base-color-red-900); /** Color for negative monetary values, debits, expenses */
+  --co-semantic-color-financial-debit-hover: var(--co-base-color-red-1000); /** Hover state for debit-colored interactive elements */
+  --co-semantic-color-financial-pending: var(--co-base-color-orange-600); /** Color for pending or processing financial transactions */
+  --co-semantic-color-financial-neutral: var(--co-base-color-neutral-600); /** Neutral color for informational monetary amounts */
+  --co-semantic-color-category-blue: var(--co-base-color-blue-700); /** Blue category color for general/miscellaneous */
+  --co-semantic-color-category-blue-emphasis: var(--co-base-color-blue-900); /** Emphasized blue for filled variants */
+  --co-semantic-color-category-blue-subtle: var(--co-base-color-blue-100); /** Subtle blue background */
+  --co-semantic-color-category-purple: var(--co-base-color-purple-700); /** Purple category color for entertainment */
+  --co-semantic-color-category-purple-emphasis: var(--co-base-color-purple-900); /** Emphasized purple for filled variants */
+  --co-semantic-color-category-purple-subtle: var(--co-base-color-purple-100); /** Subtle purple background */
+  --co-semantic-color-category-pink: var(--co-base-color-pink-700); /** Pink category color for health/wellness */
+  --co-semantic-color-category-pink-emphasis: var(--co-base-color-pink-900); /** Emphasized pink for filled variants */
+  --co-semantic-color-category-pink-subtle: var(--co-base-color-pink-100); /** Subtle pink background */
+  --co-semantic-color-category-yellow: var(--co-base-color-yellow-700); /** Yellow category color for utilities */
+  --co-semantic-color-category-yellow-emphasis: var(--co-base-color-yellow-900); /** Emphasized yellow for filled variants */
+  --co-semantic-color-category-yellow-subtle: var(--co-base-color-yellow-100); /** Subtle yellow background */
+  --co-semantic-color-category-green: var(--co-base-color-green-700); /** Green category color for income */
+  --co-semantic-color-category-green-emphasis: var(--co-base-color-green-900); /** Emphasized green for filled variants */
+  --co-semantic-color-category-green-subtle: var(--co-base-color-green-100); /** Subtle green background */
+  --co-semantic-color-category-red: var(--co-base-color-red-700); /** Red category color for expenses */
+  --co-semantic-color-category-red-emphasis: var(--co-base-color-red-900); /** Emphasized red for filled variants */
+  --co-semantic-color-category-red-subtle: var(--co-base-color-red-100); /** Subtle red background */
+  --co-semantic-color-category-orange: var(--co-base-color-orange-700); /** Orange category color for food & dining */
+  --co-semantic-color-category-orange-emphasis: var(--co-base-color-orange-900); /** Emphasized orange for filled variants */
+  --co-semantic-color-category-orange-subtle: var(--co-base-color-orange-100); /** Subtle orange background */
+  --co-semantic-color-category-gray: var(--co-base-color-neutral-700); /** Gray category color for uncategorized */
+  --co-semantic-color-category-gray-emphasis: var(--co-base-color-neutral-900); /** Emphasized gray for filled variants */
+  --co-semantic-color-category-gray-subtle: var(--co-base-color-neutral-200); /** Subtle gray background */
+  --co-semantic-color-category-blue-text: var(--co-base-color-blue-900); /** Blue category text and icon on white or blue-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
+  --co-semantic-color-category-purple-text: var(--co-base-color-purple-900); /** Purple category text and icon on white or purple-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
+  --co-semantic-color-category-pink-text: var(--co-base-color-pink-1000); /** Pink category text and icon on white or pink-subtle (outlined and minimal labels), at least 4.5:1. One step darker than pink-emphasis, which is 4.38:1 on pink-subtle. Decision on #115. */
+  --co-semantic-color-category-yellow-text: var(--co-base-color-yellow-1000); /** Yellow category text and icon on white or yellow-subtle (outlined and minimal labels), at least 4.5:1. One step darker than yellow-emphasis, which is 4.16:1 on yellow-subtle. Decision on #115. */
+  --co-semantic-color-category-green-text: var(--co-base-color-green-900); /** Green category text and icon on white or green-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
+  --co-semantic-color-category-red-text: var(--co-base-color-red-900); /** Red category text and icon on white or red-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
+  --co-semantic-color-category-orange-text: var(--co-base-color-orange-900); /** Orange category text and icon on white or orange-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
+  --co-semantic-color-category-gray-text: var(--co-base-color-neutral-900); /** Gray category text and icon on white or gray-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
+  --co-semantic-color-status-pending: var(--co-base-color-yellow-1000); /** Pending status text and icon on pending-bg (5.69:1, WCAG AA). Decision on #115. */
+  --co-semantic-color-status-pending-bg: var(--co-base-color-yellow-100); /** Background for pending status */
+  --co-semantic-color-status-completed: var(--co-base-color-green-900); /** Green color for completed status */
+  --co-semantic-color-status-completed-bg: var(--co-base-color-green-100); /** Background for completed status */
+  --co-semantic-color-status-failed: var(--co-base-color-red-900); /** Red color for failed/error status */
+  --co-semantic-color-status-failed-bg: var(--co-base-color-red-100); /** Background for failed status */
+  --co-semantic-color-status-cancelled: var(--co-base-color-neutral-700); /** Gray color for cancelled status */
+  --co-semantic-color-status-cancelled-bg: var(--co-base-color-neutral-200); /** Background for cancelled status */
+  --co-semantic-color-status-processing: var(--co-base-color-blue-900); /** Blue color for processing status */
+  --co-semantic-color-status-processing-bg: var(--co-base-color-blue-100); /** Background for processing status */
+  --co-semantic-color-status-scheduled: var(--co-base-color-purple-900); /** Purple color for scheduled status */
+  --co-semantic-color-status-scheduled-bg: var(--co-base-color-purple-100); /** Background for scheduled status */
+  --co-semantic-motion-duration-normal: var(--co-base-duration-normal); /** 200ms: standard duration for property-specific transitions. */
+  --co-semantic-motion-duration-fast: var(--co-base-duration-fast); /** 150ms: quick responses to input such as hover, press and small indicators. */
+  --co-semantic-motion-duration-slow: var(--co-base-duration-moderate); /** 300ms: the maximum; larger movements such as sheets sliding in and long expand/collapse. */
+  --co-semantic-motion-easing-ease-in-out: var(--co-base-easing-ease-in-out); /** ease-in-out: standard easing for property-specific transitions. */
+  --co-semantic-motion-easing-ease-out: var(--co-base-easing-ease-out); /** ease-out: for elements responding to input or entering the page. */
+  --co-semantic-motion-transition-fast: all var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** All properties over duration.fast (150ms), easing out: quick feedback, such as the Slider thumb. */
+  --co-semantic-motion-transition-normal: all var(--co-base-duration-normal) var(--co-base-easing-ease-in-out); /** All properties over duration.normal (200ms), easing in and out: the default state transition. */
+  --co-semantic-motion-transition-slow: all var(--co-base-duration-moderate) var(--co-base-easing-ease-in-out); /** All properties over duration.slow (300ms), the motion maximum (P6), easing in and out: larger changes. */
+  --co-semantic-motion-hover: background-color var(--co-base-duration-fast) var(--co-base-easing-ease-out), color var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Background and text colour over 150ms: the hover and press response of buttons, chips and tabs. */
+  --co-semantic-motion-focus: outline var(--co-base-duration-fast) var(--co-base-easing-ease-out), outline-offset var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Outline and outline offset over 150ms: how the focus ring appears. */
+  --co-semantic-motion-interactive: transform var(--co-base-duration-fast) var(--co-base-easing-ease-out), opacity var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Transform and opacity over 150ms: small movement or fade in response to input. */
+  --co-component-button-primary-background-color: var(--co-semantic-color-background-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-border-radius-sm); /** Corner radius of every Button (visual language: Button uses sm). */
+  --co-component-button-primary-padding: var(--co-semantic-spacing-component-md) var(--co-semantic-spacing-component-lg); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.md and .lg. Removed in 3.0. */
+  --co-component-button-hover-background-color: var(--co-semantic-color-background-emphasis-hover); /** Primary Button fill on hover. */
+  --co-component-button-active-background-color: var(--co-semantic-color-background-emphasis-active); /** Primary Button fill while pressed. */
+  --co-component-button-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every Button. */
+  --co-component-button-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled primary Button fill. */
+  --co-component-button-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled primary Button text and icon colour. */
+  --co-component-button-variants-secondary-background-color: var(--co-semantic-color-background-neutral); /** Secondary Button fill at rest. */
+  --co-component-button-variants-secondary-text-color: var(--co-semantic-color-text-default); /** Text and icon colour on the secondary Button. */
+  --co-component-button-variants-secondary-hover-background-color: var(--co-semantic-color-background-neutral-hover); /** Secondary Button fill on hover. */
+  --co-component-button-variants-secondary-active-background-color: var(--co-semantic-color-background-neutral-active); /** Secondary Button fill while pressed. */
+  --co-component-button-variants-secondary-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled secondary Button fill. */
+  --co-component-button-variants-secondary-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled secondary Button text and icon colour. */
+  --co-component-button-variants-naked-background-color: var(--co-semantic-color-background-transparent); /** Naked Button has no fill at rest. */
+  --co-component-button-variants-naked-text-color: var(--co-semantic-color-text-default); /** Text and icon colour on the naked Button. */
+  --co-component-button-variants-naked-hover-background-color: var(--co-semantic-color-background-surface); /** Naked Button fill on hover. */
+  --co-component-button-variants-naked-active-background-color: var(--co-semantic-color-background-neutral); /** Naked Button fill while pressed. */
+  --co-component-button-variants-naked-disabled-background-color: var(--co-semantic-color-background-transparent); /** 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-background-interactive); /** Fill of the accent Button: the blue call to action above primary, at most one per view (decision 0016). */
+  --co-component-button-variants-accent-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the accent Button. */
+  --co-component-button-variants-accent-hover-background-color: var(--co-semantic-color-background-interactive-hover); /** Accent Button fill on hover. */
+  --co-component-button-variants-accent-active-background-color: var(--co-semantic-color-background-interactive-active); /** Accent Button fill while pressed. */
+  --co-component-button-variants-accent-disabled-background-color: var(--co-semantic-color-background-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-background-error); /** Danger Button fill at rest, for destructive actions. */
+  --co-component-button-variants-danger-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the danger Button. */
+  --co-component-button-variants-danger-hover-background-color: var(--co-semantic-color-background-error-hover); /** Danger Button fill on hover. */
+  --co-component-button-variants-danger-active-background-color: var(--co-semantic-color-background-error-active); /** Danger Button fill while pressed. */
+  --co-component-button-variants-danger-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled danger Button fill. */
+  --co-component-button-variants-danger-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled danger Button text and icon colour. */
+  --co-component-button-sizes-small-padding: var(--co-semantic-spacing-component-sm) var(--co-semantic-spacing-component-md); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.sm and .md. Removed in 3.0. */
+  --co-component-button-sizes-medium-padding: var(--co-semantic-spacing-component-sm) var(--co-semantic-spacing-component-lg); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.sm and .lg. Removed in 3.0. */
+  --co-component-button-sizes-large-padding: var(--co-semantic-spacing-component-md) var(--co-semantic-spacing-component-lg); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.md and .lg. Removed in 3.0. */
+  --co-component-chip-close-button-size: var(--co-semantic-size-dimension-5); /** FilterChip close button width and height (20px): the 16px close icon plus 2px on each side, so the button fits inside a 24px chip. */
+  --co-component-chip-default-background-color: var(--co-semantic-color-background-surface); /** 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-border-radius-lg); /** Corner radius of every chip: rounder than Button, to signal a different job (decision 0016). */
+  --co-component-chip-default-padding: 2px var(--co-semantic-spacing-component-sm); /** Deprecated (decision 0022): no component spacing tokens. No chip reads it; chips take padding per size. Removed in 3.0. */
+  --co-component-chip-hover-background-color: var(--co-semantic-color-background-neutral); /** Default chip fill on hover, when it's clickable. */
+  --co-component-chip-active-background-color: var(--co-semantic-color-background-neutral-hover); /** Default chip fill while pressed, when it's clickable. */
+  --co-component-chip-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every chip and its close button. */
+  --co-component-chip-disabled-background-color: var(--co-semantic-color-background-surface); /** Disabled default chip fill. */
+  --co-component-chip-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled default chip text and icon colour. */
+  --co-component-chip-variants-emphasis-background-color: var(--co-semantic-color-background-emphasis); /** Emphasis chip fill at rest. */
+  --co-component-chip-variants-emphasis-text-color: var(--co-semantic-color-text-inverse); /** Emphasis chip text and icon colour. */
+  --co-component-chip-variants-emphasis-hover-background-color: var(--co-semantic-color-background-emphasis-hover); /** Emphasis chip fill on hover, when it's clickable. */
+  --co-component-chip-variants-emphasis-active-background-color: var(--co-semantic-color-background-emphasis-active); /** Emphasis chip fill while pressed, when it's clickable. */
+  --co-component-chip-variants-emphasis-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled emphasis chip fill. */
+  --co-component-chip-variants-emphasis-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled emphasis chip text and icon colour. */
+  --co-component-chip-variants-subtle-background-color: var(--co-semantic-color-background-subtle); /** 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-color-background-page); /** Subtle chip fill on hover, when it's clickable. */
+  --co-component-chip-variants-subtle-active-background-color: var(--co-semantic-color-background-surface); /** Subtle chip fill while pressed, when it's clickable. */
+  --co-component-chip-variants-subtle-disabled-background-color: var(--co-semantic-color-background-subtle); /** 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-chip-variants-interactive-background-color: var(--co-semantic-color-background-interactive); /** Interactive chip fill at rest. */
+  --co-component-chip-variants-interactive-text-color: var(--co-semantic-color-text-inverse); /** Interactive chip text and icon colour. */
+  --co-component-chip-variants-interactive-hover-background-color: var(--co-semantic-color-background-interactive-hover); /** Interactive chip fill on hover, when it's clickable. */
+  --co-component-chip-variants-interactive-active-background-color: var(--co-semantic-color-background-interactive-active); /** Interactive chip fill while pressed, when it's clickable. */
+  --co-component-chip-variants-interactive-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled interactive chip fill. */
+  --co-component-chip-variants-interactive-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled interactive chip text and icon colour. */
+  --co-component-chip-sizes-small-padding: 2px var(--co-semantic-spacing-component-sm); /** Deprecated (decision 0022): no component spacing tokens. The 2px is off-grid and has no semantic step, so Chip keeps reading this until #129 decides how controls get their heights. Removed in 3.0. */
+  --co-component-chip-sizes-medium-padding: 2px var(--co-semantic-spacing-component-sm); /** Deprecated (decision 0022): no component spacing tokens. The 2px is off-grid and has no semantic step, so Chip keeps reading this until #129 decides how controls get their heights. Removed in 3.0. */
+  --co-component-chip-sizes-large-padding: var(--co-semantic-spacing-component-sm) var(--co-semantic-spacing-component-md); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.sm and .md. Removed in 3.0. */
+  --co-component-icon-button-primary-background-color: var(--co-semantic-color-background-emphasis); /** Deprecated (decision 0027): IconButton reads component.button.primary.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-primary-border-radius: var(--co-semantic-border-radius-sm); /** Corner radius of every IconButton, matching Button. */
+  --co-component-icon-button-hover-background-color: var(--co-semantic-color-background-emphasis-hover); /** Deprecated (decision 0027): IconButton reads component.button.hover.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-active-background-color: var(--co-semantic-color-background-emphasis-active); /** Deprecated (decision 0027): IconButton reads component.button.active.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every IconButton. */
+  --co-component-icon-button-disabled-background-color: var(--co-semantic-color-background-disabled); /** Deprecated (decision 0027): IconButton reads component.button.disabled.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-variants-secondary-background-color: var(--co-semantic-color-background-surface); /** Deprecated (decision 0027): IconButton reads component.button.variants.secondary.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-variants-secondary-hover-background-color: var(--co-semantic-color-background-neutral); /** Deprecated (decision 0027): IconButton reads component.button.variants.secondary.hover.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-variants-secondary-active-background-color: var(--co-semantic-color-background-page); /** Deprecated (decision 0027): IconButton reads component.button.variants.secondary.active.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-variants-secondary-disabled-background-color: var(--co-semantic-color-background-disabled); /** Deprecated (decision 0027): IconButton reads component.button.variants.secondary.disabled.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-variants-naked-background-color: var(--co-semantic-color-background-transparent); /** Deprecated (decision 0027): IconButton reads component.button.variants.naked.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-variants-naked-hover-background-color: var(--co-semantic-color-background-surface); /** Deprecated (decision 0027): IconButton reads component.button.variants.naked.hover.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-variants-naked-active-background-color: var(--co-semantic-color-background-neutral); /** Deprecated (decision 0027): IconButton reads component.button.variants.naked.active.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-variants-naked-disabled-background-color: var(--co-semantic-color-background-transparent); /** Deprecated (decision 0027): IconButton reads component.button.variants.naked.disabled.backgroundColor, so its colours match Button's. Removed in 3.0. */
+  --co-component-icon-button-sizes-small-padding: var(--co-semantic-spacing-component-xs); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.xs. Removed in 3.0. */
+  --co-component-icon-button-sizes-medium-padding: var(--co-semantic-spacing-component-sm); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.sm. Removed in 3.0. */
+  --co-component-icon-button-sizes-large-padding: var(--co-semantic-spacing-component-md); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.md. Removed in 3.0. */
+  --co-component-separator-border: var(--co-semantic-border-subtle); /** Divider line, the same as variants.default.border. */
+  --co-component-separator-margin: var(--co-semantic-spacing-separator-lg) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.lg (vertical margin). Removed in 3.0. */
+  --co-component-separator-variants-default-border: var(--co-semantic-border-subtle); /** Default Divider line. */
+  --co-component-separator-variants-default-margin: var(--co-semantic-spacing-separator-lg) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.lg (vertical margin). Removed in 3.0. */
+  --co-component-separator-variants-strong-border: var(--co-semantic-border-strong); /** Strong Divider line, for a firmer break. */
+  --co-component-separator-variants-strong-margin: var(--co-semantic-spacing-separator-lg) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.lg (vertical margin). Removed in 3.0. */
+  --co-component-separator-variants-minimal-border: var(--co-semantic-border-subtle); /** Minimal Divider line. */
+  --co-component-separator-variants-minimal-margin: var(--co-semantic-spacing-separator-md) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.md (vertical margin). Removed in 3.0. */
+  --co-component-separator-sizes-small-margin: var(--co-semantic-spacing-separator-sm) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.sm (vertical margin). Removed in 3.0. */
+  --co-component-separator-sizes-medium-margin: var(--co-semantic-spacing-separator-md) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.md (vertical margin). Removed in 3.0. */
+  --co-component-separator-sizes-large-margin: var(--co-semantic-spacing-separator-lg) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.lg (vertical margin). Removed in 3.0. */
+  --co-component-separator-sizes-xlarge-margin: var(--co-semantic-spacing-separator-xl) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.xl (vertical margin). Removed in 3.0. */
+  --co-component-progress-bar-background-color: var(--co-semantic-color-background-progress-track); /** ProgressBar track, behind the filled part. */
+  --co-component-progress-bar-border-radius: var(--co-semantic-border-radius-sm); /** Not read: ProgressBar renders its track and fill with semantic.border.radius.xs (2px). Kept so published values don't change. */
+  --co-component-progress-bar-sizes-sm-height: var(--co-semantic-size-dimension-1); /** Thickness of the small ProgressBar (4px). */
+  --co-component-progress-bar-sizes-md-height: var(--co-semantic-size-dimension-2); /** Thickness of the medium ProgressBar (8px), the default. */
+  --co-component-progress-bar-sizes-lg-height: var(--co-semantic-size-dimension-4); /** Thickness of the large ProgressBar (16px). */
+  --co-component-progress-bar-sizes-xl-height: var(--co-semantic-size-dimension-5); /** Thickness of the extra-large ProgressBar (20px). */
+  --co-component-input-default-background-color: var(--co-semantic-color-background-subtle); /** 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-control); /** 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-border-radius-sm); /** Corner radius of text inputs and the Checkbox box. */
+  --co-component-input-default-border-width: var(--co-semantic-border-width-thin); /** Border width of text inputs and the Checkbox box. */
+  --co-component-input-default-padding-x: var(--co-semantic-spacing-component-lg); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.lg. Removed in 3.0. */
+  --co-component-input-placeholder-text-color: var(--co-semantic-color-text-subdued); /** 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-strong); /** Text input border on hover. */
+  --co-component-input-focus-border-color: var(--co-semantic-color-border-strong); /** 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-error); /** Text input border when invalid. */
+  --co-component-input-error-focus-border-color: var(--co-semantic-color-border-error); /** Invalid text input border while focused. */
+  --co-component-input-error-focus-outline: var(--co-semantic-border-focus); /** Focus ring on an invalid text input. */
+  --co-component-input-error-hover-border-color: var(--co-semantic-color-border-error); /** Invalid text input border on hover. */
+  --co-component-input-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled text input fill. */
+  --co-component-input-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled text input value colour. */
+  --co-component-input-disabled-border-color: var(--co-semantic-color-border-subtle); /** Disabled text input, Dropdown and Checkbox border. Stays light: WCAG 1.4.11 exempts inactive controls (decision 0025). */
+  --co-component-input-textarea-min-height: var(--co-semantic-size-dimension-30); /** Minimum height of a multi-line text input (120px). */
+  --co-component-badge-dot-size: var(--co-semantic-size-dimension-2); /** Width and height of the dot badge indicator (8px). */
+  --co-component-badge-count-min-width: var(--co-semantic-size-dimension-4); /** Minimum width of the count badge indicator (16px). */
+  --co-component-badge-count-height: var(--co-semantic-size-dimension-4); /** Height of the count badge indicator (16px). */
+  --co-component-badge-count-padding-x: var(--co-semantic-spacing-component-xs); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.xs. Removed in 3.0. */
+  --co-component-badge-count-line-height: var(--co-semantic-line-height-none); /** Line height of the count text, so the digits centre in the indicator. */
+  --co-component-badge-ring-width: var(--co-semantic-border-width-thick); /** Width of the ring that separates the badge indicator from its host element (2px). */
+  --co-component-badge-border-radius: var(--co-semantic-border-radius-circle); /** Badge indicators are always fully circular. */
+  --co-component-badge-label-font-weight: var(--co-semantic-font-weight-medium); /** Text weight for the badge-like label family: StatusBadge, CategoryBadge and Tag (decision 0014). Declare it after the typography shorthand, which would otherwise reset it. */
+  --co-component-field-gap: var(--co-semantic-spacing-layout-sm); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.layout.sm. Removed in 3.0. Was the vertical gap between a field's label, control and helper text. */
+  --co-component-field-label-color: var(--co-semantic-color-text-default); /** Field label colour. */
+  --co-component-field-label-color-disabled: var(--co-semantic-color-text-disabled); /** Field label colour when the field is disabled. */
+  --co-component-field-label-gap: var(--co-semantic-spacing-layout-xs); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.layout.xs. Removed in 3.0. Was the gap between the label text and the required indicator. */
+  --co-component-field-required-indicator-color: var(--co-semantic-color-text-error); /** Colour of the required-field asterisk. */
+  --co-component-field-required-indicator-font-weight: var(--co-semantic-font-weight-bold); /** Weight of the required-field asterisk. */
+  --co-component-field-helper-text-color: var(--co-semantic-color-text-subdued); /** Helper text colour. */
+  --co-component-field-helper-text-color-error: var(--co-semantic-color-text-error); /** Helper text colour when it describes an error. */
+  --co-component-alert-severity-error-background: var(--co-semantic-color-background-error-subtle); /** Error alert background, in both appearances. */
+  --co-component-alert-severity-error-text: var(--co-semantic-color-text-error); /** Error alert text colour. */
+  --co-component-alert-severity-warning-background: var(--co-semantic-color-background-warning-subtle); /** Warning alert background, in both appearances. */
+  --co-component-alert-severity-warning-text: var(--co-semantic-color-text-warning); /** Warning alert text colour. */
+  --co-component-alert-severity-info-background: var(--co-semantic-color-background-interactive-subtle); /** Info alert background, in both appearances. */
+  --co-component-alert-severity-info-text: var(--co-semantic-color-text-interactive); /** Info alert text colour. */
+  --co-component-alert-severity-success-background: var(--co-semantic-color-background-success-subtle); /** Success alert background, in both appearances. */
+  --co-component-alert-severity-success-text: var(--co-semantic-color-text-success); /** Success alert text colour. */
+  --co-component-alert-appearance-outlined-border-color-error: var(--co-semantic-color-border-error); /** Outlined error alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
+  --co-component-alert-appearance-outlined-border-color-warning: var(--co-semantic-color-border-warning); /** Outlined warning alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
+  --co-component-alert-appearance-outlined-border-color-info: var(--co-semantic-color-border-interactive); /** Outlined info alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
+  --co-component-alert-appearance-outlined-border-color-success: var(--co-semantic-color-border-success); /** Outlined success alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
+  --co-component-alert-appearance-borderless-border-color-error: var(--co-semantic-color-border-none); /** Borderless error alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
+  --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-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. */
+  --co-component-tab-bar-badge-size: var(--co-semantic-size-dimension-5); /** Tab count badge height and minimum width (20px). */
+  --co-component-tab-bar-scrollbar-height: var(--co-semantic-size-dimension-1); /** Height of the horizontal scrollbar when tabs overflow (4px). */
+  --co-component-search-field-section-header-letter-spacing: var(--co-semantic-letter-spacing-wide); /** Tracking for the uppercase section header. */
+  --co-component-avatar-initials-font-family: var(--co-semantic-font-family-body); /** Initials font. */
+  --co-component-avatar-initials-font-weight: var(--co-semantic-font-weight-medium); /** Initials weight. */
+  --co-component-avatar-initials-line-height: var(--co-semantic-line-height-none); /** Initials sit on a single line equal to their size. */
+  --co-component-avatar-initials-font-size-xs: var(--co-semantic-font-size-xs); /** Initials in an xs avatar. */
+  --co-component-avatar-initials-font-size-sm: var(--co-semantic-font-size-sm); /** Initials in an sm avatar. */
+  --co-component-avatar-initials-font-size-md: var(--co-semantic-font-size-md); /** Initials in an md avatar. */
+  --co-component-avatar-initials-font-size-lg: var(--co-semantic-font-size-lg); /** Initials in an lg avatar. */
+  --co-component-avatar-initials-font-size-xl: var(--co-semantic-font-size-xl); /** Initials in an xl avatar. */
+  --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-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-account-card-header-min-height: var(--co-semantic-size-dimension-12); /** Minimum height of the card header row (48px). */
+  --co-component-account-card-min-width: var(--co-semantic-size-dimension-75); /** Minimum card width (300px). */
+  --co-component-breadcrumbs-item-max-width: var(--co-semantic-size-dimension-45); /** Width at which a breadcrumb label truncates (180px). */
+  --co-component-card-large-max-width: var(--co-semantic-size-dimension-192); /** Maximum card width (768px). */
+  --co-component-checkbox-box-size: var(--co-semantic-size-dimension-5); /** Width and height of the checkbox square (20px). */
+  --co-component-checkbox-row-min-height: var(--co-semantic-size-dimension-8); /** Minimum height of a checkbox or radio row (32px). */
+  --co-component-empty-state-illustration-small: var(--co-semantic-size-dimension-20); /** Small illustration size (80px). */
+  --co-component-empty-state-illustration-medium: var(--co-semantic-size-dimension-30); /** Medium illustration size (120px). */
+  --co-component-empty-state-illustration-large: var(--co-semantic-size-dimension-50); /** Large illustration size (200px). */
+  --co-component-empty-state-max-width: var(--co-semantic-size-dimension-100); /** Maximum width of the empty state (400px). */
+  --co-component-empty-state-text-max-width: var(--co-semantic-size-dimension-90); /** Maximum width of the title and description (360px). */
+  --co-component-empty-state-actions-max-width: var(--co-semantic-size-dimension-75); /** Maximum width of the actions area (300px). */
+  --co-component-list-item-expanded-indent-compact: var(--co-semantic-size-dimension-12); /** Left indent of expanded content in compact rows, aligning it with the label (48px). */
+  --co-component-list-item-expanded-indent-comfortable: var(--co-semantic-size-dimension-15); /** Left indent of expanded content in comfortable rows (60px). */
+  --co-component-transaction-list-item-min-height: var(--co-semantic-size-dimension-18); /** Minimum row height (72px). */
+  --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); /** Display text: 5rem, weight 700. 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: 3rem, weight 700. The page title. */
+  --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: 2rem, weight 700. Major sections. */
+  --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: 1.75rem, weight 700. */
+  --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: 1.5rem, weight 700. */
+  --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: 1.25rem, weight 500. */
+  --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); /** Heading 6: 1.125rem, weight 500. 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: 1rem, weight 500. 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: 1rem, weight 400, 1.5rem line height. The default for paragraphs and input values. */
+  --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: 0.875rem, weight 400. 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); /** Overline: 0.75rem, weight 700. A short 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); /** Caption: 0.75rem, weight 400. Helper text, metadata and image captions. */
+  --co-semantic-typography-button1: var(--co-semantic-font-weight-medium) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Large Button label: 1rem, weight 500. */
+  --co-semantic-typography-button2: var(--co-semantic-font-weight-medium) var(--co-base-font-size-2)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Medium Button label: 0.875rem, weight 500. Also tab labels. */
+  --co-semantic-typography-button3: var(--co-semantic-font-weight-medium) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** Small Button label: 0.75rem, weight 500. */
+  --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 label: 0.875rem, weight 600. Field labels, such as TextField and Slider. */
+  --co-semantic-typography-breadcrumb: var(--co-semantic-font-weight-regular) var(--co-base-font-size-1)/var(--co-base-line-height-2) var(--co-base-font-family-body); /** Breadcrumb-sized text: 0.75rem, weight 400. Not used today: Breadcrumbs renders its links with typography.caption. */
+  --co-component-button-primary-font: var(--co-semantic-typography-button1); /** Button label typography, the same as sizes.large.font. */
+  --co-component-button-variants-emphasis-background-color: var(--co-component-button-variants-accent-background-color); /** Deprecated: use component.button.variants.accent.backgroundColor. Alias kept until 3.0 (decision 0016). */
+  --co-component-button-variants-emphasis-text-color: var(--co-component-button-variants-accent-text-color); /** Deprecated: use component.button.variants.accent.textColor. Alias kept until 3.0 (decision 0016). */
+  --co-component-button-variants-emphasis-hover-background-color: var(--co-component-button-variants-accent-hover-background-color); /** Deprecated: use component.button.variants.accent.hover.backgroundColor. Alias kept until 3.0 (decision 0016). */
+  --co-component-button-variants-emphasis-active-background-color: var(--co-component-button-variants-accent-active-background-color); /** Deprecated: use component.button.variants.accent.active.backgroundColor. Alias kept until 3.0 (decision 0016). */
+  --co-component-button-variants-emphasis-disabled-background-color: var(--co-component-button-variants-accent-disabled-background-color); /** Deprecated: use component.button.variants.accent.disabled.backgroundColor. Alias kept until 3.0 (decision 0016). */
+  --co-component-button-variants-emphasis-disabled-text-color: var(--co-component-button-variants-accent-disabled-text-color); /** Deprecated: use component.button.variants.accent.disabled.textColor. Alias kept until 3.0 (decision 0016). */
+  --co-component-button-sizes-small-font: var(--co-semantic-typography-button3); /** Small Button label typography. */
+  --co-component-button-sizes-medium-font: var(--co-semantic-typography-button2); /** Medium Button label typography. */
+  --co-component-button-sizes-large-font: var(--co-semantic-typography-button1); /** Large Button label typography. */
+  --co-component-chip-default-font: var(--co-semantic-typography-body); /** Chip label typography, the same as sizes.large.font. */
+  --co-component-chip-sizes-small-font: var(--co-semantic-typography-caption); /** Small chip label typography. */
+  --co-component-chip-sizes-medium-font: var(--co-semantic-typography-small); /** Medium chip label typography. */
+  --co-component-chip-sizes-large-font: var(--co-semantic-typography-body); /** Large chip label typography. No chip uses the large size today. */
+  --co-component-input-default-font: var(--co-semantic-typography-body); /** Text input value typography. */
+  --co-component-badge-label-typography-small: var(--co-semantic-typography-caption); /** Typography for small labels in the badge-like family (StatusBadge, CategoryBadge small; Tag). Combine with label.fontWeight. */
+  --co-component-badge-label-typography-medium: var(--co-semantic-typography-small); /** Typography for medium labels in the badge-like family (StatusBadge, CategoryBadge medium). Combine with label.fontWeight. */
+  --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-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). */
+}