:root {
  --primary: 240 100% 50% !important;

  --scrollbar-track-color: #f1f1f1;
  --scrollbar-thumb-color: hsl(var(--primary));
}


.dark {
  --primary: 240 80% 65% !important;

  --scrollbar-track-color: #2b2b2b;
}

/* ========================================= */
/* ===         SCROLLBAR STYLES          === */
/* ========================================= */

body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

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

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

body::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 10px;
  border: 2px solid var(--scrollbar-track-color);
}



.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--primary)) !important;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}