/* ============================================================================
   SAPE UI Kit · Component tokens
   ----------------------------------------------------------------------------
   Alias layer: every --sape-component-* derives from a --sape-* foundation
   (see sape-ui-kit-foundations.css). Direct pixel values appear only for
   component-specific dimensions with no global foundation (drawer width,
   row density, grid handle size), per tokens/README.md.
   Load AFTER sape-ui-kit-foundations.css.
   ============================================================================ */
:root {
  /* button */
  --sape-component-button-height-sm: var(--sape-size-control-sm);
  --sape-component-button-height-md: var(--sape-size-control-md);
  --sape-component-button-height-lg: var(--sape-size-control-lg);
  --sape-component-button-padding-inline: var(--sape-spacing-4);
  --sape-component-button-padding-gap: var(--sape-spacing-2);
  --sape-component-button-radius: var(--sape-radius-md);
  --sape-component-button-font-size: var(--sape-font-size-14);
  --sape-component-button-font-weight: var(--sape-font-weight-medium);
  --sape-component-button-primary-background-default: var(--sape-color-action-primary-background);
  --sape-component-button-primary-background-hover: var(--sape-color-action-primary-hover);
  --sape-component-button-primary-background-active: var(--sape-color-action-primary-active);
  --sape-component-button-primary-background-disabled: var(--sape-color-action-primary-disabled);
  --sape-component-button-primary-text: var(--sape-color-action-primary-text);
  --sape-component-button-secondary-background: var(--sape-color-surface-base);
  --sape-component-button-secondary-text: var(--sape-color-text-primary);
  --sape-component-button-secondary-border: var(--sape-color-border-control);
  --sape-component-button-secondary-hover: var(--sape-color-surface-hover);
  --sape-component-button-tertiary-background: transparent;
  --sape-component-button-tertiary-text: var(--sape-color-text-brand);
  --sape-component-button-tertiary-hover: var(--sape-color-primary-50);
  --sape-component-button-ghost-background: transparent;
  --sape-component-button-ghost-text: var(--sape-color-text-secondary);
  --sape-component-button-ghost-hover: var(--sape-color-surface-hover);
  --sape-component-button-destructive-background-default: var(--sape-color-semantic-error-solid);
  --sape-component-button-destructive-background-hover: var(--sape-color-semantic-error-hover);
  --sape-component-button-destructive-background-active: var(--sape-color-semantic-error-active);
  --sape-component-button-destructive-text: #FFFFFF;

  /* field */
  --sape-component-field-height-sm: var(--sape-size-control-sm);
  --sape-component-field-height-md: var(--sape-size-control-md);
  --sape-component-field-height-lg: var(--sape-size-control-lg);
  --sape-component-field-padding-inline: var(--sape-spacing-3);
  --sape-component-field-padding-block: var(--sape-spacing-2);
  --sape-component-field-padding-gap: var(--sape-spacing-2);
  --sape-component-field-radius: var(--sape-radius-md);
  --sape-component-field-background: var(--sape-color-surface-base);
  --sape-component-field-border-default: var(--sape-color-border-control);
  --sape-component-field-border-focus: var(--sape-color-border-focus);
  --sape-component-field-border-error: var(--sape-color-border-error);
  --sape-component-field-border-warning: var(--sape-color-border-warning);
  --sape-component-field-border-success: var(--sape-color-border-success);
  --sape-component-field-border-disabled: var(--sape-color-border-disabled);
  --sape-component-field-text-default: var(--sape-color-text-primary);
  --sape-component-field-text-muted: var(--sape-color-text-muted);

  /* select */
  --sape-component-select-height: var(--sape-size-control-md);
  --sape-component-select-radius: var(--sape-radius-md);
  --sape-component-select-border: var(--sape-color-border-control);
  --sape-component-select-background: var(--sape-color-surface-base);

  /* choice (checkbox / radio) */
  --sape-component-choice-size: var(--sape-size-icon-md);
  --sape-component-choice-radius: var(--sape-radius-xs);
  --sape-component-choice-border: var(--sape-color-border-control);
  --sape-component-choice-selected: var(--sape-color-brand-primary);
  --sape-component-choice-focus: var(--sape-color-border-focus);

  /* switch */
  --sape-component-switch-width: 40px;
  --sape-component-switch-height: 24px;
  --sape-component-switch-thumb: 18px;
  --sape-component-switch-track-off: var(--sape-color-neutral-400);
  --sape-component-switch-track-on: var(--sape-color-brand-primary);
  --sape-component-switch-focus: var(--sape-color-border-focus);

  /* segmented control */
  --sape-component-segmented-height: var(--sape-size-control-md);
  --sape-component-segmented-radius: var(--sape-radius-md);
  --sape-component-segmented-background: var(--sape-color-surface-sunken);
  --sape-component-segmented-selected-background: var(--sape-color-surface-base);
  --sape-component-segmented-selected-text: var(--sape-color-text-primary);

  /* navigation */
  --sape-component-navigation-height: 64px;
  --sape-component-navigation-sidebar-width: 268px;
  --sape-component-navigation-sidebar-collapsed: 68px;
  --sape-component-navigation-item-height: var(--sape-size-control-md);
  --sape-component-navigation-background: var(--sape-color-surface-base);
  --sape-component-navigation-active: var(--sape-color-surface-selected);
  --sape-component-navigation-border: var(--sape-color-border-subtle);

  /* tabs */
  --sape-component-tab-height: var(--sape-size-control-md);
  --sape-component-tab-padding: var(--sape-spacing-3);
  --sape-component-tab-active: var(--sape-color-brand-primary);
  --sape-component-tab-border: var(--sape-color-border-subtle);

  /* table + data grid */
  --sape-component-table-row-height-compact: 34px;
  --sape-component-table-row-height-standard: 42px;
  --sape-component-table-row-height-comfortable: 52px;
  --sape-component-table-header-height: 44px;
  --sape-component-table-header-background: var(--sape-color-surface-sunken);
  --sape-component-table-border: var(--sape-color-border-subtle);
  --sape-component-table-hover: var(--sape-color-surface-hover);
  --sape-component-table-selected: var(--sape-color-surface-selected);
  --sape-component-table-sticky-shadow: var(--sape-shadow-level-2);
  --sape-component-table-zebra: color-mix(in srgb, var(--sape-color-surface-base) 96%, var(--sape-color-neutral-500));
  --sape-component-grid-resize-handle: var(--sape-color-border-selected);
  --sape-component-grid-resize-handle-width: 4px;
  --sape-component-grid-drag-ghost: var(--sape-color-surface-selected);
  --sape-component-grid-drop-indicator: var(--sape-color-brand-primary);
  --sape-component-grid-sort-indicator: var(--sape-color-text-brand);
  --sape-component-grid-pin-shadow: var(--sape-shadow-level-2);

  /* tree view */
  --sape-component-tree-row-height: 32px;
  --sape-component-tree-indent: var(--sape-spacing-5);
  --sape-component-tree-guide: var(--sape-color-border-subtle);
  --sape-component-tree-selected: var(--sape-color-surface-selected);
  --sape-component-tree-hover: var(--sape-color-surface-hover);
  --sape-component-tree-caret: var(--sape-color-text-muted);

  /* card + panel */
  --sape-component-card-padding: var(--sape-spacing-5);
  --sape-component-card-radius: var(--sape-radius-xl);
  --sape-component-card-background: var(--sape-color-surface-base);
  --sape-component-card-border: var(--sape-color-border-subtle);
  --sape-component-card-shadow: var(--sape-shadow-level-1);
  --sape-component-card-interactive-shadow: var(--sape-shadow-level-3);

  /* modal */
  --sape-component-modal-width-sm: 440px;
  --sape-component-modal-width-md: 640px;
  --sape-component-modal-width-lg: 880px;
  --sape-component-modal-radius: var(--sape-radius-2xl);
  --sape-component-modal-backdrop: var(--sape-color-overlay-scrim);
  --sape-component-modal-shadow: var(--sape-shadow-level-5);

  /* drawer */
  --sape-component-drawer-width-sm: 320px;
  --sape-component-drawer-width-md: 440px;
  --sape-component-drawer-width-lg: 560px;
  --sape-component-drawer-background: var(--sape-color-surface-base);
  --sape-component-drawer-shadow: var(--sape-shadow-level-5);

  /* alert */
  --sape-component-alert-radius: var(--sape-radius-lg);
  --sape-component-alert-padding: var(--sape-spacing-4);
  --sape-component-alert-info: var(--sape-color-semantic-info-subtle);
  --sape-component-alert-success: var(--sape-color-semantic-success-subtle);
  --sape-component-alert-warning: var(--sape-color-semantic-warning-subtle);
  --sape-component-alert-error: var(--sape-color-semantic-error-subtle);
  --sape-component-alert-neutral: var(--sape-color-semantic-neutral-subtle);

  /* tooltip + popover */
  --sape-component-tooltip-background: var(--sape-color-background-inverse);
  --sape-component-tooltip-text: var(--sape-color-text-inverse);
  --sape-component-tooltip-radius: var(--sape-radius-sm);
  --sape-component-tooltip-padding: var(--sape-spacing-2);
  --sape-component-popover-width: 320px;
  --sape-component-popover-background: var(--sape-color-surface-raised);
  --sape-component-popover-border: var(--sape-color-border-subtle);
  --sape-component-popover-shadow: var(--sape-shadow-level-4);
  --sape-component-popover-radius: var(--sape-radius-lg);

  /* command palette */
  --sape-component-palette-width: 640px;
  --sape-component-palette-background: var(--sape-color-surface-raised);
  --sape-component-palette-border: var(--sape-color-border-base);
  --sape-component-palette-shadow: var(--sape-shadow-level-5);
  --sape-component-palette-radius: var(--sape-radius-2xl);
  --sape-component-palette-active: var(--sape-color-surface-selected);

  /* pagination */
  --sape-component-pagination-item-size: var(--sape-size-control-sm);
  --sape-component-pagination-active: var(--sape-color-brand-primary);
  --sape-component-pagination-border: var(--sape-color-border-control);

  /* loaders */
  --sape-component-loader-size-sm: var(--sape-size-icon-sm);
  --sape-component-loader-size-md: var(--sape-size-icon-md);
  --sape-component-loader-size-lg: var(--sape-size-icon-lg);
  --sape-component-loader-color: var(--sape-color-brand-primary);
  --sape-component-loader-track: color-mix(in srgb, var(--sape-color-brand-primary) 20%, transparent);

  /* badge */
  --sape-component-badge-height-sm: 20px;
  --sape-component-badge-height-md: 24px;
  --sape-component-badge-radius: var(--sape-radius-full);
  --sape-component-badge-padding: var(--sape-spacing-2);

  /* filters */
  --sape-component-filter-bar-gap: var(--sape-spacing-3);
  --sape-component-filter-chip-height: var(--sape-size-control-sm);
  --sape-component-filter-panel-width: 360px;

  /* dashboards */
  --sape-component-dashboard-kpi-min: 230px;
  --sape-component-dashboard-chart-height: 280px;
  --sape-component-dashboard-panel-gap: var(--sape-spacing-4);

  /* gantt */
  --sape-component-gantt-row-height: 40px;
  --sape-component-gantt-bar-height: 22px;
  --sape-component-gantt-bar-radius: var(--sape-radius-sm);
  --sape-component-gantt-bar-fill: var(--sape-color-data-categorical-1);
  --sape-component-gantt-bar-critical: var(--sape-color-semantic-error-solid);
  --sape-component-gantt-bar-done: var(--sape-color-semantic-success-solid);
  --sape-component-gantt-grid-line: var(--sape-color-border-subtle);
  --sape-component-gantt-today-line: var(--sape-color-semantic-warning-solid);
  --sape-component-gantt-handle: var(--sape-color-surface-base);

  /* toolbar */
  --sape-component-toolbar-height: var(--sape-size-control-lg);
  --sape-component-toolbar-background: var(--sape-color-surface-base);
  --sape-component-toolbar-border: var(--sape-color-border-subtle);
}