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

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 210 20% 98%;

    --card: 0 0% 5%;
    --card-foreground: 210 20% 98%;

    --popover: 0 0% 5%;
    --popover-foreground: 210 20% 98%;

    --primary: 210 20% 98%;
    --primary-foreground: 220.9 39.3% 11%;

    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;

    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;

    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;

    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 216 12.2% 83.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;

    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;

    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;

    --primary: 210 20% 98%;
    --primary-foreground: 220.9 39.3% 11%;

    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;

    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;

    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;

    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 216 12.2% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-black text-white;
  }
}

.print-force-new-page {
  page-break-before: always;
}

.card {
  @apply bg-[#111111] border-gray-800/50 rounded-xl shadow-lg hover:border-gray-700 transition-all duration-300;
}

.badge {
  @apply bg-gray-800/90 text-white rounded-lg border border-gray-700/50;
}

@media print {
  body {
    @apply bg-white text-black;
  }
  
  .card {
    @apply bg-white border-gray-200 shadow-none;
  }
  
  .badge {
    @apply bg-gray-100 text-black border-gray-300;
  }
}

@layer utilities {
  .section-spacing {
    @apply space-y-10 md:space-y-12;
  }
  
  .card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:border-gray-700;
  }
  
  .link-hover {
    @apply transition-colors duration-200 hover:text-blue-400;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-fade-in-delayed {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: 0.2s;
}

.animate-fade-in-delayed-more {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: 0.4s;
}

/* For the page transition effect */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Simple smooth transition effect */
@keyframes smoothFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes smoothFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-smooth-fade-out {
  animation: smoothFadeOut 0.3s ease-out forwards;
}

.animate-smooth-fade-in {
  animation: smoothFadeIn 0.3s ease-out forwards;
}

/* CSS transitions for even smoother effect */
.smooth-transition {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hide scrollbars while maintaining scroll functionality */
.scrollbar-hide {
  /* Hide scrollbar for Chrome, Safari and Opera */
  -webkit-scrollbar: none;
  
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}