/* Site-wide themed scrollbars — served statically (bypasses Tailwind PostCSS). */

:root {
  --scrollbar-track: #ffffff;
  --scrollbar-thumb: #dc2626;
  --scrollbar-thumb-hover: #b91c1c;
  --scrollbar-size: 10px;
}

html.dark {
  --scrollbar-track: #1b1b1b;
  --scrollbar-thumb: #dc2626;
  --scrollbar-thumb-hover: #ef4444;
  color-scheme: dark;
}

html {
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*,
*::before,
*::after {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

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

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

.no-scrollbar,
.no-scrollbar * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar,
.no-scrollbar *::-webkit-scrollbar {
  display: none;
}