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

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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-sans text-slate-800 antialiased;
  }

  /* Selection color */
  ::selection {
    @apply bg-navy-500 text-white;
  }
}

@layer components {
  /* Gradient text helper */
  .text-gradient {
    @apply bg-gradient-to-r from-navy-500 to-navy-700 bg-clip-text text-transparent;
  }

  /* Section padding standard */
  .section-padding {
    @apply py-20 lg:py-28;
  }

  /* Container max width */
  .container-custom {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  /* Card hover effect */
  .card-hover {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
  }

  /* Focus ring for accessibility */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-navy-500 focus:ring-offset-2;
  }
}

@layer utilities {
  /* Hide scrollbar but allow scrolling */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}