/* Violet Theme */
.theme-violet {
  /* Layout/Structure variables */
  --st-border-radius: 8px;
  --st-cell-padding: 12px;

  /* Spacing variables */
  --st-spacing-small: 6px;
  --st-spacing-medium: 10px;

  /* Scrollbar variables */
  --st-scrollbar-bg-color: var(--st-stone-100);
  --st-scrollbar-thumb-color: var(--st-violet-500);
  --st-scrollbar-width: thin;
  --st-scrollbar-thumb-border-radius: 4px;

  /* Base/Structural colors */
  --st-border-color: var(--st-stone-200);
  --st-footer-background-color: var(--st-stone-100);
  --st-last-group-row-separator-border-color: var(--st-stone-300);

  /* Row colors */
  --st-odd-row-background-color: var(--st-amber-50);
  --st-even-row-background-color: var(--st-amber-100);
  --st-hover-row-background-color: var(--st-amber-200);
  --st-selected-row-background-color: var(--st-violet-100);

  /* Column colors */
  --st-odd-column-background-color: var(--st-violet-50);
  --st-even-column-background-color: var(--st-amber-50);

  /* Header colors */
  --st-header-background-color: var(--st-violet-600);
  --st-sub-header-background-color: var(--st-violet-500);
  --st-sub-cell-background-color: var(--st-violet-100);
  --st-sub-cell-hover-background-color: var(--st-violet-200);
  --st-header-label-color: var(--st-white);
  --st-header-icon-color: var(--st-violet-200);

  /* Cell colors */
  --st-cell-color: var(--st-stone-700);
  --st-cell-odd-row-color: var(--st-stone-700);
  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
    0 2px 4px -1px rgba(124, 58, 237, 0.06);

  /* Selection colors */
  --st-selected-cell-background-color: var(--st-violet-50);
  --st-selected-first-cell-background-color: var(--st-violet-100);
  --st-selected-cell-color: var(--st-violet-800);
  --st-selected-first-cell-color: var(--st-violet-800);
  --st-selected-sub-cell-background-color: var(--st-violet-200);
  --st-selected-sub-cell-color: var(--st-violet-800);
  --st-dragging-background-color: var(--st-violet-200);
  --st-dragging-sub-header-background-color: var(--st-violet-300);

  /* Interactive element colors */
  --st-resize-handle-color: var(--st-violet-400);
  --st-resize-handle-selected-color: var(--st-white);

  /* Border colors */
  --st-selected-border-color: var(--st-violet-500);
  --st-editable-cell-focus-border-color: var(--st-violet-500);
  --st-focus-ring-color: var(--st-violet-600);

  /* Button colors */
  --st-button-hover-background-color: var(--st-violet-50);
  --st-button-active-background-color: var(--st-violet-600);
  --st-next-prev-btn-color: var(--st-violet-600);
  --st-next-prev-btn-disabled-color: var(--st-violet-400);
  --st-page-btn-color: var(--st-violet-600);
  --st-page-btn-hover-background-color: var(--st-violet-50);

  /* Checkbox colors */
  --st-checkbox-checked-background-color: var(--st-violet-500);
  --st-checkbox-checked-border-color: var(--st-violet-600);
  --st-checkbox-border-color: var(--st-stone-200);

  /* Column editor colors */
  --st-column-editor-background-color: var(--st-white);
  --st-column-editor-popout-background-color: var(--st-white);
  --st-column-editor-text-color: var(--st-violet-600);

  /* Form element colors */
  --st-datepicker-weekday-color: var(--st-violet-600);
  --st-datepicker-other-month-color: var(--st-violet-400);
  --st-filter-button-disabled-background-color: var(--st-stone-200);
  --st-filter-button-disabled-text-color: var(--st-stone-500);

  /* Flash/Animation colors */
  --st-cell-flash-color: var(--st-violet-200);
  --st-copy-flash-color: var(--st-violet-600);
  --st-warning-flash-color: var(--st-red-400);

  /* Tooltip variables */
  --st-tooltip-background-color: var(--st-violet-800);
  --st-tooltip-text-color: var(--st-white);
  --st-tooltip-border-radius: 6px;
  --st-tooltip-padding: 8px 12px;
  --st-tooltip-font-size: 13px;
  --st-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  /* Header selection colors */
  --st-header-selected-background-color: var(--st-violet-600);
  --st-header-selected-label-color: var(--st-white);
  --st-header-selected-icon-color: var(--st-white);
  --st-header-highlight-indicator-color: var(--st-violet-800);
  --st-selection-highlight-indicator-color: var(--st-stone-400);

  /* Utility colors */
  --st-loading-skeleton-bg-color: var(--st-stone-200);
  --st-chart-color: var(--st-violet-400);
  --st-chart-fill-color: var(--st-violet-400);

  /* Drag and drop colors */
  --st-drag-separator-color: var(--st-violet-500);
}