# Tokens

Every CSS variable in OODS Foundry 0.10.1: 1,355 of them, by brand and theme.

Generated from @oods/foundry 0.10.1

Brands A and B are the brands OODS Foundry ships. [Brands](https://oods-foundry.com/brands) shows what each is, in each theme.

Each CSS variable, its value in the chosen brand and theme, and its meaning

| Variable | Value | Meaning |
| - | - | - |
| `--oods-border-panel-default-color` | `oklch(0.922 0 286)` | |
| `--oods-border-panel-default-radius` | `12px` | |
| `--oods-border-panel-default-style` | `solid` | |
| `--oods-border-panel-default-width` | `1px` | |
| `--oods-border-status-critical-color` | `oklch(0.807 0.088767 18.290593)` | |
| `--oods-border-status-critical-radius` | `8px` | |
| `--oods-border-status-critical-style` | `solid` | |
| `--oods-border-status-critical-width` | `1px` | |
| `--oods-border-surface-default-color` | `oklch(0.922 0 286)` | |
| `--oods-border-surface-default-radius` | `12px` | |
| `--oods-border-surface-default-style` | `solid` | |
| `--oods-border-surface-default-width` | `1px` | |
| `--oods-brand-a-border-strong` | `oklch(0.871 0 286)` | High-emphasis border. |
| `--oods-brand-a-border-subtle` | `oklch(0.922 0 286)` | Default border for surfaces. |
| `--oods-brand-a-status-critical-surface` | `oklch(0.955466 0.020724 13.839409)` | Critical feedback background. |
| `--oods-brand-a-status-critical-text` | `oklch(0.556979 0.197433 25.13833)` | Critical text colour. |
| `--oods-brand-a-status-info-surface` | `oklch(0.959682 0.020056 238.701263)` | Informational background surface. |
| `--oods-brand-a-status-info-text` | `oklch(0.540689 0.162234 252.214666)` | Informational text colour. |
| `--oods-brand-a-status-neutral-surface` | `oklch(0.97 0 286)` | Neutral feedback background. |
| `--oods-brand-a-status-neutral-text` | `oklch(0.439 0 286)` | Neutral text colour. |
| `--oods-brand-a-status-success-surface` | `oklch(0.958254 0.02227 155.931601)` | Success feedback background. |
| `--oods-brand-a-status-success-text` | `oklch(0.523466 0.11158 159.513172)` | Success text colour. |
| `--oods-brand-a-status-warning-surface` | `oklch(0.969531 0.068378 100.371682)` | Warning feedback background. |
| `--oods-brand-a-status-warning-text` | `oklch(0.553161 0.125197 63.921739)` | Warning text colour. |
| `--oods-brand-a-surface-canvas` | `oklch(1 0 286)` | Primary application canvas. |
| `--oods-brand-a-surface-interactive-primary` | `oklch(0.145 0 286)` | |
| `--oods-brand-a-surface-raised` | `oklch(1 0 286)` | Raised card surface. |
| `--oods-brand-a-surface-subtle` | `oklch(0.97 0 286)` | Subtle secondary surface. |
| `--oods-brand-a-text-muted` | `oklch(0.545 0 286)` | Muted caption text. |
| `--oods-brand-a-text-on-interactive` | `oklch(1 0 286)` | Text and icons on the primary interactive surface (buttons and selected controls). |
| `--oods-brand-a-text-primary` | `oklch(0.145 0 286)` | Primary reading text. |
| `--oods-brand-a-text-secondary` | `oklch(0.439 0 286)` | Secondary supporting text. |
| `--oods-brand-b-border-strong` | `oklch(0.871 0 286)` | High-emphasis border. |
| `--oods-brand-b-border-subtle` | `oklch(0.922 0 286)` | Default border for surfaces. |
| `--oods-brand-b-status-critical-surface` | `oklch(0.955466 0.020724 13.839409)` | Critical feedback background. |
| `--oods-brand-b-status-critical-text` | `oklch(0.556979 0.197433 25.13833)` | Critical text colour. |
| `--oods-brand-b-status-info-surface` | `oklch(0.959682 0.020056 238.701263)` | Informational background surface. |
| `--oods-brand-b-status-info-text` | `oklch(0.540689 0.162234 252.214666)` | Informational text colour. |
| `--oods-brand-b-status-neutral-surface` | `oklch(0.97 0 286)` | Neutral feedback background. |
| `--oods-brand-b-status-neutral-text` | `oklch(0.439 0 286)` | Neutral text colour. |
| `--oods-brand-b-status-success-surface` | `oklch(0.958254 0.02227 155.931601)` | Success feedback background. |
| `--oods-brand-b-status-success-text` | `oklch(0.523466 0.11158 159.513172)` | Success text colour. |
| `--oods-brand-b-status-warning-surface` | `oklch(0.969531 0.068378 100.371682)` | Warning feedback background. |
| `--oods-brand-b-status-warning-text` | `oklch(0.553161 0.125197 63.921739)` | Warning text colour. |
| `--oods-brand-b-surface-canvas` | `oklch(1 0 286)` | Primary application canvas. |
| `--oods-brand-b-surface-interactive-primary` | `oklch(0.541675 0.179047 288)` | |
| `--oods-brand-b-surface-raised` | `oklch(1 0 286)` | Raised card surface. |
| `--oods-brand-b-surface-subtle` | `oklch(0.97 0 286)` | Subtle secondary surface. |
| `--oods-brand-b-text-muted` | `oklch(0.545 0 286)` | Muted caption text. |
| `--oods-brand-b-text-on-interactive` | `oklch(1 0 286)` | Text and icons on the primary interactive surface (buttons and selected controls). |
| `--oods-brand-b-text-primary` | `oklch(0.145 0 286)` | Primary reading text. |
| `--oods-brand-b-text-secondary` | `oklch(0.439 0 286)` | Secondary supporting text. |
| `--cmp-badge-background` | `oklch(0.97 0 286)` | |
| `--cmp-badge-border` | `oklch(0.922 0 286)` | |
| `--cmp-badge-color` | `oklch(0.145 0 286)` | |
| `--cmp-badge-font-size` | `12px` | |
| `--cmp-badge-font-weight` | `500` | |
| `--cmp-badge-gap` | `0.25rem` | |
| `--cmp-badge-height` | `1.25rem` | |
| `--cmp-badge-icon` | `oklch(0.145 0 286)` | |
| `--cmp-badge-padding-block` | `0.125rem` | |
| `--cmp-badge-padding-inline` | `0.5rem` | |
| `--cmp-badge-radius` | `999px` | |
| `--cmp-badge-text` | `oklch(0.145 0 286)` | |
| `--cmp-banner-background` | `oklch(0.97 0 286)` | |
| `--cmp-banner-border` | `oklch(0.922 0 286)` | |
| `--cmp-banner-text` | `oklch(0.145 0 286)` | |
| `--cmp-billing-amount-text` | `oklch(0.145 0 286)` | |
| `--cmp-billing-currency-text` | `oklch(0.439 0 286)` | |
| `--cmp-billing-cycle-progress-fill` | `oklch(0.509225 0.172497 267.161083)` | |
| `--cmp-billing-cycle-progress-height` | `0.5rem` | |
| `--cmp-billing-interval-text` | `oklch(0.439 0 286)` | |
| `--cmp-billing-timeline-text` | `oklch(0.145 0 286)` | |
| `--cmp-border-default` | `oklch(0.922 0 286)` | |
| `--cmp-border-subtle` | `oklch(0.922 0 286)` | |
| `--cmp-button-background` | `oklch(0.145 0 286)` | |
| `--cmp-button-background-disabled` | `oklch(0.97 0 286)` | |
| `--cmp-button-background-hover` | `oklch(0.3361 0 286)` | |
| `--cmp-button-border` | `oklch(0.922 0 286)` | |
| `--cmp-button-border-disabled` | `oklch(0.922 0 286)` | |
| `--cmp-button-focus-outer` | `oklch(0.543785 0.191021 267)` | |
| `--cmp-button-focus-width` | `2px` | |
| `--cmp-button-font-weight` | `500` | |
| `--cmp-button-gap` | `0.5rem` | |
| `--cmp-button-height` | `2rem` | |
| `--cmp-button-height-lg` | `2.5rem` | |
| `--cmp-button-height-sm` | `1.75rem` | |
| `--cmp-button-padding-block` | `0.25rem` | |
| `--cmp-button-padding-block-lg` | `0.5rem` | |
| `--cmp-button-padding-block-sm` | `0.125rem` | |
| `--cmp-button-padding-inline` | `0.75rem` | |
| `--cmp-button-padding-inline-lg` | `1rem` | |
| `--cmp-button-padding-inline-sm` | `0.625rem` | |
| `--cmp-button-radius` | `6px` | |
| `--cmp-button-text` | `oklch(1 0 286)` | |
| `--cmp-button-text-disabled` | `oklch(0.643 0 286)` | |
| `--cmp-card-radius` | `12px` | |
| `--cmp-card-shadow-blur` | `8px` | |
| `--cmp-card-shadow-color` | `rgba(0, 0, 0, 0.06)` | |
| `--cmp-card-shadow-offset-x` | `0px` | |
| `--cmp-card-shadow-offset-y` | `4px` | |
| `--cmp-card-shadow-spread` | `-4px` | |
| `--cmp-checkbox-background-checked` | `oklch(0.145 0 286)` | |
| `--cmp-checkbox-gap` | `0.5rem` | |
| `--cmp-checkbox-text` | `oklch(0.145 0 286)` | |
| `--cmp-event-background` | `oklch(1 0 286)` | |
| `--cmp-event-border` | `oklch(0.922 0 286)` | |
| `--cmp-event-text` | `oklch(0.145 0 286)` | |
| `--cmp-filter-background` | `oklch(1 0 286)` | |
| `--cmp-filter-border` | `oklch(0.922 0 286)` | |
| `--cmp-filter-legend` | `oklch(0.439 0 286)` | |
| `--cmp-filter-text` | `oklch(0.145 0 286)` | |
| `--cmp-focus-offset` | `2px` | |
| `--cmp-focus-outer` | `oklch(0.543785 0.191021 267)` | |
| `--cmp-focus-width` | `2px` | |
| `--cmp-form-background` | `oklch(1 0 286)` | |
| `--cmp-form-border` | `oklch(0.922 0 286)` | |
| `--cmp-form-hint` | `oklch(0.439 0 286)` | |
| `--cmp-form-text` | `oklch(0.145 0 286)` | |
| `--cmp-header-metadata` | `oklch(0.439 0 286)` | |
| `--cmp-header-subtitle` | `oklch(0.439 0 286)` | |
| `--cmp-header-title` | `oklch(0.145 0 286)` | |
| `--cmp-input-background` | `oklch(1 0 286)` | |
| `--cmp-input-border` | `oklch(0.643 0 286)` | |
| `--cmp-input-focus` | `oklch(0.543785 0.191021 267)` | |
| `--cmp-input-gap` | `0.375rem` | |
| `--cmp-input-message-border` | `oklch(0.827254 0.122422 86.674497)` | |
| `--cmp-input-message-text` | `oklch(0.553161 0.125197 63.921739)` | |
| `--cmp-input-padding-block` | `0.25rem` | |
| `--cmp-input-padding-block-compact` | `0.25rem` | |
| `--cmp-input-padding-inline` | `0.75rem` | |
| `--cmp-input-padding-inline-compact` | `0.5rem` | |
| `--cmp-input-placeholder` | `oklch(0.545 0 286)` | |
| `--cmp-input-radius` | `6px` | |
| `--cmp-input-support-text` | `oklch(0.545 0 286)` | |
| `--cmp-input-text` | `oklch(0.145 0 286)` | |
| `--cmp-meta-label` | `oklch(0.439 0 286)` | |
| `--cmp-meta-text` | `oklch(0.145 0 286)` | |
| `--cmp-panel-background` | `oklch(1 0 286)` | |
| `--cmp-panel-border` | `oklch(0.922 0 286)` | |
| `--cmp-panel-subtitle` | `oklch(0.439 0 286)` | |
| `--cmp-panel-title` | `oklch(0.145 0 286)` | |
| `--cmp-preview-frame` | `oklch(0.922 0 286)` | |
| `--cmp-preview-placeholder` | `oklch(0.439 0 286)` | |
| `--cmp-shadow-overlay-blur` | `16px` | |
| `--cmp-shadow-overlay-color` | `rgba(0, 0, 0, 0.1)` | |
| `--cmp-shadow-overlay-offset-x` | `0px` | |
| `--cmp-shadow-overlay-offset-y` | `8px` | |
| `--cmp-shadow-overlay-spread` | `-4px` | |
| `--cmp-shadow-panel-blur` | `8px` | |
| `--cmp-shadow-panel-color` | `rgba(0, 0, 0, 0.06)` | |
| `--cmp-shadow-panel-offset-x` | `0px` | |
| `--cmp-shadow-panel-offset-y` | `4px` | |
| `--cmp-shadow-panel-spread` | `-4px` | |
| `--cmp-spacing-inline-md` | `1rem` | |
| `--cmp-spacing-inline-sm` | `0.75rem` | |
| `--cmp-spacing-inline-xs` | `0.5rem` | |
| `--cmp-spacing-inset-compact` | `0.75rem` | |
| `--cmp-spacing-inset-default` | `1rem` | |
| `--cmp-spacing-inset-sm` | `0.75rem` | |
| `--cmp-spacing-stack-default` | `1rem` | |
| `--cmp-spacing-stack-lg` | `1.5rem` | |
| `--cmp-spacing-stack-md` | `1rem` | |
| `--cmp-spacing-stack-sm` | `0.75rem` | |
| `--cmp-spacing-stack-xl` | `2rem` | |
| `--cmp-spacing-stack-xs` | `0.5rem` | |
| `--cmp-summary-background` | `oklch(1 0 286)` | |
| `--cmp-summary-border` | `oklch(0.922 0 286)` | |
| `--cmp-summary-label` | `oklch(0.439 0 286)` | |
| `--cmp-summary-text` | `oklch(0.145 0 286)` | |
| `--cmp-surface-action` | `oklch(0.145 0 286)` | |
| `--cmp-surface-action-hover` | `oklch(0.3361 0 286)` | |
| `--cmp-surface-panel` | `oklch(1 0 286)` | |
| `--cmp-surface-subtle` | `oklch(0.97 0 286)` | |
| `--cmp-swatch-border` | `oklch(0.922 0 286)` | |
| `--cmp-swatch-chip` | `oklch(0.145 0 286)` | |
| `--cmp-tabs-indicator-width` | `2px` | |
| `--cmp-tabs-padding-block` | `0.625rem` | |
| `--cmp-tabs-padding-block-lg` | `0.75rem` | |
| `--cmp-tabs-padding-block-sm` | `0.5rem` | |
| `--cmp-tabs-padding-inline` | `0.75rem` | |
| `--cmp-tabs-padding-inline-lg` | `1rem` | |
| `--cmp-tabs-padding-inline-sm` | `0.625rem` | |
| `--cmp-text-accent` | `oklch(0.509225 0.172497 267.161083)` | |
| `--cmp-text-body` | `oklch(0.145 0 286)` | |
| `--cmp-text-muted` | `oklch(0.545 0 286)` | |
| `--cmp-text-on-action` | `oklch(1 0 286)` | |
| `--cmp-text-placeholder-color` | `oklch(0.545 0 286)` | |
| `--cmp-text-placeholder-disabled` | `oklch(0.643 0 286)` | |
| `--cmp-text-placeholder-error` | `oklch(0.556979 0.197433 25.13833)` | |
| `--cmp-text-placeholder-focus` | `oklch(0.439 0 286)` | |
| `--cmp-text-primary` | `oklch(0.145 0 286)` | |
| `--cmp-text-secondary` | `oklch(0.439 0 286)` | |
| `--cmp-timeline-background` | `oklch(1 0 286)` | |
| `--cmp-timeline-border` | `oklch(0.922 0 286)` | |
| `--cmp-timeline-marker` | `oklch(0.145 0 286)` | |
| `--cmp-timeline-text` | `oklch(0.145 0 286)` | |
| `--oods-color-brand-a-accent-background` | `oklch(0.96086 0.016961 267.781434)` | Background of an accent panel. |
| `--oods-color-brand-a-accent-border` | `oklch(0.806161 0.08754 271.403687)` | Border of an accent panel. |
| `--oods-color-brand-a-accent-text` | `oklch(0.509225 0.172497 267.161083)` | Text on an accent panel. |
| `--oods-color-brand-a-border-interactive` | `oklch(0.643 0 286)` | Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on. |
| `--oods-color-brand-a-border-interactive-hover` | `oklch(0.545 0 286)` | Border of a hovered control. |
| `--oods-color-brand-a-border-strong` | `oklch(0.871 0 286)` | High-emphasis border. |
| `--oods-color-brand-a-border-subtle` | `oklch(0.922 0 286)` | Default border for surfaces. |
| `--oods-color-brand-a-focus-ring-inner` | `oklch(1 0 286)` | Inner focus ring colour. |
| `--oods-color-brand-a-focus-ring-outer` | `oklch(0.543785 0.191021 267)` | Outer focus ring colour. |
| `--oods-color-brand-a-focus-text` | `oklch(0.509225 0.172497 267.161083)` | Focus foreground colour. |
| `--oods-color-brand-a-status-accent-border` | `oklch(0.806161 0.08754 271.403687)` | Accent border colour. |
| `--oods-color-brand-a-status-accent-icon` | `oklch(0.543785 0.191021 267)` | Accent icon colour. |
| `--oods-color-brand-a-status-accent-on-solid` | `oklch(1 0 286)` | Text and icons on the solid accent fill. |
| `--oods-color-brand-a-status-accent-solid` | `oklch(0.543785 0.191021 267)` | Solid accent fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-a-status-accent-surface` | `oklch(0.96086 0.016961 267.781434)` | Accent feedback background. |
| `--oods-color-brand-a-status-accent-text` | `oklch(0.509225 0.172497 267.161083)` | Accent text colour. |
| `--oods-color-brand-a-status-critical-border` | `oklch(0.807 0.088767 18.290593)` | Critical border colour. |
| `--oods-color-brand-a-status-critical-icon` | `oklch(0.625577 0.193344 23)` | Critical icon colour. |
| `--oods-color-brand-a-status-critical-on-solid` | `oklch(1 0 286)` | Text and icons on the solid critical fill. |
| `--oods-color-brand-a-status-critical-solid` | `oklch(0.590577 0.193344 23)` | Solid critical fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-a-status-critical-surface` | `oklch(0.955466 0.020724 13.839409)` | Critical feedback background. |
| `--oods-color-brand-a-status-critical-text` | `oklch(0.556979 0.197433 25.13833)` | Critical text colour. |
| `--oods-color-brand-a-status-info-border` | `oklch(0.809755 0.088669 243.091253)` | Informational border colour. |
| `--oods-color-brand-a-status-info-icon` | `oklch(0.622153 0.183136 251.723539)` | Informational icon colour. |
| `--oods-color-brand-a-status-info-on-solid` | `oklch(1 0 286)` | Text and icons on the solid info fill. |
| `--oods-color-brand-a-status-info-solid` | `oklch(0.566651 0.168568 251.8)` | Solid info fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-a-status-info-surface` | `oklch(0.959682 0.020056 238.701263)` | Informational background surface. |
| `--oods-color-brand-a-status-info-text` | `oklch(0.540689 0.162234 252.214666)` | Informational text colour. |
| `--oods-color-brand-a-status-neutral-border` | `oklch(0.871 0 286)` | Neutral border colour. |
| `--oods-color-brand-a-status-neutral-icon` | `oklch(0.643 0 286)` | Neutral icon colour. |
| `--oods-color-brand-a-status-neutral-on-solid` | `oklch(1 0 286)` | Text and icons on the solid neutral fill. |
| `--oods-color-brand-a-status-neutral-solid` | `oklch(0.145 0 286)` | Solid neutral fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-a-status-neutral-surface` | `oklch(0.97 0 286)` | Neutral feedback background. |
| `--oods-color-brand-a-status-neutral-text` | `oklch(0.439 0 286)` | Neutral text colour. |
| `--oods-color-brand-a-status-success-border` | `oklch(0.798152 0.08315 159.165466)` | Success border colour. |
| `--oods-color-brand-a-status-success-icon` | `oklch(0.611472 0.126614 158.247346)` | Success icon colour. |
| `--oods-color-brand-a-status-success-on-solid` | `oklch(1 0 286)` | Text and icons on the solid success fill. |
| `--oods-color-brand-a-status-success-solid` | `oklch(0.548102 0.128886 157.7)` | Solid success fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-a-status-success-surface` | `oklch(0.958254 0.02227 155.931601)` | Success feedback background. |
| `--oods-color-brand-a-status-success-text` | `oklch(0.523466 0.11158 159.513172)` | Success text colour. |
| `--oods-color-brand-a-status-warning-border` | `oklch(0.827254 0.122422 86.674497)` | Warning border colour. |
| `--oods-color-brand-a-status-warning-icon` | `oklch(0.570661 0.129157 63.921739)` | Warning icon colour. |
| `--oods-color-brand-a-status-warning-on-solid` | `oklch(0.145 0 286)` | Text and icons on the solid warning fill. |
| `--oods-color-brand-a-status-warning-solid` | `oklch(0.853575 0.15722 84.1)` | Solid warning fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-a-status-warning-surface` | `oklch(0.969531 0.068378 100.371682)` | Warning feedback background. |
| `--oods-color-brand-a-status-warning-text` | `oklch(0.553161 0.125197 63.921739)` | Warning text colour. |
| `--oods-color-brand-a-surface-backdrop` | `oklch(0.145 0 286)` | Backdrop scrim surface. |
| `--oods-color-brand-a-surface-canvas` | `oklch(1 0 286)` | Primary application canvas. |
| `--oods-color-brand-a-surface-disabled` | `oklch(0.97 0 286)` | Surface colour for disabled or inactive UI. |
| `--oods-color-brand-a-surface-interactive-destructive-default` | `oklch(0.590577 0.193344 23)` | The destructive action, at rest. |
| `--oods-color-brand-a-surface-interactive-destructive-hover` | `oklch(0.560577 0.194665 24.00731)` | The destructive action, hovered. |
| `--oods-color-brand-a-surface-interactive-destructive-pressed` | `oklch(0.530577 0.194665 24.00731)` | The destructive action, pressed. |
| `--oods-color-brand-a-surface-interactive-primary-default` | `oklch(0.145 0 286)` | Primary interactive surface default state. |
| `--oods-color-brand-a-surface-interactive-primary-hover` | `oklch(0.3361 0 286)` | Primary interactive surface hover state. |
| `--oods-color-brand-a-surface-interactive-primary-pressed` | `oklch(0.2626 0 286)` | Primary interactive surface pressed state. |
| `--oods-color-brand-a-surface-interactive-secondary-default` | `oklch(0.97 0 286)` | The secondary action (a subtle fill), at rest. |
| `--oods-color-brand-a-surface-interactive-secondary-hover` | `oklch(0.95 0 286)` | The secondary action (a subtle fill), hovered. |
| `--oods-color-brand-a-surface-interactive-secondary-pressed` | `oklch(0.935 0 286)` | The secondary action (a subtle fill), pressed. |
| `--oods-color-brand-a-surface-inverse` | `oklch(0.145 0 286)` | Inverse surface for dark-on-light treatments. |
| `--oods-color-brand-a-surface-raised` | `oklch(1 0 286)` | Raised card surface. |
| `--oods-color-brand-a-surface-subtle` | `oklch(0.97 0 286)` | Subtle secondary surface. |
| `--oods-color-brand-a-text-accent` | `oklch(0.509225 0.172497 267.161083)` | Accent text colour. |
| `--oods-color-brand-a-text-disabled` | `oklch(0.643 0 286)` | Disabled or de-emphasised text. |
| `--oods-color-brand-a-text-inverse` | `oklch(1 0 286)` | Text on inverse surfaces. |
| `--oods-color-brand-a-text-muted` | `oklch(0.545 0 286)` | Muted caption text. |
| `--oods-color-brand-a-text-on-destructive` | `oklch(1 0 286)` | Text and icons on the destructive action. |
| `--oods-color-brand-a-text-on-interactive` | `oklch(1 0 286)` | Text and icons on the primary interactive surface (buttons and selected controls). |
| `--oods-color-brand-a-text-primary` | `oklch(0.145 0 286)` | Primary reading text. |
| `--oods-color-brand-a-text-secondary` | `oklch(0.439 0 286)` | Secondary supporting text. |
| `--oods-color-brand-b-accent-background` | `oklch(0.962276 0.019054 299.014054)` | Background of an accent panel. |
| `--oods-color-brand-b-accent-border` | `oklch(0.80624 0.09022 293.552564)` | Border of an accent panel. |
| `--oods-color-brand-b-accent-text` | `oklch(0.507841 0.158971 288.60723)` | Text on an accent panel. |
| `--oods-color-brand-b-border-interactive` | `oklch(0.643 0 286)` | Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on. |
| `--oods-color-brand-b-border-interactive-hover` | `oklch(0.545 0 286)` | Border of a hovered control. |
| `--oods-color-brand-b-border-strong` | `oklch(0.871 0 286)` | High-emphasis border. |
| `--oods-color-brand-b-border-subtle` | `oklch(0.922 0 286)` | Default border for surfaces. |
| `--oods-color-brand-b-focus-ring-inner` | `oklch(1 0 286)` | Inner focus ring colour. |
| `--oods-color-brand-b-focus-ring-outer` | `oklch(0.145 0 286)` | Outer focus ring colour. |
| `--oods-color-brand-b-focus-text` | `oklch(0.507841 0.158971 288.60723)` | Focus foreground colour. |
| `--oods-color-brand-b-status-accent-border` | `oklch(0.80624 0.09022 293.552564)` | Accent border colour. |
| `--oods-color-brand-b-status-accent-icon` | `oklch(0.541675 0.179047 288)` | Accent icon colour. |
| `--oods-color-brand-b-status-accent-on-solid` | `oklch(1 0 286)` | Text and icons on the solid accent fill. |
| `--oods-color-brand-b-status-accent-solid` | `oklch(0.541675 0.179047 288)` | Solid accent fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-b-status-accent-surface` | `oklch(0.962276 0.019054 299.014054)` | Accent feedback background. |
| `--oods-color-brand-b-status-accent-text` | `oklch(0.507841 0.158971 288.60723)` | Accent text colour. |
| `--oods-color-brand-b-status-critical-border` | `oklch(0.807 0.088767 18.290593)` | Critical border colour. |
| `--oods-color-brand-b-status-critical-icon` | `oklch(0.625577 0.193344 23)` | Critical icon colour. |
| `--oods-color-brand-b-status-critical-on-solid` | `oklch(1 0 286)` | Text and icons on the solid critical fill. |
| `--oods-color-brand-b-status-critical-solid` | `oklch(0.590577 0.193344 23)` | Solid critical fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-b-status-critical-surface` | `oklch(0.955466 0.020724 13.839409)` | Critical feedback background. |
| `--oods-color-brand-b-status-critical-text` | `oklch(0.556979 0.197433 25.13833)` | Critical text colour. |
| `--oods-color-brand-b-status-info-border` | `oklch(0.809755 0.088669 243.091253)` | Informational border colour. |
| `--oods-color-brand-b-status-info-icon` | `oklch(0.622153 0.183136 251.723539)` | Informational icon colour. |
| `--oods-color-brand-b-status-info-on-solid` | `oklch(1 0 286)` | Text and icons on the solid info fill. |
| `--oods-color-brand-b-status-info-solid` | `oklch(0.566651 0.168568 251.8)` | Solid info fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-b-status-info-surface` | `oklch(0.959682 0.020056 238.701263)` | Informational background surface. |
| `--oods-color-brand-b-status-info-text` | `oklch(0.540689 0.162234 252.214666)` | Informational text colour. |
| `--oods-color-brand-b-status-neutral-border` | `oklch(0.871 0 286)` | Neutral border colour. |
| `--oods-color-brand-b-status-neutral-icon` | `oklch(0.643 0 286)` | Neutral icon colour. |
| `--oods-color-brand-b-status-neutral-on-solid` | `oklch(1 0 286)` | Text and icons on the solid neutral fill. |
| `--oods-color-brand-b-status-neutral-solid` | `oklch(0.145 0 286)` | Solid neutral fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-b-status-neutral-surface` | `oklch(0.97 0 286)` | Neutral feedback background. |
| `--oods-color-brand-b-status-neutral-text` | `oklch(0.439 0 286)` | Neutral text colour. |
| `--oods-color-brand-b-status-success-border` | `oklch(0.798152 0.08315 159.165466)` | Success border colour. |
| `--oods-color-brand-b-status-success-icon` | `oklch(0.611472 0.126614 158.247346)` | Success icon colour. |
| `--oods-color-brand-b-status-success-on-solid` | `oklch(1 0 286)` | Text and icons on the solid success fill. |
| `--oods-color-brand-b-status-success-solid` | `oklch(0.548102 0.128886 157.7)` | Solid success fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-b-status-success-surface` | `oklch(0.958254 0.02227 155.931601)` | Success feedback background. |
| `--oods-color-brand-b-status-success-text` | `oklch(0.523466 0.11158 159.513172)` | Success text colour. |
| `--oods-color-brand-b-status-warning-border` | `oklch(0.827254 0.122422 86.674497)` | Warning border colour. |
| `--oods-color-brand-b-status-warning-icon` | `oklch(0.570661 0.129157 63.921739)` | Warning icon colour. |
| `--oods-color-brand-b-status-warning-on-solid` | `oklch(0.145 0 286)` | Text and icons on the solid warning fill. |
| `--oods-color-brand-b-status-warning-solid` | `oklch(0.853575 0.15722 84.1)` | Solid warning fill, for emphasis (a solid badge or banner). |
| `--oods-color-brand-b-status-warning-surface` | `oklch(0.969531 0.068378 100.371682)` | Warning feedback background. |
| `--oods-color-brand-b-status-warning-text` | `oklch(0.553161 0.125197 63.921739)` | Warning text colour. |
| `--oods-color-brand-b-surface-backdrop` | `oklch(0.145 0 286)` | Backdrop scrim surface. |
| `--oods-color-brand-b-surface-canvas` | `oklch(1 0 286)` | Primary application canvas. |
| `--oods-color-brand-b-surface-disabled` | `oklch(0.97 0 286)` | Surface colour for disabled or inactive UI. |
| `--oods-color-brand-b-surface-interactive-destructive-default` | `oklch(0.590577 0.193344 23)` | The destructive action, at rest. |
| `--oods-color-brand-b-surface-interactive-destructive-hover` | `oklch(0.560577 0.194665 24.00731)` | The destructive action, hovered. |
| `--oods-color-brand-b-surface-interactive-destructive-pressed` | `oklch(0.530577 0.194665 24.00731)` | The destructive action, pressed. |
| `--oods-color-brand-b-surface-interactive-primary-default` | `oklch(0.541675 0.179047 288)` | Primary interactive surface default state. |
| `--oods-color-brand-b-surface-interactive-primary-hover` | `oklch(0.510873 0.177492 287.649345)` | Primary interactive surface hover state. |
| `--oods-color-brand-b-surface-interactive-primary-pressed` | `oklch(0.480071 0.177492 287.649345)` | Primary interactive surface pressed state. |
| `--oods-color-brand-b-surface-interactive-secondary-default` | `oklch(0.97 0 286)` | The secondary action (a subtle fill), at rest. |
| `--oods-color-brand-b-surface-interactive-secondary-hover` | `oklch(0.95 0 286)` | The secondary action (a subtle fill), hovered. |
| `--oods-color-brand-b-surface-interactive-secondary-pressed` | `oklch(0.935 0 286)` | The secondary action (a subtle fill), pressed. |
| `--oods-color-brand-b-surface-inverse` | `oklch(0.145 0 286)` | Inverse surface for dark-on-light treatments. |
| `--oods-color-brand-b-surface-raised` | `oklch(1 0 286)` | Raised card surface. |
| `--oods-color-brand-b-surface-subtle` | `oklch(0.97 0 286)` | Subtle secondary surface. |
| `--oods-color-brand-b-text-accent` | `oklch(0.507841 0.158971 288.60723)` | Accent text colour. |
| `--oods-color-brand-b-text-disabled` | `oklch(0.643 0 286)` | Disabled or de-emphasised text. |
| `--oods-color-brand-b-text-inverse` | `oklch(1 0 286)` | Text on inverse surfaces. |
| `--oods-color-brand-b-text-muted` | `oklch(0.545 0 286)` | Muted caption text. |
| `--oods-color-brand-b-text-on-destructive` | `oklch(1 0 286)` | Text and icons on the destructive action. |
| `--oods-color-brand-b-text-on-interactive` | `oklch(1 0 286)` | Text and icons on the primary interactive surface (buttons and selected controls). |
| `--oods-color-brand-b-text-primary` | `oklch(0.145 0 286)` | Primary reading text. |
| `--oods-color-brand-b-text-secondary` | `oklch(0.439 0 286)` | Secondary supporting text. |
| `--oods-font-brand-a-mono` | `'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | |
| `--oods-font-brand-a-sans` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-font-brand-b-mono` | `'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | |
| `--oods-font-brand-b-sans` | `'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-motion-duration-base` | `180ms` | |
| `--oods-motion-duration-fast` | `120ms` | |
| `--oods-motion-duration-slow` | `320ms` | |
| `--oods-motion-easing-emphasized` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--oods-motion-easing-linear` | `cubic-bezier(0, 0, 1, 1)` | |
| `--oods-motion-easing-standard` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--oods-motion-reduced-duration-base` | `0ms` | |
| `--oods-motion-reduced-duration-fast` | `0ms` | |
| `--oods-motion-reduced-duration-slow` | `0ms` | |
| `--oods-motion-reduced-transition-banner-reveal-delay` | `0ms` | |
| `--oods-motion-reduced-transition-banner-reveal-duration` | `0ms` | |
| `--oods-motion-reduced-transition-banner-reveal-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--oods-motion-reduced-transition-chip-in-delay` | `0ms` | |
| `--oods-motion-reduced-transition-chip-in-duration` | `0ms` | |
| `--oods-motion-reduced-transition-chip-in-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--oods-motion-reduced-transition-chip-out-delay` | `0ms` | |
| `--oods-motion-reduced-transition-chip-out-duration` | `0ms` | |
| `--oods-motion-reduced-transition-chip-out-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--oods-motion-reduced-transition-focus-delay` | `0ms` | |
| `--oods-motion-reduced-transition-focus-duration` | `0ms` | |
| `--oods-motion-reduced-transition-focus-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--oods-motion-reduced-transition-hover-delay` | `0ms` | |
| `--oods-motion-reduced-transition-hover-duration` | `0ms` | |
| `--oods-motion-reduced-transition-hover-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--oods-motion-transition-banner-reveal-delay` | `20ms` | |
| `--oods-motion-transition-banner-reveal-duration` | `320ms` | |
| `--oods-motion-transition-banner-reveal-timing-function` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--oods-motion-transition-chip-in-delay` | `0ms` | |
| `--oods-motion-transition-chip-in-duration` | `180ms` | |
| `--oods-motion-transition-chip-in-timing-function` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--oods-motion-transition-chip-out-delay` | `0ms` | |
| `--oods-motion-transition-chip-out-duration` | `120ms` | |
| `--oods-motion-transition-chip-out-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--oods-motion-transition-focus-delay` | `0ms` | |
| `--oods-motion-transition-focus-duration` | `180ms` | |
| `--oods-motion-transition-focus-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--oods-motion-transition-hover-delay` | `0ms` | |
| `--oods-motion-transition-hover-duration` | `120ms` | |
| `--oods-motion-transition-hover-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--oods-overlay-backdrop-opacity` | `0.5` | |
| `--oods-overlay-transition-close-delay` | `0ms` | |
| `--oods-overlay-transition-close-duration` | `180ms` | |
| `--oods-overlay-transition-close-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--oods-overlay-transition-open-delay` | `0ms` | |
| `--oods-overlay-transition-open-duration` | `180ms` | |
| `--oods-overlay-transition-open-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--oods-radius-brand-a-card` | `12px` | |
| `--oods-radius-brand-a-control` | `6px` | |
| `--oods-radius-brand-a-large` | `8px` | |
| `--oods-radius-brand-a-pill` | `999px` | |
| `--oods-radius-brand-a-small` | `4px` | |
| `--oods-radius-brand-b-card` | `16px` | |
| `--oods-radius-brand-b-control` | `8px` | |
| `--oods-radius-brand-b-large` | `10px` | |
| `--oods-radius-brand-b-pill` | `999px` | |
| `--oods-radius-brand-b-small` | `6px` | |
| `--ref-border-radius-md` | `12px` | |
| `--ref-border-radius-pill` | `999px` | |
| `--ref-border-radius-sm` | `8px` | |
| `--ref-border-style-solid` | `solid` | |
| `--ref-border-width-bold` | `2px` | |
| `--ref-border-width-emphasis` | `3px` | |
| `--ref-border-width-hairline` | `1px` | |
| `--ref-color-accent-1` | `oklch(0.99433 0.001321 286.36335)` | |
| `--ref-color-accent-10` | `oklch(0.510687 0.195366 266.573115)` | |
| `--ref-color-accent-11` | `oklch(0.509225 0.172497 267.161083)` | |
| `--ref-color-accent-12` | `oklch(0.312644 0.085823 268.592788)` | |
| `--ref-color-accent-2` | `oklch(0.98231 0.00825 271.320642)` | |
| `--ref-color-accent-3` | `oklch(0.96086 0.016961 267.781434)` | |
| `--ref-color-accent-4` | `oklch(0.934611 0.031041 269.8075)` | |
| `--ref-color-accent-5` | `oklch(0.901941 0.047151 269.606376)` | |
| `--ref-color-accent-6` | `oklch(0.86195 0.06753 271.078879)` | |
| `--ref-color-accent-7` | `oklch(0.806161 0.08754 271.403687)` | |
| `--ref-color-accent-8` | `oklch(0.730851 0.112333 270.420021)` | |
| `--ref-color-accent-9` | `oklch(0.543785 0.191021 267)` | |
| `--ref-color-accent-dark-1` | `oklch(0.190861 0.02457 276.52042)` | |
| `--ref-color-accent-dark-10` | `oklch(0.589183 0.175768 269.290124)` | |
| `--ref-color-accent-dark-11` | `oklch(0.775866 0.113802 273.011264)` | |
| `--ref-color-accent-dark-12` | `oklch(0.910779 0.042751 269.541785)` | |
| `--ref-color-accent-dark-2` | `oklch(0.209371 0.03015 274.832539)` | |
| `--ref-color-accent-dark-3` | `oklch(0.271571 0.070509 267.975387)` | |
| `--ref-color-accent-dark-4` | `oklch(0.318451 0.094631 267.243106)` | |
| `--ref-color-accent-dark-5` | `oklch(0.362472 0.10437 267.020639)` | |
| `--ref-color-accent-dark-6` | `oklch(0.403304 0.111231 268.753498)` | |
| `--ref-color-accent-dark-7` | `oklch(0.449078 0.120101 268.933794)` | |
| `--ref-color-accent-dark-8` | `oklch(0.502093 0.136611 268.247049)` | |
| `--ref-color-accent-dark-9` | `oklch(0.543785 0.191021 267)` | |
| `--ref-color-archive-1` | `oklch(0.993151 0.001345 325.575418)` | |
| `--ref-color-archive-10` | `oklch(0.524707 0.070198 305.434475)` | |
| `--ref-color-archive-11` | `oklch(0.516842 0.069327 305.916434)` | |
| `--ref-color-archive-12` | `oklch(0.322258 0.044099 303.882292)` | |
| `--ref-color-archive-2` | `oklch(0.981193 0.004052 311.215635)` | |
| `--ref-color-archive-3` | `oklch(0.958846 0.009954 311.741665)` | |
| `--ref-color-archive-4` | `oklch(0.933258 0.015449 312.684793)` | |
| `--ref-color-archive-5` | `oklch(0.901154 0.021348 311.2832)` | |
| `--ref-color-archive-6` | `oklch(0.859184 0.028735 311.083617)` | |
| `--ref-color-archive-7` | `oklch(0.804282 0.036704 309.722537)` | |
| `--ref-color-archive-8` | `oklch(0.73307 0.049006 308.004128)` | |
| `--ref-color-archive-9` | `oklch(0.555677 0.073169 305.9)` | |
| `--ref-color-archive-dark-1` | `oklch(0.191326 0.008995 315.62123)` | |
| `--ref-color-archive-dark-10` | `oklch(0.595571 0.070705 306.494008)` | |
| `--ref-color-archive-dark-11` | `oklch(0.780673 0.058096 307.77664)` | |
| `--ref-color-archive-dark-12` | `oklch(0.910679 0.019482 311.027004)` | |
| `--ref-color-archive-dark-2` | `oklch(0.213741 0.011978 313.165244)` | |
| `--ref-color-archive-dark-3` | `oklch(0.267699 0.024476 312.648694)` | |
| `--ref-color-archive-dark-4` | `oklch(0.308776 0.032741 310.83747)` | |
| `--ref-color-archive-dark-5` | `oklch(0.344748 0.036825 310.535741)` | |
| `--ref-color-archive-dark-6` | `oklch(0.388691 0.038553 309.492173)` | |
| `--ref-color-archive-dark-7` | `oklch(0.448578 0.043175 308.64496)` | |
| `--ref-color-archive-dark-8` | `oklch(0.541239 0.053055 307.604243)` | |
| `--ref-color-archive-dark-9` | `oklch(0.555677 0.073169 305.9)` | |
| `--ref-color-critical-1` | `oklch(0.993361 0.003191 17.152702)` | |
| `--ref-color-critical-10` | `oklch(0.599026 0.194665 24.00731)` | |
| `--ref-color-critical-11` | `oklch(0.556979 0.197433 25.13833)` | |
| `--ref-color-critical-12` | `oklch(0.338995 0.108912 16.582625)` | |
| `--ref-color-critical-2` | `oklch(0.982321 0.008578 17.279933)` | |
| `--ref-color-critical-3` | `oklch(0.955466 0.020724 13.839409)` | |
| `--ref-color-critical-4` | `oklch(0.921729 0.040108 15.983292)` | |
| `--ref-color-critical-5` | `oklch(0.892051 0.056746 16.900587)` | |
| `--ref-color-critical-6` | `oklch(0.856903 0.07405 17.650527)` | |
| `--ref-color-critical-7` | `oklch(0.807 0.088767 18.290593)` | |
| `--ref-color-critical-8` | `oklch(0.744352 0.113221 18.720737)` | |
| `--ref-color-critical-9` | `oklch(0.625577 0.193344 23)` | |
| `--ref-color-critical-dark-1` | `oklch(0.188032 0.013451 18.376427)` | |
| `--ref-color-critical-dark-10` | `oklch(0.663381 0.177398 22.826714)` | |
| `--ref-color-critical-dark-11` | `oklch(0.780413 0.128122 22.121461)` | |
| `--ref-color-critical-dark-12` | `oklch(0.902368 0.05268 6.425812)` | |
| `--ref-color-critical-dark-2` | `oklch(0.204589 0.021663 14.036578)` | |
| `--ref-color-critical-dark-3` | `oklch(0.251058 0.06493 12.674503)` | |
| `--ref-color-critical-dark-4` | `oklch(0.289299 0.095094 14.308262)` | |
| `--ref-color-critical-dark-5` | `oklch(0.332115 0.106652 15.502172)` | |
| `--ref-color-critical-dark-6` | `oklch(0.381441 0.110807 16.777348)` | |
| `--ref-color-critical-dark-7` | `oklch(0.450175 0.121046 18.748598)` | |
| `--ref-color-critical-dark-8` | `oklch(0.543559 0.145758 21.734376)` | |
| `--ref-color-critical-dark-9` | `oklch(0.625577 0.193344 23)` | |
| `--ref-color-info-1` | `oklch(0.993102 0.003397 247.9076)` | |
| `--ref-color-info-10` | `oklch(0.622153 0.183136 251.723539)` | |
| `--ref-color-info-11` | `oklch(0.555689 0.162234 252.214666)` | |
| `--ref-color-info-12` | `oklch(0.323945 0.096366 258.828847)` | |
| `--ref-color-info-2` | `oklch(0.98202 0.009238 242.872432)` | |
| `--ref-color-info-3` | `oklch(0.959682 0.020056 238.701263)` | |
| `--ref-color-info-4` | `oklch(0.938065 0.034946 234.847999)` | |
| `--ref-color-info-5` | `oklch(0.905066 0.051287 240.349496)` | |
| `--ref-color-info-6` | `oklch(0.863268 0.068199 243.352482)` | |
| `--ref-color-info-7` | `oklch(0.809755 0.088669 243.091253)` | |
| `--ref-color-info-8` | `oklch(0.733606 0.121348 243.124915)` | |
| `--ref-color-info-9` | `oklch(0.649151 0.193037 251.8)` | |
| `--ref-color-info-dark-1` | `oklch(0.193606 0.025499 256.518319)` | |
| `--ref-color-info-dark-10` | `oklch(0.68825 0.169338 251.427503)` | |
| `--ref-color-info-dark-11` | `oklch(0.764235 0.125721 249.494943)` | |
| `--ref-color-info-dark-12` | `oklch(0.907125 0.051019 238.488859)` | |
| `--ref-color-info-dark-2` | `oklch(0.212925 0.03034 261.269846)` | |
| `--ref-color-info-dark-3` | `oklch(0.274466 0.066296 253.950454)` | |
| `--ref-color-info-dark-4` | `oklch(0.320138 0.096777 252.366574)` | |
| `--ref-color-info-dark-5` | `oklch(0.367094 0.105878 250.722445)` | |
| `--ref-color-info-dark-6` | `oklch(0.416013 0.113257 252.028007)` | |
| `--ref-color-info-dark-7` | `oklch(0.474077 0.121868 253.108822)` | |
| `--ref-color-info-dark-8` | `oklch(0.540519 0.139536 253.194806)` | |
| `--ref-color-info-dark-9` | `oklch(0.649151 0.193037 251.8)` | |
| `--ref-color-neutral-1` | `oklch(1 0 286)` | |
| `--ref-color-neutral-10` | `oklch(0.545 0 286)` | |
| `--ref-color-neutral-11` | `oklch(0.439 0 286)` | |
| `--ref-color-neutral-12` | `oklch(0.145 0 286)` | |
| `--ref-color-neutral-2` | `oklch(0.985 0 286)` | |
| `--ref-color-neutral-3` | `oklch(0.97 0 286)` | |
| `--ref-color-neutral-4` | `oklch(0.95 0 286)` | |
| `--ref-color-neutral-5` | `oklch(0.935 0 286)` | |
| `--ref-color-neutral-6` | `oklch(0.922 0 286)` | |
| `--ref-color-neutral-7` | `oklch(0.871 0 286)` | |
| `--ref-color-neutral-8` | `oklch(0.792 0 286)` | |
| `--ref-color-neutral-9` | `oklch(0.643 0 286)` | |
| `--ref-color-neutral-dark-1` | `oklch(0.145 0 286)` | |
| `--ref-color-neutral-dark-10` | `oklch(0.708 0 286)` | |
| `--ref-color-neutral-dark-11` | `oklch(0.769 0 286)` | |
| `--ref-color-neutral-dark-12` | `oklch(0.985 0 286)` | |
| `--ref-color-neutral-dark-2` | `oklch(0.205 0 286)` | |
| `--ref-color-neutral-dark-3` | `oklch(0.269 0 286)` | |
| `--ref-color-neutral-dark-4` | `oklch(0.29 0 286)` | |
| `--ref-color-neutral-dark-5` | `oklch(0.31 0 286)` | |
| `--ref-color-neutral-dark-6` | `oklch(0.325 0 286)` | |
| `--ref-color-neutral-dark-7` | `oklch(0.37 0 286)` | |
| `--ref-color-neutral-dark-8` | `oklch(0.489 0 286)` | |
| `--ref-color-neutral-dark-9` | `oklch(0.538 0 286)` | |
| `--ref-color-success-1` | `oklch(0.99421 0.004099 157.207521)` | |
| `--ref-color-success-10` | `oklch(0.611472 0.126614 158.247346)` | |
| `--ref-color-success-11` | `oklch(0.543466 0.11158 159.513172)` | |
| `--ref-color-success-12` | `oklch(0.321985 0.047489 164.542495)` | |
| `--ref-color-success-2` | `oklch(0.98145 0.009879 155.110588)` | |
| `--ref-color-success-3` | `oklch(0.958254 0.02227 155.931601)` | |
| `--ref-color-success-4` | `oklch(0.933532 0.037175 156.439414)` | |
| `--ref-color-success-5` | `oklch(0.898805 0.048936 157.260962)` | |
| `--ref-color-success-6` | `oklch(0.855826 0.064054 158.21632)` | |
| `--ref-color-success-7` | `oklch(0.798152 0.08315 159.165466)` | |
| `--ref-color-success-8` | `oklch(0.715599 0.113294 160.294687)` | |
| `--ref-color-success-9` | `oklch(0.640602 0.132853 157.7)` | |
| `--ref-color-success-dark-1` | `oklch(0.187289 0.012272 167.013241)` | |
| `--ref-color-success-dark-10` | `oklch(0.674595 0.140607 157.722178)` | |
| `--ref-color-success-dark-11` | `oklch(0.779439 0.165465 157.301059)` | |
| `--ref-color-success-dark-12` | `oklch(0.904837 0.082952 158.194326)` | |
| `--ref-color-success-dark-2` | `oklch(0.211665 0.015372 165.918503)` | |
| `--ref-color-success-dark-3` | `oklch(0.272142 0.039586 162.175631)` | |
| `--ref-color-success-dark-4` | `oklch(0.317268 0.05693 161.853843)` | |
| `--ref-color-success-dark-5` | `oklch(0.364924 0.066027 161.239636)` | |
| `--ref-color-success-dark-6` | `oklch(0.41245 0.072145 160.961215)` | |
| `--ref-color-success-dark-7` | `oklch(0.466982 0.08231 160.25737)` | |
| `--ref-color-success-dark-8` | `oklch(0.528043 0.096267 159.40968)` | |
| `--ref-color-success-dark-9` | `oklch(0.640602 0.132853 157.7)` | |
| `--ref-color-warning-1` | `oklch(0.994249 0.00285 84.531513)` | |
| `--ref-color-warning-10` | `oklch(0.83116 0.16794 80.818324)` | |
| `--ref-color-warning-11` | `oklch(0.570661 0.129157 63.921739)` | |
| `--ref-color-warning-12` | `oklch(0.352188 0.048645 54.158769)` | |
| `--ref-color-warning-2` | `oklch(0.985585 0.023784 99.07651)` | |
| `--ref-color-warning-3` | `oklch(0.969531 0.068378 100.371682)` | |
| `--ref-color-warning-4` | `oklch(0.944651 0.103373 97.890946)` | |
| `--ref-color-warning-5` | `oklch(0.917967 0.132605 98.210354)` | |
| `--ref-color-warning-6` | `oklch(0.88039 0.123257 93.371005)` | |
| `--ref-color-warning-7` | `oklch(0.827254 0.122422 86.674497)` | |
| `--ref-color-warning-8` | `oklch(0.75767 0.140274 76.703099)` | |
| `--ref-color-warning-9` | `oklch(0.853575 0.15722 84.1)` | |
| `--ref-color-warning-dark-1` | `oklch(0.184962 0.013359 77.782873)` | |
| `--ref-color-warning-dark-10` | `oklch(0.884793 0.180432 94.750315)` | |
| `--ref-color-warning-dark-11` | `oklch(0.861614 0.172903 88.99284)` | |
| `--ref-color-warning-dark-12` | `oklch(0.935042 0.071692 86.052741)` | |
| `--ref-color-warning-dark-2` | `oklch(0.211987 0.01841 81.971223)` | |
| `--ref-color-warning-dark-3` | `oklch(0.25781 0.04422 74.467502)` | |
| `--ref-color-warning-dark-4` | `oklch(0.295499 0.062671 73.865824)` | |
| `--ref-color-warning-dark-5` | `oklch(0.336318 0.071679 72.883796)` | |
| `--ref-color-warning-dark-6` | `oklch(0.386329 0.078396 75.239452)` | |
| `--ref-color-warning-dark-7` | `oklch(0.454239 0.082359 74.940897)` | |
| `--ref-color-warning-dark-8` | `oklch(0.536383 0.096405 73.417061)` | |
| `--ref-color-warning-dark-9` | `oklch(0.853575 0.15722 84.1)` | |
| `--ref-shadow-color-strong` | `rgba(0, 0, 0, 0.1)` | |
| `--ref-shadow-color-subtle` | `rgba(0, 0, 0, 0.06)` | |
| `--ref-space-inline-sm` | `12px` | |
| `--ref-space-inline-xs` | `8px` | |
| `--ref-space-inset-compact` | `8px` | |
| `--ref-space-inset-default` | `24px` | |
| `--ref-space-ramp-050` | `0.125rem` | |
| `--ref-space-ramp-100` | `0.25rem` | |
| `--ref-space-ramp-1000` | `2.5rem` | |
| `--ref-space-ramp-1100` | `2.75rem` | |
| `--ref-space-ramp-1200` | `3rem` | |
| `--ref-space-ramp-150` | `0.375rem` | |
| `--ref-space-ramp-1600` | `4rem` | |
| `--ref-space-ramp-200` | `0.5rem` | |
| `--ref-space-ramp-250` | `0.625rem` | |
| `--ref-space-ramp-300` | `0.75rem` | |
| `--ref-space-ramp-400` | `1rem` | |
| `--ref-space-ramp-500` | `1.25rem` | |
| `--ref-space-ramp-600` | `1.5rem` | |
| `--ref-space-ramp-700` | `1.75rem` | |
| `--ref-space-ramp-800` | `2rem` | |
| `--ref-space-ramp-900` | `2.25rem` | |
| `--ref-space-scale-lg` | `24px` | |
| `--ref-space-scale-md` | `12px` | |
| `--ref-space-scale-sm` | `8px` | |
| `--ref-space-stack-compact` | `12px` | |
| `--ref-space-stack-default` | `16px` | |
| `--ref-typography-families-mono` | `'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | |
| `--ref-typography-families-sans` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--ref-typography-letter-spacing-default` | `0em` | |
| `--ref-typography-letter-spacing-display` | `-0.05em` | |
| `--ref-typography-letter-spacing-heading-lg` | `-0.02em` | |
| `--ref-typography-letter-spacing-heading-xl` | `-0.025em` | |
| `--ref-typography-letter-spacing-tight` | `-0.01em` | |
| `--ref-typography-letter-spacing-wide` | `0.08em` | |
| `--ref-typography-line-height-loose` | `160%` | |
| `--ref-typography-line-height-relaxed` | `150%` | |
| `--ref-typography-line-height-standard` | `140%` | |
| `--ref-typography-line-height-tight` | `120%` | |
| `--ref-typography-sizes-code` | `13px` | |
| `--ref-typography-sizes-display-lg` | `80px` | |
| `--ref-typography-sizes-display-md` | `64px` | |
| `--ref-typography-sizes-display-sm` | `48px` | |
| `--ref-typography-sizes-lg` | `18px` | |
| `--ref-typography-sizes-md` | `16px` | |
| `--ref-typography-sizes-sm` | `14px` | |
| `--ref-typography-sizes-xl` | `24px` | |
| `--ref-typography-sizes-xs` | `12px` | |
| `--ref-typography-sizes-xxl` | `30px` | |
| `--ref-typography-weights-bold` | `700` | |
| `--ref-typography-weights-light` | `300` | |
| `--ref-typography-weights-medium` | `500` | |
| `--ref-typography-weights-regular` | `400` | |
| `--ref-typography-weights-semibold` | `600` | |
| `--oods-shadow-elevation-card-blur` | `8px` | |
| `--oods-shadow-elevation-card-color` | `rgba(0, 0, 0, 0.06)` | |
| `--oods-shadow-elevation-card-offset-x` | `0px` | |
| `--oods-shadow-elevation-card-offset-y` | `4px` | |
| `--oods-shadow-elevation-card-spread` | `-4px` | |
| `--oods-shadow-elevation-overlay-blur` | `16px` | |
| `--oods-shadow-elevation-overlay-color` | `rgba(0, 0, 0, 0.1)` | |
| `--oods-shadow-elevation-overlay-offset-x` | `0px` | |
| `--oods-shadow-elevation-overlay-offset-y` | `8px` | |
| `--oods-shadow-elevation-overlay-spread` | `-4px` | |
| `--oods-size-font-lg` | `18px` | |
| `--oods-size-font-md` | `16px` | |
| `--oods-size-font-sm` | `14px` | |
| `--oods-size-spacing-md` | `12px` | |
| `--oods-size-spacing-sm` | `8px` | |
| `--oods-spacing-inline-sm` | `12px` | |
| `--oods-spacing-inline-xs` | `8px` | |
| `--oods-spacing-inset-compact` | `8px` | |
| `--oods-spacing-inset-default` | `24px` | |
| `--oods-spacing-stack-compact` | `12px` | |
| `--oods-spacing-stack-default` | `16px` | |
| `--sys-badge-height` | `1.25rem` | |
| `--sys-badge-padding-block` | `0.125rem` | |
| `--sys-badge-padding-inline` | `0.5rem` | |
| `--sys-border-default` | `oklch(0.922 0 286)` | |
| `--sys-border-interactive` | `oklch(0.643 0 286)` | Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on. |
| `--sys-border-interactive-hover` | `oklch(0.545 0 286)` | Border of a hovered control. |
| `--sys-border-neutral` | `oklch(0.871 0 286)` | |
| `--sys-border-strong` | `oklch(0.871 0 286)` | High-emphasis border. |
| `--sys-border-subtle` | `oklch(0.922 0 286)` | Default border for surfaces. |
| `--sys-breakpoint-2xl` | `1536` | |
| `--sys-breakpoint-lg` | `1024` | |
| `--sys-breakpoint-md` | `768` | |
| `--sys-breakpoint-sm` | `640` | |
| `--sys-breakpoint-xl` | `1280` | |
| `--sys-card-padding` | `1.5rem` | |
| `--sys-card-padding-compact` | `1rem` | |
| `--sys-control-gap` | `0.5rem` | |
| `--sys-control-gap-compact` | `0.25rem` | |
| `--sys-control-gap-tight` | `0.375rem` | |
| `--sys-control-group-gap` | `0.75rem` | |
| `--sys-control-height-lg` | `2.5rem` | |
| `--sys-control-height-md` | `2rem` | |
| `--sys-control-height-sm` | `1.75rem` | |
| `--sys-control-height-xs` | `1.5rem` | |
| `--sys-control-icon-gap` | `0.5rem` | |
| `--sys-control-icon-gap-sm` | `0.375rem` | |
| `--sys-control-icon-size` | `1rem` | |
| `--sys-control-padding-block` | `0.25rem` | |
| `--sys-control-padding-block-lg` | `0.5rem` | |
| `--sys-control-padding-block-sm` | `0.125rem` | |
| `--sys-control-padding-inline` | `0.75rem` | |
| `--sys-control-padding-inline-lg` | `1rem` | |
| `--sys-control-padding-inline-sm` | `0.625rem` | |
| `--sys-control-padding-inline-xs` | `0.5rem` | |
| `--sys-field-padding-block-compact` | `0.25rem` | |
| `--sys-field-padding-inline` | `0.75rem` | |
| `--sys-field-padding-inline-compact` | `0.5rem` | |
| `--sys-focus-offset` | `2px` | |
| `--sys-focus-ring` | `oklch(0.543785 0.191021 267)` | |
| `--sys-focus-ring-inner` | `oklch(1 0 286)` | Inner focus ring colour. |
| `--sys-focus-ring-outer` | `oklch(0.543785 0.191021 267)` | Outer focus ring colour. |
| `--sys-focus-text` | `oklch(0.509225 0.172497 267.161083)` | Focus foreground colour. |
| `--sys-focus-width` | `2px` | |
| `--sys-font-mono` | `'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | The brand's mono family. |
| `--sys-font-sans` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | The brand's sans family (the brand recipe's font). |
| `--sys-icon-muted` | `oklch(0.545 0 286)` | |
| `--sys-icon-on-interactive` | `oklch(1 0 286)` | |
| `--sys-icon-primary` | `oklch(0.439 0 286)` | |
| `--sys-inline-md` | `1rem` | |
| `--sys-inline-sm` | `0.75rem` | |
| `--sys-inline-xs` | `0.5rem` | |
| `--sys-inset-md` | `1rem` | |
| `--sys-inset-sm` | `0.75rem` | |
| `--sys-motion-duration-base` | `180ms` | |
| `--sys-motion-duration-fast` | `120ms` | |
| `--sys-motion-duration-slow` | `320ms` | |
| `--sys-motion-easing-emphasized` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--sys-motion-easing-linear` | `cubic-bezier(0, 0, 1, 1)` | |
| `--sys-motion-easing-standard` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--sys-motion-reduced-duration-base` | `0ms` | |
| `--sys-motion-reduced-duration-fast` | `0ms` | |
| `--sys-motion-reduced-duration-slow` | `0ms` | |
| `--sys-motion-reduced-transition-banner-reveal-delay` | `0ms` | |
| `--sys-motion-reduced-transition-banner-reveal-duration` | `0ms` | |
| `--sys-motion-reduced-transition-banner-reveal-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--sys-motion-reduced-transition-chip-in-delay` | `0ms` | |
| `--sys-motion-reduced-transition-chip-in-duration` | `0ms` | |
| `--sys-motion-reduced-transition-chip-in-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--sys-motion-reduced-transition-chip-out-delay` | `0ms` | |
| `--sys-motion-reduced-transition-chip-out-duration` | `0ms` | |
| `--sys-motion-reduced-transition-chip-out-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--sys-motion-reduced-transition-focus-delay` | `0ms` | |
| `--sys-motion-reduced-transition-focus-duration` | `0ms` | |
| `--sys-motion-reduced-transition-focus-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--sys-motion-reduced-transition-hover-delay` | `0ms` | |
| `--sys-motion-reduced-transition-hover-duration` | `0ms` | |
| `--sys-motion-reduced-transition-hover-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--sys-motion-transition-banner-reveal-delay` | `20ms` | |
| `--sys-motion-transition-banner-reveal-duration` | `320ms` | |
| `--sys-motion-transition-banner-reveal-timing-function` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--sys-motion-transition-chip-in-delay` | `0ms` | |
| `--sys-motion-transition-chip-in-duration` | `180ms` | |
| `--sys-motion-transition-chip-in-timing-function` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--sys-motion-transition-chip-out-delay` | `0ms` | |
| `--sys-motion-transition-chip-out-duration` | `120ms` | |
| `--sys-motion-transition-chip-out-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--sys-motion-transition-focus-delay` | `0ms` | |
| `--sys-motion-transition-focus-duration` | `180ms` | |
| `--sys-motion-transition-focus-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--sys-motion-transition-hover-delay` | `0ms` | |
| `--sys-motion-transition-hover-duration` | `120ms` | |
| `--sys-motion-transition-hover-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--sys-page-gutter` | `1.5rem` | |
| `--sys-progress-height` | `0.5rem` | |
| `--sys-radius-card` | `12px` | Corner radius of a card or panel: twice the brand radius. |
| `--sys-radius-control` | `6px` | Corner radius of a control at the default size: the brand recipe's radius. |
| `--sys-radius-control-lg` | `8px` | |
| `--sys-radius-control-sm` | `4px` | |
| `--sys-radius-pill` | `999px` | Fully rounded ends, for badges and pills. |
| `--sys-shadow-overlay-blur` | `16px` | |
| `--sys-shadow-overlay-color` | `rgba(0, 0, 0, 0.1)` | |
| `--sys-shadow-overlay-offset-x` | `0px` | |
| `--sys-shadow-overlay-offset-y` | `8px` | |
| `--sys-shadow-overlay-spread` | `-4px` | |
| `--sys-shadow-panel-blur` | `8px` | |
| `--sys-shadow-panel-color` | `rgba(0, 0, 0, 0.06)` | |
| `--sys-shadow-panel-offset-x` | `0px` | |
| `--sys-shadow-panel-offset-y` | `4px` | |
| `--sys-shadow-panel-spread` | `-4px` | |
| `--sys-space-inline-sm` | `12px` | |
| `--sys-space-inline-xs` | `8px` | |
| `--sys-space-inset-compact` | `8px` | |
| `--sys-space-inset-default` | `24px` | |
| `--sys-space-scale-lg` | `24px` | |
| `--sys-space-scale-md` | `12px` | |
| `--sys-space-scale-sm` | `8px` | |
| `--sys-space-stack-compact` | `12px` | |
| `--sys-space-stack-default` | `16px` | |
| `--sys-spacing-stack-compact` | `12px` | |
| `--sys-stack-lg` | `1.5rem` | |
| `--sys-stack-md` | `1rem` | |
| `--sys-stack-sm` | `0.75rem` | |
| `--sys-stack-xl` | `2rem` | |
| `--sys-stack-xs` | `0.5rem` | |
| `--sys-status-accent-border` | `oklch(0.806161 0.08754 271.403687)` | Accent border colour. |
| `--sys-status-accent-icon` | `oklch(0.543785 0.191021 267)` | Accent icon colour. |
| `--sys-status-accent-on-solid` | `oklch(1 0 286)` | Text and icons on the solid accent fill. |
| `--sys-status-accent-solid` | `oklch(0.543785 0.191021 267)` | Solid accent fill, for emphasis (a solid badge or banner). |
| `--sys-status-accent-surface` | `oklch(0.96086 0.016961 267.781434)` | Accent feedback background. |
| `--sys-status-accent-text` | `oklch(0.509225 0.172497 267.161083)` | Accent text colour. |
| `--sys-status-archive-border` | `oklch(0.804282 0.036704 309.722537)` | |
| `--sys-status-archive-icon` | `oklch(0.555677 0.073169 305.9)` | |
| `--sys-status-archive-surface` | `oklch(0.958846 0.009954 311.741665)` | |
| `--sys-status-archive-text` | `oklch(0.516842 0.069327 305.916434)` | |
| `--sys-status-critical-border` | `oklch(0.807 0.088767 18.290593)` | Critical border colour. |
| `--sys-status-critical-icon` | `oklch(0.625577 0.193344 23)` | Critical icon colour. |
| `--sys-status-critical-on-solid` | `oklch(1 0 286)` | Text and icons on the solid critical fill. |
| `--sys-status-critical-solid` | `oklch(0.590577 0.193344 23)` | Solid critical fill, for emphasis (a solid badge or banner). |
| `--sys-status-critical-surface` | `oklch(0.955466 0.020724 13.839409)` | Critical feedback background. |
| `--sys-status-critical-text` | `oklch(0.556979 0.197433 25.13833)` | Critical text colour. |
| `--sys-status-info-border` | `oklch(0.809755 0.088669 243.091253)` | Informational border colour. |
| `--sys-status-info-icon` | `oklch(0.622153 0.183136 251.723539)` | Informational icon colour. |
| `--sys-status-info-on-solid` | `oklch(1 0 286)` | Text and icons on the solid info fill. |
| `--sys-status-info-solid` | `oklch(0.566651 0.168568 251.8)` | Solid info fill, for emphasis (a solid badge or banner). |
| `--sys-status-info-surface` | `oklch(0.959682 0.020056 238.701263)` | Informational background surface. |
| `--sys-status-info-text` | `oklch(0.540689 0.162234 252.214666)` | Informational text colour. |
| `--sys-status-neutral-border` | `oklch(0.871 0 286)` | Neutral border colour. |
| `--sys-status-neutral-icon` | `oklch(0.643 0 286)` | Neutral icon colour. |
| `--sys-status-neutral-on-solid` | `oklch(1 0 286)` | Text and icons on the solid neutral fill. |
| `--sys-status-neutral-solid` | `oklch(0.145 0 286)` | Solid neutral fill, for emphasis (a solid badge or banner). |
| `--sys-status-neutral-surface` | `oklch(0.97 0 286)` | Neutral feedback background. |
| `--sys-status-neutral-text` | `oklch(0.439 0 286)` | Neutral text colour. |
| `--sys-status-success-border` | `oklch(0.798152 0.08315 159.165466)` | Success border colour. |
| `--sys-status-success-icon` | `oklch(0.611472 0.126614 158.247346)` | Success icon colour. |
| `--sys-status-success-on-solid` | `oklch(1 0 286)` | Text and icons on the solid success fill. |
| `--sys-status-success-solid` | `oklch(0.548102 0.128886 157.7)` | Solid success fill, for emphasis (a solid badge or banner). |
| `--sys-status-success-surface` | `oklch(0.958254 0.02227 155.931601)` | Success feedback background. |
| `--sys-status-success-text` | `oklch(0.523466 0.11158 159.513172)` | Success text colour. |
| `--sys-status-timeline-actor-text` | `oklch(0.439 0 286)` | |
| `--sys-status-timeline-connector` | `oklch(0.922 0 286)` | |
| `--sys-status-timeline-node-border` | `oklch(0.922 0 286)` | |
| `--sys-status-timeline-node-surface` | `oklch(0.97 0 286)` | |
| `--sys-status-timeline-reason-text` | `oklch(0.145 0 286)` | |
| `--sys-status-warning-border` | `oklch(0.827254 0.122422 86.674497)` | Warning border colour. |
| `--sys-status-warning-icon` | `oklch(0.570661 0.129157 63.921739)` | Warning icon colour. |
| `--sys-status-warning-on-solid` | `oklch(0.145 0 286)` | Text and icons on the solid warning fill. |
| `--sys-status-warning-solid` | `oklch(0.853575 0.15722 84.1)` | Solid warning fill, for emphasis (a solid badge or banner). |
| `--sys-status-warning-surface` | `oklch(0.969531 0.068378 100.371682)` | Warning feedback background. |
| `--sys-status-warning-text` | `oklch(0.553161 0.125197 63.921739)` | Warning text colour. |
| `--sys-surface-accent` | `oklch(0.145 0 286)` | |
| `--sys-surface-backdrop` | `oklch(0.145 0 286)` | Backdrop scrim surface. |
| `--sys-surface-canvas` | `oklch(1 0 286)` | Primary application canvas. |
| `--sys-surface-default` | `oklch(1 0 286)` | |
| `--sys-surface-disabled` | `oklch(0.97 0 286)` | Surface colour for disabled or inactive UI. |
| `--sys-surface-interactive-destructive-default` | `oklch(0.590577 0.193344 23)` | The destructive action, at rest. |
| `--sys-surface-interactive-destructive-hover` | `oklch(0.560577 0.194665 24.00731)` | The destructive action, hovered. |
| `--sys-surface-interactive-destructive-pressed` | `oklch(0.530577 0.194665 24.00731)` | The destructive action, pressed. |
| `--sys-surface-interactive-primary-default` | `oklch(0.145 0 286)` | Primary interactive surface default state. |
| `--sys-surface-interactive-primary-hover` | `oklch(0.3361 0 286)` | Primary interactive surface hover state. |
| `--sys-surface-interactive-primary-pressed` | `oklch(0.2626 0 286)` | Primary interactive surface pressed state. |
| `--sys-surface-interactive-secondary-default` | `oklch(0.97 0 286)` | The secondary action (a subtle fill), at rest. |
| `--sys-surface-interactive-secondary-hover` | `oklch(0.95 0 286)` | The secondary action (a subtle fill), hovered. |
| `--sys-surface-interactive-secondary-pressed` | `oklch(0.935 0 286)` | The secondary action (a subtle fill), pressed. |
| `--sys-surface-inverse` | `oklch(0.145 0 286)` | Inverse surface for dark-on-light treatments. |
| `--sys-surface-neutral` | `oklch(0.97 0 286)` | |
| `--sys-surface-raised` | `oklch(1 0 286)` | Raised card surface. |
| `--sys-surface-subtle` | `oklch(0.97 0 286)` | Subtle secondary surface. |
| `--sys-tab-indicator-width` | `2px` | |
| `--sys-tab-padding-block-lg` | `0.75rem` | |
| `--sys-tab-padding-block-md` | `0.625rem` | |
| `--sys-tab-padding-block-sm` | `0.5rem` | |
| `--sys-tab-padding-inline-lg` | `1rem` | |
| `--sys-tab-padding-inline-md` | `0.75rem` | |
| `--sys-tab-padding-inline-sm` | `0.625rem` | |
| `--sys-table-cell-padding-inline` | `0.75rem` | |
| `--sys-table-cell-padding-inline-compact` | `0.5rem` | |
| `--sys-table-row-height` | `2.75rem` | |
| `--sys-table-row-height-compact` | `2.25rem` | |
| `--sys-text-accent` | `oklch(0.509225 0.172497 267.161083)` | Accent text colour. |
| `--sys-text-default` | `oklch(0.145 0 286)` | |
| `--sys-text-disabled` | `oklch(0.643 0 286)` | Disabled or de-emphasised text. |
| `--sys-text-inverse` | `oklch(1 0 286)` | Text on inverse surfaces. |
| `--sys-text-line-height-loose` | `160%` | |
| `--sys-text-line-height-relaxed` | `150%` | |
| `--sys-text-line-height-root` | `1.5` | |
| `--sys-text-line-height-standard` | `140%` | |
| `--sys-text-line-height-tight` | `120%` | |
| `--sys-text-muted` | `oklch(0.545 0 286)` | Muted caption text. |
| `--sys-text-neutral` | `oklch(0.439 0 286)` | |
| `--sys-text-on-destructive` | `oklch(1 0 286)` | Text and icons on the destructive action. |
| `--sys-text-on-interactive` | `oklch(1 0 286)` | Text and icons on the primary interactive surface (buttons and selected controls). |
| `--sys-text-primary` | `oklch(0.145 0 286)` | Primary reading text. |
| `--sys-text-scale-body-md-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-body-md-font-size` | `16px` | |
| `--sys-text-scale-body-md-font-weight` | `400` | |
| `--sys-text-scale-body-md-letter-spacing` | `0em` | |
| `--sys-text-scale-body-md-line-height` | `24px` | |
| `--sys-text-scale-body-sm-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-body-sm-font-size` | `14px` | |
| `--sys-text-scale-body-sm-font-weight` | `400` | |
| `--sys-text-scale-body-sm-letter-spacing` | `0em` | |
| `--sys-text-scale-body-sm-line-height` | `20px` | |
| `--sys-text-scale-caption-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-caption-font-size` | `12px` | |
| `--sys-text-scale-caption-font-weight` | `500` | |
| `--sys-text-scale-caption-letter-spacing` | `0em` | |
| `--sys-text-scale-caption-line-height` | `16px` | |
| `--sys-text-scale-caption-text-case` | `none` | |
| `--sys-text-scale-display-lg-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-display-lg-font-size` | `80px` | |
| `--sys-text-scale-display-lg-font-weight` | `600` | |
| `--sys-text-scale-display-lg-letter-spacing` | `-0.05em` | |
| `--sys-text-scale-display-lg-line-height` | `1.05` | |
| `--sys-text-scale-display-md-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-display-md-font-size` | `64px` | |
| `--sys-text-scale-display-md-font-weight` | `600` | |
| `--sys-text-scale-display-md-letter-spacing` | `-0.05em` | |
| `--sys-text-scale-display-md-line-height` | `1.05` | |
| `--sys-text-scale-display-sm-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-display-sm-font-size` | `48px` | |
| `--sys-text-scale-display-sm-font-weight` | `600` | |
| `--sys-text-scale-display-sm-letter-spacing` | `-0.05em` | |
| `--sys-text-scale-display-sm-line-height` | `1.1` | |
| `--sys-text-scale-heading-lg-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-heading-lg-font-size` | `24px` | |
| `--sys-text-scale-heading-lg-font-weight` | `600` | |
| `--sys-text-scale-heading-lg-letter-spacing` | `-0.02em` | |
| `--sys-text-scale-heading-lg-line-height` | `32px` | |
| `--sys-text-scale-heading-md-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-heading-md-font-size` | `18px` | |
| `--sys-text-scale-heading-md-font-weight` | `600` | |
| `--sys-text-scale-heading-md-letter-spacing` | `-0.01em` | |
| `--sys-text-scale-heading-md-line-height` | `24px` | |
| `--sys-text-scale-heading-sm-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-heading-sm-font-size` | `16px` | |
| `--sys-text-scale-heading-sm-font-weight` | `600` | |
| `--sys-text-scale-heading-sm-letter-spacing` | `0em` | |
| `--sys-text-scale-heading-sm-line-height` | `24px` | |
| `--sys-text-scale-heading-xl-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-heading-xl-font-size` | `30px` | |
| `--sys-text-scale-heading-xl-font-weight` | `600` | |
| `--sys-text-scale-heading-xl-letter-spacing` | `-0.025em` | |
| `--sys-text-scale-heading-xl-line-height` | `36px` | |
| `--sys-text-scale-label-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-label-font-size` | `14px` | |
| `--sys-text-scale-label-font-weight` | `500` | |
| `--sys-text-scale-label-letter-spacing` | `0em` | |
| `--sys-text-scale-label-line-height` | `20px` | |
| `--sys-text-scale-label-md-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--sys-text-scale-label-md-font-size` | `14px` | |
| `--sys-text-scale-label-md-font-weight` | `500` | |
| `--sys-text-scale-label-md-letter-spacing` | `0em` | |
| `--sys-text-scale-label-md-line-height` | `20px` | |
| `--sys-text-scale-label-md-text-case` | `none` | |
| `--sys-text-scale-label-text-case` | `none` | |
| `--sys-text-scale-mono-font-family` | `'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | |
| `--sys-text-scale-mono-font-size` | `13px` | |
| `--sys-text-scale-mono-font-weight` | `400` | |
| `--sys-text-scale-mono-letter-spacing` | `0em` | |
| `--sys-text-scale-mono-line-height` | `20px` | |
| `--sys-text-secondary` | `oklch(0.439 0 286)` | Secondary supporting text. |
| `--sys-text-size-lg` | `18px` | |
| `--sys-text-size-md` | `16px` | |
| `--sys-text-size-sm` | `14px` | |
| `--sys-text-size-xs` | `12px` | |
| `--sys-text-strong` | `oklch(0.145 0 286)` | |
| `--sys-text-subtle` | `oklch(0.439 0 286)` | |
| `--sys-text-tertiary` | `oklch(0.545 0 286)` | |
| `--sys-text-weight-medium` | `500` | |
| `--sys-text-weight-semibold` | `600` | |
| `--oods-text-letter-spacing-default` | `0em` | |
| `--oods-text-letter-spacing-tight` | `-0.01em` | |
| `--oods-text-letter-spacing-wide` | `0.08em` | |
| `--oods-text-line-height-loose` | `160%` | |
| `--oods-text-line-height-relaxed` | `150%` | |
| `--oods-text-line-height-standard` | `140%` | |
| `--oods-text-line-height-tight` | `120%` | |
| `--oods-text-scale-body-md-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-body-md-font-size` | `16px` | |
| `--oods-text-scale-body-md-font-weight` | `400` | |
| `--oods-text-scale-body-md-letter-spacing` | `0em` | |
| `--oods-text-scale-body-md-line-height` | `24px` | |
| `--oods-text-scale-body-sm-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-body-sm-font-size` | `14px` | |
| `--oods-text-scale-body-sm-font-weight` | `400` | |
| `--oods-text-scale-body-sm-letter-spacing` | `0em` | |
| `--oods-text-scale-body-sm-line-height` | `20px` | |
| `--oods-text-scale-caption-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-caption-font-size` | `12px` | |
| `--oods-text-scale-caption-font-weight` | `500` | |
| `--oods-text-scale-caption-letter-spacing` | `0em` | |
| `--oods-text-scale-caption-line-height` | `16px` | |
| `--oods-text-scale-caption-text-case` | `none` | |
| `--oods-text-scale-display-lg-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-display-lg-font-size` | `80px` | |
| `--oods-text-scale-display-lg-font-weight` | `600` | |
| `--oods-text-scale-display-lg-letter-spacing` | `-0.05em` | |
| `--oods-text-scale-display-lg-line-height` | `1.05` | |
| `--oods-text-scale-display-md-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-display-md-font-size` | `64px` | |
| `--oods-text-scale-display-md-font-weight` | `600` | |
| `--oods-text-scale-display-md-letter-spacing` | `-0.05em` | |
| `--oods-text-scale-display-md-line-height` | `1.05` | |
| `--oods-text-scale-display-sm-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-display-sm-font-size` | `48px` | |
| `--oods-text-scale-display-sm-font-weight` | `600` | |
| `--oods-text-scale-display-sm-letter-spacing` | `-0.05em` | |
| `--oods-text-scale-display-sm-line-height` | `1.1` | |
| `--oods-text-scale-heading-lg-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-heading-lg-font-size` | `24px` | |
| `--oods-text-scale-heading-lg-font-weight` | `600` | |
| `--oods-text-scale-heading-lg-letter-spacing` | `-0.02em` | |
| `--oods-text-scale-heading-lg-line-height` | `32px` | |
| `--oods-text-scale-heading-md-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-heading-md-font-size` | `18px` | |
| `--oods-text-scale-heading-md-font-weight` | `600` | |
| `--oods-text-scale-heading-md-letter-spacing` | `-0.01em` | |
| `--oods-text-scale-heading-md-line-height` | `24px` | |
| `--oods-text-scale-heading-sm-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-heading-sm-font-size` | `16px` | |
| `--oods-text-scale-heading-sm-font-weight` | `600` | |
| `--oods-text-scale-heading-sm-letter-spacing` | `0em` | |
| `--oods-text-scale-heading-sm-line-height` | `24px` | |
| `--oods-text-scale-heading-xl-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-heading-xl-font-size` | `30px` | |
| `--oods-text-scale-heading-xl-font-weight` | `600` | |
| `--oods-text-scale-heading-xl-letter-spacing` | `-0.025em` | |
| `--oods-text-scale-heading-xl-line-height` | `36px` | |
| `--oods-text-scale-label-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-label-font-size` | `14px` | |
| `--oods-text-scale-label-font-weight` | `500` | |
| `--oods-text-scale-label-letter-spacing` | `0em` | |
| `--oods-text-scale-label-line-height` | `20px` | |
| `--oods-text-scale-label-md-font-family` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | |
| `--oods-text-scale-label-md-font-size` | `14px` | |
| `--oods-text-scale-label-md-font-weight` | `500` | |
| `--oods-text-scale-label-md-letter-spacing` | `0em` | |
| `--oods-text-scale-label-md-line-height` | `20px` | |
| `--oods-text-scale-label-md-text-case` | `none` | |
| `--oods-text-scale-label-text-case` | `none` | |
| `--oods-text-scale-mono-font-family` | `'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | |
| `--oods-text-scale-mono-font-size` | `13px` | |
| `--oods-text-scale-mono-font-weight` | `400` | |
| `--oods-text-scale-mono-letter-spacing` | `0em` | |
| `--oods-text-scale-mono-line-height` | `20px` | |
| `--theme-border-interactive` | `oklch(0.643 0 286)` | Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on. |
| `--theme-border-interactive-hover` | `oklch(0.545 0 286)` | Border of a hovered control. |
| `--theme-border-strong` | `oklch(0.871 0 286)` | High-emphasis border. |
| `--theme-border-subtle` | `oklch(0.922 0 286)` | Default border for surfaces. |
| `--theme-dark-border-interactive` | `oklch(0.538 0 286)` | |
| `--theme-dark-border-interactive-hover` | `oklch(0.708 0 286)` | |
| `--theme-dark-border-strong` | `oklch(0.37 0 286)` | |
| `--theme-dark-border-subtle` | `oklch(0.325 0 286)` | |
| `--theme-dark-focus-ring-inner` | `oklch(0.145 0 286)` | |
| `--theme-dark-focus-ring-outer` | `oklch(0.543785 0.191021 267)` | |
| `--theme-dark-focus-text` | `oklch(0.775866 0.113802 273.011264)` | |
| `--theme-dark-focus-width` | `2px` | |
| `--theme-dark-icon-muted` | `oklch(0.708 0 286)` | |
| `--theme-dark-icon-on-interactive` | `oklch(0.145 0 286)` | |
| `--theme-dark-icon-primary` | `oklch(0.769 0 286)` | |
| `--theme-dark-motion-duration-base` | `180ms` | |
| `--theme-dark-motion-duration-fast` | `120ms` | |
| `--theme-dark-motion-duration-slow` | `320ms` | |
| `--theme-dark-motion-easing-emphasized` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--theme-dark-motion-easing-linear` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-dark-motion-easing-standard` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--theme-dark-motion-reduced-duration-base` | `0ms` | |
| `--theme-dark-motion-reduced-duration-fast` | `0ms` | |
| `--theme-dark-motion-reduced-duration-slow` | `0ms` | |
| `--theme-dark-motion-reduced-transition-banner-reveal-delay` | `0ms` | |
| `--theme-dark-motion-reduced-transition-banner-reveal-duration` | `0ms` | |
| `--theme-dark-motion-reduced-transition-banner-reveal-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-dark-motion-reduced-transition-chip-in-delay` | `0ms` | |
| `--theme-dark-motion-reduced-transition-chip-in-duration` | `0ms` | |
| `--theme-dark-motion-reduced-transition-chip-in-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-dark-motion-reduced-transition-chip-out-delay` | `0ms` | |
| `--theme-dark-motion-reduced-transition-chip-out-duration` | `0ms` | |
| `--theme-dark-motion-reduced-transition-chip-out-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-dark-motion-reduced-transition-focus-delay` | `0ms` | |
| `--theme-dark-motion-reduced-transition-focus-duration` | `0ms` | |
| `--theme-dark-motion-reduced-transition-focus-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-dark-motion-reduced-transition-hover-delay` | `0ms` | |
| `--theme-dark-motion-reduced-transition-hover-duration` | `0ms` | |
| `--theme-dark-motion-reduced-transition-hover-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-dark-motion-transition-banner-reveal-delay` | `20ms` | |
| `--theme-dark-motion-transition-banner-reveal-duration` | `320ms` | |
| `--theme-dark-motion-transition-banner-reveal-timing-function` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--theme-dark-motion-transition-chip-in-delay` | `0ms` | |
| `--theme-dark-motion-transition-chip-in-duration` | `180ms` | |
| `--theme-dark-motion-transition-chip-in-timing-function` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--theme-dark-motion-transition-chip-out-delay` | `0ms` | |
| `--theme-dark-motion-transition-chip-out-duration` | `120ms` | |
| `--theme-dark-motion-transition-chip-out-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--theme-dark-motion-transition-focus-delay` | `0ms` | |
| `--theme-dark-motion-transition-focus-duration` | `180ms` | |
| `--theme-dark-motion-transition-focus-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--theme-dark-motion-transition-hover-delay` | `0ms` | |
| `--theme-dark-motion-transition-hover-duration` | `120ms` | |
| `--theme-dark-motion-transition-hover-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--theme-dark-shadow-elevation-card-blur` | `0px` | |
| `--theme-dark-shadow-elevation-card-color` | `rgba(255, 255, 255, 0.06)` | |
| `--theme-dark-shadow-elevation-card-offset-x` | `0px` | |
| `--theme-dark-shadow-elevation-card-offset-y` | `0px` | |
| `--theme-dark-shadow-elevation-card-spread` | `1px` | |
| `--theme-dark-shadow-elevation-overlay-blur` | `0px` | |
| `--theme-dark-shadow-elevation-overlay-color` | `rgba(255, 255, 255, 0.1)` | |
| `--theme-dark-shadow-elevation-overlay-offset-x` | `0px` | |
| `--theme-dark-shadow-elevation-overlay-offset-y` | `0px` | |
| `--theme-dark-shadow-elevation-overlay-spread` | `1px` | |
| `--theme-dark-space-inline-sm` | `12px` | |
| `--theme-dark-space-inline-xs` | `8px` | |
| `--theme-dark-space-inset-compact` | `8px` | |
| `--theme-dark-space-inset-default` | `24px` | |
| `--theme-dark-space-scale-lg` | `24px` | |
| `--theme-dark-space-scale-md` | `12px` | |
| `--theme-dark-space-scale-sm` | `8px` | |
| `--theme-dark-space-stack-compact` | `12px` | |
| `--theme-dark-space-stack-default` | `16px` | |
| `--theme-dark-status-accent-border` | `oklch(0.449078 0.120101 268.933794)` | |
| `--theme-dark-status-accent-icon` | `oklch(0.589183 0.175768 269.290124)` | |
| `--theme-dark-status-accent-on-solid` | `oklch(1 0 286)` | |
| `--theme-dark-status-accent-solid` | `oklch(0.543785 0.191021 267)` | |
| `--theme-dark-status-accent-surface` | `oklch(0.271571 0.070509 267.975387)` | |
| `--theme-dark-status-accent-text` | `oklch(0.775866 0.113802 273.011264)` | |
| `--theme-dark-status-archive-border` | `oklch(0.448578 0.043175 308.64496)` | |
| `--theme-dark-status-archive-icon` | `oklch(0.555677 0.073169 305.9)` | |
| `--theme-dark-status-archive-surface` | `oklch(0.267699 0.024476 312.648694)` | |
| `--theme-dark-status-archive-text` | `oklch(0.780673 0.058096 307.77664)` | |
| `--theme-dark-status-critical-border` | `oklch(0.450175 0.121046 18.748598)` | |
| `--theme-dark-status-critical-icon` | `oklch(0.625577 0.193344 23)` | |
| `--theme-dark-status-critical-on-solid` | `oklch(1 0 286)` | |
| `--theme-dark-status-critical-solid` | `oklch(0.590577 0.193344 23)` | |
| `--theme-dark-status-critical-surface` | `oklch(0.251058 0.06493 12.674503)` | |
| `--theme-dark-status-critical-text` | `oklch(0.780413 0.128122 22.121461)` | |
| `--theme-dark-status-info-border` | `oklch(0.474077 0.121868 253.108822)` | |
| `--theme-dark-status-info-icon` | `oklch(0.649151 0.193037 251.8)` | |
| `--theme-dark-status-info-on-solid` | `oklch(1 0 286)` | |
| `--theme-dark-status-info-solid` | `oklch(0.566651 0.168568 251.8)` | |
| `--theme-dark-status-info-surface` | `oklch(0.274466 0.066296 253.950454)` | |
| `--theme-dark-status-info-text` | `oklch(0.764235 0.125721 249.494943)` | |
| `--theme-dark-status-neutral-border` | `oklch(0.37 0 286)` | |
| `--theme-dark-status-neutral-icon` | `oklch(0.708 0 286)` | |
| `--theme-dark-status-neutral-on-solid` | `oklch(0.145 0 286)` | |
| `--theme-dark-status-neutral-solid` | `oklch(0.985 0 286)` | |
| `--theme-dark-status-neutral-surface` | `oklch(0.269 0 286)` | |
| `--theme-dark-status-neutral-text` | `oklch(0.769 0 286)` | |
| `--theme-dark-status-success-border` | `oklch(0.466982 0.08231 160.25737)` | |
| `--theme-dark-status-success-icon` | `oklch(0.640602 0.132853 157.7)` | |
| `--theme-dark-status-success-on-solid` | `oklch(1 0 286)` | |
| `--theme-dark-status-success-solid` | `oklch(0.548102 0.128886 157.7)` | |
| `--theme-dark-status-success-surface` | `oklch(0.272142 0.039586 162.175631)` | |
| `--theme-dark-status-success-text` | `oklch(0.779439 0.165465 157.301059)` | |
| `--theme-dark-status-warning-border` | `oklch(0.454239 0.082359 74.940897)` | |
| `--theme-dark-status-warning-icon` | `oklch(0.853575 0.15722 84.1)` | |
| `--theme-dark-status-warning-on-solid` | `oklch(0.145 0 286)` | |
| `--theme-dark-status-warning-solid` | `oklch(0.853575 0.15722 84.1)` | |
| `--theme-dark-status-warning-surface` | `oklch(0.25781 0.04422 74.467502)` | |
| `--theme-dark-status-warning-text` | `oklch(0.861614 0.172903 88.99284)` | |
| `--theme-dark-surface-backdrop` | `oklch(0.145 0 286)` | |
| `--theme-dark-surface-canvas` | `oklch(0.145 0 286)` | |
| `--theme-dark-surface-disabled` | `oklch(0.269 0 286)` | |
| `--theme-dark-surface-interactive-destructive-default` | `oklch(0.590577 0.193344 23)` | |
| `--theme-dark-surface-interactive-destructive-hover` | `oklch(0.560577 0.177398 22.826714)` | |
| `--theme-dark-surface-interactive-destructive-pressed` | `oklch(0.530577 0.177398 22.826714)` | |
| `--theme-dark-surface-interactive-primary-default` | `oklch(0.985 0 286)` | |
| `--theme-dark-surface-interactive-primary-hover` | `oklch(0.8446 0 286)` | |
| `--theme-dark-surface-interactive-primary-pressed` | `oklch(0.8986 0 286)` | |
| `--theme-dark-surface-interactive-secondary-default` | `oklch(0.269 0 286)` | |
| `--theme-dark-surface-interactive-secondary-hover` | `oklch(0.29 0 286)` | |
| `--theme-dark-surface-interactive-secondary-pressed` | `oklch(0.31 0 286)` | |
| `--theme-dark-surface-inverse` | `oklch(0.985 0 286)` | |
| `--theme-dark-surface-raised` | `oklch(0.205 0 286)` | |
| `--theme-dark-surface-subtle` | `oklch(0.269 0 286)` | |
| `--theme-dark-text-accent` | `oklch(0.775866 0.113802 273.011264)` | |
| `--theme-dark-text-disabled` | `oklch(0.538 0 286)` | |
| `--theme-dark-text-inverse` | `oklch(0.145 0 286)` | |
| `--theme-dark-text-muted` | `oklch(0.708 0 286)` | |
| `--theme-dark-text-on-destructive` | `oklch(1 0 286)` | |
| `--theme-dark-text-on-interactive` | `oklch(0.145 0 286)` | |
| `--theme-dark-text-primary` | `oklch(0.985 0 286)` | |
| `--theme-dark-text-secondary` | `oklch(0.769 0 286)` | |
| `--theme-focus-ring-inner` | `oklch(1 0 286)` | Inner focus ring colour. |
| `--theme-focus-ring-outer` | `oklch(0.543785 0.191021 267)` | Outer focus ring colour. |
| `--theme-focus-text` | `oklch(0.509225 0.172497 267.161083)` | Focus foreground colour. |
| `--theme-focus-width` | `2px` | |
| `--theme-font-mono` | `'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | The brand's mono family. |
| `--theme-font-sans` | `Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | The brand's sans family (the brand recipe's font). |
| `--theme-icon-muted` | `oklch(0.545 0 286)` | |
| `--theme-icon-on-interactive` | `oklch(1 0 286)` | |
| `--theme-icon-primary` | `oklch(0.439 0 286)` | |
| `--theme-motion-duration-base` | `180ms` | |
| `--theme-motion-duration-fast` | `120ms` | |
| `--theme-motion-duration-slow` | `320ms` | |
| `--theme-motion-easing-emphasized` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--theme-motion-easing-linear` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-motion-easing-standard` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--theme-motion-reduced-duration-base` | `0ms` | |
| `--theme-motion-reduced-duration-fast` | `0ms` | |
| `--theme-motion-reduced-duration-slow` | `0ms` | |
| `--theme-motion-reduced-transition-banner-reveal-delay` | `0ms` | |
| `--theme-motion-reduced-transition-banner-reveal-duration` | `0ms` | |
| `--theme-motion-reduced-transition-banner-reveal-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-motion-reduced-transition-chip-in-delay` | `0ms` | |
| `--theme-motion-reduced-transition-chip-in-duration` | `0ms` | |
| `--theme-motion-reduced-transition-chip-in-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-motion-reduced-transition-chip-out-delay` | `0ms` | |
| `--theme-motion-reduced-transition-chip-out-duration` | `0ms` | |
| `--theme-motion-reduced-transition-chip-out-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-motion-reduced-transition-focus-delay` | `0ms` | |
| `--theme-motion-reduced-transition-focus-duration` | `0ms` | |
| `--theme-motion-reduced-transition-focus-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-motion-reduced-transition-hover-delay` | `0ms` | |
| `--theme-motion-reduced-transition-hover-duration` | `0ms` | |
| `--theme-motion-reduced-transition-hover-timing-function` | `cubic-bezier(0, 0, 1, 1)` | |
| `--theme-motion-transition-banner-reveal-delay` | `20ms` | |
| `--theme-motion-transition-banner-reveal-duration` | `320ms` | |
| `--theme-motion-transition-banner-reveal-timing-function` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--theme-motion-transition-chip-in-delay` | `0ms` | |
| `--theme-motion-transition-chip-in-duration` | `180ms` | |
| `--theme-motion-transition-chip-in-timing-function` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | |
| `--theme-motion-transition-chip-out-delay` | `0ms` | |
| `--theme-motion-transition-chip-out-duration` | `120ms` | |
| `--theme-motion-transition-chip-out-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--theme-motion-transition-focus-delay` | `0ms` | |
| `--theme-motion-transition-focus-duration` | `180ms` | |
| `--theme-motion-transition-focus-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--theme-motion-transition-hover-delay` | `0ms` | |
| `--theme-motion-transition-hover-duration` | `120ms` | |
| `--theme-motion-transition-hover-timing-function` | `cubic-bezier(0.2, 0, 0.38, 1)` | |
| `--theme-radius-card` | `12px` | Corner radius of a card or panel: twice the brand radius. |
| `--theme-radius-control` | `6px` | Corner radius of a control at the default size: the brand recipe's radius. |
| `--theme-radius-large` | `8px` | Corner radius of a large control: the brand radius plus 2px. |
| `--theme-radius-pill` | `999px` | Fully rounded ends, for badges and pills. |
| `--theme-radius-small` | `4px` | Corner radius of a small control: the brand radius less 2px. |
| `--theme-shadow-elevation-card-blur` | `8px` | |
| `--theme-shadow-elevation-card-color` | `rgba(0, 0, 0, 0.06)` | |
| `--theme-shadow-elevation-card-offset-x` | `0px` | |
| `--theme-shadow-elevation-card-offset-y` | `4px` | |
| `--theme-shadow-elevation-card-spread` | `-4px` | |
| `--theme-shadow-elevation-overlay-blur` | `16px` | |
| `--theme-shadow-elevation-overlay-color` | `rgba(0, 0, 0, 0.1)` | |
| `--theme-shadow-elevation-overlay-offset-x` | `0px` | |
| `--theme-shadow-elevation-overlay-offset-y` | `8px` | |
| `--theme-shadow-elevation-overlay-spread` | `-4px` | |
| `--theme-space-inline-sm` | `12px` | |
| `--theme-space-inline-xs` | `8px` | |
| `--theme-space-inset-compact` | `8px` | |
| `--theme-space-inset-default` | `24px` | |
| `--theme-space-scale-lg` | `24px` | |
| `--theme-space-scale-md` | `12px` | |
| `--theme-space-scale-sm` | `8px` | |
| `--theme-space-stack-compact` | `12px` | |
| `--theme-space-stack-default` | `16px` | |
| `--theme-status-accent-border` | `oklch(0.806161 0.08754 271.403687)` | Accent border colour. |
| `--theme-status-accent-icon` | `oklch(0.543785 0.191021 267)` | Accent icon colour. |
| `--theme-status-accent-on-solid` | `oklch(1 0 286)` | Text and icons on the solid accent fill. |
| `--theme-status-accent-solid` | `oklch(0.543785 0.191021 267)` | Solid accent fill, for emphasis (a solid badge or banner). |
| `--theme-status-accent-surface` | `oklch(0.96086 0.016961 267.781434)` | Accent feedback background. |
| `--theme-status-accent-text` | `oklch(0.509225 0.172497 267.161083)` | Accent text colour. |
| `--theme-status-archive-border` | `oklch(0.804282 0.036704 309.722537)` | |
| `--theme-status-archive-icon` | `oklch(0.555677 0.073169 305.9)` | |
| `--theme-status-archive-surface` | `oklch(0.958846 0.009954 311.741665)` | |
| `--theme-status-archive-text` | `oklch(0.516842 0.069327 305.916434)` | |
| `--theme-status-critical-border` | `oklch(0.807 0.088767 18.290593)` | Critical border colour. |
| `--theme-status-critical-icon` | `oklch(0.625577 0.193344 23)` | Critical icon colour. |
| `--theme-status-critical-on-solid` | `oklch(1 0 286)` | Text and icons on the solid critical fill. |
| `--theme-status-critical-solid` | `oklch(0.590577 0.193344 23)` | Solid critical fill, for emphasis (a solid badge or banner). |
| `--theme-status-critical-surface` | `oklch(0.955466 0.020724 13.839409)` | Critical feedback background. |
| `--theme-status-critical-text` | `oklch(0.556979 0.197433 25.13833)` | Critical text colour. |
| `--theme-status-info-border` | `oklch(0.809755 0.088669 243.091253)` | Informational border colour. |
| `--theme-status-info-icon` | `oklch(0.622153 0.183136 251.723539)` | Informational icon colour. |
| `--theme-status-info-on-solid` | `oklch(1 0 286)` | Text and icons on the solid info fill. |
| `--theme-status-info-solid` | `oklch(0.566651 0.168568 251.8)` | Solid info fill, for emphasis (a solid badge or banner). |
| `--theme-status-info-surface` | `oklch(0.959682 0.020056 238.701263)` | Informational background surface. |
| `--theme-status-info-text` | `oklch(0.540689 0.162234 252.214666)` | Informational text colour. |
| `--theme-status-neutral-border` | `oklch(0.871 0 286)` | Neutral border colour. |
| `--theme-status-neutral-icon` | `oklch(0.643 0 286)` | Neutral icon colour. |
| `--theme-status-neutral-on-solid` | `oklch(1 0 286)` | Text and icons on the solid neutral fill. |
| `--theme-status-neutral-solid` | `oklch(0.145 0 286)` | Solid neutral fill, for emphasis (a solid badge or banner). |
| `--theme-status-neutral-surface` | `oklch(0.97 0 286)` | Neutral feedback background. |
| `--theme-status-neutral-text` | `oklch(0.439 0 286)` | Neutral text colour. |
| `--theme-status-success-border` | `oklch(0.798152 0.08315 159.165466)` | Success border colour. |
| `--theme-status-success-icon` | `oklch(0.611472 0.126614 158.247346)` | Success icon colour. |
| `--theme-status-success-on-solid` | `oklch(1 0 286)` | Text and icons on the solid success fill. |
| `--theme-status-success-solid` | `oklch(0.548102 0.128886 157.7)` | Solid success fill, for emphasis (a solid badge or banner). |
| `--theme-status-success-surface` | `oklch(0.958254 0.02227 155.931601)` | Success feedback background. |
| `--theme-status-success-text` | `oklch(0.523466 0.11158 159.513172)` | Success text colour. |
| `--theme-status-warning-border` | `oklch(0.827254 0.122422 86.674497)` | Warning border colour. |
| `--theme-status-warning-icon` | `oklch(0.570661 0.129157 63.921739)` | Warning icon colour. |
| `--theme-status-warning-on-solid` | `oklch(0.145 0 286)` | Text and icons on the solid warning fill. |
| `--theme-status-warning-solid` | `oklch(0.853575 0.15722 84.1)` | Solid warning fill, for emphasis (a solid badge or banner). |
| `--theme-status-warning-surface` | `oklch(0.969531 0.068378 100.371682)` | Warning feedback background. |
| `--theme-status-warning-text` | `oklch(0.553161 0.125197 63.921739)` | Warning text colour. |
| `--theme-surface-backdrop` | `oklch(0.145 0 286)` | Backdrop scrim surface. |
| `--theme-surface-canvas` | `oklch(1 0 286)` | Primary application canvas. |
| `--theme-surface-disabled` | `oklch(0.97 0 286)` | Surface colour for disabled or inactive UI. |
| `--theme-surface-interactive-destructive-default` | `oklch(0.590577 0.193344 23)` | The destructive action, at rest. |
| `--theme-surface-interactive-destructive-hover` | `oklch(0.560577 0.194665 24.00731)` | The destructive action, hovered. |
| `--theme-surface-interactive-destructive-pressed` | `oklch(0.530577 0.194665 24.00731)` | The destructive action, pressed. |
| `--theme-surface-interactive-primary-default` | `oklch(0.145 0 286)` | Primary interactive surface default state. |
| `--theme-surface-interactive-primary-hover` | `oklch(0.3361 0 286)` | Primary interactive surface hover state. |
| `--theme-surface-interactive-primary-pressed` | `oklch(0.2626 0 286)` | Primary interactive surface pressed state. |
| `--theme-surface-interactive-secondary-default` | `oklch(0.97 0 286)` | The secondary action (a subtle fill), at rest. |
| `--theme-surface-interactive-secondary-hover` | `oklch(0.95 0 286)` | The secondary action (a subtle fill), hovered. |
| `--theme-surface-interactive-secondary-pressed` | `oklch(0.935 0 286)` | The secondary action (a subtle fill), pressed. |
| `--theme-surface-inverse` | `oklch(0.145 0 286)` | Inverse surface for dark-on-light treatments. |
| `--theme-surface-raised` | `oklch(1 0 286)` | Raised card surface. |
| `--theme-surface-subtle` | `oklch(0.97 0 286)` | Subtle secondary surface. |
| `--theme-text-accent` | `oklch(0.509225 0.172497 267.161083)` | Accent text colour. |
| `--theme-text-disabled` | `oklch(0.643 0 286)` | Disabled or de-emphasised text. |
| `--theme-text-inverse` | `oklch(1 0 286)` | Text on inverse surfaces. |
| `--theme-text-muted` | `oklch(0.545 0 286)` | Muted caption text. |
| `--theme-text-on-destructive` | `oklch(1 0 286)` | Text and icons on the destructive action. |
| `--theme-text-on-interactive` | `oklch(1 0 286)` | Text and icons on the primary interactive surface (buttons and selected controls). |
| `--theme-text-primary` | `oklch(0.145 0 286)` | Primary reading text. |
| `--theme-text-secondary` | `oklch(0.439 0 286)` | Secondary supporting text. |
| `--oods-viz-map-basemap-fill` | `oklch(0.95 0 286)` | |
| `--oods-viz-map-basemap-stroke` | `oklch(0.792 0 286)` | |
| `--oods-viz-map-basemap-stroke-width` | `0.5px` | |
| `--oods-viz-map-region-hover-stroke` | `oklch(0.543785 0.191021 267)` | |
| `--oods-viz-map-region-hover-stroke-width` | `2px` | |
| `--oods-viz-map-region-stroke` | `oklch(0.643 0 286)` | |
| `--oods-viz-map-region-stroke-width` | `1px` | |
| `--oods-viz-map-route-max-width` | `10px` | |
| `--oods-viz-map-route-min-width` | `1px` | |
| `--oods-viz-map-route-stroke-opacity` | `0.6` | |
| `--oods-viz-map-symbol-max-radius` | `40px` | |
| `--oods-viz-map-symbol-min-radius` | `4px` | |
| `--oods-viz-map-symbol-stroke` | `oklch(1 0 286)` | |
| `--oods-viz-map-symbol-stroke-width` | `1px` | |
| `--oods-viz-margin-default` | `12px` | |
| `--oods-viz-margin-roomy` | `16px` | |
| `--oods-viz-margin-tight` | `8px` | |
| `--oods-viz-mark-single` | `oklch(0.543785 0.191021 267)` | Colour of a chart that draws a single series. |
| `--oods-viz-scale-categorical-01` | `oklch(0.543785 0.191021 267)` | Series colour 1 of 6, for categories that have no order. |
| `--oods-viz-scale-categorical-02` | `oklch(0.669609 0.136951 87)` | Series colour 2 of 6, for categories that have no order. |
| `--oods-viz-scale-categorical-03` | `oklch(0.426529 0.191793 327)` | Series colour 3 of 6, for categories that have no order. |
| `--oods-viz-scale-categorical-04` | `oklch(0.510586 0.147294 147)` | Series colour 4 of 6, for categories that have no order. |
| `--oods-viz-scale-categorical-05` | `oklch(0.366152 0.149221 27)` | Series colour 5 of 6, for categories that have no order. |
| `--oods-viz-scale-categorical-06` | `oklch(0.653478 0.112047 207)` | Series colour 6 of 6, for categories that have no order. |
| `--oods-viz-scale-diverging-neg-01` | `oklch(0.7 0.145019 267)` | Step 1 of 5 below the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-neg-02` | `oklch(0.58 0.183256 267)` | Step 2 of 5 below the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-neg-03` | `oklch(0.46 0.185665 267)` | Step 3 of 5 below the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-neg-04` | `oklch(0.34 0.137232 267)` | Step 4 of 5 below the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-neg-05` | `oklch(0.22 0.088801 267)` | Step 5 of 5 below the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-negative-1` | `oklch(0.7 0.145019 267)` | |
| `--oods-viz-scale-diverging-negative-2` | `oklch(0.46 0.185665 267)` | |
| `--oods-viz-scale-diverging-negative-3` | `oklch(0.22 0.088801 267)` | |
| `--oods-viz-scale-diverging-neutral` | `oklch(0.82 0 286)` | Midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-pos-01` | `oklch(0.7 0.145019 23)` | Step 1 of 5 above the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-pos-02` | `oklch(0.58 0.183256 23)` | Step 2 of 5 above the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-pos-03` | `oklch(0.46 0.185665 23)` | Step 3 of 5 above the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-pos-04` | `oklch(0.34 0.137232 23)` | Step 4 of 5 above the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-pos-05` | `oklch(0.22 0.088801 23)` | Step 5 of 5 above the midpoint of the diverging scale. |
| `--oods-viz-scale-diverging-positive-1` | `oklch(0.7 0.145019 23)` | |
| `--oods-viz-scale-diverging-positive-2` | `oklch(0.46 0.185665 23)` | |
| `--oods-viz-scale-diverging-positive-3` | `oklch(0.22 0.088801 23)` | |
| `--oods-viz-scale-sequential-01` | `oklch(0.94 0.021658 267)` | Step 1 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-02` | `oklch(0.84 0.073919 267)` | Step 2 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-03` | `oklch(0.74 0.126649 267)` | Step 3 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-04` | `oklch(0.64 0.167732 267)` | Step 4 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-05` | `oklch(0.54 0.189065 267)` | Step 5 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-06` | `oklch(0.44 0.186634 267)` | Step 6 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-07` | `oklch(0.34 0.160892 267)` | Step 7 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-08` | `oklch(0.24 0.116709 267)` | Step 8 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-09` | `oklch(0.14 0.062954 267)` | Step 9 of 9 of the ordered scale (01 is the low end). |
| `--oods-viz-scale-sequential-blue-1` | `oklch(0.94 0.021658 267)` | |
| `--oods-viz-scale-sequential-blue-2` | `oklch(0.84 0.073919 267)` | |
| `--oods-viz-scale-sequential-blue-3` | `oklch(0.74 0.126649 267)` | |
| `--oods-viz-scale-sequential-blue-4` | `oklch(0.64 0.167732 267)` | |
| `--oods-viz-scale-sequential-blue-5` | `oklch(0.54 0.189065 267)` | |
| `--oods-viz-scale-sequential-blue-6` | `oklch(0.44 0.186634 267)` | |
| `--oods-viz-scale-sequential-blue-7` | `oklch(0.34 0.160892 267)` | |
| `--oods-viz-size-bar-narrow` | `12px` | |
| `--oods-viz-size-bar-standard` | `18px` | |
| `--oods-viz-size-bar-wide` | `24px` | |
| `--oods-viz-size-point-01` | `3px` | |
| `--oods-viz-size-point-02` | `5px` | |
| `--oods-viz-size-point-03` | `7px` | |
| `--oods-viz-size-point-04` | `10px` | |
| `--oods-viz-size-point-05` | `14px` | |
| `--oods-viz-size-stroke-01` | `1px` | |
| `--oods-viz-size-stroke-02` | `2px` | |
| `--oods-viz-size-stroke-03` | `3px` | |
| `--oods-viz-size-stroke-04` | `4px` | |
| `--oods-z-base` | `0` | |
| `--oods-z-overlay` | `1000` | |
| `--oods-z-raised` | `10` | |
| `--oods-z-toast` | `1100` | |
| `--oods-z-tooltip` | `1200` | |

No token matches these filters.