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

/* Custom base styles */
@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply antialiased;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-dark-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-dark-300 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-dark-400;
  }
}

/* Modern component system */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-xl border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-50 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/40 hover:from-primary-600 hover:to-primary-700 focus:ring-primary-500 active:scale-95;
  }
  
  .btn-secondary {
    @apply bg-dark-200 text-dark-700 shadow-lg shadow-dark-200/25 hover:bg-dark-300 hover:shadow-xl hover:shadow-dark-300/40 focus:ring-dark-500 active:scale-95;
  }
  
  .btn-success {
    @apply bg-gradient-to-r from-emerald-500 to-green-600 text-white shadow-lg shadow-emerald-500/25 hover:shadow-xl hover:shadow-emerald-500/40 hover:from-emerald-600 hover:to-green-700 focus:ring-emerald-500 active:scale-95;
  }
  
  .btn-danger {
    @apply bg-gradient-to-r from-red-500 to-rose-600 text-white shadow-lg shadow-red-500/25 hover:shadow-xl hover:shadow-red-500/40 hover:from-red-600 hover:to-rose-700 focus:ring-red-500 active:scale-95;
  }
  
  .btn-ghost {
    @apply bg-transparent text-dark-600 hover:bg-dark-200/50 hover:text-dark-800 focus:ring-dark-500;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-base;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  
  .btn-block {
    @apply w-full;
  }
  
  .card {
    @apply bg-dark-100/80 backdrop-blur-xl border border-dark-200/50 rounded-2xl shadow-xl shadow-dark-50/10 overflow-hidden;
  }
  
  .card-hover {
    @apply hover:shadow-2xl hover:shadow-dark-50/20 hover:-translate-y-1 transition-all duration-300;
  }
  
  .card-glow {
    @apply shadow-glow hover:shadow-glow-lg;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-dark-200/50 bg-gradient-to-r from-dark-50/50 to-dark-100/50 backdrop-blur-sm;
  }
  
  .card-body {
    @apply p-6;
  }
  
  .card-title {
    @apply text-lg font-semibold text-dark-800 tracking-tight;
  }
  
  .alert {
    @apply p-4 rounded-xl border backdrop-blur-sm animate-fade-in;
  }
  
  .alert-info {
    @apply bg-blue-500/10 border-blue-500/20 text-blue-300;
  }
  
  .alert-success {
    @apply bg-emerald-500/10 border-emerald-500/20 text-emerald-300;
  }
  
  .alert-warning {
    @apply bg-amber-500/10 border-amber-500/20 text-amber-300;
  }
  
  .alert-danger {
    @apply bg-red-500/10 border-red-500/20 text-red-300;
  }
  
  .form-input {
    @apply block w-full rounded-xl border-dark-300/50 bg-dark-100/50 text-dark-800 placeholder-dark-400 shadow-sm backdrop-blur-sm transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:bg-dark-100;
  }
  
  .form-select {
    @apply block w-full rounded-xl border-dark-300/50 bg-dark-100/50 text-dark-800 shadow-sm backdrop-blur-sm transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:bg-dark-100;
  }
  
  .form-label {
    @apply block text-sm font-medium text-dark-600 mb-2 tracking-wide;
  }
  
  .navbar {
    @apply bg-dark-50/80 backdrop-blur-xl border-b border-dark-200/50 shadow-lg shadow-dark-50/10 sticky top-0 z-40;
  }
  
  .dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-dark-100/95 backdrop-blur-xl rounded-2xl shadow-2xl shadow-dark-50/20 ring-1 ring-dark-200/50 focus:outline-none z-50 animate-slide-up;
  }
  
  .dropdown-item {
    @apply block px-4 py-2.5 text-sm text-dark-600 hover:bg-dark-200/50 hover:text-dark-800 transition-all duration-150 first:rounded-t-2xl last:rounded-b-2xl;
  }
  
  .glass-effect {
    @apply bg-dark-100/10 backdrop-blur-xl border border-dark-200/20;
  }
  
  .gradient-text {
    @apply bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent;
  }
  
  .loading-spinner {
    @apply animate-spin rounded-full border-2 border-dark-300 border-t-primary-500;
  }
  
  .pulse-glow {
    @apply animate-pulse-slow shadow-glow;
  }
}

/* Modern utility patterns */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  .perspective-1000 {
    perspective: 1000px;
  }
  
  .transform-gpu {
    transform: translate3d(0, 0, 0);
  }
}