/**
 * Design System - Component Tokens
 * Auto-generated - Do not edit directly
 *
 * Contains: Patterns + Component layers
 * Requires: build/core/variables.css loaded first
 */

/* ============================================
   PATTERNS LAYER
   Component patterns (shared base tokens)
   ============================================ */
:root {
  /* pattern.button — Interactive element for triggering actions. Use for form submissions, dialogs, navigation.  Must be keyboard accessible with visible focus state. */
  --pattern-button-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-button-base-tokens-padding-y: var(--semantic-spacing-inset-xs);
  --pattern-button-base-tokens-border-radius: var(--primitive-radius-full);
  --pattern-button-base-tokens-border-width: var(--primitive-border-width-regular);
  --pattern-button-base-tokens-icon-size: var(--primitive-icon-size-md);
  --pattern-button-base-tokens-icon-stroke: var(--primitive-icon-stroke-regular);
  --pattern-button-base-tokens-gap: var(--semantic-spacing-inline-sm);
  --pattern-button-base-tokens-min-height: 37px;
  --pattern-button-base-tokens-font-family: var(--semantic-typography-label-md-font-family);
  --pattern-button-base-tokens-font-size: var(--semantic-typography-label-md-font-size);
  --pattern-button-base-tokens-font-weight: var(--semantic-typography-label-md-font-weight);
  --pattern-button-base-tokens-line-height: var(--semantic-typography-label-md-line-height);
  --pattern-button-base-tokens-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --pattern-button-base-tokens-text-transform: var(--semantic-typography-label-md-text-transform);
  --pattern-button-base-tokens-transition: var(--semantic-transition-color);
  --pattern-button-properties-display: inline-flex;
  --pattern-button-properties-align-items: center;
  --pattern-button-properties-justify-content: center;
  --pattern-button-properties-cursor: pointer;
  --pattern-button-properties-border-style: solid;
  --pattern-button-properties-user-select: none;
  --pattern-button-properties-white-space: nowrap;
  --pattern-button-properties-overflow: hidden;
  --pattern-button-properties-text-overflow: ellipsis;
  --pattern-button-properties-min-width: 140px;
  --pattern-button-properties-max-width: none;
  --pattern-button-layout-modes-0: label-only;
  --pattern-button-layout-modes-1: icon-only;
  --pattern-button-layout-modes-2: icon-left;
  --pattern-button-layout-modes-3: icon-right;
  /* pattern.button.layout-mode-definitions.label-only — Text label only, no icon displayed */
  /* pattern.button.layout-mode-definitions.icon-only — Icon only, no visible label. Button renders as square (width equals min-height). Requires aria-label for accessibility. */
  --pattern-button-layout-mode-definitions-icon-only-justify-content: center;
  /* pattern.button.layout-mode-definitions.icon-left — Icon displayed before (left of) the text label */
  --pattern-button-layout-mode-definitions-icon-left-icon-position: before;
  /* pattern.button.layout-mode-definitions.icon-right — Icon displayed after (right of) the text label */
  --pattern-button-layout-mode-definitions-icon-right-icon-position: after;
  --pattern-button-variants-0: primary;
  --pattern-button-variants-1: secondary;
  --pattern-button-variants-2: ghost;
  --pattern-button-variants-3: destructive;
  --pattern-button-sizes-0: sm;
  --pattern-button-sizes-1: md;
  --pattern-button-sizes-2: lg;
  /* pattern.badge — Static display label for status indicators, categories, and metadata. Non-interactive - use Tag for dismissible badges or Chip for selectable/toggleable badges. */
  --pattern-badge-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-badge-base-tokens-padding-y: var(--semantic-spacing-inset-xs);
  --pattern-badge-base-tokens-border-radius: var(--primitive-radius-full);
  --pattern-badge-base-tokens-border-width: var(--primitive-border-width-regular);
  --pattern-badge-base-tokens-icon-size: var(--primitive-icon-size-md);
  --pattern-badge-base-tokens-icon-stroke: var(--primitive-icon-stroke-bold);
  --pattern-badge-base-tokens-gap: var(--semantic-spacing-inline-xs);
  --pattern-badge-base-tokens-min-height: 24px;
  --pattern-badge-base-tokens-_custom-height: 24px;
  --pattern-badge-base-tokens-font-family: var(--semantic-typography-code-block-font-family);
  --pattern-badge-base-tokens-font-size: var(--semantic-typography-code-block-font-size);
  --pattern-badge-base-tokens-font-weight: var(--semantic-typography-code-block-font-weight);
  --pattern-badge-base-tokens-line-height: var(--semantic-typography-code-block-line-height);
  --pattern-badge-base-tokens-letter-spacing: var(--semantic-typography-code-block-letter-spacing);
  --pattern-badge-base-tokens-text-transform: var(--semantic-typography-code-block-text-transform);
  --pattern-badge-properties-display: inline-flex;
  --pattern-badge-properties-align-items: center;
  --pattern-badge-properties-user-select: none;
  --pattern-badge-properties-white-space: nowrap;
  --pattern-badge-properties-min-width: none;
  --pattern-badge-properties-max-width: none;
  --pattern-badge-properties-overflow: hidden;
  --pattern-badge-properties-border-style: solid;
  --pattern-badge-properties-text-overflow: ellipsis;
  --pattern-badge-properties-justify-content: center;
  --pattern-badge-layout-modes-0: label-only;
  --pattern-badge-layout-modes-1: icon-left;
  --pattern-badge-layout-modes-2: icon-right;
  --pattern-badge-layout-modes-3: icon-only;
  /* pattern.badge.layout-mode-definitions.label-only — Text label only, no icon displayed */
  /* pattern.badge.layout-mode-definitions.icon-only — Icon only, no visible label. Badge renders with 1:1 aspect ratio (width equals min-height). Consider adding title attribute for tooltip context. */
  --pattern-badge-layout-mode-definitions-icon-only-justify-content: center;
  /* pattern.badge.layout-mode-definitions.icon-left — Icon displayed before (left of) the text label */
  --pattern-badge-layout-mode-definitions-icon-left-icon-position: before;
  /* pattern.badge.layout-mode-definitions.icon-right — Icon displayed after (right of) the text label */
  --pattern-badge-layout-mode-definitions-icon-right-icon-position: after;
  --pattern-badge-variants-0: neutral;
  --pattern-badge-variants-1: primary;
  --pattern-badge-variants-2: secondary;
  --pattern-badge-variants-3: tertiary;
  --pattern-badge-variants-4: success;
  --pattern-badge-variants-5: warning;
  --pattern-badge-variants-6: error;
  --pattern-badge-variants-7: info;
  --pattern-badge-sizes-0: sm;
  --pattern-badge-sizes-1: md;
  /* pattern.text-input — Text entry field for forms and data input. Two structural variants: single-line (input element) and multi-line (textarea element). Must have associated label (visible or aria-label). Focus state uses semantic focus tokens. Error state should include aria-invalid and associated error message with aria-describedby. */
  --pattern-text-input-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-text-input-base-tokens-padding-y: var(--primitive-spacing-zero);
  --pattern-text-input-base-tokens-border-radius: var(--primitive-radius-xl);
  --pattern-text-input-base-tokens-border-width: var(--primitive-border-width-regular);
  --pattern-text-input-base-tokens-min-height: 37px;
  --pattern-text-input-base-tokens-_custom-height: 37px;
  --pattern-text-input-base-tokens-font-family: var(--semantic-typography-body-sm-font-family);
  --pattern-text-input-base-tokens-font-size: var(--semantic-typography-body-sm-font-size);
  --pattern-text-input-base-tokens-font-weight: var(--semantic-typography-body-sm-font-weight);
  --pattern-text-input-base-tokens-line-height: var(--semantic-typography-body-sm-line-height);
  --pattern-text-input-base-tokens-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --pattern-text-input-base-tokens-text-transform: var(--semantic-typography-body-sm-text-transform);
  --pattern-text-input-base-tokens-transition: var(--semantic-transition-fast);
  --pattern-text-input-base-tokens-icon-size: var(--primitive-icon-size-sm);
  --pattern-text-input-base-tokens-icon-stroke: var(--primitive-icon-stroke-regular);
  --pattern-text-input-base-tokens-gap: var(--semantic-spacing-inline-sm);
  --pattern-text-input-properties-display: flex;
  --pattern-text-input-properties-align-items: center;
  --pattern-text-input-properties-width: 100%;
  --pattern-text-input-properties-border-style: solid;
  --pattern-text-input-properties-outline: none;
  --pattern-text-input-properties-min-width: none;
  --pattern-text-input-properties-max-width: 422px;
  --pattern-text-input-layout-modes-0: label-only;
  --pattern-text-input-layout-modes-1: icon-left;
  --pattern-text-input-layout-modes-2: icon-right;
  /* pattern.text-input.layout-mode-definitions.icon-left — Icon displayed at the start (left) of the input. Content aligns to the start. */
  --pattern-text-input-layout-mode-definitions-icon-left-icon-position: before;
  --pattern-text-input-layout-mode-definitions-icon-left-justify-content: flex-start;
  /* pattern.text-input.layout-mode-definitions.icon-right — Icon displayed at the end (right) of the input. Label on left, icon on right. */
  --pattern-text-input-layout-mode-definitions-icon-right-icon-position: after;
  --pattern-text-input-layout-mode-definitions-icon-right-justify-content: space-between;
  /* pattern.text-input.layout-mode-definitions.label-only — Input field only, no icon displayed */
  --pattern-text-input-layout-mode-definitions-label-only-justify-content: flex-start;
  --pattern-text-input-sizes-0: sm;
  --pattern-text-input-sizes-1: md;
  /* pattern.card — Container for grouping related content. Three variants: default (bordered), elevated (shadow), interactive (hover/active states). Supports header, body, and footer composition. */
  --pattern-card-base-tokens-padding: var(--semantic-spacing-inset-lg);
  --pattern-card-base-tokens-border-radius: var(--primitive-radius-lg);
  --pattern-card-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-card-base-tokens-shadow: var(--primitive-shadow-elevation-1);
  --pattern-card-base-tokens-header-text-style: var(--semantic-typography-heading-h3);
  --pattern-card-base-tokens-body-text-style: var(--semantic-typography-body-md);
  --pattern-card-base-tokens-section-gap: var(--semantic-spacing-stack-lg);
  --pattern-card-properties-display: flex;
  --pattern-card-properties-flex-direction: column;
  --pattern-card-properties-border-style: solid;
  --pattern-card-properties-overflow: hidden;
  --pattern-card-properties-min-width: none;
  --pattern-card-properties-max-width: 100%;
  --pattern-card-variants-0: default;
  --pattern-card-variants-1: elevated;
  --pattern-card-variants-2: interactive;
  --pattern-card-sizes-0: sm;
  --pattern-card-sizes-1: md;
  --pattern-card-sizes-2: lg;
  /* pattern.checkbox — Boolean selection control with square container and checkmark indicator. Supports checked and disabled states with label positioning. */
  --pattern-checkbox-base-tokens-container-size: 20px;
  --pattern-checkbox-base-tokens-container-radius: var(--primitive-radius-sm);
  --pattern-checkbox-base-tokens-container-border-width: var(--primitive-border-width-thin);
  --pattern-checkbox-base-tokens-indicator-size: var(--primitive-icon-size-xs);
  --pattern-checkbox-base-tokens-gap: var(--semantic-spacing-inline-sm);
  --pattern-checkbox-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-checkbox-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-checkbox-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-checkbox-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-checkbox-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-checkbox-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-checkbox-properties-display: inline-flex;
  --pattern-checkbox-properties-align-items: center;
  --pattern-checkbox-properties-cursor: pointer;
  --pattern-checkbox-properties-user-select: none;
  --pattern-checkbox-layout-modes-0: control-only;
  --pattern-checkbox-layout-modes-1: label-left;
  --pattern-checkbox-layout-modes-2: label-right;
  /* pattern.checkbox.layout-mode-definitions.control-only — Checkbox control without label */
  /* pattern.checkbox.layout-mode-definitions.label-left — Label positioned before the checkbox */
  /* pattern.checkbox.layout-mode-definitions.label-right — Label positioned after the checkbox (default) */
  --pattern-checkbox-sizes-0: sm;
  --pattern-checkbox-sizes-1: md;
  /* pattern.radio — Single-selection control. Circular container with dot indicator. Always fully circular — no radius token needed. */
  --pattern-radio-base-tokens-container-size: 20px;
  --pattern-radio-base-tokens-container-border-width: var(--primitive-border-width-thin);
  --pattern-radio-base-tokens-indicator-size: 10px;
  --pattern-radio-base-tokens-gap: var(--semantic-spacing-inline-sm);
  --pattern-radio-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-radio-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-radio-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-radio-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-radio-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-radio-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-radio-properties-display: inline-flex;
  --pattern-radio-properties-align-items: center;
  --pattern-radio-properties-cursor: pointer;
  --pattern-radio-properties-user-select: none;
  --pattern-radio-properties-border-radius: 50%;
  --pattern-radio-layout-modes-0: control-only;
  --pattern-radio-layout-modes-1: label-left;
  --pattern-radio-layout-modes-2: label-right;
  /* pattern.radio.layout-mode-definitions.control-only — Radio control without label */
  /* pattern.radio.layout-mode-definitions.label-left — Label positioned before the radio */
  /* pattern.radio.layout-mode-definitions.label-right — Label positioned after the radio (default) */
  --pattern-radio-sizes-0: sm;
  --pattern-radio-sizes-1: md;
  /* pattern.switch — Binary on/off switch control. Pill-shaped track with sliding thumb. Supports checked, disabled, and variant states (default, success, destructive). */
  --pattern-switch-base-tokens-track-width: 40px;
  --pattern-switch-base-tokens-track-height: 24px;
  --pattern-switch-base-tokens-track-radius: var(--primitive-radius-full);
  --pattern-switch-base-tokens-track-border-width: var(--primitive-border-width-none);
  --pattern-switch-base-tokens-thumb-size: 20px;
  --pattern-switch-base-tokens-thumb-radius: var(--primitive-radius-full);
  --pattern-switch-base-tokens-gap: var(--semantic-spacing-inline-sm);
  --pattern-switch-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-switch-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-switch-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-switch-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-switch-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-switch-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-switch-properties-display: inline-flex;
  --pattern-switch-properties-align-items: center;
  --pattern-switch-properties-cursor: pointer;
  --pattern-switch-properties-user-select: none;
  --pattern-switch-layout-modes-0: control-only;
  --pattern-switch-layout-modes-1: label-left;
  --pattern-switch-layout-modes-2: label-right;
  /* pattern.switch.layout-mode-definitions.control-only — Switch control without label */
  /* pattern.switch.layout-mode-definitions.label-left — Label positioned before the switch */
  /* pattern.switch.layout-mode-definitions.label-right — Label positioned after the switch (default) */
  --pattern-switch-sizes-0: sm;
  --pattern-switch-sizes-1: md;
  /* pattern.slider — Horizontal slider with track, fill, and draggable thumb. Supports sm/md sizes. Single default variant. */
  --pattern-slider-base-tokens-track-height: 24px;
  --pattern-slider-base-tokens-track-radius: var(--primitive-radius-full);
  --pattern-slider-base-tokens-track-border-width: var(--primitive-border-width-thin);
  --pattern-slider-base-tokens-thumb-size: 20px;
  --pattern-slider-base-tokens-thumb-radius: var(--primitive-radius-full);
  --pattern-slider-properties-display: inline-flex;
  --pattern-slider-properties-align-items: center;
  --pattern-slider-properties-cursor: pointer;
  --pattern-slider-properties-user-select: none;
  --pattern-slider-properties-min-width: none;
  --pattern-slider-properties-max-width: 100%;
  /* pattern.tooltip — Floating label that appears on hover/focus to provide supplementary information. Inverted color scheme for high contrast. */
  --pattern-tooltip-base-tokens-padding-x: var(--semantic-spacing-inset-sm);
  --pattern-tooltip-base-tokens-padding-y: var(--semantic-spacing-inset-xs);
  --pattern-tooltip-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-tooltip-base-tokens-arrow-size: var(--primitive-spacing-sm);
  --pattern-tooltip-base-tokens-offset: var(--primitive-spacing-sm);
  --pattern-tooltip-base-tokens-font-family: var(--semantic-typography-label-xs-font-family);
  --pattern-tooltip-base-tokens-font-size: var(--semantic-typography-label-xs-font-size);
  --pattern-tooltip-base-tokens-font-weight: var(--semantic-typography-label-xs-font-weight);
  --pattern-tooltip-base-tokens-line-height: var(--semantic-typography-label-xs-line-height);
  --pattern-tooltip-base-tokens-letter-spacing: var(--semantic-typography-label-xs-letter-spacing);
  --pattern-tooltip-base-tokens-text-transform: var(--semantic-typography-label-xs-text-transform);
  --pattern-tooltip-properties-white-space: nowrap;
  --pattern-tooltip-properties-pointer-events: none;
  --pattern-tooltip-properties-z-index: 9999;
  --pattern-tooltip-properties-min-width: none;
  --pattern-tooltip-properties-max-width: none;
  --pattern-tooltip-properties-min-height: none;
  /* pattern.text-area — Multi-line text entry field for longer content: comments, descriptions, messages. Supports states (default, focus, error, disabled). Must have an associated label. */
  --pattern-text-area-base-tokens-padding-x: var(--semantic-spacing-inset-sm);
  --pattern-text-area-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-text-area-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-text-area-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-text-area-base-tokens-min-height: 49px;
  --pattern-text-area-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-text-area-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-text-area-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-text-area-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-text-area-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-text-area-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-text-area-base-tokens-transition: var(--semantic-transition-fast);
  --pattern-text-area-properties-display: block;
  --pattern-text-area-properties-width: 100%;
  --pattern-text-area-properties-border-style: solid;
  --pattern-text-area-properties-outline: none;
  --pattern-text-area-properties-resize: vertical;
  --pattern-text-area-properties-min-width: none;
  --pattern-text-area-properties-max-width: 100%;
  --pattern-text-area-sizes-0: sm;
  --pattern-text-area-sizes-1: md;
  /* pattern.avatar — Circular avatar for user/entity representation. Displays image or fallback initials. Multiple color variants and sizes. */
  --pattern-avatar-base-tokens-size: 40px;
  --pattern-avatar-base-tokens-border-radius: var(--primitive-radius-full);
  --pattern-avatar-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-avatar-base-tokens-font-family: var(--semantic-typography-label-md-font-family);
  --pattern-avatar-base-tokens-font-size: var(--semantic-typography-label-md-font-size);
  --pattern-avatar-base-tokens-font-weight: var(--semantic-typography-label-md-font-weight);
  --pattern-avatar-base-tokens-line-height: var(--semantic-typography-label-md-line-height);
  --pattern-avatar-base-tokens-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --pattern-avatar-base-tokens-text-transform: var(--semantic-typography-label-md-text-transform);
  --pattern-avatar-properties-display: inline-flex;
  --pattern-avatar-properties-align-items: center;
  --pattern-avatar-properties-justify-content: center;
  --pattern-avatar-properties-flex-shrink: 0;
  --pattern-avatar-properties-overflow: hidden;
  --pattern-avatar-variants-0: primary;
  --pattern-avatar-variants-1: neutral;
  --pattern-avatar-variants-2: secondary;
  --pattern-avatar-sizes-0: sm;
  --pattern-avatar-sizes-1: md;
  --pattern-avatar-sizes-2: lg;
  --pattern-avatar-sizes-3: xl;
  /* pattern.divider — Horizontal rule for separating content sections. Two style variants controlling border weight and color. */
  --pattern-divider-base-tokens-spacing-top: var(--semantic-spacing-stack-md);
  --pattern-divider-base-tokens-spacing-bottom: var(--semantic-spacing-stack-md);
  --pattern-divider-properties-border: none;
  --pattern-divider-properties-padding: 0;
  --pattern-divider-properties-background: transparent;
  --pattern-divider-variants-0: subtle;
  --pattern-divider-variants-1: strong;
  /* pattern.tab-bar — Tabbed navigation bar. Two-part structure: container (track) and tab (button). Active tab highlighted with background color. Supports sm/md sizes. */
  --pattern-tab-bar-container-base-tokens-padding: var(--semantic-spacing-inset-xs);
  --pattern-tab-bar-container-base-tokens-border-radius: var(--primitive-radius-lg);
  --pattern-tab-bar-container-base-tokens-gap: var(--semantic-spacing-inline-xs);
  --pattern-tab-bar-container-properties-display: inline-flex;
  --pattern-tab-bar-container-properties-align-items: center;
  --pattern-tab-bar-container-properties-flex-wrap: nowrap;
  --pattern-tab-bar-tab-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-tab-bar-tab-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-tab-bar-tab-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-tab-bar-tab-base-tokens-font-family: var(--semantic-typography-label-md-font-family);
  --pattern-tab-bar-tab-base-tokens-font-size: var(--semantic-typography-label-md-font-size);
  --pattern-tab-bar-tab-base-tokens-font-weight: var(--semantic-typography-label-md-font-weight);
  --pattern-tab-bar-tab-base-tokens-line-height: var(--semantic-typography-label-md-line-height);
  --pattern-tab-bar-tab-base-tokens-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --pattern-tab-bar-tab-base-tokens-text-transform: var(--semantic-typography-label-md-text-transform);
  --pattern-tab-bar-tab-properties-display: inline-flex;
  --pattern-tab-bar-tab-properties-align-items: center;
  --pattern-tab-bar-tab-properties-justify-content: center;
  --pattern-tab-bar-tab-properties-cursor: pointer;
  --pattern-tab-bar-tab-properties-user-select: none;
  --pattern-tab-bar-tab-properties-white-space: nowrap;
  --pattern-tab-bar-sizes-0: sm;
  --pattern-tab-bar-sizes-1: md;
  /* pattern.select — Dropdown select with trigger button, floating panel, and option list. Three-part structure supporting sm/md sizes. */
  --pattern-select-trigger-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-select-trigger-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-select-trigger-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-select-trigger-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-select-trigger-base-tokens-icon-size: var(--primitive-icon-size-sm);
  --pattern-select-trigger-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-select-trigger-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-select-trigger-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-select-trigger-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-select-trigger-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-select-trigger-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-select-trigger-properties-display: inline-flex;
  --pattern-select-trigger-properties-align-items: center;
  --pattern-select-trigger-properties-cursor: pointer;
  --pattern-select-trigger-properties-border-style: solid;
  --pattern-select-trigger-properties-user-select: none;
  --pattern-select-trigger-properties-min-width: none;
  --pattern-select-trigger-properties-max-width: 100%;
  --pattern-select-trigger-properties-panel-offset: 4px;
  --pattern-select-panel-base-tokens-padding: var(--semantic-spacing-inset-xs);
  --pattern-select-panel-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-select-panel-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-select-panel-base-tokens-max-height: 300px;
  --pattern-select-panel-base-tokens-gap: var(--semantic-spacing-stack-xs);
  --pattern-select-panel-base-tokens-shadow: var(--primitive-shadow-elevation-3);
  --pattern-select-panel-properties-display: flex;
  --pattern-select-panel-properties-flex-direction: column;
  --pattern-select-panel-properties-overflow-y: auto;
  --pattern-select-panel-properties-border-style: solid;
  --pattern-select-panel-properties-position: absolute;
  --pattern-select-panel-properties-z-index: 50;
  --pattern-select-option-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-select-option-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-select-option-base-tokens-border-radius: var(--primitive-radius-sm);
  --pattern-select-option-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-select-option-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-select-option-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-select-option-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-select-option-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-select-option-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-select-option-properties-display: flex;
  --pattern-select-option-properties-align-items: center;
  --pattern-select-option-properties-cursor: pointer;
  --pattern-select-option-properties-user-select: none;
  --pattern-select-sizes-0: sm;
  --pattern-select-sizes-1: md;

}

/* ============================================
   COMPONENT LAYER
   Component tokens referencing semantic layer
   Theme-agnostic - semantic layer handles theming
   ============================================ */
:root {
  /* component.button.ghost — Minimal visual weight for tertiary actions. Use in toolbars, table rows, or when many buttons appear together. */
  --component-button-ghost-background: transparent;
  --component-button-ghost-background-hover: var(--semantic-color-contrast-dark);
  --component-button-ghost-background-active: var(--semantic-color-surface-neutral-bold);
  --component-button-ghost-background-disabled: transparent;
  --component-button-ghost-text-color: var(--semantic-color-text-neutral-bold);
  --component-button-ghost-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-button-ghost-text-color-active: var(--semantic-color-text-neutral-bold);
  --component-button-ghost-text-color-disabled: var(--semantic-color-interactive-secondary-text-disabled);
  --component-button-ghost-border-color: transparent;
  --component-button-ghost-border-color-hover: transparent;
  --component-button-ghost-border-color-active: transparent;
  --component-button-ghost-border-color-disabled: transparent;
  --component-button-ghost-background-opacity: var(--primitive-opacity-alpha-100);
  --component-button-ghost-background-hover-opacity: var(--primitive-opacity-alpha-10);
  --component-button-ghost-background-active-opacity: var(--primitive-opacity-alpha-20);
  --component-button-ghost-background-disabled-opacity: var(--primitive-opacity-alpha-100);
  /* component.button.primary — Main call-to-action. Use once per section for the most important action. High visual prominence. */
  --component-button-primary-background: var(--semantic-color-contrast-dark);
  --component-button-primary-background-hover: var(--semantic-color-contrast-dark);
  --component-button-primary-background-active: var(--semantic-color-contrast-dark);
  --component-button-primary-background-disabled: var(--semantic-color-interactive-primary-disabled);
  --component-button-primary-text-color: var(--semantic-color-text-neutral-contrast);
  --component-button-primary-text-color-hover: var(--semantic-color-text-neutral-contrast);
  --component-button-primary-text-color-active: var(--semantic-color-contrast-light);
  --component-button-primary-text-color-disabled: var(--semantic-color-interactive-primary-text-disabled);
  --component-button-primary-border-color: transparent;
  --component-button-primary-border-color-hover: transparent;
  --component-button-primary-border-color-active: var(--semantic-color-contrast-light);
  --component-button-primary-border-color-disabled: transparent;
  --component-button-primary-background-opacity: var(--primitive-opacity-alpha-100);
  --component-button-primary-background-hover-opacity: var(--primitive-opacity-alpha-80);
  --component-button-primary-background-active-opacity: var(--primitive-opacity-alpha-100);
  --component-button-primary-background-disabled-opacity: var(--primitive-opacity-alpha-100);
  /* component.button.secondary — Supporting actions that complement the primary action. Use for cancel, back, skip, or alternative options. */
  --component-button-secondary-background: var(--semantic-color-contrast-dark);
  --component-button-secondary-background-hover: var(--semantic-color-surface-neutral-default);
  --component-button-secondary-background-active: var(--semantic-color-contrast-light);
  --component-button-secondary-background-disabled: var(--semantic-color-interactive-primary-disabled);
  --component-button-secondary-text-color: var(--semantic-color-text-neutral-bold);
  --component-button-secondary-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-button-secondary-text-color-active: var(--semantic-color-text-neutral-bold);
  --component-button-secondary-text-color-disabled: var(--semantic-color-interactive-primary-text-disabled);
  --component-button-secondary-border-color: transparent;
  --component-button-secondary-border-color-hover: var(--semantic-color-contrast-dark);
  --component-button-secondary-border-color-active: var(--semantic-color-contrast-dark);
  --component-button-secondary-border-color-disabled: transparent;
  --component-button-secondary-background-opacity: var(--primitive-opacity-alpha-10);
  --component-button-secondary-background-hover-opacity: var(--primitive-opacity-alpha-100);
  --component-button-secondary-background-active-opacity: var(--primitive-opacity-alpha-100);
  --component-button-secondary-background-disabled-opacity: var(--primitive-opacity-alpha-100);
  /* component.button.destructive — Dangerous or irreversible actions. Use for delete, remove, or cancel operations. */
  --component-button-destructive-background: var(--semantic-color-interactive-destructive-default);
  --component-button-destructive-background-hover: var(--semantic-color-interactive-destructive-hover);
  --component-button-destructive-background-active: var(--semantic-color-interactive-destructive-active);
  --component-button-destructive-background-disabled: var(--semantic-color-interactive-destructive-disabled);
  --component-button-destructive-text-color: var(--semantic-color-text-neutral-contrast);
  --component-button-destructive-text-color-hover: var(--semantic-color-text-neutral-contrast);
  --component-button-destructive-text-color-active: var(--semantic-color-text-neutral-contrast);
  --component-button-destructive-text-color-disabled: var(--semantic-color-text-disabled);
  --component-button-destructive-border-color: transparent;
  --component-button-destructive-border-color-hover: transparent;
  --component-button-destructive-border-color-active: transparent;
  --component-button-destructive-border-color-disabled: transparent;
  --component-button-destructive-background-opacity: var(--primitive-opacity-alpha-100);
  --component-button-destructive-background-hover-opacity: var(--primitive-opacity-alpha-100);
  --component-button-destructive-background-active-opacity: var(--primitive-opacity-alpha-100);
  --component-button-destructive-background-disabled-opacity: var(--primitive-opacity-alpha-100);
  /* component.button.lg — Large size for prominent CTAs, hero sections, and mobile touch targets. */
  --component-button-lg-padding-x: var(--semantic-spacing-inset-lg);
  --component-button-lg-padding-y: var(--semantic-spacing-inset-sm);
  --component-button-lg-border-radius: var(--primitive-radius-full);
  --component-button-lg-icon-size: var(--primitive-icon-size-lg);
  --component-button-lg-icon-stroke: var(--primitive-icon-stroke-medium);
  --component-button-lg-gap: var(--semantic-spacing-inline-md);
  --component-button-lg-min-width: 120px;
  --component-button-lg-max-width: none;
  --component-button-lg-min-height: 57px;
  --component-button-lg-font-family: var(--semantic-typography-label-lg-font-family);
  --component-button-lg-font-size: var(--semantic-typography-label-lg-font-size);
  --component-button-lg-font-weight: var(--semantic-typography-label-lg-font-weight);
  --component-button-lg-line-height: var(--semantic-typography-label-lg-line-height);
  --component-button-lg-letter-spacing: var(--semantic-typography-label-lg-letter-spacing);
  --component-button-lg-text-transform: var(--semantic-typography-label-lg-text-transform);
  /* component.button.md — Default size for most use cases. Inherits base-tokens. */
  --component-button-md-min-width: 140px;
  --component-button-md-max-width: none;
  --component-button-md-min-height: 37px;
  /* component.button.sm — Compact size for dense layouts, toolbars, and inline actions. */
  --component-button-sm-padding-x: var(--semantic-spacing-inset-md);
  --component-button-sm-padding-y: var(--primitive-spacing-zero);
  --component-button-sm-border-radius: var(--primitive-radius-full);
  --component-button-sm-icon-size: var(--primitive-icon-size-sm);
  --component-button-sm-icon-stroke: var(--primitive-icon-stroke-regular);
  --component-button-sm-gap: var(--semantic-spacing-inline-sm);
  --component-button-sm-min-width: 0px;
  --component-button-sm-max-width: none;
  --component-button-sm-min-height: 32px;
  --component-button-sm-_custom-height: 32px;
  --component-button-sm-font-family: var(--semantic-typography-label-sm-font-family);
  --component-button-sm-font-size: var(--semantic-typography-label-sm-font-size);
  --component-button-sm-font-weight: var(--semantic-typography-label-sm-font-weight);
  --component-button-sm-line-height: var(--semantic-typography-label-sm-line-height);
  --component-button-sm-letter-spacing: var(--semantic-typography-label-sm-letter-spacing);
  --component-button-sm-text-transform: var(--semantic-typography-label-sm-text-transform);
  /* component.badge.info — Informational status. Use for new, updated, beta, tips, or general informational labels. */
  --component-badge-info-subtle-background: var(--semantic-color-surface-info-subtle);
  --component-badge-info-subtle-text-color: var(--semantic-color-text-info-bold);
  --component-badge-info-subtle-border-color: transparent;
  --component-badge-info-bold-background: var(--semantic-color-surface-info-bold);
  --component-badge-info-bold-text-color: var(--semantic-color-text-info-contrast);
  --component-badge-info-bold-border-color: transparent;
  --component-badge-info-outline-background: transparent;
  --component-badge-info-outline-text-color: var(--semantic-color-text-info-default);
  --component-badge-info-outline-border-color: var(--semantic-color-border-info-default);
  /* component.badge.error — Negative status. Use for failed, rejected, critical, or blocked states. */
  --component-badge-error-subtle-background: var(--semantic-color-surface-error-subtle);
  --component-badge-error-subtle-text-color: var(--semantic-color-text-error-bold);
  --component-badge-error-subtle-border-color: transparent;
  --component-badge-error-bold-background: var(--semantic-color-surface-error-bold);
  --component-badge-error-bold-text-color: var(--semantic-color-text-error-contrast);
  --component-badge-error-bold-border-color: transparent;
  --component-badge-error-outline-background: transparent;
  --component-badge-error-outline-text-color: var(--semantic-color-text-error-default);
  --component-badge-error-outline-border-color: var(--semantic-color-border-error-default);
  /* component.badge.neutral — Default/generic status. Use for neutral metadata, categories, or when no semantic meaning is needed. */
  --component-badge-neutral-subtle-background: var(--semantic-color-surface-neutral-default);
  --component-badge-neutral-subtle-text-color: var(--semantic-color-text-neutral-default);
  --component-badge-neutral-subtle-border-color: transparent;
  --component-badge-neutral-bold-background: var(--semantic-color-surface-neutral-bold);
  --component-badge-neutral-bold-text-color: var(--semantic-color-text-neutral-contrast);
  --component-badge-neutral-bold-border-color: transparent;
  --component-badge-neutral-outline-background: transparent;
  --component-badge-neutral-outline-text-color: var(--semantic-color-text-neutral-bold);
  --component-badge-neutral-outline-border-color: var(--semantic-color-border-neutral-bold);
  /* component.badge.primary — Brand-associated status. Use for branded features, product tiers, or primary categorization. */
  --component-badge-primary-subtle-background: var(--semantic-color-surface-primary-subtle);
  --component-badge-primary-subtle-text-color: var(--semantic-color-text-primary-default);
  --component-badge-primary-subtle-border-color: transparent;
  --component-badge-primary-bold-background: var(--semantic-color-surface-primary-bold);
  --component-badge-primary-bold-text-color: var(--semantic-color-text-neutral-contrast);
  --component-badge-primary-bold-border-color: transparent;
  --component-badge-primary-outline-background: transparent;
  --component-badge-primary-outline-text-color: var(--semantic-color-text-primary-default);
  --component-badge-primary-outline-border-color: var(--semantic-color-border-primary-default);
  /* component.badge.success — Positive status. Use for completed, active, verified, approved, or healthy states. */
  --component-badge-success-subtle-background: var(--semantic-color-surface-success-subtle);
  --component-badge-success-subtle-text-color: var(--semantic-color-text-success-bold);
  --component-badge-success-subtle-border-color: transparent;
  --component-badge-success-bold-background: var(--semantic-color-surface-success-bold);
  --component-badge-success-bold-text-color: var(--semantic-color-text-success-contrast);
  --component-badge-success-bold-border-color: transparent;
  --component-badge-success-outline-background: transparent;
  --component-badge-success-outline-text-color: var(--semantic-color-text-success-default);
  --component-badge-success-outline-border-color: var(--semantic-color-border-success-default);
  /* component.badge.warning — Caution status. Use for pending, expiring, at-risk, or attention-needed states. */
  --component-badge-warning-subtle-background: var(--semantic-color-surface-warning-subtle);
  --component-badge-warning-subtle-text-color: var(--semantic-color-text-warning-bold);
  --component-badge-warning-subtle-border-color: transparent;
  --component-badge-warning-bold-background: var(--semantic-color-surface-warning-bold);
  --component-badge-warning-bold-text-color: var(--semantic-color-text-warning-contrast);
  --component-badge-warning-bold-border-color: transparent;
  --component-badge-warning-outline-background: transparent;
  --component-badge-warning-outline-text-color: var(--semantic-color-text-warning-default);
  --component-badge-warning-outline-border-color: var(--semantic-color-border-warning-default);
  /* component.badge.tertiary — Minimal emphasis status. Use for subtle labels, minor metadata, or de-emphasized categories. */
  --component-badge-tertiary-subtle-background: var(--semantic-color-surface-accent-subtle);
  --component-badge-tertiary-subtle-text-color: var(--semantic-color-text-accent-bold);
  --component-badge-tertiary-subtle-border-color: transparent;
  --component-badge-tertiary-bold-background: var(--semantic-color-surface-accent-bold);
  --component-badge-tertiary-bold-text-color: var(--semantic-color-text-neutral-contrast);
  --component-badge-tertiary-bold-border-color: transparent;
  --component-badge-tertiary-outline-background: transparent;
  --component-badge-tertiary-outline-text-color: var(--semantic-color-text-accent-default);
  --component-badge-tertiary-outline-border-color: var(--semantic-color-border-accent-default);
  /* component.badge.secondary — Supporting categorization. Use for secondary groupings or less prominent classifications. */
  --component-badge-secondary-subtle-background: var(--semantic-color-surface-secondary-subtle);
  --component-badge-secondary-subtle-text-color: var(--semantic-color-text-secondary-bold);
  --component-badge-secondary-subtle-border-color: transparent;
  --component-badge-secondary-bold-background: var(--semantic-color-surface-secondary-bold);
  --component-badge-secondary-bold-text-color: var(--semantic-color-text-secondary-contrast);
  --component-badge-secondary-bold-border-color: transparent;
  --component-badge-secondary-outline-background: transparent;
  --component-badge-secondary-outline-text-color: var(--semantic-color-text-secondary-default);
  --component-badge-secondary-outline-border-color: var(--semantic-color-border-secondary-default);
  /* component.badge.md — Default badge size, inherits base-tokens */
  --component-badge-md-min-width: none;
  --component-badge-md-max-width: none;
  --component-badge-md-min-height: 24px;
  /* component.badge.sm — Compact badge for dense layouts, inline text, table cells */
  --component-badge-sm-padding-x: var(--semantic-spacing-inset-sm);
  --component-badge-sm-padding-y: var(--primitive-spacing-zero);
  --component-badge-sm-border-radius: var(--primitive-radius-full);
  --component-badge-sm-icon-size: var(--primitive-icon-size-xs);
  --component-badge-sm-icon-stroke: var(--primitive-icon-stroke-regular);
  --component-badge-sm-gap: var(--semantic-spacing-inline-xs);
  --component-badge-sm-min-width: none;
  --component-badge-sm-max-width: none;
  --component-badge-sm-min-height: 29px;
  --component-badge-sm-font-family: var(--semantic-typography-code-block-font-family);
  --component-badge-sm-font-size: var(--semantic-typography-code-block-font-size);
  --component-badge-sm-font-weight: var(--semantic-typography-code-block-font-weight);
  --component-badge-sm-line-height: var(--semantic-typography-code-block-line-height);
  --component-badge-sm-letter-spacing: var(--semantic-typography-code-block-letter-spacing);
  --component-badge-sm-text-transform: var(--semantic-typography-code-block-text-transform);
  /* component.text-input.multi-line — Textarea element that grows vertically. Use for longer content: comments, descriptions, messages. */
  /* component.text-input.single-line — Standard input element with fixed height. Use for short text: names, emails, search, etc. */
  /* component.text-input.default — Standard input styling for normal data entry */
  --component-text-input-default-background: var(--semantic-color-surface-neutral-subtle);
  --component-text-input-default-background-focus: var(--semantic-color-contrast-light);
  --component-text-input-default-background-error: var(--semantic-color-surface-error-subtle);
  --component-text-input-default-background-disabled: var(--semantic-color-surface-disabled);
  --component-text-input-default-text-color: var(--semantic-color-text-neutral-bold);
  --component-text-input-default-text-color-focus: var(--semantic-color-text-neutral-bold);
  --component-text-input-default-text-color-error: var(--semantic-color-text-neutral-bold);
  --component-text-input-default-text-color-disabled: var(--semantic-color-text-disabled);
  --component-text-input-default-placeholder-color: var(--semantic-color-text-neutral-subtle);
  --component-text-input-default-placeholder-color-focus: var(--semantic-color-text-neutral-default);
  --component-text-input-default-placeholder-color-error: var(--semantic-color-text-error-default);
  --component-text-input-default-placeholder-color-disabled: var(--semantic-color-text-disabled);
  --component-text-input-default-border-color: transparent;
  --component-text-input-default-border-color-focus: var(--semantic-color-border-neutral-bold);
  --component-text-input-default-border-color-error: var(--semantic-color-border-error-default);
  --component-text-input-default-border-color-disabled: transparent;
  /* component.text-input.md — Default size, inherits base-tokens */
  --component-text-input-md-min-width: none;
  --component-text-input-md-max-width: 422px;
  --component-text-input-md-min-height: 37px;
  /* component.text-input.sm — Compact size for dense layouts */
  --component-text-input-sm-padding-x: var(--semantic-spacing-inset-md);
  --component-text-input-sm-padding-y: var(--semantic-spacing-inset-xs);
  --component-text-input-sm-border-radius: var(--primitive-radius-full);
  --component-text-input-sm-icon-size: var(--primitive-icon-size-xs);
  --component-text-input-sm-icon-stroke: var(--primitive-icon-stroke-regular);
  --component-text-input-sm-gap: var(--semantic-spacing-inline-xs);
  --component-text-input-sm-min-width: none;
  --component-text-input-sm-max-width: 422px;
  --component-text-input-sm-min-height: 32px;
  --component-text-input-sm-_custom-height: 32px;
  --component-text-input-sm-font-family: var(--semantic-typography-body-xs-font-family);
  --component-text-input-sm-font-size: var(--semantic-typography-body-xs-font-size);
  --component-text-input-sm-font-weight: var(--semantic-typography-body-xs-font-weight);
  --component-text-input-sm-line-height: var(--semantic-typography-body-xs-line-height);
  --component-text-input-sm-letter-spacing: var(--semantic-typography-body-xs-letter-spacing);
  --component-text-input-sm-text-transform: var(--semantic-typography-body-xs-text-transform);
  /* component.card.default — Standard container with subtle border. Use for content sections, form groups, info panels. */
  --component-card-default-background: var(--semantic-color-surface-neutral-subtle);
  --component-card-default-border-color: var(--semantic-color-border-neutral-default);
  --component-card-default-header-text-color: var(--semantic-color-text-neutral-bold);
  --component-card-default-body-text-color: var(--semantic-color-text-neutral-default);
  /* component.card.elevated — Prominent container with shadow, no border. Use for floating panels, popovers, featured content. */
  --component-card-elevated-background: var(--semantic-color-surface-neutral-subtle);
  --component-card-elevated-border-color: transparent;
  --component-card-elevated-header-text-color: var(--semantic-color-text-neutral-bold);
  --component-card-elevated-body-text-color: var(--semantic-color-text-neutral-default);
  --component-card-elevated-shadow: var(--primitive-shadow-elevation-3);
  /* component.card.interactive — Clickable card with hover/active states. Use for selectable items, navigation cards, dashboard widgets. */
  --component-card-interactive-background: var(--semantic-color-surface-neutral-subtle);
  --component-card-interactive-background-hover: var(--semantic-color-surface-neutral-default);
  --component-card-interactive-background-active: var(--semantic-color-surface-neutral-default);
  --component-card-interactive-background-disabled: var(--semantic-color-surface-disabled);
  --component-card-interactive-border-color: var(--semantic-color-border-neutral-default);
  --component-card-interactive-border-color-hover: var(--semantic-color-border-neutral-bold);
  --component-card-interactive-border-color-active: var(--semantic-color-border-neutral-bold);
  --component-card-interactive-border-color-disabled: var(--semantic-color-border-disabled);
  --component-card-interactive-header-text-color: var(--semantic-color-text-neutral-bold);
  --component-card-interactive-header-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-card-interactive-header-text-color-active: var(--semantic-color-text-neutral-bold);
  --component-card-interactive-header-text-color-disabled: var(--semantic-color-text-disabled);
  --component-card-interactive-body-text-color: var(--semantic-color-text-neutral-default);
  --component-card-interactive-body-text-color-hover: var(--semantic-color-text-neutral-default);
  --component-card-interactive-body-text-color-active: var(--semantic-color-text-neutral-default);
  --component-card-interactive-body-text-color-disabled: var(--semantic-color-text-disabled);
  --component-card-interactive-shadow: var(--primitive-shadow-elevation-1);
  --component-card-interactive-shadow-hover: var(--primitive-shadow-elevation-2);
  --component-card-interactive-shadow-active: var(--primitive-shadow-elevation-1);
  --component-card-interactive-shadow-disabled: none;
  /* component.card.lg — Spacious card for featured content, hero sections */
  --component-card-lg-padding: var(--semantic-spacing-inset-xl);
  --component-card-lg-border-radius: var(--primitive-radius-xl);
  --component-card-lg-section-gap: var(--semantic-spacing-stack-xl);
  --component-card-lg-header-text-style: var(--semantic-typography-heading-h2);
  --component-card-lg-body-text-style: var(--semantic-typography-body-lg);
  /* component.card.md — Default card size, inherits base-tokens */
  /* component.card.sm — Compact card for tight layouts, sidebar items */
  --component-card-sm-padding: var(--semantic-spacing-inset-md);
  --component-card-sm-border-radius: var(--primitive-radius-md);
  --component-card-sm-section-gap: var(--semantic-spacing-stack-md);
  --component-card-sm-header-text-style: var(--semantic-typography-heading-h4);
  --component-card-sm-body-text-style: var(--semantic-typography-body-sm);
  /* component.checkbox.default — Color tokens for all checkbox states */
  --component-checkbox-default-container-background: var(--semantic-color-surface-neutral-default);
  --component-checkbox-default-container-border-color: var(--semantic-color-border-neutral-default);
  --component-checkbox-default-indicator-color: var(--semantic-color-contrast-light);
  --component-checkbox-default-label-color: var(--semantic-color-text-neutral-bold);
  --component-checkbox-default-container-background-hover: var(--semantic-color-surface-neutral-default);
  --component-checkbox-default-container-border-color-hover: var(--semantic-color-border-neutral-bold);
  --component-checkbox-default-indicator-color-hover: var(--semantic-color-contrast-light);
  --component-checkbox-default-container-background-checked: var(--semantic-color-interactive-primary-default);
  --component-checkbox-default-container-border-color-checked: var(--semantic-color-interactive-primary-default);
  --component-checkbox-default-indicator-color-checked: var(--semantic-color-contrast-light);
  --component-checkbox-default-container-background-disabled: var(--semantic-color-surface-disabled);
  --component-checkbox-default-container-border-color-disabled: var(--semantic-color-border-disabled);
  --component-checkbox-default-indicator-color-disabled: var(--semantic-color-text-disabled);
  --component-checkbox-default-label-color-disabled: var(--semantic-color-text-disabled);
  /* component.checkbox.md — Default checkbox size, inherits base-tokens */
  --component-checkbox-md-container-size: 20px;
  --component-checkbox-md-indicator-size: var(--primitive-icon-size-xs);
  --component-checkbox-md-gap: var(--semantic-spacing-inline-sm);
  --component-checkbox-md-font-family: var(--semantic-typography-body-md-font-family);
  --component-checkbox-md-font-size: var(--semantic-typography-body-md-font-size);
  --component-checkbox-md-font-weight: var(--semantic-typography-body-md-font-weight);
  --component-checkbox-md-line-height: var(--semantic-typography-body-md-line-height);
  --component-checkbox-md-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --component-checkbox-md-text-transform: var(--semantic-typography-body-md-text-transform);
  /* component.checkbox.sm — Compact checkbox for dense layouts */
  --component-checkbox-sm-container-size: 16px;
  --component-checkbox-sm-indicator-size: var(--primitive-icon-size-xs);
  --component-checkbox-sm-gap: var(--semantic-spacing-inline-xs);
  --component-checkbox-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-checkbox-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-checkbox-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-checkbox-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-checkbox-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-checkbox-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  /* component.radio.default — Color tokens for all radio states */
  --component-radio-default-container-background: var(--semantic-color-surface-neutral-default);
  --component-radio-default-container-border-color: var(--semantic-color-border-neutral-default);
  --component-radio-default-indicator-color: var(--semantic-color-contrast-light);
  --component-radio-default-label-color: var(--semantic-color-text-neutral-bold);
  --component-radio-default-container-background-hover: var(--semantic-color-surface-neutral-default);
  --component-radio-default-container-border-color-hover: var(--semantic-color-border-neutral-bold);
  --component-radio-default-indicator-color-hover: var(--semantic-color-contrast-light);
  --component-radio-default-container-background-checked: var(--semantic-color-interactive-primary-default);
  --component-radio-default-container-border-color-checked: var(--semantic-color-interactive-primary-default);
  --component-radio-default-indicator-color-checked: var(--semantic-color-contrast-light);
  --component-radio-default-container-background-disabled: var(--semantic-color-surface-disabled);
  --component-radio-default-container-border-color-disabled: var(--semantic-color-border-disabled);
  --component-radio-default-indicator-color-disabled: var(--semantic-color-text-disabled);
  --component-radio-default-label-color-disabled: var(--semantic-color-text-disabled);
  /* component.radio.md — Default radio size, inherits base-tokens */
  --component-radio-md-container-size: 20px;
  --component-radio-md-indicator-size: 10px;
  --component-radio-md-gap: var(--semantic-spacing-inline-sm);
  --component-radio-md-font-family: var(--semantic-typography-body-md-font-family);
  --component-radio-md-font-size: var(--semantic-typography-body-md-font-size);
  --component-radio-md-font-weight: var(--semantic-typography-body-md-font-weight);
  --component-radio-md-line-height: var(--semantic-typography-body-md-line-height);
  --component-radio-md-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --component-radio-md-text-transform: var(--semantic-typography-body-md-text-transform);
  /* component.radio.sm — Compact radio for dense layouts */
  --component-radio-sm-container-size: 16px;
  --component-radio-sm-indicator-size: 8px;
  --component-radio-sm-gap: var(--semantic-spacing-inline-xs);
  --component-radio-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-radio-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-radio-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-radio-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-radio-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-radio-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  /* component.switch.default — Color tokens for all switch states. Supports default, success, and destructive variants for checked track background. */
  --component-switch-default-track-background: var(--semantic-color-surface-neutral-default);
  --component-switch-default-thumb-color: var(--semantic-color-contrast-light);
  --component-switch-default-label-color: var(--semantic-color-text-neutral-bold);
  --component-switch-default-track-border-color: var(--semantic-color-border-neutral-default);
  --component-switch-default-track-background-hover: var(--semantic-color-surface-neutral-default);
  --component-switch-default-track-border-color-hover: var(--semantic-color-border-neutral-bold);
  --component-switch-default-track-background-checked: var(--semantic-color-interactive-primary-default);
  --component-switch-default-track-border-color-checked: var(--semantic-color-interactive-primary-default);
  --component-switch-default-track-background-disabled: var(--semantic-color-surface-disabled);
  --component-switch-default-track-border-color-disabled: var(--semantic-color-border-disabled);
  --component-switch-default-thumb-color-disabled: var(--semantic-color-interactive-primary-disabled);
  --component-switch-default-label-color-disabled: var(--semantic-color-text-disabled);
  --component-switch-default-track-background-checked-success: var(--semantic-color-surface-success-bold);
  --component-switch-default-track-background-checked-destructive: var(--semantic-color-surface-error-bold);
  /* component.switch.md — Default switch size, inherits base-tokens */
  --component-switch-md-track-width: 40px;
  --component-switch-md-track-height: 24px;
  --component-switch-md-thumb-size: 20px;
  --component-switch-md-gap: var(--semantic-spacing-inline-sm);
  --component-switch-md-font-family: var(--semantic-typography-body-md-font-family);
  --component-switch-md-font-size: var(--semantic-typography-body-md-font-size);
  --component-switch-md-font-weight: var(--semantic-typography-body-md-font-weight);
  --component-switch-md-line-height: var(--semantic-typography-body-md-line-height);
  --component-switch-md-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --component-switch-md-text-transform: var(--semantic-typography-body-md-text-transform);
  /* component.switch.sm — Compact switch for dense layouts */
  --component-switch-sm-track-width: 32px;
  --component-switch-sm-track-height: 18px;
  --component-switch-sm-thumb-size: 14px;
  --component-switch-sm-gap: var(--semantic-spacing-inline-xs);
  --component-switch-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-switch-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-switch-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-switch-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-switch-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-switch-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  /* component.slider.default — Color tokens for slider states: default, hover, active, and disabled. Covers track background, fill, border, thumb, and thumb border. */
  --component-slider-default-track-background: var(--semantic-color-surface-neutral-subtle);
  --component-slider-default-track-background-hover: var(--semantic-color-surface-neutral-subtle);
  --component-slider-default-track-background-active: var(--semantic-color-surface-neutral-subtle);
  --component-slider-default-track-background-disabled: var(--semantic-color-surface-disabled);
  --component-slider-default-track-fill-color: var(--semantic-color-interactive-primary-default);
  --component-slider-default-track-fill-color-hover: var(--semantic-color-interactive-primary-hover);
  --component-slider-default-track-fill-color-active: var(--semantic-color-interactive-primary-active);
  --component-slider-default-track-fill-color-disabled: var(--semantic-color-surface-disabled);
  --component-slider-default-track-border-color: transparent;
  --component-slider-default-track-border-color-disabled: var(--semantic-color-border-disabled);
  --component-slider-default-thumb-color: var(--semantic-color-contrast-light);
  --component-slider-default-thumb-color-disabled: var(--semantic-color-contrast-light);
  /* component.slider.md — Default slider size, inherits base-tokens */
  --component-slider-md-track-height: 24px;
  --component-slider-md-thumb-size: 20px;
  /* component.slider.sm — Compact slider for dense layouts */
  --component-slider-sm-track-height: 18px;
  --component-slider-sm-thumb-size: 14px;
  /* component.tooltip.default — Color tokens for tooltip. Inverted scheme: dark background with light text. */
  --component-tooltip-default-background: var(--semantic-color-surface-neutral-bold);
  --component-tooltip-default-text-color: var(--semantic-color-text-neutral-bold);
  --component-tooltip-default-shadow: var(--primitive-shadow-elevation-3);
  /* component.text-area.default — Standard textarea styling for normal data entry */
  --component-text-area-default-background: var(--semantic-color-surface-neutral-subtle);
  --component-text-area-default-background-focus: var(--semantic-color-surface-neutral-subtle);
  --component-text-area-default-background-error: var(--semantic-color-surface-neutral-subtle);
  --component-text-area-default-background-disabled: var(--semantic-color-surface-disabled);
  --component-text-area-default-text-color: var(--semantic-color-text-neutral-bold);
  --component-text-area-default-text-color-focus: var(--semantic-color-text-neutral-bold);
  --component-text-area-default-text-color-error: var(--semantic-color-text-neutral-bold);
  --component-text-area-default-text-color-disabled: var(--semantic-color-text-disabled);
  --component-text-area-default-placeholder-color: var(--semantic-color-text-neutral-subtle);
  --component-text-area-default-placeholder-color-focus: var(--semantic-color-text-neutral-default);
  --component-text-area-default-placeholder-color-error: var(--semantic-color-text-neutral-subtle);
  --component-text-area-default-placeholder-color-disabled: var(--semantic-color-text-disabled);
  --component-text-area-default-border-color: transparent;
  --component-text-area-default-border-color-focus: var(--semantic-color-border-primary-default);
  --component-text-area-default-border-color-error: var(--semantic-color-border-error-default);
  --component-text-area-default-border-color-disabled: var(--semantic-color-border-disabled);
  /* component.text-area.sm — Compact size for dense layouts */
  --component-text-area-sm-padding-x: var(--semantic-spacing-inset-xs);
  --component-text-area-sm-padding-y: var(--semantic-spacing-inset-xs);
  --component-text-area-sm-border-radius: var(--primitive-radius-md);
  --component-text-area-sm-min-width: none;
  --component-text-area-sm-max-width: 100%;
  --component-text-area-sm-min-height: 36px;
  --component-text-area-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-text-area-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-text-area-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-text-area-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-text-area-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-text-area-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  /* component.text-area.md — Default size, inherits base-tokens */
  --component-text-area-md-min-width: none;
  --component-text-area-md-max-width: 100%;
  --component-text-area-md-min-height: 49px;
  /* component.avatar.neutral — Neutral/muted avatar */
  --component-avatar-neutral-background: var(--semantic-color-surface-neutral-default);
  --component-avatar-neutral-text-color: var(--semantic-color-text-neutral-bold);
  --component-avatar-neutral-border-color: transparent;
  /* component.avatar.primary — Primary brand color avatar */
  --component-avatar-primary-background: var(--semantic-color-interactive-primary-default);
  --component-avatar-primary-text-color: var(--semantic-color-text-neutral-contrast);
  --component-avatar-primary-border-color: transparent;
  /* component.avatar.secondary — Secondary brand color avatar */
  --component-avatar-secondary-background: var(--semantic-color-interactive-secondary-default);
  --component-avatar-secondary-text-color: var(--semantic-color-text-neutral-contrast);
  --component-avatar-secondary-border-color: transparent;
  /* component.avatar.lg — Large avatar (48px) */
  --component-avatar-lg-size: 48px;
  --component-avatar-lg-font-family: var(--semantic-typography-label-lg-font-family);
  --component-avatar-lg-font-size: var(--semantic-typography-label-lg-font-size);
  --component-avatar-lg-font-weight: var(--semantic-typography-label-lg-font-weight);
  --component-avatar-lg-line-height: var(--semantic-typography-label-lg-line-height);
  --component-avatar-lg-letter-spacing: var(--semantic-typography-label-lg-letter-spacing);
  --component-avatar-lg-text-transform: var(--semantic-typography-label-lg-text-transform);
  /* component.avatar.md — Default avatar size, inherits base-tokens */
  --component-avatar-md-size: 40px;
  --component-avatar-md-font-family: var(--semantic-typography-label-md-font-family);
  --component-avatar-md-font-size: var(--semantic-typography-label-md-font-size);
  --component-avatar-md-font-weight: var(--semantic-typography-label-md-font-weight);
  --component-avatar-md-line-height: var(--semantic-typography-label-md-line-height);
  --component-avatar-md-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --component-avatar-md-text-transform: var(--semantic-typography-label-md-text-transform);
  /* component.avatar.sm — Small avatar (24px) */
  --component-avatar-sm-size: 24px;
  --component-avatar-sm-font-family: var(--semantic-typography-label-sm-font-family);
  --component-avatar-sm-font-size: var(--semantic-typography-label-sm-font-size);
  --component-avatar-sm-font-weight: var(--semantic-typography-label-sm-font-weight);
  --component-avatar-sm-line-height: var(--semantic-typography-label-sm-line-height);
  --component-avatar-sm-letter-spacing: var(--semantic-typography-label-sm-letter-spacing);
  --component-avatar-sm-text-transform: var(--semantic-typography-label-sm-text-transform);
  /* component.avatar.xl — Extra-large avatar (64px) */
  --component-avatar-xl-size: 64px;
  --component-avatar-xl-font-family: var(--semantic-typography-label-lg-font-family);
  --component-avatar-xl-font-size: var(--semantic-typography-label-lg-font-size);
  --component-avatar-xl-font-weight: var(--semantic-typography-label-lg-font-weight);
  --component-avatar-xl-line-height: var(--semantic-typography-label-lg-line-height);
  --component-avatar-xl-letter-spacing: var(--semantic-typography-label-lg-letter-spacing);
  --component-avatar-xl-text-transform: var(--semantic-typography-label-lg-text-transform);
  /* component.divider.strong — Medium border, strong color */
  --component-divider-strong-border-color: var(--semantic-color-border-neutral-bold);
  --component-divider-strong-border-width: var(--primitive-border-width-medium);
  /* component.divider.subtle — Thin border, subtle color */
  --component-divider-subtle-border-color: var(--semantic-color-border-neutral-default);
  --component-divider-subtle-border-width: var(--primitive-border-width-thin);
  /* component.tab-bar.container — Container/track background */
  --component-tab-bar-container-background: var(--semantic-color-surface-neutral-subtle);
  /* component.tab-bar.tab — Tab button colors across default, hover, and active (selected) states */
  --component-tab-bar-tab-background: transparent;
  --component-tab-bar-tab-background-hover: var(--semantic-color-surface-neutral-default);
  --component-tab-bar-tab-background-active: var(--semantic-color-surface-neutral-bold);
  --component-tab-bar-tab-text-color: var(--semantic-color-text-neutral-default);
  --component-tab-bar-tab-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-tab-bar-tab-text-color-active: var(--semantic-color-text-neutral-contrast);
  /* component.tab-bar.sm — Small tab bar */
  --component-tab-bar-sm-container-padding: var(--semantic-spacing-inset-xs);
  --component-tab-bar-sm-container-border-radius: var(--primitive-radius-md);
  --component-tab-bar-sm-container-gap: var(--semantic-spacing-inline-xs);
  --component-tab-bar-sm-tab-padding-x: var(--semantic-spacing-inset-sm);
  --component-tab-bar-sm-tab-padding-y: var(--semantic-spacing-inset-xs);
  --component-tab-bar-sm-tab-border-radius: var(--primitive-radius-md);
  --component-tab-bar-sm-font-family: var(--semantic-typography-label-sm-font-family);
  --component-tab-bar-sm-font-size: var(--semantic-typography-label-sm-font-size);
  --component-tab-bar-sm-font-weight: var(--semantic-typography-label-sm-font-weight);
  --component-tab-bar-sm-line-height: var(--semantic-typography-label-sm-line-height);
  --component-tab-bar-sm-letter-spacing: var(--semantic-typography-label-sm-letter-spacing);
  --component-tab-bar-sm-text-transform: var(--semantic-typography-label-sm-text-transform);
  /* component.tab-bar.md — Default tab bar size, inherits base-tokens */
  --component-tab-bar-md-container-padding: var(--semantic-spacing-inset-xs);
  --component-tab-bar-md-container-border-radius: var(--primitive-radius-lg);
  --component-tab-bar-md-container-gap: var(--semantic-spacing-inline-xs);
  --component-tab-bar-md-tab-padding-x: var(--semantic-spacing-inset-md);
  --component-tab-bar-md-tab-padding-y: var(--semantic-spacing-inset-sm);
  --component-tab-bar-md-tab-border-radius: var(--primitive-radius-md);
  --component-tab-bar-md-font-family: var(--semantic-typography-label-md-font-family);
  --component-tab-bar-md-font-size: var(--semantic-typography-label-md-font-size);
  --component-tab-bar-md-font-weight: var(--semantic-typography-label-md-font-weight);
  --component-tab-bar-md-line-height: var(--semantic-typography-label-md-line-height);
  --component-tab-bar-md-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --component-tab-bar-md-text-transform: var(--semantic-typography-label-md-text-transform);
  /* component.select.trigger — Trigger button colors across default, hover, open, and disabled states */
  --component-select-trigger-background: var(--semantic-color-surface-neutral-subtle);
  --component-select-trigger-background-hover: var(--semantic-color-surface-neutral-subtle);
  --component-select-trigger-background-open: var(--semantic-color-surface-neutral-subtle);
  --component-select-trigger-background-disabled: var(--semantic-color-surface-disabled);
  --component-select-trigger-text-color: var(--semantic-color-text-neutral-bold);
  --component-select-trigger-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-select-trigger-text-color-open: var(--semantic-color-text-neutral-bold);
  --component-select-trigger-text-color-disabled: var(--semantic-color-text-disabled);
  --component-select-trigger-placeholder-color: var(--semantic-color-text-neutral-subtle);
  --component-select-trigger-placeholder-color-hover: var(--semantic-color-text-neutral-subtle);
  --component-select-trigger-placeholder-color-open: var(--semantic-color-text-neutral-default);
  --component-select-trigger-placeholder-color-disabled: var(--semantic-color-text-disabled);
  --component-select-trigger-border-color: var(--semantic-color-border-neutral-default);
  --component-select-trigger-border-color-hover: var(--semantic-color-border-neutral-bold);
  --component-select-trigger-border-color-open: var(--semantic-color-border-primary-default);
  --component-select-trigger-border-color-disabled: var(--semantic-color-border-disabled);
  --component-select-trigger-icon-color: var(--semantic-color-text-neutral-subtle);
  --component-select-trigger-icon-color-hover: var(--semantic-color-text-neutral-default);
  --component-select-trigger-icon-color-open: var(--semantic-color-text-neutral-bold);
  --component-select-trigger-icon-color-disabled: var(--semantic-color-text-disabled);
  /* component.select.panel — Dropdown panel background and border */
  --component-select-panel-background: var(--semantic-color-surface-neutral-subtle);
  --component-select-panel-border-color: var(--semantic-color-border-neutral-default);
  /* component.select.option — Option row colors across default, hover, selected, and disabled states */
  --component-select-option-background: transparent;
  --component-select-option-background-hover: var(--semantic-color-surface-neutral-default);
  --component-select-option-background-selected: var(--semantic-color-interactive-primary-default);
  --component-select-option-background-disabled: transparent;
  --component-select-option-text-color: var(--semantic-color-text-neutral-default);
  --component-select-option-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-select-option-text-color-selected: var(--semantic-color-text-neutral-contrast);
  --component-select-option-text-color-disabled: var(--semantic-color-text-disabled);
  /* component.select.sm — Small select */
  --component-select-sm-trigger-padding-x: var(--semantic-spacing-inset-sm);
  --component-select-sm-trigger-padding-y: var(--semantic-spacing-inset-xs);
  --component-select-sm-trigger-icon-size: var(--primitive-icon-size-xs);
  --component-select-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-select-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-select-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-select-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-select-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-select-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  --component-select-sm-option-padding-x: var(--semantic-spacing-inset-sm);
  --component-select-sm-option-padding-y: var(--semantic-spacing-inset-xs);
  /* component.select.md — Default select size, inherits base-tokens */
  --component-select-md-trigger-padding-x: var(--semantic-spacing-inset-md);
  --component-select-md-trigger-padding-y: var(--semantic-spacing-inset-sm);
  --component-select-md-trigger-icon-size: var(--primitive-icon-size-sm);
  --component-select-md-font-family: var(--semantic-typography-body-md-font-family);
  --component-select-md-font-size: var(--semantic-typography-body-md-font-size);
  --component-select-md-font-weight: var(--semantic-typography-body-md-font-weight);
  --component-select-md-line-height: var(--semantic-typography-body-md-line-height);
  --component-select-md-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --component-select-md-text-transform: var(--semantic-typography-body-md-text-transform);
  --component-select-md-option-padding-x: var(--semantic-spacing-inset-md);
  --component-select-md-option-padding-y: var(--semantic-spacing-inset-sm);

}