:root {
  color-scheme: dark;
  --badbee-bg: #09090b;
  --badbee-panel: #18181b;
  --badbee-line: #27272a;
  --badbee-text: #d4d4d8;
  --badbee-muted: #a1a1aa;
  --badbee-amber: #f59e0b;
  --badbee-amber-light: #fbbf24;
}

html {
  scrollbar-color: var(--badbee-line) var(--badbee-bg);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--badbee-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--badbee-line);
  border: 2px solid var(--badbee-bg);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--badbee-amber);
}

::selection {
  color: #fde68a;
  background: rgba(245, 158, 11, .3);
}

:focus-visible {
  outline: 3px solid rgba(251, 191, 36, .55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}