@define-mixin lightTheme {
  color-scheme: light;
  --accent-color: #4f46e5;
  --background-color: #f9fafb;
  --border-color: #cccccc;
  --category-name-background-color: #f9fafb;
  --category-name-button-color: #999999;
  --category-name-text-color: hsl(214, 30%, 50%);
  --category-tab-active-background-color: rgba(255, 255, 255, 0.6);
  --category-tab-active-color: var(--accent-color);
  --category-tab-color: #666;
  --category-tab-highlight-background-color: rgba(0, 0, 0, 0.15);
  --error-color-dark: hsl(0, 100%, 45%);
  --error-color: hsl(0, 100%, 40%);
  --focus-indicator-background-color: hsl(198, 65%, 85%);
  --focus-indicator-color: #333333;
  --hover-background-color: #c7d2fe;
  --placeholder-background-color: #cccccc;
  --preview-background-color: var(--secondary-background-color);
  --scrollbar-background-color: var(--background-color);
  --scrollbar-color: #aaa;
  --search-background-color: #f9fafb;
  --search-focus-background-color: #ffffff;
  --search-icon-color: #999999;
  --search-placeholder-color: #71717a;
  --secondary-background-color: #e2e8f0;
  --secondary-text-color: #666666;
  --tag-background-color: rgba(162, 190, 245, 0.3);
  --text-color: #000000;
  --variant-popup-background-color: #ffffff;
}

@define-mixin darkTheme {
  color-scheme: dark;
  --accent-color: #A580F9;
  --background-color: #333333;
  --border-color: #666666;
  --category-name-background-color: #333333;
  --category-name-button-color: #eeeeee;
  --category-name-text-color: #ffffff;
  --category-tab-active-background-color: #000000;
  --category-tab-active-color: var(--accent-color);
  --category-tab-color: #cccccc;
  --category-tab-highlight-background-color: #4A4A4A;
  --error-color-dark: hsl(0, 7%, 3%);
  --error-color: hsl(0, 30%, 60%);
  --focus-indicator-background-color: hsl(0, 0%, 50%);
  --focus-indicator-color: #999999;
  --hover-background-color: hsla(0, 0%, 40%, 0.85);
  --image-placeholder-color: #ffffff;
  --placeholder-background-color: #666666;
  --search-background-color: #71717a;
  --search-focus-background-color: #52525b;
  --search-icon-color: #cccccc;
  --search-placeholder-color: #d4d4d8;
  --secondary-background-color: #000000 ;
  --secondary-text-color: #999999;
  --tag-background-color: rgba(162, 190, 245, 0.3);
  --text-color: #ffffff;
  --variant-popup-background-color: #333333;
}

.light, .auto {
  @mixin lightTheme;
}

.dark {
  @mixin darkTheme;
}

@media (prefers-color-scheme: dark) {
  .auto {
    @mixin darkTheme;
  }
}
