@scattered-light/loomiere-mojave 0.1.0 → 0.2.0

package/dist/exports/tailwind.css

@@ -1,8 +1,10 @@
 /* Tailwind CSS v4 theme for "mojave". Generated by loomiere build; do not edit.
    @import "tailwindcss";
-   @import "./theme/tokens.css";
-   @import "./tailwind.css";
+   @import "<theme>/exports/tailwind.css";   (or <package>/tailwind.css; it brings tokens.css along)
+   With loomiere-base-ui, add @import "@scattered-light/loomiere-base-ui/tailwind.css" so utilities win over component styles.
    Every value points at a --sl- variable, so modes and data-color keep working. */
+@import "../tokens.css";
+
 @theme inline {
   --color-*: initial;
   --color-neutral-50: var(--sl-color-neutral-50);
@@ -290,12 +292,12 @@
   --color-scope-border-subtle: var(--sl-scope-border-subtle);
   --color-scope-fg: var(--sl-scope-fg);
   --color-scope-focus: var(--sl-scope-focus);
-  --color-e-bg: var(--sl-e-bg);
-  --color-e-bg-hover: var(--sl-e-bg-hover);
-  --color-e-bg-active: var(--sl-e-bg-active);
-  --color-e-fg: var(--sl-e-fg);
-  --color-e-border: var(--sl-e-border);
-  --color-e-border-hover: var(--sl-e-border-hover);
+  --color-emphasis-bg: var(--sl-e-bg);
+  --color-emphasis-bg-hover: var(--sl-e-bg-hover);
+  --color-emphasis-bg-active: var(--sl-e-bg-active);
+  --color-emphasis-fg: var(--sl-e-fg);
+  --color-emphasis-border: var(--sl-e-border);
+  --color-emphasis-border-hover: var(--sl-e-border-hover);
   --color-bg: var(--sl-surface-canvas);
   --color-raised: var(--sl-surface-raised);
   --color-overlay: var(--sl-surface-overlay);
@@ -310,40 +312,169 @@
   --color-focus: var(--sl-focus-ring);
   --color-white: var(--sl-color-white);
   --color-black: var(--sl-color-black);
+  --color-field: var(--sl-field-background);
+  --color-field-disabled: var(--sl-field-background-disabled);
+  --color-field-border: var(--sl-field-border-color);
+  --color-field-border-hover: var(--sl-field-border-color-hover);
+  --color-field-border-focus: var(--sl-field-border-color-focus);
+  --color-field-border-error: var(--sl-field-border-color-error);
+  --color-field-fg: var(--sl-field-color);
+  --color-field-fg-disabled: var(--sl-field-color-disabled);
+  --color-field-placeholder: var(--sl-field-placeholder-color);
+  --color-item-fg: var(--sl-item-color);
+  --color-item-fg-hover: var(--sl-item-color-hover);
+  --color-item-fg-selected: var(--sl-item-color-selected);
+  --color-item-fg-disabled: var(--sl-item-color-disabled);
+  --color-item-hover: var(--sl-item-background-hover);
+  --color-item-selected: var(--sl-item-background-selected);
+  --color-item-indicator: var(--sl-item-indicator-color);
+  --color-check: var(--sl-check-background);
+  --color-check-border: var(--sl-check-border-color);
+  --color-check-border-hover: var(--sl-check-border-color-hover);
+  --color-check-checked: var(--sl-check-background-checked);
+  --color-check-border-checked: var(--sl-check-border-color-checked);
+  --color-check-mark: var(--sl-check-mark-color);
+  --color-check-mark-outline: var(--sl-check-mark-color-outline);
+  --color-check-mark-disabled: var(--sl-check-mark-color-disabled);
+  --color-popup: var(--sl-popup-background);
+  --color-popup-border: var(--sl-popup-border-color);
+  --color-popup-arrow-fill: var(--sl-popup-arrow-fill);
+  --color-popup-arrow-stroke: var(--sl-popup-arrow-stroke);
+  --color-popup-separator: var(--sl-popup-separator-color);
+  --color-modal: var(--sl-modal-background);
+  --color-modal-border: var(--sl-modal-border-color);
+  --color-modal-backdrop: var(--sl-modal-backdrop);
+  --color-modal-title: var(--sl-modal-title-color);
+  --color-modal-description: var(--sl-modal-description-color);
+  --color-bar: var(--sl-bar-background);
+  --color-bar-border: var(--sl-bar-border-color);
+  --color-bar-separator: var(--sl-bar-separator-color);
+  --color-table: var(--sl-table-background);
+  --color-table-fg: var(--sl-table-color);
+  --color-table-subtle: var(--sl-table-subtle-color);
+  --color-table-header: var(--sl-table-header-background);
+  --color-table-header-fg: var(--sl-table-header-color);
+  --color-table-header-hover: var(--sl-table-header-background-hover);
+  --color-table-border: var(--sl-table-border-color);
+  --color-table-row-border: var(--sl-table-row-border-color);
+  --color-table-row-hover: var(--sl-table-row-hover);
+  --color-table-row-selected: var(--sl-table-row-selected);
+  --color-table-column-hover: var(--sl-table-column-hover);
+  --color-table-range: var(--sl-table-range-background);
+  --color-table-range-border: var(--sl-table-range-border);
+  --color-gauge-track: var(--sl-gauge-track-color);
+  --color-gauge-label: var(--sl-gauge-label-color);
+  --color-gauge-value: var(--sl-gauge-value-color);
+  --color-disclosure-trigger-hover: var(--sl-disclosure-trigger-background-hover);
+  --color-disclosure-trigger-active: var(--sl-disclosure-trigger-background-active);
+  --color-disclosure-icon: var(--sl-disclosure-icon-color);
+  --color-disclosure-content: var(--sl-disclosure-content-color);
+  --color-disclosure-divider: var(--sl-disclosure-divider-color);
+  --color-disclosure-indicator: var(--sl-disclosure-indicator-color);
+  --color-disclosure-selected: var(--sl-disclosure-selected-color);
+  --color-icon-button-fg: var(--sl-icon-button-color);
+  --color-icon-button-fg-hover: var(--sl-icon-button-color-hover);
+  --color-icon-button-hover: var(--sl-icon-button-background-hover);
+  --color-notice-description: var(--sl-notice-description-color);
+  --color-fill-subtle: var(--sl-fill-subtle);
+  --color-fill-default: var(--sl-fill-default);
+  --color-fill-strong: var(--sl-fill-strong);
+  --color-fill-inverse: var(--sl-fill-inverse);
+  --color-fill-stronger: var(--sl-fill-stronger);
+  --color-fill-track: var(--sl-fill-track);
+  --color-interactive-active: var(--sl-interactive-active);
+  --color-interactive-default: var(--sl-interactive-default);
+  --color-interactive-disabled: var(--sl-interactive-disabled);
+  --color-interactive-hover: var(--sl-interactive-hover);
+  --color-interactive-tint: var(--sl-interactive-tint);
+  --color-interactive-tint-hover: var(--sl-interactive-tint-hover);
+  --color-interactive-tint-active: var(--sl-interactive-tint-active);
+  --color-interactive-tint-strong: var(--sl-interactive-tint-strong);
+  --color-status-error: var(--sl-status-error);
+  --color-status-error-dark: var(--sl-status-error-dark);
+  --color-status-error-light: var(--sl-status-error-light);
+  --color-status-info: var(--sl-status-info);
+  --color-status-info-dark: var(--sl-status-info-dark);
+  --color-status-info-light: var(--sl-status-info-light);
+  --color-status-success: var(--sl-status-success);
+  --color-status-success-dark: var(--sl-status-success-dark);
+  --color-status-success-light: var(--sl-status-success-light);
+  --color-status-warning: var(--sl-status-warning);
+  --color-status-warning-dark: var(--sl-status-warning-dark);
+  --color-status-warning-light: var(--sl-status-warning-light);
+  --color-border-accent: var(--sl-border-accent);
+  --color-border-default: var(--sl-border-default);
+  --color-border-control: var(--sl-border-control);
+  --color-border-control-hover: var(--sl-border-control-hover);
+  --color-fg-accent: var(--sl-text-accent);
+  --color-fg-on-accent: var(--sl-text-on-accent);
+  --color-fg-on-primary: var(--sl-text-on-primary);
+  --color-fg-primary: var(--sl-text-primary);
+  --color-fg-secondary: var(--sl-text-secondary);
+  --color-fg-tertiary: var(--sl-text-tertiary);
+  --color-fg-on-tint: var(--sl-text-on-tint);
+  --color-fg-on-tint-strong: var(--sl-text-on-tint-strong);
+  --color-fg-on-inverse: var(--sl-text-on-inverse);
+  --color-fg-on-inverse-surface: var(--sl-text-on-inverse-surface);
+  --color-surface-base: var(--sl-surface-base);
+  --color-surface-canvas: var(--sl-surface-canvas);
+  --color-surface-overlay: var(--sl-surface-overlay);
+  --color-surface-raised: var(--sl-surface-raised);
+  --color-surface-modal: var(--sl-surface-modal);
+  --color-surface-tray: var(--sl-surface-tray);
+  --color-surface-inverse: var(--sl-surface-inverse);
+  --color-focus-ring: var(--sl-focus-ring);
+  --color-focus-halo: var(--sl-focus-halo-color);
+  --color-blockquote-border: var(--sl-content-blockquote-border);
+  --color-blockquote-cite: var(--sl-content-blockquote-cite);
+  --color-code: var(--sl-content-code-background);
+  --color-code-border: var(--sl-content-code-border);
+  --color-code-text: var(--sl-content-code-text);
+  --color-hr-border: var(--sl-content-hr-border);
+  --color-kbd: var(--sl-content-kbd-background);
+  --color-kbd-text: var(--sl-content-kbd-text);
+  --color-link: var(--sl-content-link-color);
+  --color-link-hover: var(--sl-content-link-hover-color);
+  --color-link-underline: var(--sl-content-link-underline-color);
+  --color-link-underline-hover: var(--sl-content-link-underline-hover-color);
+  --color-list-marker: var(--sl-content-list-marker-color);
+  --color-mark: var(--sl-content-mark-background);
+  --color-page: var(--sl-content-page-background);
+  --color-pre: var(--sl-content-pre-background);
+  --color-pre-border: var(--sl-content-pre-border);
+  --color-pre-text: var(--sl-content-pre-text);
+  --color-prose: var(--sl-content-prose-color);
+  --color-scrollbar-thumb: var(--sl-content-scrollbar-thumb);
+  --color-scrollbar-thumb-hover: var(--sl-content-scrollbar-thumb-hover);
+  --color-scrollbar-track: var(--sl-content-scrollbar-track);
+  --color-selection: var(--sl-content-selection-background);
+  --color-selection-text: var(--sl-content-selection-text);
   --color-transparent: transparent;
   --color-current: currentColor;
+  --font-*: initial;
   --font-display: var(--sl-font-family-display);
   --font-body: var(--sl-font-family-body);
   --font-mono: var(--sl-font-family-mono);
   --font-sans: var(--sl-font-family-body);
-  --text-xxs: var(--sl-font-size-xxs);
-  --text-xxs--line-height: var(--sl-line-height-xxs);
-  --text-xs: var(--sl-font-size-xs);
-  --text-xs--line-height: var(--sl-line-height-xs);
-  --text-sm: var(--sl-font-size-sm);
-  --text-sm--line-height: var(--sl-line-height-sm);
-  --text-md: var(--sl-font-size-md);
-  --text-md--line-height: var(--sl-line-height-md);
-  --text-lg: var(--sl-font-size-lg);
-  --text-lg--line-height: var(--sl-line-height-lg);
-  --text-xl: var(--sl-font-size-xl);
-  --text-xl--line-height: var(--sl-line-height-xl);
-  --text-2xl: var(--sl-font-size-2xl);
-  --text-2xl--line-height: var(--sl-line-height-2xl);
-  --text-3xl: var(--sl-font-size-3xl);
-  --text-3xl--line-height: var(--sl-line-height-3xl);
-  --text-4xl: var(--sl-font-size-4xl);
-  --text-4xl--line-height: var(--sl-line-height-4xl);
-  --text-5xl: var(--sl-font-size-5xl);
-  --text-5xl--line-height: var(--sl-line-height-5xl);
-  --text-6xl: var(--sl-font-size-6xl);
-  --text-6xl--line-height: var(--sl-line-height-6xl);
-  --text-7xl: var(--sl-font-size-7xl);
-  --text-7xl--line-height: var(--sl-line-height-7xl);
-  --text-8xl: var(--sl-font-size-8xl);
-  --text-8xl--line-height: var(--sl-line-height-8xl);
-  --text-9xl: var(--sl-font-size-9xl);
-  --text-9xl--line-height: var(--sl-line-height-9xl);
+  --text-*: initial;
+  --font-weight-*: initial;
+  --font-weight-hairline: var(--sl-font-weight-hairline);
+  --font-weight-thin: var(--sl-font-weight-thin);
+  --font-weight-light: var(--sl-font-weight-light);
+  --font-weight-normal: var(--sl-font-weight-normal);
+  --font-weight-medium: var(--sl-font-weight-medium);
+  --font-weight-semibold: var(--sl-font-weight-semibold);
+  --font-weight-bold: var(--sl-font-weight-bold);
+  --font-weight-extrabold: var(--sl-font-weight-extrabold);
+  --font-weight-black: var(--sl-font-weight-black);
+  --tracking-*: initial;
+  --tracking-tighter: var(--sl-letter-spacing-tighter);
+  --tracking-tight: var(--sl-letter-spacing-tight);
+  --tracking-normal: var(--sl-letter-spacing-normal);
+  --tracking-wide: var(--sl-letter-spacing-wide);
+  --tracking-wider: var(--sl-letter-spacing-wider);
+  --tracking-widest: var(--sl-letter-spacing-widest);
+  --radius-*: initial;
   --radius-full: var(--sl-radius-full);
   --radius-none: var(--sl-radius-none);
   --radius-sm: var(--sl-radius-sm);
@@ -362,6 +493,7 @@
   --radius-modal: var(--sl-radius-modal);
   --radius-pill: var(--sl-radius-pill);
   --radius-surface: var(--sl-radius-surface);
+  --shadow-*: initial;
   --shadow-2xl: var(--sl-elevation-2xl);
   --shadow-base: var(--sl-elevation-base);
   --shadow-lg: var(--sl-elevation-lg);
@@ -369,5 +501,1067 @@
   --shadow-sm: var(--sl-elevation-sm);
   --shadow-xl: var(--sl-elevation-xl);
   --shadow-xs: var(--sl-elevation-xs);
+  --ease-*: initial;
+  --ease-default: var(--sl-easing-default);
+  --ease-in: var(--sl-easing-in);
+  --ease-out: var(--sl-easing-out);
+  --ease-in-out: var(--sl-easing-in-out);
+  --container-*: initial;
+  --container-sm: var(--sl-container-sm);
+  --container-md: var(--sl-container-md);
+  --container-lg: var(--sl-container-lg);
+  --container-xl: var(--sl-container-xl);
+  --container-2xl: var(--sl-container-2xl);
   --spacing: var(--sl-space-1);
+  --spacing-field: var(--sl-field-gap);
+  --spacing-field-label-spacing: var(--sl-field-label-spacing);
+  --spacing-field-message-spacing: var(--sl-field-message-spacing);
+  --spacing-item-block: var(--sl-item-padding-block);
+  --spacing-item-block-dense: var(--sl-item-padding-block-dense);
+  --spacing-item-inline: var(--sl-item-padding-inline);
+  --spacing-item: var(--sl-item-gap);
+  --spacing-item-indicator: var(--sl-item-indicator-size);
+  --spacing-popup: var(--sl-popup-padding);
+  --spacing-popup-panel: var(--sl-popup-padding-panel);
+  --spacing-popup-list-max: var(--sl-popup-list-max-height);
+  --spacing-popup-separator-spacing: var(--sl-popup-separator-spacing);
+  --spacing-popup-group-label-top: var(--sl-popup-group-label-padding-top);
+  --spacing-popup-group-label-bottom: var(--sl-popup-group-label-padding-bottom);
+  --spacing-popup-empty-block: var(--sl-popup-empty-padding-block);
+  --spacing-modal: var(--sl-modal-padding);
+  --spacing-modal-actions: var(--sl-modal-actions-gap);
+  --spacing-modal-actions-spacing: var(--sl-modal-actions-spacing);
+  --spacing-bar: var(--sl-bar-padding);
+  --spacing-bar-group: var(--sl-bar-group-gap);
+  --spacing-bar-separator-length: var(--sl-bar-separator-length);
+  --spacing-bar-separator-spacing: var(--sl-bar-separator-spacing);
+  --spacing-table-row: var(--sl-table-row-height);
+  --spacing-table-header: var(--sl-table-header-height);
+  --spacing-table-cell-inline: var(--sl-table-cell-padding-inline);
+  --spacing-gauge-sm: var(--sl-gauge-height-sm);
+  --spacing-gauge: var(--sl-gauge-height);
+  --spacing-gauge-lg: var(--sl-gauge-height-lg);
+  --spacing-icon-button: var(--sl-icon-button-size);
+  --spacing-icon-button-inset: var(--sl-icon-button-inset);
+  --spacing-notice: var(--sl-notice-padding);
+  --spacing-notice-text: var(--sl-notice-text-gap);
+  --spacing-notice-peek: var(--sl-notice-peek);
+  --spacing-control-lg: var(--sl-control-height-lg);
+  --spacing-control-md: var(--sl-control-height-md);
+  --spacing-control-sm: var(--sl-control-height-sm);
+  --spacing-control-xs: var(--sl-control-height-xs);
+  --spacing-control-block: var(--sl-control-padding-block);
+  --spacing-control-block-lg: var(--sl-control-padding-block-lg);
+  --spacing-control-block-sm: var(--sl-control-padding-block-sm);
+  --spacing-control-block-xs: var(--sl-control-padding-block-xs);
+  --spacing-control-inline: var(--sl-control-padding-inline);
+  --spacing-control-inline-lg: var(--sl-control-padding-inline-lg);
+  --spacing-control-inline-sm: var(--sl-control-padding-inline-sm);
+  --spacing-control-inline-xs: var(--sl-control-padding-inline-xs);
+  --spacing-icon-minimize: var(--sl-icon-size-minimize);
+  --spacing-icon-condense: var(--sl-icon-size-condense);
+  --spacing-icon-base: var(--sl-icon-size-base);
+  --spacing-icon-magnify: var(--sl-icon-size-magnify);
+  --spacing-icon-maximize: var(--sl-icon-size-maximize);
+  --spacing-1: var(--sl-space-1);
+  --spacing-2: var(--sl-space-2);
+  --spacing-3: var(--sl-space-3);
+  --spacing-4: var(--sl-space-4);
+  --spacing-5: var(--sl-space-5);
+  --spacing-6: var(--sl-space-6);
+  --spacing-7: var(--sl-space-7);
+  --spacing-8: var(--sl-space-8);
+  --spacing-9: var(--sl-space-9);
+  --spacing-10: var(--sl-space-10);
+  --spacing-11: var(--sl-space-11);
+  --spacing-12: var(--sl-space-12);
+  --spacing-13: var(--sl-space-13);
+  --spacing-14: var(--sl-space-14);
+  --spacing-16: var(--sl-space-16);
+  --spacing-20: var(--sl-space-20);
+  --spacing-24: var(--sl-space-24);
+  --spacing-28: var(--sl-space-28);
+  --spacing-32: var(--sl-space-32);
+  --spacing-36: var(--sl-space-36);
+  --spacing-40: var(--sl-space-40);
+  --spacing-44: var(--sl-space-44);
+  --spacing-48: var(--sl-space-48);
+  --spacing-52: var(--sl-space-52);
+  --spacing-56: var(--sl-space-56);
+  --spacing-60: var(--sl-space-60);
+  --spacing-64: var(--sl-space-64);
+  --spacing-72: var(--sl-space-72);
+  --spacing-80: var(--sl-space-80);
+  --spacing-96: var(--sl-space-96);
+  --spacing-px: var(--sl-space-px);
+  --spacing-0-5: var(--sl-space-0-5);
+  --spacing-1-5: var(--sl-space-1-5);
+  --spacing-2-5: var(--sl-space-2-5);
+  --spacing-3-5: var(--sl-space-3-5);
+  --spacing-block-lg: var(--sl-space-block-lg);
+  --spacing-block-md: var(--sl-space-block-md);
+  --spacing-block-sm: var(--sl-space-block-sm);
+  --spacing-block-xs: var(--sl-space-block-xs);
+  --spacing-inline-lg: var(--sl-space-inline-lg);
+  --spacing-inline-md: var(--sl-space-inline-md);
+  --spacing-inline-sm: var(--sl-space-inline-sm);
+  --spacing-inline-xs: var(--sl-space-inline-xs);
+  --spacing-gap-control: var(--sl-gap-control);
+  --spacing-gap-control-sm: var(--sl-gap-control-sm);
+  --spacing-gap-control-xs: var(--sl-gap-control-xs);
+  --spacing-gap-stack-lg: var(--sl-gap-stack-lg);
+  --spacing-gap-stack-md: var(--sl-gap-stack-md);
+  --spacing-gap-stack-sm: var(--sl-gap-stack-sm);
+  --spacing-stack-lg: var(--sl-spacing-stack-lg);
+  --spacing-stack-md: var(--sl-spacing-stack-md);
+  --spacing-stack-sm: var(--sl-spacing-stack-sm);
+  --spacing-stack-xs: var(--sl-spacing-stack-xs);
+  --shadow-popup: var(--sl-popup-shadow);
+  --shadow-modal: var(--sl-modal-shadow);
+}
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 30em;
+  --breakpoint-md: 48em;
+  --breakpoint-lg: 62em;
+  --breakpoint-xl: 80em;
+  --breakpoint-2xl: 96em;
+}
+
+@custom-variant dark {
+  &:where([data-theme='dark'], [data-theme='dark'] *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where(:root:not([data-theme='light']), :root:not([data-theme='light']) *) {
+      @slot;
+    }
+  }
+}
+
+@utility text-base {
+  font-family: var(--sl-font-base-font-family);
+  font-size: var(--sl-font-base-font-size);
+  font-weight: var(--sl-font-base-font-weight);
+  line-height: var(--sl-font-base-line-height);
+  letter-spacing: var(--sl-font-base-letter-spacing);
+}
+
+@utility text-base-selected {
+  font-family: var(--sl-font-base-selected-font-family);
+  font-size: var(--sl-font-base-selected-font-size);
+  font-weight: var(--sl-font-base-selected-font-weight);
+  line-height: var(--sl-font-base-selected-line-height);
+  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+}
+
+@utility text-base-label {
+  font-family: var(--sl-font-base-label-font-family);
+  font-size: var(--sl-font-base-label-font-size);
+  font-weight: var(--sl-font-base-label-font-weight);
+  line-height: var(--sl-font-base-label-line-height);
+  letter-spacing: var(--sl-font-base-label-letter-spacing);
+}
+
+@utility text-base-link {
+  font-family: var(--sl-font-base-link-font-family);
+  font-size: var(--sl-font-base-link-font-size);
+  font-weight: var(--sl-font-base-link-font-weight);
+  line-height: var(--sl-font-base-link-line-height);
+  letter-spacing: var(--sl-font-base-link-letter-spacing);
+}
+
+@utility text-base-subtitle {
+  font-family: var(--sl-font-base-subtitle-font-family);
+  font-size: var(--sl-font-base-subtitle-font-size);
+  font-weight: var(--sl-font-base-subtitle-font-weight);
+  line-height: var(--sl-font-base-subtitle-line-height);
+  letter-spacing: var(--sl-font-base-subtitle-letter-spacing);
+}
+
+@utility text-base-trigger {
+  font-family: var(--sl-font-base-trigger-font-family);
+  font-size: var(--sl-font-base-trigger-font-size);
+  font-weight: var(--sl-font-base-trigger-font-weight);
+  line-height: var(--sl-font-base-trigger-line-height);
+  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+}
+
+@utility text-code {
+  font-family: var(--sl-font-code-font-family);
+  font-size: var(--sl-font-code-font-size);
+  font-weight: var(--sl-font-code-font-weight);
+  line-height: var(--sl-font-code-line-height);
+  letter-spacing: var(--sl-font-code-letter-spacing);
+}
+
+@utility text-condense {
+  font-family: var(--sl-font-condense-font-family);
+  font-size: var(--sl-font-condense-font-size);
+  font-weight: var(--sl-font-condense-font-weight);
+  line-height: var(--sl-font-condense-line-height);
+  letter-spacing: var(--sl-font-condense-letter-spacing);
+}
+
+@utility text-condense-trigger {
+  font-family: var(--sl-font-condense-trigger-font-family);
+  font-size: var(--sl-font-condense-trigger-font-size);
+  font-weight: var(--sl-font-condense-trigger-font-weight);
+  line-height: var(--sl-font-condense-trigger-line-height);
+  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+}
+
+@utility text-condense-selected {
+  font-family: var(--sl-font-condense-selected-font-family);
+  font-size: var(--sl-font-condense-selected-font-size);
+  font-weight: var(--sl-font-condense-selected-font-weight);
+  line-height: var(--sl-font-condense-selected-line-height);
+  letter-spacing: var(--sl-font-condense-selected-letter-spacing);
+}
+
+@utility text-condense-link {
+  font-family: var(--sl-font-condense-link-font-family);
+  font-size: var(--sl-font-condense-link-font-size);
+  font-weight: var(--sl-font-condense-link-font-weight);
+  line-height: var(--sl-font-condense-link-line-height);
+  letter-spacing: var(--sl-font-condense-link-letter-spacing);
+}
+
+@utility text-condense-subtitle {
+  font-family: var(--sl-font-condense-subtitle-font-family);
+  font-size: var(--sl-font-condense-subtitle-font-size);
+  font-weight: var(--sl-font-condense-subtitle-font-weight);
+  line-height: var(--sl-font-condense-subtitle-line-height);
+  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
+}
+
+@utility text-condense-subtitle-label {
+  font-family: var(--sl-font-condense-subtitle-label-font-family);
+  font-size: var(--sl-font-condense-subtitle-label-font-size);
+  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
+  line-height: var(--sl-font-condense-subtitle-label-line-height);
+  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
+  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+}
+
+@utility text-magnify {
+  font-family: var(--sl-font-magnify-font-family);
+  font-size: var(--sl-font-magnify-font-size);
+  font-weight: var(--sl-font-magnify-font-weight);
+  line-height: var(--sl-font-magnify-line-height);
+  letter-spacing: var(--sl-font-magnify-letter-spacing);
+}
+
+@utility text-magnify-trigger {
+  font-family: var(--sl-font-magnify-trigger-font-family);
+  font-size: var(--sl-font-magnify-trigger-font-size);
+  font-weight: var(--sl-font-magnify-trigger-font-weight);
+  line-height: var(--sl-font-magnify-trigger-line-height);
+  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+}
+
+@utility text-minimize {
+  font-family: var(--sl-font-minimize-font-family);
+  font-size: var(--sl-font-minimize-font-size);
+  font-weight: var(--sl-font-minimize-font-weight);
+  line-height: var(--sl-font-minimize-line-height);
+  letter-spacing: var(--sl-font-minimize-letter-spacing);
+}
+
+@utility text-minimize-trigger {
+  font-family: var(--sl-font-minimize-trigger-font-family);
+  font-size: var(--sl-font-minimize-trigger-font-size);
+  font-weight: var(--sl-font-minimize-trigger-font-weight);
+  line-height: var(--sl-font-minimize-trigger-line-height);
+  letter-spacing: var(--sl-font-minimize-trigger-letter-spacing);
+}
+
+@utility text-minimize-selected {
+  font-family: var(--sl-font-minimize-selected-font-family);
+  font-size: var(--sl-font-minimize-selected-font-size);
+  font-weight: var(--sl-font-minimize-selected-font-weight);
+  line-height: var(--sl-font-minimize-selected-line-height);
+  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+}
+
+@utility text-minimize-link {
+  font-family: var(--sl-font-minimize-link-font-family);
+  font-size: var(--sl-font-minimize-link-font-size);
+  font-weight: var(--sl-font-minimize-link-font-weight);
+  line-height: var(--sl-font-minimize-link-line-height);
+  letter-spacing: var(--sl-font-minimize-link-letter-spacing);
+}
+
+@utility text-minimize-subtitle {
+  font-family: var(--sl-font-minimize-subtitle-font-family);
+  font-size: var(--sl-font-minimize-subtitle-font-size);
+  font-weight: var(--sl-font-minimize-subtitle-font-weight);
+  line-height: var(--sl-font-minimize-subtitle-line-height);
+  letter-spacing: var(--sl-font-minimize-subtitle-letter-spacing);
+}
+
+@utility text-minimize-subtitle-label {
+  font-family: var(--sl-font-minimize-subtitle-label-font-family);
+  font-size: var(--sl-font-minimize-subtitle-label-font-size);
+  font-weight: var(--sl-font-minimize-subtitle-label-font-weight);
+  line-height: var(--sl-font-minimize-subtitle-label-line-height);
+  letter-spacing: var(--sl-font-minimize-subtitle-label-letter-spacing);
+  text-transform: var(--sl-font-minimize-subtitle-label-text-transform);
+}
+
+@utility text-maximize-2xl {
+  font-family: var(--sl-font-maximize-2xl-font-family);
+  font-size: var(--sl-font-maximize-2xl-font-size);
+  font-weight: var(--sl-font-maximize-2xl-font-weight);
+  line-height: var(--sl-font-maximize-2xl-line-height);
+  letter-spacing: var(--sl-font-maximize-2xl-letter-spacing);
+}
+
+@utility text-maximize-3xl {
+  font-family: var(--sl-font-maximize-3xl-font-family);
+  font-size: var(--sl-font-maximize-3xl-font-size);
+  font-weight: var(--sl-font-maximize-3xl-font-weight);
+  line-height: var(--sl-font-maximize-3xl-line-height);
+  letter-spacing: var(--sl-font-maximize-3xl-letter-spacing);
+}
+
+@utility text-maximize-4xl {
+  font-family: var(--sl-font-maximize-4xl-font-family);
+  font-size: var(--sl-font-maximize-4xl-font-size);
+  font-weight: var(--sl-font-maximize-4xl-font-weight);
+  line-height: var(--sl-font-maximize-4xl-line-height);
+  letter-spacing: var(--sl-font-maximize-4xl-letter-spacing);
+}
+
+@utility text-maximize-lg {
+  font-family: var(--sl-font-maximize-lg-font-family);
+  font-size: var(--sl-font-maximize-lg-font-size);
+  font-weight: var(--sl-font-maximize-lg-font-weight);
+  line-height: var(--sl-font-maximize-lg-line-height);
+  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+}
+
+@utility text-maximize-md {
+  font-family: var(--sl-font-maximize-md-font-family);
+  font-size: var(--sl-font-maximize-md-font-size);
+  font-weight: var(--sl-font-maximize-md-font-weight);
+  line-height: var(--sl-font-maximize-md-line-height);
+  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
+}
+
+@utility text-maximize-sm {
+  font-family: var(--sl-font-maximize-sm-font-family);
+  font-size: var(--sl-font-maximize-sm-font-size);
+  font-weight: var(--sl-font-maximize-sm-font-weight);
+  line-height: var(--sl-font-maximize-sm-line-height);
+  letter-spacing: var(--sl-font-maximize-sm-letter-spacing);
+}
+
+@utility text-maximize-xl {
+  font-family: var(--sl-font-maximize-xl-font-family);
+  font-size: var(--sl-font-maximize-xl-font-size);
+  font-weight: var(--sl-font-maximize-xl-font-weight);
+  line-height: var(--sl-font-maximize-xl-line-height);
+  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
+}
+
+@utility text-maximize-xs {
+  font-family: var(--sl-font-maximize-xs-font-family);
+  font-size: var(--sl-font-maximize-xs-font-size);
+  font-weight: var(--sl-font-maximize-xs-font-weight);
+  line-height: var(--sl-font-maximize-xs-line-height);
+  letter-spacing: var(--sl-font-maximize-xs-letter-spacing);
+}
+
+@utility z-hide {
+  z-index: var(--sl-z-index-hide);
+}
+
+@utility z-auto {
+  z-index: var(--sl-z-index-auto);
+}
+
+@utility z-base {
+  z-index: var(--sl-z-index-base);
+}
+
+@utility z-docked {
+  z-index: var(--sl-z-index-docked);
+}
+
+@utility z-dropdown {
+  z-index: var(--sl-z-index-dropdown);
+}
+
+@utility z-sticky {
+  z-index: var(--sl-z-index-sticky);
+}
+
+@utility z-banner {
+  z-index: var(--sl-z-index-banner);
+}
+
+@utility z-scrim {
+  z-index: var(--sl-z-index-scrim);
+}
+
+@utility z-modal {
+  z-index: var(--sl-z-index-modal);
+}
+
+@utility z-popover {
+  z-index: var(--sl-z-index-popover);
+}
+
+@utility z-skip-link {
+  z-index: var(--sl-z-index-skip-link);
+}
+
+@utility z-toast {
+  z-index: var(--sl-z-index-toast);
+}
+
+@utility z-tooltip {
+  z-index: var(--sl-z-index-tooltip);
+}
+
+@utility duration-fast {
+  --tw-duration: var(--sl-duration-fast);
+  transition-duration: var(--sl-duration-fast);
+}
+
+@utility duration-normal {
+  --tw-duration: var(--sl-duration-normal);
+  transition-duration: var(--sl-duration-normal);
+}
+
+@utility duration-slow {
+  --tw-duration: var(--sl-duration-slow);
+  transition-duration: var(--sl-duration-slow);
+}
+
+@utility pair-ember-dune {
+  --sl-surface-canvas: var(--sl-pair-ember-dune-bg);
+  --sl-surface-raised: var(--sl-pair-ember-dune-bg);
+  --sl-surface-overlay: var(--sl-pair-ember-dune-bg);
+  --sl-surface-modal: var(--sl-pair-ember-dune-bg);
+  --sl-surface-tray: var(--sl-pair-ember-dune-bg);
+  --sl-text-primary: var(--sl-pair-ember-dune-fg);
+  --sl-text-secondary: var(--sl-pair-ember-dune-fg);
+  --sl-text-tertiary: var(--sl-pair-ember-dune-fg);
+  --sl-text-accent: var(--sl-pair-ember-dune-accent);
+  --sl-text-disabled: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 45%, var(--sl-pair-ember-dune-bg));
+  --sl-text-on-primary: var(--sl-pair-ember-dune-bg);
+  --sl-text-on-tint: var(--sl-pair-ember-dune-fg);
+  --sl-text-on-tint-strong: var(--sl-pair-ember-dune-fg);
+  --sl-text-on-inverse: var(--sl-pair-ember-dune-bg);
+  --sl-text-on-inverse-surface: var(--sl-pair-ember-dune-bg);
+  --sl-surface-inverse: var(--sl-pair-ember-dune-fg);
+  --sl-border-subtle: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 15%, var(--sl-pair-ember-dune-bg));
+  --sl-border-default: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 30%, var(--sl-pair-ember-dune-bg));
+  --sl-border-strong: var(--sl-pair-ember-dune-fg);
+  --sl-border-accent: var(--sl-pair-ember-dune-accent);
+  --sl-border-control: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 50%, var(--sl-pair-ember-dune-bg));
+  --sl-border-control-hover: var(--sl-pair-ember-dune-fg);
+  --sl-fill-subtle: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 12%, var(--sl-pair-ember-dune-bg));
+  --sl-fill-default: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 22%, var(--sl-pair-ember-dune-bg));
+  --sl-fill-strong: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 35%, var(--sl-pair-ember-dune-bg));
+  --sl-fill-stronger: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 45%, var(--sl-pair-ember-dune-bg));
+  --sl-fill-inverse: var(--sl-pair-ember-dune-fg);
+  --sl-fill-track: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 12%, var(--sl-pair-ember-dune-bg));
+  --sl-interactive-default: var(--sl-pair-ember-dune-accent);
+  --sl-interactive-hover: var(--sl-pair-ember-dune-hover);
+  --sl-interactive-active: var(--sl-pair-ember-dune-active);
+  --sl-interactive-disabled: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 35%, var(--sl-pair-ember-dune-bg));
+  --sl-interactive-tint: var(--sl-pair-ember-dune-subtle);
+  --sl-interactive-tint-hover: var(--sl-pair-ember-dune-subtle);
+  --sl-interactive-tint-active: var(--sl-pair-ember-dune-emphasis);
+  --sl-interactive-tint-strong: var(--sl-pair-ember-dune-emphasis);
+  --sl-focus-ring: var(--sl-pair-ember-dune-accent);
+  --sl-content-prose-color: var(--sl-pair-ember-dune-fg);
+  --sl-content-blockquote-border: var(--sl-pair-ember-dune-accent);
+  --sl-content-blockquote-cite: var(--sl-pair-ember-dune-fg);
+  --sl-content-code-background: var(--sl-pair-ember-dune-muted);
+  --sl-content-code-border: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 30%, var(--sl-pair-ember-dune-bg));
+  --sl-content-code-text: var(--sl-pair-ember-dune-fg);
+  --sl-content-field-border: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 30%, var(--sl-pair-ember-dune-bg));
+  --sl-content-hr-border: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 30%, var(--sl-pair-ember-dune-bg));
+  --sl-content-pre-border: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 30%, var(--sl-pair-ember-dune-bg));
+  --sl-content-kbd-background: var(--sl-pair-ember-dune-fg);
+  --sl-content-kbd-text: var(--sl-pair-ember-dune-bg);
+  --sl-content-link-color: var(--sl-pair-ember-dune-accent);
+  --sl-content-link-hover-color: var(--sl-pair-ember-dune-hover);
+  --sl-content-link-underline-color: color-mix(in oklab, var(--sl-pair-ember-dune-accent) 50%, var(--sl-pair-ember-dune-bg));
+  --sl-content-link-underline-hover-color: var(--sl-pair-ember-dune-accent);
+  --sl-content-list-marker-color: var(--sl-pair-ember-dune-accent);
+  --sl-content-mark-background: var(--sl-pair-ember-dune-subtle);
+  --sl-content-selection-background: var(--sl-pair-ember-dune-subtle);
+  --sl-content-selection-text: var(--sl-pair-ember-dune-fg);
+  --sl-content-scrollbar-thumb: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 30%, var(--sl-pair-ember-dune-bg));
+  --sl-content-scrollbar-thumb-hover: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 45%, var(--sl-pair-ember-dune-bg));
+  --sl-shadow-outline: 0 0 0 3px color-mix(in oklab, var(--sl-focus-ring) 60%, transparent);
+  --sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover);
+  --sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active);
+  --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring);
+  --sl-focus-halo-color: var(--sl-interactive-tint-hover);
+  --sl-bar-background: var(--sl-surface-tray);
+  --sl-bar-border-color: var(--sl-border-default);
+  --sl-bar-separator-color: var(--sl-border-default);
+  --sl-check-border-color: var(--sl-border-control);
+  --sl-check-border-color-hover: var(--sl-border-control-hover);
+  --sl-check-background-checked: var(--sl-interactive-default);
+  --sl-check-border-color-checked: var(--sl-border-accent);
+  --sl-check-mark-color: var(--sl-text-on-primary);
+  --sl-check-mark-color-outline: var(--sl-interactive-default);
+  --sl-check-mark-color-disabled: var(--sl-text-disabled);
+  --sl-surface-base: var(--sl-surface-canvas);
+  --sl-text-on-accent: var(--sl-text-on-primary);
+  --sl-content-page-background: var(--sl-surface-canvas);
+  --sl-content-pre-background: var(--sl-surface-canvas);
+  --sl-content-pre-text: var(--sl-content-prose-color);
+  --sl-disclosure-trigger-background-hover: var(--sl-fill-subtle);
+  --sl-disclosure-trigger-background-active: var(--sl-fill-default);
+  --sl-disclosure-icon-color: var(--sl-text-secondary);
+  --sl-disclosure-content-color: var(--sl-text-secondary);
+  --sl-disclosure-divider-color: var(--sl-border-default);
+  --sl-disclosure-indicator-color: var(--sl-border-accent);
+  --sl-disclosure-selected-color: var(--sl-text-accent);
+  --sl-field-background: var(--sl-surface-base);
+  --sl-field-background-disabled: var(--sl-surface-overlay);
+  --sl-field-border-color: var(--sl-border-control);
+  --sl-field-border-color-hover: var(--sl-border-control-hover);
+  --sl-field-border-color-focus: var(--sl-focus-ring);
+  --sl-field-color: var(--sl-text-primary);
+  --sl-field-color-disabled: var(--sl-text-disabled);
+  --sl-field-placeholder-color: var(--sl-text-tertiary);
+  --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+  --sl-gauge-track-color: var(--sl-fill-track);
+  --sl-gauge-label-color: var(--sl-text-primary);
+  --sl-gauge-value-color: var(--sl-text-secondary);
+  --sl-icon-button-color: var(--sl-text-tertiary);
+  --sl-icon-button-color-hover: var(--sl-text-primary);
+  --sl-icon-button-background-hover: var(--sl-fill-subtle);
+  --sl-item-color: var(--sl-text-primary);
+  --sl-item-color-hover: var(--sl-text-on-tint);
+  --sl-item-color-selected: var(--sl-text-on-tint-strong);
+  --sl-item-color-disabled: var(--sl-text-disabled);
+  --sl-item-background-hover: var(--sl-interactive-tint-hover);
+  --sl-item-background-selected: var(--sl-interactive-tint-active);
+  --sl-item-indicator-color: var(--sl-interactive-default);
+  --sl-modal-background: var(--sl-surface-modal);
+  --sl-modal-border-color: var(--sl-border-default);
+  --sl-modal-title-color: var(--sl-text-primary);
+  --sl-modal-description-color: var(--sl-text-secondary);
+  --sl-notice-description-color: var(--sl-text-secondary);
+  --sl-popup-background: var(--sl-surface-base);
+  --sl-popup-border-color: var(--sl-border-default);
+  --sl-popup-arrow-fill: var(--sl-popup-background);
+  --sl-popup-arrow-stroke: var(--sl-popup-border-color);
+  --sl-popup-separator-color: var(--sl-border-subtle);
+  --sl-table-background: var(--sl-surface-canvas);
+  --sl-table-color: var(--sl-text-primary);
+  --sl-table-subtle-color: var(--sl-text-secondary);
+  --sl-table-header-background: var(--sl-surface-tray);
+  --sl-table-header-color: var(--sl-text-primary);
+  --sl-table-header-background-hover: var(--sl-fill-subtle);
+  --sl-table-border-color: var(--sl-border-default);
+  --sl-table-row-border-color: var(--sl-border-subtle);
+  --sl-table-row-hover: var(--sl-item-background-hover);
+  --sl-table-row-selected: var(--sl-item-background-selected);
+  --sl-table-column-hover: var(--sl-fill-subtle);
+  --sl-table-range-background: var(--sl-interactive-tint);
+  --sl-table-range-border: var(--sl-focus-ring);
+  --sl-drawer-handle-color: var(--sl-border-strong);
+  --sl-check-background: var(--sl-field-background);
+}
+
+@utility pair-mirage-deep {
+  --sl-surface-canvas: var(--sl-pair-mirage-deep-bg);
+  --sl-surface-raised: var(--sl-pair-mirage-deep-bg);
+  --sl-surface-overlay: var(--sl-pair-mirage-deep-bg);
+  --sl-surface-modal: var(--sl-pair-mirage-deep-bg);
+  --sl-surface-tray: var(--sl-pair-mirage-deep-bg);
+  --sl-text-primary: var(--sl-pair-mirage-deep-fg);
+  --sl-text-secondary: var(--sl-pair-mirage-deep-fg);
+  --sl-text-tertiary: var(--sl-pair-mirage-deep-fg);
+  --sl-text-accent: var(--sl-pair-mirage-deep-accent);
+  --sl-text-disabled: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 45%, var(--sl-pair-mirage-deep-bg));
+  --sl-text-on-primary: var(--sl-pair-mirage-deep-bg);
+  --sl-text-on-tint: var(--sl-pair-mirage-deep-fg);
+  --sl-text-on-tint-strong: var(--sl-pair-mirage-deep-fg);
+  --sl-text-on-inverse: var(--sl-pair-mirage-deep-bg);
+  --sl-text-on-inverse-surface: var(--sl-pair-mirage-deep-bg);
+  --sl-surface-inverse: var(--sl-pair-mirage-deep-fg);
+  --sl-border-subtle: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 15%, var(--sl-pair-mirage-deep-bg));
+  --sl-border-default: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 30%, var(--sl-pair-mirage-deep-bg));
+  --sl-border-strong: var(--sl-pair-mirage-deep-fg);
+  --sl-border-accent: var(--sl-pair-mirage-deep-accent);
+  --sl-border-control: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 50%, var(--sl-pair-mirage-deep-bg));
+  --sl-border-control-hover: var(--sl-pair-mirage-deep-fg);
+  --sl-fill-subtle: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 12%, var(--sl-pair-mirage-deep-bg));
+  --sl-fill-default: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 22%, var(--sl-pair-mirage-deep-bg));
+  --sl-fill-strong: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 35%, var(--sl-pair-mirage-deep-bg));
+  --sl-fill-stronger: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 45%, var(--sl-pair-mirage-deep-bg));
+  --sl-fill-inverse: var(--sl-pair-mirage-deep-fg);
+  --sl-fill-track: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 12%, var(--sl-pair-mirage-deep-bg));
+  --sl-interactive-default: var(--sl-pair-mirage-deep-accent);
+  --sl-interactive-hover: var(--sl-pair-mirage-deep-hover);
+  --sl-interactive-active: var(--sl-pair-mirage-deep-active);
+  --sl-interactive-disabled: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 35%, var(--sl-pair-mirage-deep-bg));
+  --sl-interactive-tint: var(--sl-pair-mirage-deep-subtle);
+  --sl-interactive-tint-hover: var(--sl-pair-mirage-deep-subtle);
+  --sl-interactive-tint-active: var(--sl-pair-mirage-deep-emphasis);
+  --sl-interactive-tint-strong: var(--sl-pair-mirage-deep-emphasis);
+  --sl-focus-ring: var(--sl-pair-mirage-deep-accent);
+  --sl-content-prose-color: var(--sl-pair-mirage-deep-fg);
+  --sl-content-blockquote-border: var(--sl-pair-mirage-deep-accent);
+  --sl-content-blockquote-cite: var(--sl-pair-mirage-deep-fg);
+  --sl-content-code-background: var(--sl-pair-mirage-deep-muted);
+  --sl-content-code-border: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 30%, var(--sl-pair-mirage-deep-bg));
+  --sl-content-code-text: var(--sl-pair-mirage-deep-fg);
+  --sl-content-field-border: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 30%, var(--sl-pair-mirage-deep-bg));
+  --sl-content-hr-border: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 30%, var(--sl-pair-mirage-deep-bg));
+  --sl-content-pre-border: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 30%, var(--sl-pair-mirage-deep-bg));
+  --sl-content-kbd-background: var(--sl-pair-mirage-deep-fg);
+  --sl-content-kbd-text: var(--sl-pair-mirage-deep-bg);
+  --sl-content-link-color: var(--sl-pair-mirage-deep-accent);
+  --sl-content-link-hover-color: var(--sl-pair-mirage-deep-hover);
+  --sl-content-link-underline-color: color-mix(in oklab, var(--sl-pair-mirage-deep-accent) 50%, var(--sl-pair-mirage-deep-bg));
+  --sl-content-link-underline-hover-color: var(--sl-pair-mirage-deep-accent);
+  --sl-content-list-marker-color: var(--sl-pair-mirage-deep-accent);
+  --sl-content-mark-background: var(--sl-pair-mirage-deep-subtle);
+  --sl-content-selection-background: var(--sl-pair-mirage-deep-subtle);
+  --sl-content-selection-text: var(--sl-pair-mirage-deep-fg);
+  --sl-content-scrollbar-thumb: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 30%, var(--sl-pair-mirage-deep-bg));
+  --sl-content-scrollbar-thumb-hover: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 45%, var(--sl-pair-mirage-deep-bg));
+  --sl-shadow-outline: 0 0 0 3px color-mix(in oklab, var(--sl-focus-ring) 60%, transparent);
+  --sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover);
+  --sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active);
+  --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring);
+  --sl-focus-halo-color: var(--sl-interactive-tint-hover);
+  --sl-bar-background: var(--sl-surface-tray);
+  --sl-bar-border-color: var(--sl-border-default);
+  --sl-bar-separator-color: var(--sl-border-default);
+  --sl-check-border-color: var(--sl-border-control);
+  --sl-check-border-color-hover: var(--sl-border-control-hover);
+  --sl-check-background-checked: var(--sl-interactive-default);
+  --sl-check-border-color-checked: var(--sl-border-accent);
+  --sl-check-mark-color: var(--sl-text-on-primary);
+  --sl-check-mark-color-outline: var(--sl-interactive-default);
+  --sl-check-mark-color-disabled: var(--sl-text-disabled);
+  --sl-surface-base: var(--sl-surface-canvas);
+  --sl-text-on-accent: var(--sl-text-on-primary);
+  --sl-content-page-background: var(--sl-surface-canvas);
+  --sl-content-pre-background: var(--sl-surface-canvas);
+  --sl-content-pre-text: var(--sl-content-prose-color);
+  --sl-disclosure-trigger-background-hover: var(--sl-fill-subtle);
+  --sl-disclosure-trigger-background-active: var(--sl-fill-default);
+  --sl-disclosure-icon-color: var(--sl-text-secondary);
+  --sl-disclosure-content-color: var(--sl-text-secondary);
+  --sl-disclosure-divider-color: var(--sl-border-default);
+  --sl-disclosure-indicator-color: var(--sl-border-accent);
+  --sl-disclosure-selected-color: var(--sl-text-accent);
+  --sl-field-background: var(--sl-surface-base);
+  --sl-field-background-disabled: var(--sl-surface-overlay);
+  --sl-field-border-color: var(--sl-border-control);
+  --sl-field-border-color-hover: var(--sl-border-control-hover);
+  --sl-field-border-color-focus: var(--sl-focus-ring);
+  --sl-field-color: var(--sl-text-primary);
+  --sl-field-color-disabled: var(--sl-text-disabled);
+  --sl-field-placeholder-color: var(--sl-text-tertiary);
+  --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+  --sl-gauge-track-color: var(--sl-fill-track);
+  --sl-gauge-label-color: var(--sl-text-primary);
+  --sl-gauge-value-color: var(--sl-text-secondary);
+  --sl-icon-button-color: var(--sl-text-tertiary);
+  --sl-icon-button-color-hover: var(--sl-text-primary);
+  --sl-icon-button-background-hover: var(--sl-fill-subtle);
+  --sl-item-color: var(--sl-text-primary);
+  --sl-item-color-hover: var(--sl-text-on-tint);
+  --sl-item-color-selected: var(--sl-text-on-tint-strong);
+  --sl-item-color-disabled: var(--sl-text-disabled);
+  --sl-item-background-hover: var(--sl-interactive-tint-hover);
+  --sl-item-background-selected: var(--sl-interactive-tint-active);
+  --sl-item-indicator-color: var(--sl-interactive-default);
+  --sl-modal-background: var(--sl-surface-modal);
+  --sl-modal-border-color: var(--sl-border-default);
+  --sl-modal-title-color: var(--sl-text-primary);
+  --sl-modal-description-color: var(--sl-text-secondary);
+  --sl-notice-description-color: var(--sl-text-secondary);
+  --sl-popup-background: var(--sl-surface-base);
+  --sl-popup-border-color: var(--sl-border-default);
+  --sl-popup-arrow-fill: var(--sl-popup-background);
+  --sl-popup-arrow-stroke: var(--sl-popup-border-color);
+  --sl-popup-separator-color: var(--sl-border-subtle);
+  --sl-table-background: var(--sl-surface-canvas);
+  --sl-table-color: var(--sl-text-primary);
+  --sl-table-subtle-color: var(--sl-text-secondary);
+  --sl-table-header-background: var(--sl-surface-tray);
+  --sl-table-header-color: var(--sl-text-primary);
+  --sl-table-header-background-hover: var(--sl-fill-subtle);
+  --sl-table-border-color: var(--sl-border-default);
+  --sl-table-row-border-color: var(--sl-border-subtle);
+  --sl-table-row-hover: var(--sl-item-background-hover);
+  --sl-table-row-selected: var(--sl-item-background-selected);
+  --sl-table-column-hover: var(--sl-fill-subtle);
+  --sl-table-range-background: var(--sl-interactive-tint);
+  --sl-table-range-border: var(--sl-focus-ring);
+  --sl-drawer-handle-color: var(--sl-border-strong);
+  --sl-check-background: var(--sl-field-background);
+}
+
+@utility pair-stone-soft {
+  --sl-surface-canvas: var(--sl-pair-stone-soft-bg);
+  --sl-surface-raised: var(--sl-pair-stone-soft-bg);
+  --sl-surface-overlay: var(--sl-pair-stone-soft-bg);
+  --sl-surface-modal: var(--sl-pair-stone-soft-bg);
+  --sl-surface-tray: var(--sl-pair-stone-soft-bg);
+  --sl-text-primary: var(--sl-pair-stone-soft-fg);
+  --sl-text-secondary: var(--sl-pair-stone-soft-fg);
+  --sl-text-tertiary: var(--sl-pair-stone-soft-fg);
+  --sl-text-accent: var(--sl-pair-stone-soft-accent);
+  --sl-text-disabled: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 45%, var(--sl-pair-stone-soft-bg));
+  --sl-text-on-primary: var(--sl-pair-stone-soft-bg);
+  --sl-text-on-tint: var(--sl-pair-stone-soft-fg);
+  --sl-text-on-tint-strong: var(--sl-pair-stone-soft-fg);
+  --sl-text-on-inverse: var(--sl-pair-stone-soft-bg);
+  --sl-text-on-inverse-surface: var(--sl-pair-stone-soft-bg);
+  --sl-surface-inverse: var(--sl-pair-stone-soft-fg);
+  --sl-border-subtle: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 15%, var(--sl-pair-stone-soft-bg));
+  --sl-border-default: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 30%, var(--sl-pair-stone-soft-bg));
+  --sl-border-strong: var(--sl-pair-stone-soft-fg);
+  --sl-border-accent: var(--sl-pair-stone-soft-accent);
+  --sl-border-control: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 50%, var(--sl-pair-stone-soft-bg));
+  --sl-border-control-hover: var(--sl-pair-stone-soft-fg);
+  --sl-fill-subtle: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 12%, var(--sl-pair-stone-soft-bg));
+  --sl-fill-default: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 22%, var(--sl-pair-stone-soft-bg));
+  --sl-fill-strong: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 35%, var(--sl-pair-stone-soft-bg));
+  --sl-fill-stronger: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 45%, var(--sl-pair-stone-soft-bg));
+  --sl-fill-inverse: var(--sl-pair-stone-soft-fg);
+  --sl-fill-track: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 12%, var(--sl-pair-stone-soft-bg));
+  --sl-interactive-default: var(--sl-pair-stone-soft-accent);
+  --sl-interactive-hover: var(--sl-pair-stone-soft-hover);
+  --sl-interactive-active: var(--sl-pair-stone-soft-active);
+  --sl-interactive-disabled: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 35%, var(--sl-pair-stone-soft-bg));
+  --sl-interactive-tint: var(--sl-pair-stone-soft-subtle);
+  --sl-interactive-tint-hover: var(--sl-pair-stone-soft-subtle);
+  --sl-interactive-tint-active: var(--sl-pair-stone-soft-emphasis);
+  --sl-interactive-tint-strong: var(--sl-pair-stone-soft-emphasis);
+  --sl-focus-ring: var(--sl-pair-stone-soft-accent);
+  --sl-content-prose-color: var(--sl-pair-stone-soft-fg);
+  --sl-content-blockquote-border: var(--sl-pair-stone-soft-accent);
+  --sl-content-blockquote-cite: var(--sl-pair-stone-soft-fg);
+  --sl-content-code-background: var(--sl-pair-stone-soft-muted);
+  --sl-content-code-border: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 30%, var(--sl-pair-stone-soft-bg));
+  --sl-content-code-text: var(--sl-pair-stone-soft-fg);
+  --sl-content-field-border: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 30%, var(--sl-pair-stone-soft-bg));
+  --sl-content-hr-border: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 30%, var(--sl-pair-stone-soft-bg));
+  --sl-content-pre-border: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 30%, var(--sl-pair-stone-soft-bg));
+  --sl-content-kbd-background: var(--sl-pair-stone-soft-fg);
+  --sl-content-kbd-text: var(--sl-pair-stone-soft-bg);
+  --sl-content-link-color: var(--sl-pair-stone-soft-accent);
+  --sl-content-link-hover-color: var(--sl-pair-stone-soft-hover);
+  --sl-content-link-underline-color: color-mix(in oklab, var(--sl-pair-stone-soft-accent) 50%, var(--sl-pair-stone-soft-bg));
+  --sl-content-link-underline-hover-color: var(--sl-pair-stone-soft-accent);
+  --sl-content-list-marker-color: var(--sl-pair-stone-soft-accent);
+  --sl-content-mark-background: var(--sl-pair-stone-soft-subtle);
+  --sl-content-selection-background: var(--sl-pair-stone-soft-subtle);
+  --sl-content-selection-text: var(--sl-pair-stone-soft-fg);
+  --sl-content-scrollbar-thumb: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 30%, var(--sl-pair-stone-soft-bg));
+  --sl-content-scrollbar-thumb-hover: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 45%, var(--sl-pair-stone-soft-bg));
+  --sl-shadow-outline: 0 0 0 3px color-mix(in oklab, var(--sl-focus-ring) 60%, transparent);
+  --sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover);
+  --sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active);
+  --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring);
+  --sl-focus-halo-color: var(--sl-interactive-tint-hover);
+  --sl-bar-background: var(--sl-surface-tray);
+  --sl-bar-border-color: var(--sl-border-default);
+  --sl-bar-separator-color: var(--sl-border-default);
+  --sl-check-border-color: var(--sl-border-control);
+  --sl-check-border-color-hover: var(--sl-border-control-hover);
+  --sl-check-background-checked: var(--sl-interactive-default);
+  --sl-check-border-color-checked: var(--sl-border-accent);
+  --sl-check-mark-color: var(--sl-text-on-primary);
+  --sl-check-mark-color-outline: var(--sl-interactive-default);
+  --sl-check-mark-color-disabled: var(--sl-text-disabled);
+  --sl-surface-base: var(--sl-surface-canvas);
+  --sl-text-on-accent: var(--sl-text-on-primary);
+  --sl-content-page-background: var(--sl-surface-canvas);
+  --sl-content-pre-background: var(--sl-surface-canvas);
+  --sl-content-pre-text: var(--sl-content-prose-color);
+  --sl-disclosure-trigger-background-hover: var(--sl-fill-subtle);
+  --sl-disclosure-trigger-background-active: var(--sl-fill-default);
+  --sl-disclosure-icon-color: var(--sl-text-secondary);
+  --sl-disclosure-content-color: var(--sl-text-secondary);
+  --sl-disclosure-divider-color: var(--sl-border-default);
+  --sl-disclosure-indicator-color: var(--sl-border-accent);
+  --sl-disclosure-selected-color: var(--sl-text-accent);
+  --sl-field-background: var(--sl-surface-base);
+  --sl-field-background-disabled: var(--sl-surface-overlay);
+  --sl-field-border-color: var(--sl-border-control);
+  --sl-field-border-color-hover: var(--sl-border-control-hover);
+  --sl-field-border-color-focus: var(--sl-focus-ring);
+  --sl-field-color: var(--sl-text-primary);
+  --sl-field-color-disabled: var(--sl-text-disabled);
+  --sl-field-placeholder-color: var(--sl-text-tertiary);
+  --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+  --sl-gauge-track-color: var(--sl-fill-track);
+  --sl-gauge-label-color: var(--sl-text-primary);
+  --sl-gauge-value-color: var(--sl-text-secondary);
+  --sl-icon-button-color: var(--sl-text-tertiary);
+  --sl-icon-button-color-hover: var(--sl-text-primary);
+  --sl-icon-button-background-hover: var(--sl-fill-subtle);
+  --sl-item-color: var(--sl-text-primary);
+  --sl-item-color-hover: var(--sl-text-on-tint);
+  --sl-item-color-selected: var(--sl-text-on-tint-strong);
+  --sl-item-color-disabled: var(--sl-text-disabled);
+  --sl-item-background-hover: var(--sl-interactive-tint-hover);
+  --sl-item-background-selected: var(--sl-interactive-tint-active);
+  --sl-item-indicator-color: var(--sl-interactive-default);
+  --sl-modal-background: var(--sl-surface-modal);
+  --sl-modal-border-color: var(--sl-border-default);
+  --sl-modal-title-color: var(--sl-text-primary);
+  --sl-modal-description-color: var(--sl-text-secondary);
+  --sl-notice-description-color: var(--sl-text-secondary);
+  --sl-popup-background: var(--sl-surface-base);
+  --sl-popup-border-color: var(--sl-border-default);
+  --sl-popup-arrow-fill: var(--sl-popup-background);
+  --sl-popup-arrow-stroke: var(--sl-popup-border-color);
+  --sl-popup-separator-color: var(--sl-border-subtle);
+  --sl-table-background: var(--sl-surface-canvas);
+  --sl-table-color: var(--sl-text-primary);
+  --sl-table-subtle-color: var(--sl-text-secondary);
+  --sl-table-header-background: var(--sl-surface-tray);
+  --sl-table-header-color: var(--sl-text-primary);
+  --sl-table-header-background-hover: var(--sl-fill-subtle);
+  --sl-table-border-color: var(--sl-border-default);
+  --sl-table-row-border-color: var(--sl-border-subtle);
+  --sl-table-row-hover: var(--sl-item-background-hover);
+  --sl-table-row-selected: var(--sl-item-background-selected);
+  --sl-table-column-hover: var(--sl-fill-subtle);
+  --sl-table-range-background: var(--sl-interactive-tint);
+  --sl-table-range-border: var(--sl-focus-ring);
+  --sl-drawer-handle-color: var(--sl-border-strong);
+  --sl-check-background: var(--sl-field-background);
+}
+
+@utility scope-neutral {
+  --sl-scope-solid: var(--sl-scope-neutral-solid);
+  --sl-scope-solid-hover: var(--sl-scope-neutral-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-neutral-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-neutral-on-solid);
+  --sl-scope-soft: var(--sl-scope-neutral-soft);
+  --sl-scope-soft-hover: var(--sl-scope-neutral-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-neutral-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-neutral-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-neutral-on-soft);
+  --sl-scope-border: var(--sl-scope-neutral-border);
+  --sl-scope-border-hover: var(--sl-scope-neutral-border-hover);
+  --sl-scope-border-subtle: var(--sl-scope-neutral-border-subtle);
+  --sl-scope-border-strong: var(--sl-scope-neutral-border-strong);
+  --sl-scope-divider: var(--sl-scope-neutral-divider);
+  --sl-scope-fg: var(--sl-scope-neutral-fg);
+  --sl-scope-fg-secondary: var(--sl-scope-neutral-fg-secondary);
+  --sl-scope-fg-tertiary: var(--sl-scope-neutral-fg-tertiary);
+  --sl-scope-focus: var(--sl-scope-neutral-focus);
+  --sl-scope-canvas: var(--sl-scope-neutral-canvas);
+  --sl-scope-raised: var(--sl-scope-neutral-raised);
+  --sl-scope-overlay: var(--sl-scope-neutral-overlay);
+  --sl-scope-modal: var(--sl-scope-neutral-modal);
+  --sl-scope-tray: var(--sl-scope-neutral-tray);
+  --sl-scope-inverse: var(--sl-scope-neutral-inverse);
+  --sl-scope-on-inverse: var(--sl-scope-neutral-on-inverse);
+  --sl-scope-track: var(--sl-scope-neutral-track);
+}
+
+@utility scope-primary {
+  --sl-scope-solid: var(--sl-scope-primary-solid);
+  --sl-scope-solid-hover: var(--sl-scope-primary-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-primary-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-primary-on-solid);
+  --sl-scope-soft: var(--sl-scope-primary-soft);
+  --sl-scope-soft-hover: var(--sl-scope-primary-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-primary-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-primary-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-primary-on-soft);
+  --sl-scope-ink: var(--sl-scope-primary-ink);
+  --sl-scope-border: var(--sl-scope-primary-border);
+  --sl-scope-border-subtle: var(--sl-scope-primary-border-subtle);
+  --sl-scope-fg: var(--sl-scope-primary-fg);
+  --sl-scope-signal: var(--sl-scope-primary-signal);
+  --sl-scope-focus: var(--sl-scope-primary-focus);
+}
+
+@utility scope-secondary {
+  --sl-scope-solid: var(--sl-scope-secondary-solid);
+  --sl-scope-solid-hover: var(--sl-scope-secondary-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-secondary-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-secondary-on-solid);
+  --sl-scope-soft: var(--sl-scope-secondary-soft);
+  --sl-scope-soft-hover: var(--sl-scope-secondary-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-secondary-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-secondary-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-secondary-on-soft);
+  --sl-scope-ink: var(--sl-scope-secondary-ink);
+  --sl-scope-border: var(--sl-scope-secondary-border);
+  --sl-scope-border-subtle: var(--sl-scope-secondary-border-subtle);
+  --sl-scope-fg: var(--sl-scope-secondary-fg);
+  --sl-scope-signal: var(--sl-scope-secondary-signal);
+  --sl-scope-focus: var(--sl-scope-secondary-focus);
+}
+
+@utility scope-tertiary {
+  --sl-scope-solid: var(--sl-scope-tertiary-solid);
+  --sl-scope-solid-hover: var(--sl-scope-tertiary-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-tertiary-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-tertiary-on-solid);
+  --sl-scope-soft: var(--sl-scope-tertiary-soft);
+  --sl-scope-soft-hover: var(--sl-scope-tertiary-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-tertiary-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-tertiary-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-tertiary-on-soft);
+  --sl-scope-ink: var(--sl-scope-tertiary-ink);
+  --sl-scope-border: var(--sl-scope-tertiary-border);
+  --sl-scope-border-subtle: var(--sl-scope-tertiary-border-subtle);
+  --sl-scope-fg: var(--sl-scope-tertiary-fg);
+  --sl-scope-signal: var(--sl-scope-tertiary-signal);
+  --sl-scope-focus: var(--sl-scope-tertiary-focus);
+}
+
+@utility scope-quaternary {
+  --sl-scope-solid: var(--sl-scope-quaternary-solid);
+  --sl-scope-solid-hover: var(--sl-scope-quaternary-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-quaternary-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-quaternary-on-solid);
+  --sl-scope-soft: var(--sl-scope-quaternary-soft);
+  --sl-scope-soft-hover: var(--sl-scope-quaternary-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-quaternary-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-quaternary-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-quaternary-on-soft);
+  --sl-scope-ink: var(--sl-scope-quaternary-ink);
+  --sl-scope-border: var(--sl-scope-quaternary-border);
+  --sl-scope-border-subtle: var(--sl-scope-quaternary-border-subtle);
+  --sl-scope-fg: var(--sl-scope-quaternary-fg);
+  --sl-scope-signal: var(--sl-scope-quaternary-signal);
+  --sl-scope-focus: var(--sl-scope-quaternary-focus);
+}
+
+@utility scope-success {
+  --sl-scope-solid: var(--sl-scope-success-solid);
+  --sl-scope-solid-hover: var(--sl-scope-success-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-success-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-success-on-solid);
+  --sl-scope-soft: var(--sl-scope-success-soft);
+  --sl-scope-soft-hover: var(--sl-scope-success-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-success-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-success-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-success-on-soft);
+  --sl-scope-ink: var(--sl-scope-success-ink);
+  --sl-scope-border: var(--sl-scope-success-border);
+  --sl-scope-border-subtle: var(--sl-scope-success-border-subtle);
+  --sl-scope-fg: var(--sl-scope-success-fg);
+  --sl-scope-signal: var(--sl-scope-success-signal);
+  --sl-scope-focus: var(--sl-scope-success-focus);
+}
+
+@utility scope-warning {
+  --sl-scope-solid: var(--sl-scope-warning-solid);
+  --sl-scope-solid-hover: var(--sl-scope-warning-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-warning-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-warning-on-solid);
+  --sl-scope-soft: var(--sl-scope-warning-soft);
+  --sl-scope-soft-hover: var(--sl-scope-warning-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-warning-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-warning-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-warning-on-soft);
+  --sl-scope-ink: var(--sl-scope-warning-ink);
+  --sl-scope-border: var(--sl-scope-warning-border);
+  --sl-scope-border-subtle: var(--sl-scope-warning-border-subtle);
+  --sl-scope-fg: var(--sl-scope-warning-fg);
+  --sl-scope-signal: var(--sl-scope-warning-signal);
+  --sl-scope-focus: var(--sl-scope-warning-focus);
+}
+
+@utility scope-error {
+  --sl-scope-solid: var(--sl-scope-error-solid);
+  --sl-scope-solid-hover: var(--sl-scope-error-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-error-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-error-on-solid);
+  --sl-scope-soft: var(--sl-scope-error-soft);
+  --sl-scope-soft-hover: var(--sl-scope-error-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-error-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-error-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-error-on-soft);
+  --sl-scope-ink: var(--sl-scope-error-ink);
+  --sl-scope-border: var(--sl-scope-error-border);
+  --sl-scope-border-subtle: var(--sl-scope-error-border-subtle);
+  --sl-scope-fg: var(--sl-scope-error-fg);
+  --sl-scope-signal: var(--sl-scope-error-signal);
+  --sl-scope-focus: var(--sl-scope-error-focus);
+}
+
+@utility scope-info {
+  --sl-scope-solid: var(--sl-scope-info-solid);
+  --sl-scope-solid-hover: var(--sl-scope-info-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-info-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-info-on-solid);
+  --sl-scope-soft: var(--sl-scope-info-soft);
+  --sl-scope-soft-hover: var(--sl-scope-info-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-info-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-info-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-info-on-soft);
+  --sl-scope-ink: var(--sl-scope-info-ink);
+  --sl-scope-border: var(--sl-scope-info-border);
+  --sl-scope-border-subtle: var(--sl-scope-info-border-subtle);
+  --sl-scope-fg: var(--sl-scope-info-fg);
+  --sl-scope-signal: var(--sl-scope-info-signal);
+  --sl-scope-focus: var(--sl-scope-info-focus);
+}
+
+@utility scope-accent {
+  --sl-scope-solid: var(--sl-scope-accent-solid);
+  --sl-scope-solid-hover: var(--sl-scope-accent-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-accent-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-accent-on-solid);
+  --sl-scope-soft: var(--sl-scope-accent-soft);
+  --sl-scope-soft-hover: var(--sl-scope-accent-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-accent-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-accent-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-accent-on-soft);
+  --sl-scope-ink: var(--sl-scope-accent-ink);
+  --sl-scope-border: var(--sl-scope-accent-border);
+  --sl-scope-border-subtle: var(--sl-scope-accent-border-subtle);
+  --sl-scope-fg: var(--sl-scope-accent-fg);
+  --sl-scope-signal: var(--sl-scope-accent-signal);
+  --sl-scope-focus: var(--sl-scope-accent-focus);
+}
+
+@utility scope-chrome {
+  --sl-scope-solid: var(--sl-scope-chrome-solid);
+  --sl-scope-solid-hover: var(--sl-scope-chrome-solid-hover);
+  --sl-scope-solid-active: var(--sl-scope-chrome-solid-active);
+  --sl-scope-on-solid: var(--sl-scope-chrome-on-solid);
+  --sl-scope-soft: var(--sl-scope-chrome-soft);
+  --sl-scope-soft-hover: var(--sl-scope-chrome-soft-hover);
+  --sl-scope-soft-active: var(--sl-scope-chrome-soft-active);
+  --sl-scope-soft-strong: var(--sl-scope-chrome-soft-strong);
+  --sl-scope-on-soft: var(--sl-scope-chrome-on-soft);
+  --sl-scope-border: var(--sl-scope-chrome-border);
+  --sl-scope-border-hover: var(--sl-scope-chrome-border-hover);
+  --sl-scope-border-subtle: var(--sl-scope-chrome-border-subtle);
+  --sl-scope-border-strong: var(--sl-scope-chrome-border-strong);
+  --sl-scope-divider: var(--sl-scope-chrome-divider);
+  --sl-scope-fg: var(--sl-scope-chrome-fg);
+  --sl-scope-fg-secondary: var(--sl-scope-chrome-fg-secondary);
+  --sl-scope-fg-tertiary: var(--sl-scope-chrome-fg-tertiary);
+  --sl-scope-focus: var(--sl-scope-chrome-focus);
+  --sl-scope-canvas: var(--sl-scope-chrome-canvas);
+  --sl-scope-raised: var(--sl-scope-chrome-raised);
+  --sl-scope-overlay: var(--sl-scope-chrome-overlay);
+  --sl-scope-modal: var(--sl-scope-chrome-modal);
+  --sl-scope-tray: var(--sl-scope-chrome-tray);
+  --sl-scope-inverse: var(--sl-scope-chrome-inverse);
+  --sl-scope-on-inverse: var(--sl-scope-chrome-on-inverse);
+  --sl-scope-track: var(--sl-scope-chrome-track);
 }