/* Tailwind CSS v3 - Custom Configuration */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

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

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-slate-50 text-slate-800 font-sans;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
  
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  
  /* Dark Mode Base Styles */
  .dark body {
    @apply bg-slate-900 text-slate-100;
  }
}

@layer utilities {
  .primary-600 {
    @apply bg-indigo-600;
  }
  .primary-700 {
    @apply bg-indigo-700;
  }
  .primary-500 {
    @apply bg-indigo-500;
  }
  .primary-100 {
    @apply bg-indigo-100;
  }
  .primary-50 {
    @apply bg-indigo-50;
  }
  .primary-200 {
    @apply bg-indigo-200;
  }
  
  .text-primary-600 {
    @apply text-indigo-600;
  }
  .text-primary-700 {
    @apply text-indigo-700;
  }
  .text-primary-500 {
    @apply text-indigo-500;
  }
  .text-primary-100 {
    @apply text-indigo-100;
  }
  
  .border-primary-500 {
    @apply border-indigo-500;
  }
  .border-primary-400 {
    @apply border-indigo-400;
  }
  .border-primary-200 {
    @apply border-indigo-200;
  }
  .border-primary-100 {
    @apply border-indigo-100;
  }
  
  .shadow-primary-200 {
    @apply shadow-indigo-200;
  }
  
  .animate-in {
    animation: slideIn 0.3s ease-out;
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fade-in {
    animation: fadeIn 0.3s ease-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .zoom-in-95 {
    animation: zoomIn 0.3s ease-out;
  }
  
  @keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .slide-in-from-bottom-4 {
    animation: slideUp 0.5s ease-out;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .slide-in-from-right-full {
    animation: slideRight 0.3s ease-out;
  }
  
  @keyframes slideRight {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-slate-100;
}

.dark ::-webkit-scrollbar-track {
  @apply bg-slate-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-300 rounded-full;
}

.dark ::-webkit-scrollbar-thumb {
  @apply bg-slate-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-400;
}

.dark ::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-500;
}

/* Selection */
::selection {
  @apply bg-indigo-200 text-indigo-900;
}

.dark ::selection {
  @apply bg-indigo-800 text-indigo-100;
}

/* Prevent overscroll on mobile */
html {
  overscroll-behavior: none;
}

/* Modal backdrop styles */
.modal-backdrop {
  overscroll-behavior: contain;
  touch-action: none;
}