/* alt-shift studio kit: neutral default tokens.
   supportive: muted, secondary text or content sitting on a surface.
   panel: a raised fill, such as a card or a popover, above the page surface. */

/* @tier generic */

:root {
  /* color: config */
  --color-config-screen: var(--white);
  --color-config-backdrop: var(--black-alpha-backdrop);
  --color-config-primary: var(--blue-600);

  /* color: ui */
  --color-ui-surface: var(--white);
  --color-ui-container: var(--gray-100);
  --color-ui-elevated: var(--white);
  --color-ui-content: var(--gray-950);
  --color-ui-supportive: var(--gray-500);
  --color-ui-line: var(--gray-200);
  --color-ui-line-alpha: var(--black-alpha-line);

  /* color: interactive: primary */
  --color-interactive-primary-surface: var(--color-config-primary);
  --color-interactive-primary-content: var(--white);
  --color-interactive-primary-line: var(--color-config-primary);
  --color-interactive-primary-hover: var(--blue-700);
  --color-interactive-primary-pressed: var(--blue-800);
  --color-interactive-primary-separator: var(--blue-700);
  --color-interactive-primary-active: var(--blue-50);
  --color-interactive-primary-focus: var(--color-config-primary);
  --color-interactive-primary-disabled: var(--blue-100);
  --color-interactive-primary-ondisabled: var(--blue-400);

  /* color: interactive: secondary (no distinct hue yet) */
  --color-interactive-secondary-surface: var(--gray-100);
  --color-interactive-secondary-content: var(--gray-950);
  --color-interactive-secondary-line: var(--gray-200);
  --color-interactive-secondary-hover: var(--gray-200);
  --color-interactive-secondary-pressed: var(--gray-200);
  --color-interactive-secondary-active: var(--color-interactive-secondary-surface);
  --color-interactive-secondary-disabled: var(--gray-100);
  --color-interactive-secondary-ondisabled: var(--gray-400);

  /* color: interactive: neutral */
  --color-interactive-neutral-surface: var(--color-ui-surface);
  --color-interactive-neutral-content: var(--color-ui-content);
  --color-interactive-neutral-line: var(--color-ui-line);
  --color-interactive-neutral-line-hover: var(--gray-400);
  --color-interactive-neutral-hover: var(--gray-100);
  --color-interactive-neutral-pressed: var(--gray-200);
  --color-interactive-neutral-active: var(--color-interactive-neutral-surface);
  --color-interactive-neutral-focus: var(--gray-400);
  --color-interactive-neutral-placeholder: var(--gray-400);
  --color-interactive-neutral-disabled: var(--gray-100);
  --color-interactive-neutral-ondisabled: var(--gray-400);

  /* color: sentiment: positive */
  --color-sentiment-positive-surface: var(--green-600);
  --color-sentiment-positive-content: var(--white);
  --color-sentiment-positive-line: var(--green-600);

  /* color: sentiment: positive: alt */
  --color-sentiment-positive-alt-surface: var(--green-50);
  --color-sentiment-positive-alt-content: var(--green-600);
  --color-sentiment-positive-alt-line: var(--green-300);

  /* color: sentiment: warning */
  --color-sentiment-warning-surface: var(--amber-600);
  --color-sentiment-warning-content: var(--white);
  --color-sentiment-warning-line: var(--amber-600);

  /* color: sentiment: warning: alt */
  --color-sentiment-warning-alt-surface: var(--amber-50);
  --color-sentiment-warning-alt-content: var(--amber-600);
  --color-sentiment-warning-alt-line: var(--amber-300);

  /* color: sentiment: negative */
  --color-sentiment-negative-surface: var(--red-600);
  --color-sentiment-negative-content: var(--white);
  --color-sentiment-negative-line: var(--red-600);
  --color-sentiment-negative-hover: var(--red-700);
  --color-sentiment-negative-pressed: var(--red-800);

  /* color: sentiment: negative: alt */
  --color-sentiment-negative-alt-surface: var(--red-50);
  --color-sentiment-negative-alt-content: var(--red-600);
  --color-sentiment-negative-alt-line: var(--red-300);

  /* color: sentiment: info */
  --color-sentiment-info-surface: var(--sky-600);
  --color-sentiment-info-content: var(--white);
  --color-sentiment-info-line: var(--sky-600);

  /* color: sentiment: info: alt */
  --color-sentiment-info-alt-surface: var(--sky-50);
  --color-sentiment-info-alt-content: var(--sky-600);
  --color-sentiment-info-alt-line: var(--sky-300);

  /* color: decorative (category colors, distinct from status colors) */
  --color-decorative-green-surface: var(--green-600);
  --color-decorative-green-surface-alt: var(--green-50);
  --color-decorative-green-content: var(--green-600);
  --color-decorative-green-content-bold: var(--white);
  --color-decorative-green-line: var(--green-300);
  --color-decorative-blue-surface: var(--blue-600);
  --color-decorative-blue-surface-alt: var(--blue-50);
  --color-decorative-blue-content: var(--blue-600);
  --color-decorative-blue-content-bold: var(--white);
  --color-decorative-blue-line: var(--blue-300);
  --color-decorative-amber-surface: var(--amber-600);
  --color-decorative-amber-surface-alt: var(--amber-50);
  --color-decorative-amber-content: var(--amber-600);
  --color-decorative-amber-content-bold: var(--white);
  --color-decorative-amber-line: var(--amber-300);
  --color-decorative-red-surface: var(--red-600);
  --color-decorative-red-surface-alt: var(--red-50);
  --color-decorative-red-content: var(--red-600);
  --color-decorative-red-content-bold: var(--white);
  --color-decorative-red-line: var(--red-300);
  --color-decorative-gray-content: var(--gray-950);
  --color-decorative-gray-line: var(--gray-200);

  /* type: config */
  --type-config-family-sans: var(--font-inter);
  --type-config-family-mono: var(--font-mono);
  --type-config-base: var(--text-14);

  /* type: display */
  --type-display-size: var(--text-30);
  --type-display-line: var(--leading-36);
  --type-display-weight: var(--weight-700);
  --type-display-family: var(--type-config-family-sans);

  /* type: heading */
  --type-heading-size: var(--text-24);
  --type-heading-line: var(--leading-32);
  --type-heading-weight: var(--weight-700);
  --type-heading-family: var(--type-config-family-sans);

  /* type: title */
  --type-title-size: var(--text-18);
  --type-title-line: var(--leading-28);
  --type-title-weight: var(--weight-600);
  --type-title-family: var(--type-config-family-sans);

  /* type: body */
  --type-body-size: var(--type-config-base);
  --type-body-line: var(--leading-20);
  --type-body-weight: var(--weight-400);
  --type-body-family: var(--type-config-family-sans);

  /* type: label */
  --type-label-size: var(--type-config-base);
  --type-label-line: var(--leading-20);
  --type-label-weight: var(--weight-500);
  --type-label-family: var(--type-config-family-sans);

  /* type: caption */
  --type-caption-size: var(--text-12);
  --type-caption-line: var(--leading-16);
  --type-caption-weight: var(--weight-400);
  --type-caption-family: var(--type-config-family-sans);

  /* type: title to description */
  --space-text: var(--space-2);
  --space-title: var(--space-4);
  --space-actions: var(--space-12);
  --space-actions-tight: var(--space-8);

  /* space: default gap between parts and content inside a component */
  --space-component: var(--space-16);
  --space-component-tight: var(--space-8);

  /* space: container padding (density) */
  --space-panel: var(--space-20);
  --space-panel-tight: var(--space-12);

  /* space */
  --space-0: var(--size-0);
  --space-2: var(--size-2);
  --space-4: var(--size-4);
  --space-6: var(--size-6);
  --space-8: var(--size-8);
  --space-12: var(--size-12);
  --space-16: var(--size-16);
  --space-20: var(--size-20);
  --space-24: var(--size-24);
  --space-32: var(--size-32);
  --space-40: var(--size-40);
  --space-48: var(--size-48);
  --space-64: var(--size-64);
  --space-96: var(--size-96);

  /* size: config */
  --size-config-control-xs: var(--size-24);
  --size-config-control-sm: var(--size-32);
  --size-config-control-md: var(--size-40);
  --size-config-control-lg: var(--size-48);
  --size-config-control-xl: var(--size-56);
  --size-config-icon-sm: var(--size-16);
  --size-config-icon-md: var(--size-18);
  --size-config-icon-lg: var(--size-18);

  /* size: roles */
  --size-control-xs: var(--size-config-control-xs);
  --size-control-sm: var(--size-config-control-sm);
  --size-control-md: var(--size-config-control-md);
  --size-control-lg: var(--size-config-control-lg);
  --size-control-xl: var(--size-config-control-xl);
  --size-icon-sm: var(--size-config-icon-sm);
  --size-icon-md: var(--size-config-icon-md);
  --size-icon-lg: var(--size-config-icon-lg);

  /* size: config (compact list/menu rows, decoupled from the control scale) */
  --size-config-row-compact: var(--size-36);

  /* size: roles (compact list/menu rows) */
  --size-row-compact: var(--size-config-row-compact);

  /* size: config (avatar icon glyph, avatar-specific scale) */
  --size-config-icon-avatar-xs: var(--size-12);
  --size-config-icon-avatar-sm: var(--size-16);
  --size-config-icon-avatar-md: var(--size-18);
  --size-config-icon-avatar-lg: var(--size-20);
  --size-config-icon-avatar-xl: var(--size-24);

  /* size: roles (avatar icon glyph) */
  --size-icon-avatar-xs: var(--size-config-icon-avatar-xs);
  --size-icon-avatar-sm: var(--size-config-icon-avatar-sm);
  --size-icon-avatar-md: var(--size-config-icon-avatar-md);
  --size-icon-avatar-lg: var(--size-config-icon-avatar-lg);
  --size-icon-avatar-xl: var(--size-config-icon-avatar-xl);

  /* panel widths: popovers, dialogs, sheets */
  --size-panel-sm: var(--size-320);
  --size-panel-md: var(--size-448);
  --size-panel-lg: var(--size-640);

  /* radius: config */
  --radius-config-base: var(--radius-8);

  /* radius: roles */
  --radius-control: var(--radius-6);
  --radius-panel: var(--radius-10);
  --radius-pill: var(--radius-full);

  /* border */
  --border-width: var(--border-1);

  /* shadow */
  --shadow-panel: var(--shadow-1);
  --shadow-overlay: var(--shadow-4);
}

:root[data-theme="dark"] {
  /* color: config */
  --color-config-screen: var(--gray-950);
  --color-config-primary: var(--blue-500);

  /* color: ui */
  --color-ui-surface: var(--gray-900);
  --color-ui-container: var(--gray-850);
  --color-ui-elevated: var(--gray-800);
  --color-ui-content: var(--gray-50);
  --color-ui-supportive: var(--gray-400);
  --color-ui-line: var(--gray-800);
  --color-ui-line-alpha: var(--white-alpha-line);

  /* color: interactive: primary */
  --color-interactive-primary-surface: var(--color-config-primary);
  --color-interactive-primary-content: var(--white);
  --color-interactive-primary-line: var(--color-config-primary);
  --color-interactive-primary-hover: var(--blue-400);
  --color-interactive-primary-pressed: var(--blue-300);
  --color-interactive-primary-separator: var(--blue-400);
  --color-interactive-primary-active: var(--blue-950);
  --color-interactive-primary-focus: var(--color-config-primary);
  --color-interactive-primary-disabled: var(--blue-900);
  --color-interactive-primary-ondisabled: var(--blue-500);

  /* color: interactive: secondary (no distinct hue yet - fully independent literal gray values,
     never aliased to neutral, so either can change without dragging the other along) */
  --color-interactive-secondary-surface: var(--gray-800);
  --color-interactive-secondary-content: var(--gray-50);
  --color-interactive-secondary-line: var(--gray-800);
  --color-interactive-secondary-hover: var(--gray-700);
  --color-interactive-secondary-pressed: var(--gray-700);
  --color-interactive-secondary-active: var(--color-interactive-secondary-surface);
  --color-interactive-secondary-disabled: var(--gray-800);
  --color-interactive-secondary-ondisabled: var(--gray-500);

  /* color: interactive: neutral */
  --color-interactive-neutral-surface: var(--color-ui-container);
  --color-interactive-neutral-content: var(--color-ui-content);
  --color-interactive-neutral-line: var(--color-ui-line);
  --color-interactive-neutral-line-hover: var(--gray-600);
  --color-interactive-neutral-hover: var(--gray-800);
  --color-interactive-neutral-pressed: var(--gray-700);
  --color-interactive-neutral-active: var(--color-interactive-neutral-surface);
  --color-interactive-neutral-focus: var(--gray-600);
  --color-interactive-neutral-placeholder: var(--gray-500);
  --color-interactive-neutral-disabled: var(--gray-800);
  --color-interactive-neutral-ondisabled: var(--gray-500);

  /* color: sentiment: positive */
  --color-sentiment-positive-surface: var(--green-500);
  --color-sentiment-positive-content: var(--white);
  --color-sentiment-positive-line: var(--green-500);

  /* color: sentiment: positive: alt */
  --color-sentiment-positive-alt-surface: var(--green-950);
  --color-sentiment-positive-alt-content: var(--green-500);
  --color-sentiment-positive-alt-line: var(--green-800);

  /* color: sentiment: warning */
  --color-sentiment-warning-surface: var(--amber-500);
  --color-sentiment-warning-content: var(--white);
  --color-sentiment-warning-line: var(--amber-500);

  /* color: sentiment: warning: alt */
  --color-sentiment-warning-alt-surface: var(--amber-950);
  --color-sentiment-warning-alt-content: var(--amber-500);
  --color-sentiment-warning-alt-line: var(--amber-800);

  /* color: sentiment: negative */
  --color-sentiment-negative-surface: var(--red-500);
  --color-sentiment-negative-content: var(--white);
  --color-sentiment-negative-line: var(--red-500);
  --color-sentiment-negative-hover: var(--red-400);
  --color-sentiment-negative-pressed: var(--red-300);

  /* color: sentiment: negative: alt */
  --color-sentiment-negative-alt-surface: var(--red-950);
  --color-sentiment-negative-alt-content: var(--red-500);
  --color-sentiment-negative-alt-line: var(--red-800);

  /* color: sentiment: info */
  --color-sentiment-info-surface: var(--sky-500);
  --color-sentiment-info-content: var(--white);
  --color-sentiment-info-line: var(--sky-500);

  /* color: sentiment: info: alt */
  --color-sentiment-info-alt-surface: var(--sky-950);
  --color-sentiment-info-alt-content: var(--sky-500);
  --color-sentiment-info-alt-line: var(--sky-800);

  /* color: decorative (category colors, distinct from status colors) */
  --color-decorative-green-surface: var(--green-500);
  --color-decorative-green-surface-alt: var(--green-950);
  --color-decorative-green-content: var(--green-400);
  --color-decorative-green-content-bold: var(--white);
  --color-decorative-green-line: var(--green-800);
  --color-decorative-blue-surface: var(--blue-500);
  --color-decorative-blue-surface-alt: var(--blue-950);
  --color-decorative-blue-content: var(--blue-400);
  --color-decorative-blue-content-bold: var(--white);
  --color-decorative-blue-line: var(--blue-800);
  --color-decorative-amber-surface: var(--amber-500);
  --color-decorative-amber-surface-alt: var(--amber-950);
  --color-decorative-amber-content: var(--amber-400);
  --color-decorative-amber-content-bold: var(--white);
  --color-decorative-amber-line: var(--amber-800);
  --color-decorative-red-surface: var(--red-500);
  --color-decorative-red-surface-alt: var(--red-950);
  --color-decorative-red-content: var(--red-400);
  --color-decorative-red-content-bold: var(--white);
  --color-decorative-red-line: var(--red-800);
  --color-decorative-gray-content: var(--gray-50);
  --color-decorative-gray-line: var(--gray-800);
}

/* @tier component */

/* @component button */
:root {
  --button-radius: var(--radius-control);
  --button-font-weight: var(--type-label-weight);
  --button-line-focus: var(--color-interactive-primary-focus);
  --button-border-width: var(--border-width);

  --button-label-padding-x: var(--space-4);

  --button-sm-height: var(--size-control-sm);
  --button-sm-padding-x: var(--space-8);
  --button-sm-gap: var(--space-4);
  --button-sm-font-size: var(--type-label-size);
  --button-sm-icon: var(--size-icon-sm);

  --button-md-height: var(--size-control-md);
  --button-md-padding-x: var(--space-12);
  --button-md-gap: var(--space-4);
  --button-md-font-size: var(--type-label-size);
  --button-md-icon: var(--size-icon-md);

  --button-lg-height: var(--size-control-lg);
  --button-lg-padding-x: var(--space-16);
  --button-lg-gap: var(--space-4);
  --button-lg-font-size: var(--type-label-size);
  --button-lg-icon: var(--size-icon-lg);

  --button-icon-xs-height: var(--size-control-xs);
  --button-icon-xs-width: var(--size-control-xs);
  --button-icon-xs-padding-x: var(--space-0);
  --button-icon-xs-gap: var(--space-0);
  --button-icon-xs-font-size: var(--type-label-size);
  --button-icon-xs-icon: var(--size-icon-sm);

  --button-icon-sm-height: var(--size-control-sm);
  --button-icon-sm-width: var(--size-control-sm);
  --button-icon-sm-padding-x: var(--space-0);
  --button-icon-sm-gap: var(--space-0);
  --button-icon-sm-font-size: var(--type-label-size);
  --button-icon-sm-icon: var(--size-icon-sm);

  --button-icon-height: var(--size-control-md);
  --button-icon-width: var(--size-control-md);
  --button-icon-padding-x: var(--space-0);
  --button-icon-gap: var(--space-0);
  --button-icon-font-size: var(--type-label-size);
  --button-icon-icon: var(--size-icon-md);

  --button-icon-lg-height: var(--size-control-lg);
  --button-icon-lg-width: var(--size-control-lg);
  --button-icon-lg-padding-x: var(--space-0);
  --button-icon-lg-gap: var(--space-0);
  --button-icon-lg-font-size: var(--type-label-size);
  --button-icon-lg-icon: var(--size-icon-lg);

  --button-primary-surface: var(--color-interactive-primary-surface);
  --button-primary-surface-hover: var(--color-interactive-primary-hover);
  --button-primary-surface-active: var(--color-interactive-primary-pressed);
  --button-primary-content: var(--color-interactive-primary-content);
  --button-primary-line: var(--color-interactive-primary-line);
  --button-primary-surface-disabled: var(--color-interactive-neutral-disabled);
  --button-primary-content-disabled: var(--color-interactive-neutral-ondisabled);

  --button-secondary-surface: var(--color-interactive-secondary-surface);
  --button-secondary-surface-hover: var(--color-interactive-secondary-hover);
  --button-secondary-surface-active: var(--color-interactive-secondary-pressed);
  --button-secondary-content: var(--color-interactive-secondary-content);
  --button-secondary-line: var(--color-interactive-secondary-line);
  --button-secondary-surface-disabled: var(--color-interactive-neutral-disabled);
  --button-secondary-content-disabled: var(--color-interactive-neutral-ondisabled);

  --button-outline-surface: transparent;
  --button-outline-surface-hover: var(--color-interactive-neutral-hover);
  --button-outline-surface-active: var(--color-interactive-neutral-pressed);
  --button-outline-content: var(--color-interactive-neutral-content);
  --button-outline-line: var(--color-interactive-neutral-line);
  --button-outline-content-disabled: var(--color-interactive-neutral-ondisabled);

  --button-ghost-surface: transparent;
  --button-ghost-surface-hover: var(--color-interactive-neutral-hover);
  --button-ghost-surface-active: var(--color-interactive-neutral-pressed);
  --button-ghost-content: var(--color-interactive-neutral-content);
  --button-ghost-line: transparent;
  --button-ghost-content-disabled: var(--color-interactive-neutral-ondisabled);

  --button-destructive-primary-surface: var(--color-sentiment-negative-surface);
  --button-destructive-primary-surface-hover: var(--color-sentiment-negative-hover);
  --button-destructive-primary-surface-active: var(--color-sentiment-negative-pressed);
  --button-destructive-primary-content: var(--color-sentiment-negative-content);
  --button-destructive-primary-line: var(--color-sentiment-negative-line);
  --button-destructive-primary-surface-disabled: var(--color-interactive-neutral-disabled);
  --button-destructive-primary-content-disabled: var(--color-interactive-neutral-ondisabled);

  --button-destructive-outline-surface: transparent;
  --button-destructive-outline-surface-hover: var(--color-interactive-neutral-hover);
  --button-destructive-outline-surface-active: var(--color-interactive-neutral-pressed);
  --button-destructive-outline-content: var(--color-sentiment-negative-alt-content);
  --button-destructive-outline-line: var(--color-sentiment-negative-alt-line);
  --button-destructive-outline-content-disabled: var(--color-interactive-neutral-ondisabled);
  --button-destructive-outline-line-disabled: var(--color-interactive-neutral-line);

  --button-link-surface: transparent;
  --button-link-surface-hover: transparent;
  --button-link-surface-active: transparent;
  --button-link-content: var(--color-interactive-primary-surface);
  --button-link-line: transparent;
  --button-link-content-disabled: var(--color-interactive-primary-ondisabled);
}

/* @component input */
:root {
  --input-surface: var(--color-interactive-neutral-surface);
  --input-content: var(--color-interactive-neutral-content);
  --input-supportive: var(--color-ui-supportive);
  --input-placeholder-content: var(--color-interactive-neutral-placeholder);
  --input-line: var(--color-interactive-neutral-line);
  --input-line-hover: var(--color-interactive-neutral-line-hover);
  --input-line-focus: var(--color-interactive-primary-focus);
  --input-line-invalid: var(--color-sentiment-negative-line);
  --input-surface-disabled: var(--color-interactive-neutral-disabled);
  --input-content-disabled: var(--color-interactive-neutral-ondisabled);
  --input-height: var(--size-control-md);
  --input-padding-x: var(--space-12);
  --input-padding-y: var(--space-8);
  --input-lg-height: var(--size-control-lg);
  --input-lg-padding-x: var(--space-16);
  --input-radius: var(--radius-control);
  --input-font-size: var(--type-body-size);
  --input-line-height: var(--type-body-line);
  --input-border-width: var(--border-width);
  --input-addon-gap: var(--space-8);
  --input-addon-button-padding-x: var(--space-4);
}

/* @component textarea */
:root {
  --textarea-surface: var(--color-interactive-neutral-surface);
  --textarea-content: var(--color-interactive-neutral-content);
  --textarea-placeholder-content: var(--color-interactive-neutral-placeholder);
  --textarea-line: var(--color-interactive-neutral-line);
  --textarea-line-hover: var(--color-interactive-neutral-line-hover);
  --textarea-line-focus: var(--color-interactive-primary-focus);
  --textarea-line-invalid: var(--color-sentiment-negative-line);
  --textarea-surface-disabled: var(--color-interactive-neutral-disabled);
  --textarea-content-disabled: var(--color-interactive-neutral-ondisabled);
  --textarea-min-height: var(--space-64);
  --textarea-padding-x: var(--space-12);
  --textarea-padding-y: var(--space-8);
  --textarea-radius: var(--radius-control);
  --textarea-font-size: var(--type-body-size);
  --textarea-line-height: var(--type-body-line);
  --textarea-border-width: var(--border-width);
}

/* @component field */
:root {
  --field-gap: var(--space-6);
  --field-group-gap: var(--space-component);
  --field-header-gap: var(--space-component);
  --field-content: var(--color-ui-content);
  --field-supportive: var(--color-ui-supportive);
  --field-content-invalid: var(--color-sentiment-negative-alt-content);
  --field-content-disabled: var(--color-interactive-neutral-ondisabled);
  --field-font-size: var(--type-label-size);
  --field-font-weight: var(--type-label-weight);
}

/* @component checkbox */
:root {
  --checkbox-width: var(--size-icon-md);
  --checkbox-radius: var(--radius-control);
  --checkbox-surface: var(--color-interactive-neutral-surface);
  --checkbox-surface-checked: var(--color-interactive-primary-surface);
  --checkbox-content-checked: var(--color-interactive-primary-content);
  --checkbox-line: var(--color-interactive-neutral-line);
  --checkbox-line-checked: var(--color-interactive-primary-line);
  --checkbox-line-focus: var(--color-interactive-primary-focus);
  --checkbox-surface-disabled: var(--color-interactive-neutral-disabled);
  --checkbox-content-disabled: var(--color-interactive-neutral-ondisabled);
  --checkbox-border-width: var(--border-width);
  --checkbox-gap: var(--space-8);
  --checkbox-line-height: var(--type-label-line);
  --checkbox-line-invalid: var(--color-sentiment-negative-line);
  --checkbox-content: var(--color-ui-content);
  --checkbox-supportive: var(--color-ui-supportive);
  --checkbox-title-font-weight: var(--type-label-weight);
  --checkbox-content-gap: var(--space-text);
  --checkbox-trailing-gap: var(--space-actions-tight);
  --checkbox-outline-surface: var(--color-ui-surface);
  --checkbox-outline-surface-hover: var(--color-interactive-neutral-hover);
  --checkbox-outline-surface-active: var(--color-interactive-neutral-pressed);
  --checkbox-outline-surface-checked: var(--color-interactive-primary-active);
  --checkbox-outline-line: var(--color-ui-line);
  --checkbox-outline-line-checked: var(--color-interactive-primary-line);
  --checkbox-outline-line-invalid: var(--color-sentiment-negative-line);
  --checkbox-outline-radius: var(--radius-control);
  --checkbox-outline-padding-x: var(--space-12);
  --checkbox-outline-padding-y: var(--space-8);
  --checkbox-outline-gap: var(--space-12);
  --checkbox-outline-min-height: var(--size-control-lg);
}

/* @component radio */
:root {
  --radio-width: var(--size-icon-md);
  --radio-surface: var(--color-interactive-neutral-surface);
  --radio-surface-checked: var(--color-interactive-primary-surface);
  --radio-content-checked: var(--color-interactive-primary-content);
  --radio-line: var(--color-interactive-neutral-line);
  --radio-line-checked: var(--color-interactive-primary-line);
  --radio-line-focus: var(--color-interactive-primary-focus);
  --radio-line-invalid: var(--color-sentiment-negative-line);
  --radio-surface-disabled: var(--color-interactive-neutral-disabled);
  --radio-content-disabled: var(--color-interactive-neutral-ondisabled);
  --radio-border-width: var(--border-width);
  --radio-gap: var(--space-8);
  --radio-group-gap: var(--space-16);
  --radio-group-outline-gap: var(--space-8);
  --radio-line-height: var(--type-label-line);
  --radio-content: var(--color-ui-content);
  --radio-supportive: var(--color-ui-supportive);
  --radio-title-font-weight: var(--type-label-weight);
  --radio-content-gap: var(--space-text);
  --radio-trailing-gap: var(--space-actions-tight);
  --radio-outline-surface: var(--color-ui-surface);
  --radio-outline-surface-hover: var(--color-interactive-neutral-hover);
  --radio-outline-surface-active: var(--color-interactive-neutral-pressed);
  --radio-outline-surface-checked: var(--color-interactive-primary-active);
  --radio-outline-line: var(--color-ui-line);
  --radio-outline-line-checked: var(--color-interactive-primary-line);
  --radio-outline-line-invalid: var(--color-sentiment-negative-line);
  --radio-outline-radius: var(--radius-control);
  --radio-outline-padding-x: var(--space-12);
  --radio-outline-padding-y: var(--space-8);
  --radio-outline-gap: var(--space-12);
  --radio-outline-min-height: var(--size-control-lg);
}

/* @component switch */
:root {
  --switch-width: var(--space-40);
  --switch-height: var(--space-20);
  --switch-padding: var(--space-2);
  --switch-surface: var(--color-interactive-neutral-line);
  --switch-surface-checked: var(--color-interactive-primary-surface);
  --switch-content: var(--color-interactive-neutral-surface);
  --switch-line-focus: var(--color-interactive-primary-focus);
  --switch-focus-width: var(--border-width);
  --switch-surface-disabled: var(--color-interactive-neutral-disabled);
  --switch-content-disabled: var(--color-interactive-neutral-ondisabled);
}

/* @component badge */
:root {
  --badge-height: var(--space-20);
  --badge-min-width: var(--space-20);
  --badge-padding-x: var(--space-4);
  --badge-radius: var(--radius-pill);
  --badge-control-radius: var(--radius-control);
  --badge-font-size: var(--type-caption-size);
  --badge-font-weight: var(--type-label-weight);
  --badge-icon: var(--size-icon-sm);
  --badge-dot-width: var(--space-12);
  --badge-dot-height: var(--space-12);

  --badge-surface: var(--color-interactive-primary-surface);
  --badge-content: var(--color-interactive-primary-content);
  --badge-neutral-surface: var(--color-ui-content);
  --badge-neutral-content: var(--color-ui-surface);

  --badge-status-success-surface: var(--color-sentiment-positive-surface);
  --badge-status-neutral-surface: var(--color-ui-supportive);
}

/* @component chip */
:root {
  --chip-xs-height: var(--size-control-xs);
  --chip-sm-height: var(--size-control-sm);
  --chip-padding-x: var(--space-8);
  --chip-gap: var(--space-4);
  --chip-radius: var(--radius-pill);
  --chip-control-radius: var(--radius-control);
  --chip-font-size: var(--type-caption-size);
  --chip-font-weight: var(--type-body-weight);
  --chip-border-width: var(--border-width);
  --chip-icon: var(--size-icon-sm);
  --chip-remove-icon: var(--size-icon-sm);
  --chip-remove-radius: var(--radius-pill);
  --chip-dot-width: var(--space-8);
  --chip-dot-height: var(--space-8);
  --chip-dot-radius: var(--radius-pill);

  --chip-surface: transparent;
  --chip-content: var(--color-ui-content);
  --chip-line: var(--color-ui-line);
  --chip-line-focus: var(--color-interactive-primary-focus);
  --chip-remove-surface-hover: var(--color-interactive-neutral-hover);

  --chip-status-success-content: var(--color-sentiment-positive-alt-content);
  --chip-status-success-line: var(--color-sentiment-positive-alt-line);
  --chip-status-success-dot-surface: var(--color-sentiment-positive-alt-content);
  --chip-status-success-soft-surface: var(--color-sentiment-positive-alt-surface);
  --chip-status-success-bold-surface: var(--color-sentiment-positive-surface);
  --chip-status-success-bold-content: var(--color-sentiment-positive-content);
  --chip-status-warning-content: var(--color-sentiment-warning-alt-content);
  --chip-status-warning-line: var(--color-sentiment-warning-alt-line);
  --chip-status-warning-dot-surface: var(--color-sentiment-warning-alt-content);
  --chip-status-warning-soft-surface: var(--color-sentiment-warning-alt-surface);
  --chip-status-warning-bold-surface: var(--color-sentiment-warning-surface);
  --chip-status-warning-bold-content: var(--color-sentiment-warning-content);
  --chip-status-error-content: var(--color-sentiment-negative-alt-content);
  --chip-status-error-line: var(--color-sentiment-negative-alt-line);
  --chip-status-error-dot-surface: var(--color-sentiment-negative-alt-content);
  --chip-status-error-soft-surface: var(--color-sentiment-negative-alt-surface);
  --chip-status-error-bold-surface: var(--color-sentiment-negative-surface);
  --chip-status-error-bold-content: var(--color-sentiment-negative-content);
  --chip-status-info-content: var(--color-sentiment-info-alt-content);
  --chip-status-info-line: var(--color-sentiment-info-alt-line);
  --chip-status-info-dot-surface: var(--color-sentiment-info-alt-content);
  --chip-status-info-soft-surface: var(--color-sentiment-info-alt-surface);
  --chip-status-info-bold-surface: var(--color-sentiment-info-surface);
  --chip-status-info-bold-content: var(--color-sentiment-info-content);
  --chip-status-neutral-content: var(--color-ui-content);
  --chip-status-neutral-line: var(--color-ui-line);
  --chip-status-neutral-dot-surface: var(--color-ui-content);
  --chip-status-neutral-soft-surface: var(--color-ui-container);
  --chip-status-neutral-bold-surface: var(--color-ui-content);
  --chip-status-neutral-bold-content: var(--color-ui-surface);

  --chip-decorative-green-content: var(--color-decorative-green-content);
  --chip-decorative-green-line: var(--color-decorative-green-line);
  --chip-decorative-green-soft-surface: var(--color-decorative-green-surface-alt);
  --chip-decorative-green-bold-surface: var(--color-decorative-green-surface);
  --chip-decorative-green-bold-content: var(--color-decorative-green-content-bold);
  --chip-decorative-blue-content: var(--color-decorative-blue-content);
  --chip-decorative-blue-line: var(--color-decorative-blue-line);
  --chip-decorative-blue-soft-surface: var(--color-decorative-blue-surface-alt);
  --chip-decorative-blue-bold-surface: var(--color-decorative-blue-surface);
  --chip-decorative-blue-bold-content: var(--color-decorative-blue-content-bold);
  --chip-decorative-amber-content: var(--color-decorative-amber-content);
  --chip-decorative-amber-line: var(--color-decorative-amber-line);
  --chip-decorative-amber-soft-surface: var(--color-decorative-amber-surface-alt);
  --chip-decorative-amber-bold-surface: var(--color-decorative-amber-surface);
  --chip-decorative-amber-bold-content: var(--color-decorative-amber-content-bold);
  --chip-decorative-red-content: var(--color-decorative-red-content);
  --chip-decorative-red-line: var(--color-decorative-red-line);
  --chip-decorative-red-soft-surface: var(--color-decorative-red-surface-alt);
  --chip-decorative-red-bold-surface: var(--color-decorative-red-surface);
  --chip-decorative-red-bold-content: var(--color-decorative-red-content-bold);
  --chip-decorative-gray-content: var(--color-decorative-gray-content);
  --chip-decorative-gray-line: var(--color-decorative-gray-line);
  --chip-decorative-gray-soft-surface: var(--color-ui-container);
  --chip-decorative-gray-bold-surface: var(--color-ui-content);
  --chip-decorative-gray-bold-content: var(--color-ui-surface);
}

/* @component card */
:root {
  --card-surface: var(--color-ui-surface);
  --card-content: var(--color-ui-content);
  --card-supportive: var(--color-ui-supportive);
  --card-line: var(--color-ui-line);
  --card-radius: var(--radius-panel);
  --card-padding: var(--space-panel);
  --card-header-gap: var(--space-title);
  --card-header-action-gap: var(--space-16);
  --card-content-gap: var(--space-16);
  --card-footer-gap: var(--space-actions);
  --card-description-font-size: var(--type-body-size);
  --card-description-line-height: var(--type-body-line);
  --card-shadow: var(--shadow-panel);
  --card-border-width: var(--border-width);
}

/* @component separator */
:root {
  --separator-line: var(--color-ui-line);
  --separator-height: var(--border-width);
  --separator-label-gap: var(--space-component-tight);
  --separator-label-content: var(--color-ui-supportive);
  --separator-label-font-size: var(--type-caption-size);
  --separator-label-line-height: var(--type-caption-line);
}

/* @component icon */
:root {
  --icon-sm-width: var(--size-icon-sm);
  --icon-md-width: var(--size-icon-md);
  --icon-lg-width: var(--size-icon-lg);
}

/* @component dialog */
:root {
  --dialog-scrim-surface: var(--color-config-backdrop); /* lint-allow */
  --dialog-content-surface: var(--color-ui-elevated);
  --dialog-content-content: var(--color-ui-content);
  --dialog-content-supportive: var(--color-ui-supportive);
  --dialog-content-line: var(--color-ui-line);
  --dialog-content-radius: var(--radius-panel);
  --dialog-padding: var(--space-panel);
  --dialog-header-gap: var(--space-title);
  --dialog-header-action-gap: var(--space-16);
  --dialog-body-gap: var(--space-16);
  --dialog-footer-gap: var(--space-actions);
  --dialog-body-padding-y: calc(var(--border-width) * 2);
  --dialog-close-offset: calc((var(--type-title-line) - var(--size-control-sm)) / 2);
  --dialog-content-shadow: var(--shadow-overlay);
  --dialog-content-max-width: calc(var(--space-96) * 5);
  --dialog-content-border-width: var(--border-width);
}

/* @component select */
:root {
  --select-trigger-height: var(--size-control-md);
  --select-trigger-padding-x: var(--space-12);
  --select-trigger-lg-height: var(--size-control-lg);
  --select-trigger-lg-padding-x: var(--space-16);
  --select-trigger-gap: var(--space-8);
  --select-trigger-radius: var(--radius-control);
  --select-trigger-surface: var(--color-interactive-neutral-surface);
  --select-trigger-content: var(--color-interactive-neutral-content);
  --select-trigger-placeholder-content: var(--color-interactive-neutral-placeholder);
  --select-trigger-line: var(--color-interactive-neutral-line);
  --select-trigger-line-hover: var(--color-interactive-neutral-line-hover);
  --select-trigger-line-focus: var(--color-interactive-primary-focus);
  --select-trigger-line-invalid: var(--color-sentiment-negative-line);
  --select-trigger-surface-disabled: var(--color-interactive-neutral-disabled);
  --select-trigger-content-disabled: var(--color-interactive-neutral-ondisabled);
  --select-trigger-font-size: var(--type-body-size);
  --select-trigger-border-width: var(--border-width);

  --select-menu-surface: var(--color-ui-elevated);
  --select-menu-line: var(--color-ui-line);
  --select-menu-radius: var(--radius-panel);
  --select-menu-shadow: var(--shadow-overlay);
  --select-menu-padding: var(--space-4);
  --select-menu-offset: var(--space-4);
  --select-menu-min-width: calc(var(--space-96) * 2);
  --select-menu-border-width: var(--border-width);

  --select-item-height: var(--size-row-compact);
  --select-item-padding-x: var(--space-12);
  --select-item-gap: var(--space-8);
  --select-item-radius: var(--radius-control);
  --select-item-content: var(--color-ui-content);
  --select-item-supportive: var(--color-ui-supportive);
  --select-item-content-disabled: var(--color-interactive-neutral-ondisabled);
  --select-item-surface-hover: var(--color-interactive-neutral-hover);
  --select-item-content-selected: var(--color-interactive-primary-surface);
  --select-item-font-size: var(--type-body-size);
}

/* @component dropdown-menu */
:root {
  --dropdown-menu-menu-surface: var(--color-ui-elevated);
  --dropdown-menu-menu-line: var(--color-ui-line);
  --dropdown-menu-menu-radius: var(--radius-panel);
  --dropdown-menu-menu-shadow: var(--shadow-overlay);
  --dropdown-menu-menu-padding: var(--space-4);
  --dropdown-menu-menu-offset: var(--space-4);
  --dropdown-menu-menu-min-width: calc(var(--space-96) * 2);
  --dropdown-menu-menu-border-width: var(--border-width);

  --dropdown-menu-item-height: var(--size-row-compact);
  --dropdown-menu-item-padding-x: var(--space-12);
  --dropdown-menu-item-gap: var(--space-8);
  --dropdown-menu-item-radius: var(--radius-control);
  --dropdown-menu-item-content: var(--color-ui-content);
  --dropdown-menu-item-supportive: var(--color-ui-supportive);
  --dropdown-menu-item-surface-hover: var(--color-interactive-neutral-hover);
  --dropdown-menu-item-content-invalid: var(--color-sentiment-negative-alt-content);
  --dropdown-menu-item-font-size: var(--type-body-size);
  --dropdown-menu-indicator-icon: var(--size-icon-sm);
  --dropdown-menu-indicator-border-width: calc(var(--border-width) * 1.5);

  --dropdown-menu-separator-line: var(--color-ui-line);

  --dropdown-menu-label-content: var(--color-ui-supportive);
  --dropdown-menu-label-font-size: var(--type-caption-size);
  --dropdown-menu-label-font-weight: var(--type-label-weight);
  --dropdown-menu-label-padding-y: var(--space-6);
}

/* @component tabs */
:root {
  --tabs-list-surface: var(--color-interactive-neutral-hover);
  --tabs-list-radius: var(--radius-control);
  --tabs-list-padding: var(--space-4);
  --tabs-list-gap: var(--space-4);
  --tabs-list-height: var(--size-control-md);

  --tabs-trigger-height: var(--size-control-sm);
  --tabs-trigger-padding-x: var(--space-8);
  --tabs-trigger-label-padding-x: var(--space-4);
  --tabs-trigger-gap: var(--space-4);
  --tabs-trigger-icon: var(--size-icon-sm);
  --tabs-line-focus: var(--color-interactive-primary-focus);
  --tabs-focus-width: var(--border-width);
  --tabs-trigger-radius: var(--radius-control);
  --tabs-trigger-content: var(--color-ui-supportive);
  --tabs-trigger-content-selected: var(--color-ui-content);
  --tabs-trigger-surface-selected: var(--color-ui-surface);
  --tabs-trigger-shadow-selected: var(--shadow-panel);
  --tabs-trigger-content-disabled: var(--color-interactive-neutral-ondisabled);
  --tabs-trigger-font-size: var(--type-label-size);
  --tabs-trigger-font-weight: var(--type-label-weight);

  --tabs-content-padding: var(--space-16);
}

/* @component tooltip */
:root {
  --tooltip-surface: var(--color-ui-content);
  --tooltip-content: var(--color-ui-surface);
  --tooltip-radius: var(--radius-control);
  --tooltip-padding-x: var(--space-8);
  --tooltip-padding-y: var(--space-4);
  --tooltip-font-size: var(--type-caption-size);
  --tooltip-shadow: var(--shadow-overlay);
  --tooltip-offset: var(--space-4);
  --tooltip-max-width: calc(var(--space-96) * 2);
}

/* @component alert */
:root {
  --alert-content: var(--color-ui-content);
  --alert-supportive: var(--color-ui-supportive);
  --alert-neutral-surface: var(--color-ui-container);
  --alert-neutral-line: var(--color-ui-line);
  --alert-neutral-icon-content: var(--color-ui-content);
  --alert-success-surface: var(--color-sentiment-positive-alt-surface);
  --alert-success-line: var(--color-sentiment-positive-alt-line);
  --alert-success-icon-content: var(--color-sentiment-positive-alt-content);
  --alert-warning-surface: var(--color-sentiment-warning-alt-surface);
  --alert-warning-line: var(--color-sentiment-warning-alt-line);
  --alert-warning-icon-content: var(--color-sentiment-warning-alt-content);
  --alert-error-surface: var(--color-sentiment-negative-alt-surface);
  --alert-error-line: var(--color-sentiment-negative-alt-line);
  --alert-error-icon-content: var(--color-sentiment-negative-alt-content);
  --alert-info-surface: var(--color-sentiment-info-alt-surface);
  --alert-info-line: var(--color-sentiment-info-alt-line);
  --alert-info-icon-content: var(--color-sentiment-info-alt-content);
  --alert-radius: var(--radius-control);
  --alert-padding-x: var(--space-12);
  --alert-padding-y: var(--space-8);
  --alert-gap: var(--space-12);
  --alert-content-gap: var(--space-text);
  --alert-min-height: var(--size-control-lg);
  --alert-actions-gap: var(--space-actions);
  --alert-actions-offset: var(--space-6);
  --alert-action-content: var(--color-ui-content);
  --alert-dismiss-height: var(--size-control-xs);
  --alert-icon-width: var(--size-icon-md);
  --alert-title-font-size: var(--type-label-size);
  --alert-title-line-height: var(--type-label-line);
  --alert-title-font-weight: var(--type-label-weight);
  --alert-description-font-size: var(--type-body-size);
  --alert-description-line-height: var(--type-body-line);
  --alert-border-width: var(--border-width);
}

/* @component aspect-ratio */
:root {
  --aspect-ratio-surface: var(--color-interactive-neutral-hover);
  --aspect-ratio-content: var(--color-ui-supportive);
  --aspect-ratio-radius: var(--radius-control);
  --aspect-ratio-icon: var(--size-icon-lg);
}

/* @component breadcrumb */
:root {
  --breadcrumb-content: var(--color-ui-supportive);
  --breadcrumb-link-content: var(--color-ui-supportive);
  --breadcrumb-link-content-hover: var(--color-interactive-neutral-content);
  --breadcrumb-link-line-focus: var(--color-interactive-primary-focus);
  --breadcrumb-page-content: var(--color-ui-content);
  --breadcrumb-page-font-weight: var(--type-label-weight);
  --breadcrumb-separator-content: var(--color-ui-supportive);
  --breadcrumb-gap: var(--space-8);
  --breadcrumb-icon-width: var(--size-icon-sm);
  --breadcrumb-font-size: var(--type-body-size);
  --breadcrumb-line-height: var(--type-body-line);
  --breadcrumb-focus-width: var(--border-width);
}

/* @component button-group */
:root {
  --button-group-gap: var(--space-0);
  --button-group-line: var(--color-ui-line);
  --button-group-line-hover: var(--color-interactive-neutral-hover);
  --button-group-line-focus: var(--color-interactive-primary-focus);
  --button-group-radius: var(--radius-control);
  --button-group-border-width: var(--border-width);
  --button-group-separator-width: var(--border-width);
  --button-group-separator-primary-line: var(--color-interactive-primary-separator);
  --button-group-text-height: var(--size-control-md);
  --button-group-text-padding-x: var(--space-12);
  --button-group-text-font-size: var(--type-label-size);
  --button-group-text-font-weight: var(--type-label-weight);
  --button-group-text-content: var(--color-ui-supportive);
  --button-group-text-surface: var(--color-ui-surface);
}

/* @component empty */
:root {
  --empty-content: var(--color-ui-content);
  --empty-supportive: var(--color-ui-supportive);
  --empty-media-surface: var(--color-interactive-neutral-hover);
  --empty-media-content: var(--color-ui-content);
  --empty-padding: var(--space-32);
  --empty-gap: var(--space-16);
  --empty-header-gap: var(--space-title);
  --empty-content-gap: var(--space-actions);
  --empty-media-width: var(--size-control-lg);
  --empty-media-radius: var(--radius-control);
  --empty-media-icon: var(--size-icon-md);
  --empty-title-font-size: var(--type-title-size);
  --empty-title-line-height: var(--type-title-line);
  --empty-title-font-weight: var(--type-title-weight);
  --empty-description-font-size: var(--type-body-size);
  --empty-description-line-height: var(--type-body-line);
  --empty-description-max-width: var(--size-panel-sm);
}

/* @component item */
:root {
  --item-surface: var(--color-ui-surface);
  --item-surface-hover: var(--color-interactive-neutral-hover);
  --item-surface-active: var(--color-interactive-neutral-pressed);
  --item-content: var(--color-ui-content);
  --item-supportive: var(--color-ui-supportive);
  --item-content-disabled: var(--color-interactive-neutral-ondisabled);
  --item-line: var(--color-ui-surface);
  --item-outline-surface: var(--color-ui-surface);
  --item-outline-surface-hover: var(--color-interactive-neutral-hover);
  --item-outline-surface-active: var(--color-interactive-neutral-pressed);
  --item-outline-content: var(--color-ui-content);
  --item-outline-line: var(--color-ui-line);
  --item-outline-surface-checked: var(--color-interactive-primary-active);
  --item-outline-line-checked: var(--color-interactive-primary-line);
  --item-outline-line-disabled: var(--color-interactive-neutral-line);
  --item-muted-surface: var(--color-ui-container);
  --item-muted-surface-hover: var(--color-interactive-neutral-hover);
  --item-muted-surface-active: var(--color-interactive-neutral-pressed);
  --item-muted-content: var(--color-ui-content);
  --item-muted-line: var(--color-ui-container);
  --item-line-focus: var(--color-interactive-primary-focus);
  --item-separator-line: var(--color-ui-line);
  --item-radius: var(--radius-control);
  --item-border-width: var(--border-width);
  --item-flush-padding-x: var(--space-0);
  --item-gap: var(--space-12);
  --item-sm-padding-x: var(--space-8);
  --item-sm-padding-y: var(--space-8);
  --item-sm-min-height: var(--size-control-md);
  --item-sm-gap: var(--space-8);
  --item-sm-font-size: var(--type-caption-size);
  --item-sm-line-height: var(--type-caption-line);
  --item-sm-icon: var(--size-icon-sm);
  --item-md-padding-x: var(--space-12);
  --item-md-padding-y: var(--space-8);
  --item-md-min-height: var(--size-control-lg);
  --item-md-gap: var(--space-12);
  --item-md-font-size: var(--type-body-size);
  --item-md-line-height: var(--type-body-line);
  --item-md-icon: var(--size-icon-md);
  --item-title-font-weight: var(--type-label-weight);
  --item-group-gap: var(--space-8);
  --item-group-static-gap: var(--space-0);
  --item-trailing-gap: var(--space-actions-tight);
  --item-content-gap: var(--space-text);
  --item-header-gap: var(--space-8);
  --item-footer-gap: var(--space-actions-tight);
  --item-separator-height: var(--border-width);
}

/* @component kbd */
:root {
  --kbd-surface: var(--color-ui-container);
  --kbd-content: var(--color-ui-supportive);
  --kbd-line: var(--color-ui-line);
  --kbd-height: var(--space-24);
  --kbd-min-width: var(--space-24);
  --kbd-padding-x: var(--space-6);
  --kbd-gap: var(--space-4);
  --kbd-radius: var(--radius-control);
  --kbd-font-size: var(--type-caption-size);
  --kbd-line-height: var(--type-caption-line);
  --kbd-font-weight: var(--type-label-weight);
  --kbd-border-width: var(--border-width);
}

/* @component label */
:root {
  --label-content: var(--color-ui-content);
  --label-supportive: var(--color-ui-supportive);
  --label-gap: var(--space-6);
  --label-font-size: var(--type-label-size);
  --label-line-height: var(--type-label-line);
  --label-font-weight: var(--type-label-weight);
}

/* @component native-select */
:root {
  --native-select-surface: var(--color-interactive-neutral-surface);
  --native-select-content: var(--color-interactive-neutral-content);
  --native-select-supportive: var(--color-ui-supportive);
  --native-select-line: var(--color-interactive-neutral-line);
  --native-select-line-hover: var(--color-interactive-neutral-line-hover);
  --native-select-line-focus: var(--color-interactive-primary-focus);
  --native-select-line-invalid: var(--color-sentiment-negative-line);
  --native-select-surface-disabled: var(--color-interactive-neutral-disabled);
  --native-select-content-disabled: var(--color-interactive-neutral-ondisabled);
  --native-select-icon-content: var(--color-ui-supportive);
  --native-select-sm-height: var(--size-control-sm);
  --native-select-sm-padding-x: var(--space-8);
  --native-select-sm-font-size: var(--type-caption-size);
  --native-select-sm-icon: var(--size-icon-sm);
  --native-select-md-height: var(--size-control-md);
  --native-select-md-padding-x: var(--space-12);
  --native-select-md-font-size: var(--type-body-size);
  --native-select-md-icon: var(--size-icon-md);
  --native-select-gap: var(--space-8);
  --native-select-icon-offset: var(--space-12);
  --native-select-radius: var(--radius-control);
  --native-select-line-height: var(--type-body-line);
  --native-select-border-width: var(--border-width);
}

/* @component pagination */
:root {
  --pagination-content: var(--color-interactive-neutral-content);
  --pagination-supportive: var(--color-ui-supportive);
  --pagination-surface-hover: var(--color-interactive-neutral-hover);
  --pagination-surface-active: var(--color-interactive-neutral-pressed);
  --pagination-line: var(--color-interactive-neutral-line);
  --pagination-line-focus: var(--color-interactive-primary-focus);
  --pagination-height: var(--size-control-md);
  --pagination-min-width: var(--size-control-md);
  --pagination-padding-x: var(--space-12);
  --pagination-gap: var(--space-4);
  --pagination-radius: var(--radius-control);
  --pagination-font-size: var(--type-label-size);
  --pagination-border-width: var(--border-width);
  --pagination-icon: var(--size-icon-md);
}

/* @component progress */
:root {
  --progress-surface: var(--color-interactive-neutral-pressed);
  --progress-indicator-surface: var(--color-interactive-primary-surface);
  --progress-height: var(--space-8);
  --progress-radius: var(--radius-pill);
}

/* @component skeleton */
:root {
  --skeleton-surface: var(--color-interactive-neutral-pressed);
  --skeleton-radius: var(--radius-control);
  --skeleton-height: var(--size-control-sm);
  --skeleton-width: var(--size-panel-sm);
}

/* @component spinner */
:root {
  --spinner-content: var(--color-ui-content);
}

/* @component table */
:root {
  --table-content: var(--color-ui-content);
  --table-supportive: var(--color-ui-supportive);
  --table-line: var(--color-ui-line);
  --table-surface-hover: var(--color-interactive-neutral-hover);
  --table-surface-selected: var(--color-interactive-neutral-pressed);
  --table-head-padding-x: var(--space-8);
  --table-head-padding-y: var(--space-12);
  --table-head-font-size: var(--type-label-size);
  --table-head-font-weight: var(--type-label-weight);
  --table-cell-padding-x: var(--space-8);
  --table-cell-padding-y: var(--space-12);
  --table-cell-font-size: var(--type-body-size);
  --table-caption-padding-y: var(--space-12);
  --table-caption-font-size: var(--type-caption-size);
  --table-border-width: var(--border-width);
}

/* @component typography */
:root {
  --typography-content: var(--color-ui-content);
  --typography-supportive: var(--color-ui-supportive);
  --typography-line: var(--color-ui-line);
  --typography-code-surface: var(--color-interactive-neutral-hover);
  --typography-h1-font-size: var(--type-display-size);
  --typography-h1-line-height: var(--type-display-line);
  --typography-h1-font-weight: var(--type-display-weight);
  --typography-h2-font-size: var(--type-title-size);
  --typography-h2-line-height: var(--type-title-line);
  --typography-h2-font-weight: var(--type-display-weight);
  --typography-h3-font-size: var(--type-title-size);
  --typography-h3-line-height: var(--type-title-line);
  --typography-h3-font-weight: var(--type-title-weight);
  --typography-h4-font-size: var(--type-body-size);
  --typography-h4-line-height: var(--type-body-line);
  --typography-h4-font-weight: var(--type-label-weight);
  --typography-body-font-size: var(--type-body-size);
  --typography-body-line-height: var(--type-body-line);
  --typography-body-font-weight: var(--type-body-weight);
  --typography-heading-font-size: var(--type-heading-size);
  --typography-heading-line-height: var(--type-heading-line);
  --typography-heading-font-weight: var(--type-heading-weight);
  --typography-lead-font-size: var(--type-title-size);
  --typography-lead-line-height: var(--type-title-line);
  --typography-label-font-size: var(--type-label-size);
  --typography-label-line-height: var(--type-label-line);
  --typography-label-font-weight: var(--type-label-weight);
  --typography-large-font-size: var(--type-body-size);
  --typography-large-line-height: var(--type-body-line);
  --typography-large-font-weight: var(--type-label-weight);
  --typography-small-font-size: var(--type-caption-size);
  --typography-small-line-height: var(--type-caption-line);
  --typography-muted-font-size: var(--type-caption-size);
  --typography-muted-line-height: var(--type-caption-line);
  --typography-gap: var(--space-16);
  --typography-heading-gap: var(--space-24);
  --typography-list-padding-x: var(--space-24);
  --typography-quote-padding-x: var(--space-16);
  --typography-quote-border-width: var(--border-width);
  --typography-code-padding-x: var(--space-4);
  --typography-code-padding-y: var(--space-2);
  --typography-code-radius: var(--radius-control);
  --typography-code-font-size: var(--type-caption-size);
  --typography-table-padding-x: var(--space-12);
  --typography-table-padding-y: var(--space-8);
  --typography-table-border-width: var(--border-width);
}

/* @component scroll-area */
:root {
  --scroll-area-surface: var(--color-ui-line);
  --scroll-area-surface-hover: var(--color-ui-supportive);
  --scroll-area-content: var(--color-ui-content);
  --scroll-area-width: var(--space-8);
  --scroll-area-max-height: var(--size-panel-sm);
  --scroll-area-max-width: var(--size-panel-sm);
  --scroll-area-padding: var(--space-12);
  --scroll-area-radius: var(--radius-pill);
  --scroll-area-line: var(--color-ui-surface);
  --scroll-area-border-width: var(--border-width);
  --scroll-area-line-focus: var(--color-interactive-primary-focus);
}

/* @component direction */
:root {
  --direction-gap: var(--space-16);
  --direction-padding: var(--space-16);
  --direction-line: var(--color-ui-line);
  --direction-border-width: var(--border-width);
  --direction-radius: var(--radius-panel);
}

/* @component accordion */
:root {
  --accordion-item-line: var(--color-ui-line);
  --accordion-item-border-width: var(--border-width);
  --accordion-trigger-height: var(--size-control-lg);
  --accordion-trigger-padding-x: var(--space-0);
  --accordion-trigger-gap: var(--space-12);
  --accordion-trigger-content: var(--color-interactive-neutral-content);
  --accordion-trigger-surface-hover: var(--color-interactive-neutral-hover);
  --accordion-trigger-line-focus: var(--color-interactive-primary-focus);
  --accordion-trigger-font-size: var(--type-body-size);
  --accordion-trigger-font-weight: var(--type-label-weight);
  --accordion-content-padding-x: var(--space-0);
  --accordion-content-padding-y: var(--space-16);
  --accordion-content-supportive: var(--color-ui-supportive);
  --accordion-indicator-width: var(--size-icon-sm);
  --accordion-indicator-content: var(--color-ui-supportive);
}

/* @component collapsible */
:root {
  --collapsible-trigger-height: var(--size-row-compact);
  --collapsible-trigger-padding-x: var(--space-12);
  --collapsible-trigger-gap: var(--space-8);
  --collapsible-trigger-radius: var(--radius-control);
  --collapsible-trigger-surface: transparent;
  --collapsible-trigger-surface-hover: var(--color-interactive-neutral-hover);
  --collapsible-trigger-content: var(--color-interactive-neutral-content);
  --collapsible-trigger-line: var(--color-interactive-neutral-line);
  --collapsible-trigger-line-focus: var(--color-interactive-primary-focus);
  --collapsible-trigger-border-width: var(--border-width);
  --collapsible-content-padding: var(--space-12);
  --collapsible-content-surface: var(--color-ui-container);
  --collapsible-content-content: var(--color-ui-content);
  --collapsible-content-line: var(--color-ui-line);
  --collapsible-content-radius: var(--radius-panel);
  --collapsible-content-border-width: var(--border-width);
  --collapsible-indicator-width: var(--size-icon-sm);
}

/* @component context-menu */
:root {
  --context-menu-trigger-min-height: calc(var(--size-control-lg) * 2);
  --context-menu-trigger-padding: var(--space-16);
  --context-menu-trigger-radius: var(--radius-panel);
  --context-menu-trigger-surface: var(--color-ui-surface);
  --context-menu-trigger-content: var(--color-ui-supportive);
  --context-menu-trigger-line: var(--color-ui-line);
  --context-menu-trigger-border-width: var(--border-width);
  --context-menu-trigger-line-focus: var(--color-interactive-primary-focus);
  --context-menu-menu-min-width: calc(var(--size-control-lg) * 4);
  --context-menu-menu-padding: var(--space-4);
  --context-menu-menu-radius: var(--radius-panel);
  --context-menu-menu-surface: var(--color-ui-elevated);
  --context-menu-menu-line: var(--color-ui-line);
  --context-menu-menu-shadow: var(--shadow-overlay);
  --context-menu-menu-border-width: var(--border-width);
  --context-menu-item-height: var(--size-row-compact);
  --context-menu-item-padding-x: var(--space-8);
  --context-menu-item-gap: var(--space-8);
  --context-menu-item-radius: var(--radius-control);
  --context-menu-item-content: var(--color-ui-content);
  --context-menu-item-supportive: var(--color-ui-supportive);
  --context-menu-item-surface-hover: var(--color-interactive-neutral-hover);
  --context-menu-item-font-size: var(--type-body-size);
  --context-menu-label-content: var(--color-ui-supportive);
  --context-menu-label-font-size: var(--type-caption-size);
  --context-menu-label-font-weight: var(--type-label-weight);
  --context-menu-label-padding-y: var(--space-6);
  --context-menu-separator-line: var(--color-ui-line);
}

/* @component menubar */
:root {
  --menubar-root-height: var(--size-control-md);
  --menubar-root-padding: var(--space-4);
  --menubar-root-gap: var(--space-2);
  --menubar-root-radius: var(--radius-panel);
  --menubar-root-surface: var(--color-ui-surface);
  --menubar-root-line: var(--color-ui-line);
  --menubar-root-border-width: var(--border-width);
  --menubar-trigger-height: var(--size-control-md);
  --menubar-trigger-padding-x: var(--space-8);
  --menubar-trigger-radius: var(--radius-control);
  --menubar-trigger-content: var(--color-interactive-neutral-content);
  --menubar-trigger-surface-hover: var(--color-interactive-neutral-hover);
  --menubar-trigger-surface-open: var(--color-interactive-neutral-pressed);
  --menubar-trigger-line-focus: var(--color-interactive-primary-focus);
  --menubar-trigger-font-size: var(--type-body-size);
  --menubar-menu-min-width: calc(var(--size-control-lg) * 4);
  --menubar-menu-padding: var(--space-4);
  --menubar-menu-offset: var(--space-4);
  --menubar-menu-radius: var(--radius-panel);
  --menubar-menu-surface: var(--color-ui-elevated);
  --menubar-menu-line: var(--color-ui-line);
  --menubar-menu-shadow: var(--shadow-overlay);
  --menubar-menu-border-width: var(--border-width);
  --menubar-item-height: var(--size-row-compact);
  --menubar-item-padding-x: var(--space-8);
  --menubar-item-radius: var(--radius-control);
  --menubar-item-content: var(--color-ui-content);
  --menubar-item-supportive: var(--color-ui-supportive);
  --menubar-item-surface-hover: var(--color-interactive-neutral-hover);
  --menubar-item-font-size: var(--type-body-size);
  --menubar-separator-line: var(--color-ui-line);
}

/* @component navigation-menu */
:root {
  --navigation-menu-list-gap: var(--space-4);
  --navigation-menu-trigger-height: var(--size-control-md);
  --navigation-menu-trigger-padding-x: var(--space-12);
  --navigation-menu-trigger-gap: var(--space-6);
  --navigation-menu-trigger-radius: var(--radius-control);
  --navigation-menu-trigger-surface: transparent;
  --navigation-menu-trigger-surface-hover: var(--color-interactive-neutral-hover);
  --navigation-menu-trigger-surface-open: var(--color-interactive-neutral-pressed);
  --navigation-menu-trigger-content: var(--color-interactive-neutral-content);
  --navigation-menu-trigger-line-focus: var(--color-interactive-primary-focus);
  --navigation-menu-trigger-font-size: var(--type-body-size);
  --navigation-menu-indicator-width: var(--size-icon-sm);
  --navigation-menu-indicator-content: var(--color-ui-supportive);
  --navigation-menu-viewport-min-width: var(--size-panel-md);
  --navigation-menu-viewport-min-height: calc(var(--size-control-lg) * 3);
  --navigation-menu-viewport-padding: var(--space-panel-tight);
  --navigation-menu-viewport-offset: var(--space-8);
  --navigation-menu-viewport-radius: var(--radius-panel);
  --navigation-menu-viewport-surface: var(--color-ui-elevated);
  --navigation-menu-viewport-line: var(--color-ui-line);
  --navigation-menu-viewport-shadow: var(--shadow-overlay);
  --navigation-menu-viewport-border-width: var(--border-width);
  --navigation-menu-content-gap: var(--space-8);
  --navigation-menu-link-padding: var(--space-12);
  --navigation-menu-link-radius: var(--radius-control);
  --navigation-menu-link-content: var(--color-interactive-neutral-content);
  --navigation-menu-link-supportive: var(--color-ui-supportive);
  --navigation-menu-link-surface-hover: var(--color-interactive-neutral-hover);
}

/* @component avatar */
:root {
  --avatar-xs-width: var(--size-control-xs);
  --avatar-xs-height: var(--size-control-xs);
  --avatar-sm-width: var(--size-control-sm);
  --avatar-sm-height: var(--size-control-sm);
  --avatar-md-width: var(--size-control-md);
  --avatar-md-height: var(--size-control-md);
  --avatar-lg-width: var(--size-control-lg);
  --avatar-lg-height: var(--size-control-lg);
  --avatar-xl-width: var(--size-control-xl);
  --avatar-xl-height: var(--size-control-xl);

  --avatar-root-radius: var(--radius-pill);
  --avatar-square-radius: var(--radius-control);
  --avatar-root-surface: var(--color-ui-surface);
  --avatar-root-content: var(--color-ui-content);
  --avatar-root-line: var(--color-ui-line-alpha);
  --avatar-root-border-width: var(--border-width);

  --avatar-xs-fallback-font-size: var(--type-caption-size);
  --avatar-sm-fallback-font-size: var(--type-label-size);
  --avatar-md-fallback-font-size: var(--type-label-size);
  --avatar-lg-fallback-font-size: var(--type-title-size);
  --avatar-xl-fallback-font-size: var(--type-heading-size);
  --avatar-fallback-font-weight: var(--type-label-weight);

  --avatar-xs-icon: var(--size-icon-avatar-xs);
  --avatar-sm-icon: var(--size-icon-avatar-sm);
  --avatar-md-icon: var(--size-icon-avatar-md);
  --avatar-lg-icon: var(--size-icon-avatar-lg);
  --avatar-xl-icon: var(--size-icon-avatar-xl);

  --avatar-group-gap: var(--space-12);
}

/* @component alert-dialog */
:root {
  --alert-dialog-scrim-surface: var(--color-config-backdrop); /* lint-allow */
  --alert-dialog-content-surface: var(--color-ui-elevated);
  --alert-dialog-content-content: var(--color-ui-content);
  --alert-dialog-content-supportive: var(--color-ui-supportive);
  --alert-dialog-content-line: var(--color-ui-line);
  --alert-dialog-content-radius: var(--radius-panel);
  --alert-dialog-padding: var(--space-panel);
  --alert-dialog-header-gap: var(--space-title);
  --alert-dialog-body-gap: var(--space-16);
  --alert-dialog-footer-gap: var(--space-actions);
  --alert-dialog-body-padding-y: calc(var(--border-width) * 2);
  --alert-dialog-content-shadow: var(--shadow-overlay);
  --alert-dialog-content-max-width: var(--size-panel-md);
  --alert-dialog-content-border-width: var(--border-width);
}

/* @component sheet */
:root {
  --sheet-scrim-surface: var(--color-config-backdrop); /* lint-allow */
  --sheet-content-surface: var(--color-ui-elevated);
  --sheet-content-content: var(--color-ui-content);
  --sheet-content-supportive: var(--color-ui-supportive);
  --sheet-content-line: var(--color-ui-line);
  --sheet-content-width: var(--size-panel-sm);
  --sheet-content-max-height: 85vh;
  --sheet-padding: var(--space-panel);
  --sheet-header-gap: var(--space-title);
  --sheet-header-action-gap: var(--space-16);
  --sheet-header-item-gap: var(--space-12);
  --sheet-header-item-text-gap: var(--space-text);
  --sheet-header-item-font-size: var(--type-body-size);
  --sheet-header-item-line-height: var(--type-body-line);
  --sheet-header-item-title-font-weight: var(--type-label-weight);
  --sheet-body-gap: var(--space-16);
  --sheet-footer-gap: var(--space-actions);
  --sheet-body-padding-y: calc(var(--border-width) * 2);
  --sheet-close-offset: calc((var(--type-title-line) - var(--size-control-sm)) / 2);
  --sheet-content-shadow: var(--shadow-overlay);
  --sheet-content-border-width: var(--border-width);
}

/* @component drawer */
:root {
  --drawer-scrim-surface: var(--color-config-backdrop); /* lint-allow */
  --drawer-content-surface: var(--color-ui-elevated);
  --drawer-content-content: var(--color-ui-content);
  --drawer-content-supportive: var(--color-ui-supportive);
  --drawer-content-line: var(--color-ui-line);
  --drawer-content-width: var(--size-panel-md);
  --drawer-padding: var(--space-panel);
  --drawer-header-gap: var(--space-title);
  --drawer-body-gap: var(--space-16);
  --drawer-footer-gap: var(--space-actions);
  --drawer-body-padding-y: calc(var(--border-width) * 2);
  --drawer-content-radius: var(--radius-panel);
  --drawer-content-shadow: var(--shadow-overlay);
  --drawer-content-border-width: var(--border-width);
  --drawer-handle-width: var(--space-96);
  --drawer-handle-height: var(--space-4);
  --drawer-handle-surface: var(--color-ui-line);
  --drawer-handle-radius: var(--radius-pill);
}

/* @component popover */
:root {
  --popover-content-surface: var(--color-ui-elevated);
  --popover-content-content: var(--color-ui-content);
  --popover-content-supportive: var(--color-ui-supportive);
  --popover-content-line: var(--color-ui-line);
  --popover-content-width: var(--size-panel-sm);
  --popover-content-padding: var(--space-panel-tight);
  --popover-content-gap: var(--space-12);
  --popover-content-radius: var(--radius-panel);
  --popover-content-shadow: var(--shadow-overlay);
  --popover-content-border-width: var(--border-width);
  --popover-content-offset: var(--space-8);
  --popover-arrow-width: var(--space-8);
  --popover-arrow-surface: var(--color-ui-elevated);
  --popover-arrow-line: var(--color-ui-line);
}

/* @component hover-card */
:root {
  --hover-card-content-surface: var(--color-ui-elevated);
  --hover-card-content-content: var(--color-ui-content);
  --hover-card-content-supportive: var(--color-ui-supportive);
  --hover-card-content-line: var(--color-ui-line);
  --hover-card-content-width: var(--size-panel-sm);
  --hover-card-content-padding: var(--space-panel-tight);
  --hover-card-content-gap: var(--space-12);
  --hover-card-content-radius: var(--radius-panel);
  --hover-card-content-shadow: var(--shadow-overlay);
  --hover-card-content-border-width: var(--border-width);
  --hover-card-content-offset: var(--space-8);
  --hover-card-arrow-width: var(--space-8);
  --hover-card-arrow-surface: var(--color-ui-elevated);
}

/* @component top-bar */
:root {
  --top-bar-content: var(--color-ui-content);
  --top-bar-line: transparent;
  --top-bar-border-width: var(--border-width);
  --top-bar-row-height: var(--size-control-lg);
  --top-bar-padding-x: var(--space-12);
  --top-bar-padding-y: var(--space-8);
  --top-bar-inset-padding-x: var(--space-8);
  --top-bar-inset-padding-y: var(--space-4);
  --top-bar-gap: var(--space-component-tight);
  --top-bar-content-padding-x: var(--space-component-tight);
  --top-bar-actions-gap: var(--space-actions-tight);
  --top-bar-title-font-size: var(--type-label-size);
  --top-bar-title-line-height: var(--type-label-line);
  --top-bar-title-font-weight: var(--type-label-weight);
}

/* @component sidebar */
:root {
  --sidebar-surface: var(--color-config-screen); /* lint-allow */
  --sidebar-content: var(--color-ui-content);
  --sidebar-supportive: var(--color-ui-supportive);
  --sidebar-line: var(--color-ui-line);
  --sidebar-line-focus: var(--color-interactive-primary-focus);
  --sidebar-focus-width: var(--border-width);
  --sidebar-width: var(--size-panel-sm);
  --sidebar-icon-width: var(--space-64);
  --sidebar-header-padding-x: var(--space-8);
  --sidebar-header-padding-y: var(--space-8);
  --sidebar-content-padding: var(--space-8);
  --sidebar-content-gap: var(--space-16);
  --sidebar-footer-padding-x: var(--space-8);
  --sidebar-footer-padding-y: var(--space-8);
  --sidebar-header-line: transparent;
  --sidebar-footer-line: transparent;
  --sidebar-border-width: var(--border-width);
  --sidebar-icon-padding-x: var(--space-8);
  --sidebar-inset-padding: var(--space-12);
  --sidebar-inset-gap: var(--space-0);
  --sidebar-floating-padding: var(--space-8);
  --sidebar-floating-radius: var(--radius-panel);
  --sidebar-floating-shadow: var(--shadow-panel);
  --sidebar-inset-line: var(--color-ui-line);
  --sidebar-floating-surface: var(--color-ui-surface);
  --sidebar-inset-surface: var(--color-config-screen); /* lint-allow */
  --sidebar-overlay-surface: var(--color-config-backdrop); /* lint-allow */
  --sidebar-menu-gap: var(--space-4);
  --sidebar-menu-button-height: var(--size-control-md);
  --sidebar-menu-button-padding-x: var(--space-12);
  --sidebar-menu-button-gap: var(--space-8);
  --sidebar-menu-button-radius: var(--radius-control);
  --sidebar-menu-button-content: var(--color-ui-content);
  --sidebar-menu-button-content-active: var(--color-interactive-neutral-content);
  --sidebar-menu-button-surface-hover: var(--color-interactive-neutral-hover);
  --sidebar-menu-button-surface-active: var(--color-interactive-neutral-hover);
  --sidebar-menu-button-font-size: var(--type-label-size);
  --sidebar-menu-button-sm-height: var(--size-control-sm);
  --sidebar-menu-button-sm-font-size: var(--type-caption-size);
  --sidebar-menu-button-lg-height: var(--size-control-lg);
  --sidebar-menu-button-lg-padding-x: var(--space-8);
  --sidebar-menu-button-title-font-size: var(--type-label-size);
  --sidebar-menu-button-title-line-height: var(--type-label-line);
  --sidebar-menu-button-title-font-weight: var(--type-label-weight);
  --sidebar-menu-button-lg-font-size: var(--type-body-size);
  --sidebar-menu-button-icon: var(--size-icon-md);
  --sidebar-visually-hidden-width: var(--border-width);
  --sidebar-visually-hidden-height: var(--border-width);
  --sidebar-group-label-padding-x: var(--space-8);
  --sidebar-group-gap: var(--space-8);
  --sidebar-sub-padding-x: var(--space-8);
  --sidebar-sub-offset: var(--space-20);
  --sidebar-sub-border-width: var(--border-width);
  --sidebar-sub-line: var(--color-ui-line);
  --sidebar-menu-button-description-font-size: var(--type-caption-size);
  --sidebar-menu-button-description-line-height: var(--type-caption-line);
  --sidebar-menu-button-content-gap: var(--space-text);
  --sidebar-frame-height: var(--size-panel-lg);
  --sidebar-frame-surface: var(--color-config-screen); /* lint-allow */
  --sidebar-separator-height: var(--border-width);
}

/* @component combobox */
:root {
  --combobox-gap: var(--space-6);
  --combobox-control-min-width: var(--size-panel-sm);
  --combobox-control-min-height: var(--size-control-md);
  --combobox-control-padding: var(--space-4);
  --combobox-control-gap: var(--space-4);
  --combobox-control-radius: var(--radius-control);
  --combobox-control-surface: var(--color-interactive-neutral-surface);
  --combobox-control-content: var(--color-interactive-neutral-content);
  --combobox-input-placeholder-content: var(--color-interactive-neutral-placeholder);
  --combobox-control-line: var(--color-interactive-neutral-line);
  --combobox-control-line-focus: var(--color-interactive-primary-focus);
  --combobox-control-line-invalid: var(--color-sentiment-negative-line);
  --combobox-control-surface-disabled: var(--color-interactive-neutral-disabled);
  --combobox-control-content-disabled: var(--color-interactive-neutral-ondisabled);
  --combobox-control-border-width: var(--border-width);
  --combobox-input-min-width: var(--space-96);
  --combobox-trigger-width: var(--size-control-sm);
  --combobox-menu-min-width: var(--size-panel-sm);
  --combobox-menu-max-height: var(--size-panel-sm);
  --combobox-menu-padding: var(--space-4);
  --combobox-menu-offset: var(--space-4);
  --combobox-menu-radius: var(--radius-panel);
  --combobox-menu-surface: var(--color-ui-elevated);
  --combobox-menu-line: var(--color-ui-line);
  --combobox-menu-shadow: var(--shadow-overlay);
  --combobox-menu-border-width: var(--border-width);
  --combobox-item-height: var(--size-row-compact);
  --combobox-item-padding-x: var(--space-8);
  --combobox-item-gap: var(--space-8);
  --combobox-item-radius: var(--radius-control);
  --combobox-item-content: var(--color-ui-content);
  --combobox-item-supportive: var(--color-ui-supportive);
  --combobox-item-content-disabled: var(--color-interactive-neutral-ondisabled);
  --combobox-item-surface-hover: var(--color-interactive-neutral-hover);
  --combobox-item-font-size: var(--type-body-size);
  --combobox-label-font-size: var(--type-label-size);
  --combobox-label-font-weight: var(--type-label-weight);
  --combobox-label-padding-y: var(--space-6);
  --combobox-empty-padding: var(--space-24);
  --combobox-empty-supportive: var(--color-ui-supportive);
}

/* @component command */
:root {
  --command-width: var(--size-panel-md);
  --command-max-height: var(--size-panel-sm);
  --command-radius: var(--radius-panel);
  --command-surface: var(--color-ui-surface);
  --command-content: var(--color-ui-content);
  --command-input-placeholder-content: var(--color-interactive-neutral-placeholder);
  --command-line: var(--color-ui-line);
  --command-shadow: var(--shadow-panel);
  --command-border-width: var(--border-width);
  --command-line-focus: var(--color-interactive-primary-focus);
  --command-input-height: var(--size-control-md);
  --command-input-padding-x: var(--space-12);
  --command-input-line: var(--color-ui-line);
  --command-input-font-size: var(--type-body-size);
  --command-list-padding: var(--space-4);
  --command-group-padding-y: var(--space-4);
  --command-heading-padding-x: var(--space-8);
  --command-heading-padding-y: var(--space-6);
  --command-heading-supportive: var(--color-ui-supportive);
  --command-heading-font-size: var(--type-caption-size);
  --command-heading-font-weight: var(--type-label-weight);
  --command-item-height: var(--size-row-compact);
  --command-item-padding-x: var(--space-8);
  --command-item-gap: var(--space-8);
  --command-item-radius: var(--radius-control);
  --command-item-surface-hover: var(--color-interactive-neutral-hover);
  --command-item-content: var(--color-ui-content);
  --command-item-supportive: var(--color-ui-supportive);
  --command-item-font-size: var(--type-body-size);
  --command-separator-line: var(--color-ui-line);
  --command-separator-height: var(--border-width);
  --command-empty-padding: var(--space-24);
  --command-empty-supportive: var(--color-ui-supportive);
}

/* @component input-otp */
:root {
  --input-otp-gap: var(--space-8);
  --input-otp-control-gap: var(--space-4);
  --input-otp-input-width: var(--size-control-md);
  --input-otp-input-height: var(--size-control-md);
  --input-otp-input-lg-width: var(--size-control-lg);
  --input-otp-input-lg-height: var(--size-control-lg);
  --input-otp-input-radius: var(--radius-control);
  --input-otp-input-surface: var(--color-interactive-neutral-surface);
  --input-otp-input-content: var(--color-interactive-neutral-content);
  --input-otp-input-line: var(--color-interactive-neutral-line);
  --input-otp-input-line-focus: var(--color-interactive-primary-focus);
  --input-otp-input-surface-disabled: var(--color-interactive-neutral-disabled);
  --input-otp-input-content-disabled: var(--color-interactive-neutral-ondisabled);
  --input-otp-input-border-width: var(--border-width);
  --input-otp-input-font-size: var(--type-title-size);
  --input-otp-input-font-weight: var(--type-title-weight);
  --input-otp-separator-width: var(--space-12);
  --input-otp-separator-line: var(--color-ui-supportive);
  --input-otp-input-placeholder-content: var(--color-interactive-neutral-placeholder);
}

/* @component slider */
:root {
  --slider-width: var(--size-panel-sm);
  --slider-vertical-height: var(--size-panel-sm);
  --slider-gap: var(--space-8);
  --slider-control-height: var(--space-20);
  --slider-track-height: var(--space-4);
  --slider-track-radius: var(--radius-pill);
  --slider-track-surface: var(--color-interactive-neutral-hover);
  --slider-range-surface: var(--color-interactive-primary-surface);
  --slider-thumb-width: var(--space-20);
  --slider-thumb-height: var(--space-20);
  --slider-thumb-radius: var(--radius-pill);
  --slider-thumb-surface: var(--color-interactive-neutral-surface);
  --slider-thumb-line: var(--color-interactive-primary-surface);
  --slider-thumb-line-focus: var(--color-interactive-primary-focus);
  --slider-thumb-surface-disabled: var(--color-interactive-neutral-disabled);
  --slider-thumb-shadow: var(--shadow-panel);
  --slider-thumb-border-width: var(--border-width);
  --slider-label-content: var(--color-ui-content);
  --slider-label-font-size: var(--type-label-size);
  --slider-label-font-weight: var(--type-label-weight);
  --slider-marker-supportive: var(--color-ui-supportive);
  --slider-marker-font-size: var(--type-caption-size);
  --slider-marker-offset: var(--space-12);
}

/* @component toggle */
:root {
  --toggle-radius: var(--radius-control);
  --toggle-border-width: var(--border-width);
  --toggle-font-weight: var(--type-label-weight);
  --toggle-line-focus: var(--color-interactive-primary-focus);
  --toggle-default-surface: transparent;
  --toggle-default-surface-hover: var(--color-interactive-neutral-hover);
  --toggle-default-surface-checked: var(--color-interactive-neutral-pressed);
  --toggle-default-content: var(--color-interactive-neutral-content);
  --toggle-default-line: transparent;
  --toggle-outline-surface: transparent;
  --toggle-outline-surface-hover: var(--color-interactive-neutral-hover);
  --toggle-outline-surface-checked: var(--color-interactive-neutral-pressed);
  --toggle-outline-content: var(--color-interactive-neutral-content);
  --toggle-outline-line: var(--color-interactive-neutral-line);
  --toggle-surface-disabled: var(--color-interactive-neutral-disabled);
  --toggle-content-disabled: var(--color-interactive-neutral-ondisabled);
  --toggle-sm-height: var(--size-control-sm);
  --toggle-sm-padding-x: var(--space-8);
  --toggle-sm-gap: var(--space-4);
  --toggle-sm-font-size: var(--type-label-size);
  --toggle-md-height: var(--size-control-md);
  --toggle-md-padding-x: var(--space-12);
  --toggle-md-gap: var(--space-6);
  --toggle-md-font-size: var(--type-label-size);
  --toggle-lg-height: var(--size-control-lg);
  --toggle-lg-padding-x: var(--space-16);
  --toggle-lg-gap: var(--space-8);
  --toggle-lg-font-size: var(--type-label-size);
  --toggle-sm-icon: var(--size-icon-sm);
  --toggle-md-icon: var(--size-icon-md);
  --toggle-lg-icon: var(--size-icon-lg);
}

/* @component toggle-group */
:root {
  --toggle-group-gap: var(--space-4);
  --toggle-group-border-width: var(--border-width);
}

/* @component calendar */
:root {
  --calendar-surface: var(--color-ui-surface);
  --calendar-content: var(--color-ui-content);
  --calendar-supportive: var(--color-ui-supportive);
  --calendar-line: var(--color-ui-line);
  --calendar-content-disabled: var(--color-interactive-neutral-ondisabled);
  --calendar-selected-surface: var(--color-interactive-primary-surface);
  --calendar-selected-content: var(--color-interactive-primary-content);
  --calendar-range-surface: var(--color-interactive-neutral-pressed);
  --calendar-cell-surface-hover: var(--color-interactive-neutral-hover);
  --calendar-focus-line: var(--color-interactive-primary-focus);
  --calendar-radius: var(--radius-panel);
  --calendar-padding: var(--space-12);
  --calendar-gap: var(--space-4);
  --calendar-cell-width: var(--size-control-sm);
  --calendar-cell-height: var(--size-control-sm);
  --calendar-font-size: var(--type-body-size);
  --calendar-border-width: var(--border-width);
}

/* @component date-picker */
:root {
  --date-picker-surface: var(--color-interactive-neutral-surface);
  --date-picker-content-surface: var(--color-ui-elevated);
  --date-picker-content: var(--color-ui-content);
  --date-picker-input-placeholder-content: var(--color-interactive-neutral-placeholder);
  --date-picker-supportive: var(--color-ui-supportive);
  --date-picker-line: var(--color-ui-line);
  --date-picker-surface-disabled: var(--color-interactive-neutral-disabled);
  --date-picker-content-disabled: var(--color-interactive-neutral-ondisabled);
  --date-picker-line-focus: var(--color-interactive-primary-focus);
  --date-picker-selected-surface: var(--color-interactive-primary-surface);
  --date-picker-selected-content: var(--color-interactive-primary-content);
  --date-picker-range-surface: var(--color-interactive-neutral-pressed);
  --date-picker-radius: var(--radius-panel);
  --date-picker-padding: var(--space-12);
  --date-picker-gap: var(--space-4);
  --date-picker-input-height: var(--size-control-md);
  --date-picker-input-lg-height: var(--size-control-lg);
  --date-picker-input-lg-padding: var(--space-16);
  --date-picker-cell-width: var(--size-control-sm);
  --date-picker-cell-height: var(--size-control-sm);
  --date-picker-font-size: var(--type-body-size);
  --date-picker-border-width: var(--border-width);
  --date-picker-content-shadow: var(--shadow-overlay);
  --date-picker-content-offset: var(--space-4);
}

/* @component carousel */
:root {
  --carousel-surface: var(--color-ui-container);
  --carousel-content: var(--color-ui-content);
  --carousel-supportive: var(--color-ui-supportive);
  --carousel-line: var(--color-ui-line);
  --carousel-indicator-surface: var(--color-ui-line);
  --carousel-indicator-surface-selected: var(--color-interactive-primary-surface);
  --carousel-line-focus: var(--color-interactive-primary-focus);
  --carousel-radius: var(--radius-panel);
  --carousel-padding: var(--space-16);
  --carousel-gap: var(--space-8);
  --carousel-controls-gap: var(--space-actions-tight);
  --carousel-height: calc(var(--space-96) * 2);
  --carousel-vertical-height: var(--size-panel-sm);
  --carousel-indicator-width: var(--space-8);
  --carousel-indicator-height: var(--space-8);
  --carousel-border-width: var(--border-width);
}

/* @component resizable */
:root {
  --resizable-surface: var(--color-ui-container);
  --resizable-content: var(--color-ui-content);
  --resizable-supportive: var(--color-ui-supportive);
  --resizable-line: var(--color-ui-line);
  --resizable-trigger-surface-hover: var(--color-interactive-neutral-hover);
  --resizable-trigger-surface-active: var(--color-interactive-neutral-pressed);
  --resizable-line-focus: var(--color-interactive-primary-focus);
  --resizable-radius: var(--radius-panel);
  --resizable-height: calc(var(--space-64) * 4);
  --resizable-panel-padding: var(--space-16);
  --resizable-trigger-width: var(--space-8);
  --resizable-trigger-height: var(--space-8);
  --resizable-border-width: var(--border-width);
}

/* @component toast */
:root {
  --toast-surface: var(--color-ui-elevated);
  --toast-content: var(--color-ui-content);
  --toast-supportive: var(--color-ui-supportive);
  --toast-line: var(--color-ui-line);
  --toast-success-line: var(--color-sentiment-positive-line);
  --toast-warning-line: var(--color-sentiment-warning-line);
  --toast-error-line: var(--color-sentiment-negative-line);
  --toast-loading-line: var(--color-interactive-primary-line);
  --toast-radius: var(--radius-panel);
  --toast-padding: var(--space-panel-tight);
  --toast-gap: var(--space-8);
  --toast-width: var(--size-panel-sm);
  --toast-shadow: var(--shadow-overlay);
  --toast-border-width: var(--border-width);
  --toast-title-font-weight: var(--type-label-weight);
  --toast-description-font-size: var(--type-caption-size);
  --toast-icon: var(--size-icon-md);
  --toast-offset: var(--space-16);
}

/* @component attachment */
:root {
  --attachment-surface: transparent;
  --attachment-content: var(--color-ui-content);
  --attachment-supportive: var(--color-ui-supportive);
  --attachment-line: var(--color-ui-line);
  --attachment-line-focus: var(--color-interactive-primary-focus);
  --attachment-error-line: var(--color-sentiment-negative-alt-line);
  --attachment-error-content: var(--color-sentiment-negative-alt-content);
  --attachment-progress-surface: var(--color-interactive-primary-surface);
  --attachment-radius: var(--radius-control);
  --attachment-padding: var(--space-12);
  --attachment-sm-padding: var(--space-6);
  --attachment-md-padding: var(--space-8);
  --attachment-gap: var(--space-12);
  --attachment-sm-gap: var(--space-6);
  --attachment-actions-gap: var(--space-actions-tight);
  --attachment-md-gap: var(--space-8);
  --attachment-content-gap: var(--space-text);
  --attachment-media-width: var(--size-control-lg);
  --attachment-sm-media-width: var(--size-control-sm);
  --attachment-md-media-width: var(--size-control-md);
  --attachment-border-width: var(--border-width);
  --attachment-font-size: var(--type-body-size);
  --attachment-sm-font-size: var(--type-caption-size);
  --attachment-title-font-weight: var(--type-label-weight);
  --attachment-group-width: var(--size-panel-sm);
}

/* @component bubble */
:root {
  --bubble-default-surface: var(--color-interactive-primary-surface);
  --bubble-default-content: var(--color-interactive-primary-content);
  --bubble-secondary-surface: var(--color-interactive-secondary-surface);
  --bubble-secondary-content: var(--color-interactive-secondary-content);
  --bubble-muted-surface: var(--color-interactive-neutral-pressed);
  --bubble-muted-content: var(--color-ui-supportive);
  --bubble-tinted-surface: var(--color-interactive-neutral-pressed);
  --bubble-tinted-content: var(--color-ui-content);
  --bubble-outline-surface: var(--color-ui-container);
  --bubble-outline-content: var(--color-ui-content);
  --bubble-outline-line: var(--color-ui-line);
  --bubble-ghost-surface: var(--color-ui-surface);
  --bubble-ghost-content: var(--color-ui-content);
  --bubble-destructive-surface: var(--color-sentiment-negative-surface);
  --bubble-destructive-content: var(--color-sentiment-negative-content);
  --bubble-radius: var(--radius-panel);
  --bubble-padding-x: var(--space-12);
  --bubble-padding-y: var(--space-8);
  --bubble-gap: var(--space-6);
  --bubble-max-width: var(--size-panel-md);
  --bubble-border-width: var(--border-width);
}

/* @component marker */
:root {
  --marker-content: var(--color-ui-supportive);
  --marker-content-hover: var(--color-ui-content);
  --marker-line: var(--color-ui-line);
  --marker-line-focus: var(--color-interactive-primary-focus);
  --marker-gap: var(--space-8);
  --marker-padding-y: var(--space-8);
  --marker-font-size: var(--type-body-size);
  --marker-icon: var(--size-icon-sm);
  --marker-border-width: var(--border-width);
  --marker-separator-gap: var(--space-component-tight);
  --marker-separator-font-size: var(--type-body-size);
  --marker-separator-line-height: var(--type-body-line);
}

/* @component message */
:root {
  --message-content: var(--color-ui-content);
  --message-supportive: var(--color-ui-supportive);
  --message-gap: var(--space-8);
  --message-actions-gap: var(--space-actions-tight);
  --message-group-gap: var(--space-12);
  --message-avatar-width: var(--size-control-md);
}

/* @component message-scroller */
:root {
  --message-scroller-surface: var(--color-ui-surface);
  --message-scroller-content: var(--color-ui-content);
  --message-scroller-line: var(--color-ui-line);
  --message-scroller-line-focus: var(--color-interactive-primary-focus);
  --message-scroller-height: var(--size-panel-sm);
  --message-scroller-padding: var(--space-16);
  --message-scroller-gap: var(--space-16);
  --message-scroller-border-width: var(--border-width);
  --message-scroller-radius: var(--radius-panel);
}

/* @component questionnaire */
:root {
  --questionnaire-content: var(--color-ui-content);
  --questionnaire-supportive: var(--color-ui-supportive);
  --questionnaire-invalid-content: var(--color-sentiment-negative-alt-content);
  --questionnaire-gap: var(--space-16);
  --questionnaire-title-gap: var(--space-title);
  --questionnaire-options-gap: var(--space-8);
  --questionnaire-actions-gap: var(--space-actions);
  --questionnaire-max-width: var(--size-panel-md);
}

/* @component data-table */
:root {
  --data-table-surface: transparent;
  --data-table-content: var(--color-ui-content);
  --data-table-supportive: var(--color-ui-supportive);
  --data-table-line: var(--color-ui-line);
  --data-table-surface-hover: var(--color-interactive-neutral-hover);
  --data-table-surface-selected: var(--color-interactive-neutral-pressed);
  --data-table-line-focus: var(--color-interactive-primary-focus);
  --data-table-radius: var(--radius-panel);
  --data-table-padding-x: var(--space-12);
  --data-table-padding-y: var(--space-8);
  --data-table-gap: var(--space-12);
  --data-table-actions-gap: var(--space-actions);
  --data-table-height: var(--size-control-md);
  --data-table-border-width: var(--border-width);
  --data-table-font-size: var(--type-body-size);
  --data-table-heading-font-weight: var(--type-label-weight);
  --data-table-min-width: var(--size-panel-lg);
}

/* @tier primitives */

:root {
  /* color: base */
  --white: #ffffff;
  --black: #000000;

  /* color: gray (zinc) */
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-750: #333338;
  --gray-800: #27272a;
  --gray-850: #1f1f22;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* color: blue (accent) */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;

  /* color: violet */
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;

  /* color: green (positive) */
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;

  /* color: amber (warning) */
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;
  --amber-950: #451a03;

  /* color: red (negative) */
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --red-950: #450a0a;

  /* color: sky (info) */
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;

  /* type */
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-30: 30px;
  --text-36: 36px;

  --leading-16: 16px;
  --leading-20: 20px;
  --leading-24: 24px;
  --leading-28: 28px;
  --leading-32: 32px;
  --leading-36: 36px;
  --leading-40: 40px;

  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;

  /* size */
  --size-0: 0px;
  --size-1: 1px;
  --size-2: 2px;
  --size-4: 4px;
  --size-6: 6px;
  --size-8: 8px;
  --size-10: 10px;
  --size-12: 12px;
  --size-14: 14px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-44: 44px;
  --size-48: 48px;
  --size-56: 56px;
  --size-64: 64px;
  --size-80: 80px;
  --size-96: 96px;
  --size-128: 128px;
  --size-160: 160px;
  --size-192: 192px;
  --size-256: 256px;
  --size-320: 320px;
  --size-384: 384px;
  --size-448: 448px;
  --size-512: 512px;
  --size-640: 640px;
  --size-768: 768px;

  /* radius */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 9999px;

  /* border */
  --border-1: 1px;
  --border-2: 2px;

  /* shadow */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.01);
  --shadow-2: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 4px 8px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-4: 0 8px 20px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-none: none;

  /* alpha */
  --black-alpha-backdrop: rgb(0 0 0 / 0.5);
  --black-alpha-line: rgb(9 9 11 / 0.11);
  --white-alpha-line: rgb(255 255 255 / 0.11);
}