/* Tokens: CSS variables for theming and dropdown; light/dark */
:root, [data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #202124;
  --text-color-light: #4d5156;
  --text-color-muted: #70757a;
  --logo-color: #333;
  --search-border-color: #c6c6c6;
  --search-icon-color: #9aa0a6;
  --search-shadow-color: rgba(32, 33, 36, 0.28);
  --search-placeholder-color: #9aa0a6;
  --button-bg-color: transparent;
  --button-border-color: #70757a;
  --button-text-color: #70757a;
  --button-hover-bg-color: #70757a;
  --button-hover-text-color: #ffffff;
  --footer-bg-color: #f2f2f2;
  --toggle-border-color: #c6c6c6;
  --toggle-text-color: #70757a;
  --icon-filter: none;
  --search-focus-border-color: transparent;

  --dropdown-bg: #ffffff;
  --dropdown-border: #c6c6c6;
  --dropdown-shadow: rgba(32, 33, 36, 0.28);
  --dropdown-item-hover-bg: #f2f2f2;
}

[data-theme="dark"] {
  --bg-color: #0b0d10;
  --text-color: #e0e0e0;
  --text-color-light: #adbac7;
  --text-color-muted: #8b949e;
  --logo-color: #e0e0e0;
  --search-border-color: #555555;
  --search-icon-color: #8b949e;
  --search-shadow-color: rgba(0, 0, 0, 0.5);
  --search-placeholder-color: #8b949e;
  --button-bg-color: transparent;
  --button-border-color: #8b949e;
  --button-text-color: #8b949e;
  --button-hover-bg-color: #8b949e;
  --button-hover-text-color: #121212;
  --footer-bg-color: #1f1f1f;
  --toggle-border-color: #555555;
  --toggle-text-color: #8b949e;
  --icon-filter: invert(100%) grayscale(100%) brightness(200%);
  --search-focus-border-color: #8b949e;

  --dropdown-bg: #1f1f1f;
  --dropdown-border: #555555;
  --dropdown-shadow: rgba(0, 0, 0, 0.5);
  --dropdown-item-hover-bg: #333333;
}