@import "tailwindcss";
@theme {
  /* Fonts */
  --font-sans: var(--font-montserrat), system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), monospace;

  --font-inter: var(--font-inter), system-ui, sans-serif;
  --font-inria: var(--font-inria), system-ui, sans-serif;
  --font-poppins: var(--font-poppins), system-ui, sans-serif;
  --font-kdam: var(--font-kdam), system-ui, sans-serif;

  --color-background: #f8f9f9;
  --color-foreground: #151716;
  --color-primary: #009688;
  --color-primaryDark: #009587;
  --color-sidebar: #293e54;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light: #f6f7f7;

  --width-8xl: 1440px;
  --max-width-8xl: 1440px;
}

/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
  background-clip: content-box;
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

button {
  cursor: pointer;
}

/* For dark mode */
.dark ::-webkit-scrollbar-thumb {
  background: var(--color-primaryDark);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-primaryDark);
}

.dark * {
  scrollbar-color: var(--color-primaryDark) transparent;
}

/* Custom scrollbar variants */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-auto {
  scrollbar-width: auto;
}