@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

@layer utilities {
  .perspective-1000 {
    perspective: 1000px;
  }
  
  .transform-style-3d {
    transform-style: preserve-3d;
  }
  
  .backface-hidden {
    backface-visibility: hidden;
  }
  
  .rotate-y-180 {
    transform: rotateY(180deg);
  }
}

/* Custom Scrollbar Styles */
@layer base {
  /* Webkit browsers (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: rgb(209, 213, 219); /* gray-300 */
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgb(156, 163, 175); /* gray-400 */
  }

  /* Dark mode scrollbar */
  .dark ::-webkit-scrollbar-thumb {
    background: rgb(75, 85, 99); /* gray-600 */
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(107, 114, 128); /* gray-500 */
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgb(209, 213, 219) transparent;
  }

  .dark * {
    scrollbar-color: rgb(75, 85, 99) transparent;
  }
}