@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-cellar-bg text-cellar-cream min-h-screen;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-track {
    @apply bg-cellar-bg;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-cellar-border rounded-full;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-cellar-muted;
  }
}

@layer components {
  .btn-primary {
    @apply bg-cellar-gold text-cellar-bg font-semibold px-6 py-2.5 rounded-lg
           hover:bg-cellar-gold-light transition-all duration-200
           active:scale-95 shadow-lg shadow-cellar-gold/20;
  }

  .btn-secondary {
    @apply bg-cellar-card text-cellar-cream border border-cellar-border font-medium px-6 py-2.5 rounded-lg
           hover:bg-cellar-surface hover:border-cellar-muted transition-all duration-200
           active:scale-95;
  }

  .btn-danger {
    @apply bg-red-900/50 text-red-300 border border-red-800 font-medium px-6 py-2.5 rounded-lg
           hover:bg-red-900 transition-all duration-200 active:scale-95;
  }

  .input-field {
    @apply w-full bg-cellar-surface border border-cellar-border rounded-lg px-4 py-2.5
           text-cellar-cream placeholder:text-cellar-muted
           focus:outline-none focus:border-cellar-gold focus:ring-1 focus:ring-cellar-gold/30
           transition-all duration-200;
  }

  .card {
    @apply bg-cellar-card border border-cellar-border rounded-xl overflow-hidden
           hover:border-cellar-muted/50 transition-all duration-300;
  }
}
