:root {
  --scrollbar-track: #ffffff;
  --scrollbar-size: 11px;
  --scrollbar-thumb: #7c3aed;
  --scrollbar-thumb-hover: #f2f20d;
  --scrollbar-thumb-active: #d4d40b;
  --scrollbar-radius: 999px;
  --scrollbar-glow: 0 0 10px rgba(242, 242, 13, 0.45);
}

/* Custom scrollbar — opt-in, uses same tokens as global-scrollbar */
.custom-scrollbar {
  z-index: 999;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.custom-scrollbar::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  min-height: 3rem;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
  box-shadow: var(--scrollbar-glow);
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

.custom-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* in body, add padding on top for the sticky header scroll padding */
body {
  scroll-padding-top: 5rem;
}