@import "tailwindcss";

@theme {
  --color-background: hsl(220 13% 13%);
  --color-surface: hsl(223 13% 10%);

  --color-accent: hsl(235 86% 65%);
  --color-accent-hover: hsl(235 86% 58%);

  --color-destructive: hsl(0 84% 60%);

  --color-foreground: hsl(210 11% 93%);
  --color-muted: hsl(215 8% 55%);

  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

@layer base {
  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer utilities {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-surface) transparent;
  }

  *:hover {
    scrollbar-color: var(--color-muted) transparent;
  }

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

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

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

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

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