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

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

/* Base Styles */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans antialiased;
  }
  
  /* Selection */
  ::selection {
    @apply bg-primary-500/30 text-primary-900;
  }
  
  .dark ::selection {
    @apply bg-primary-500/50 text-white;
  }
}

/* Components */
@layer components {
  /* Glassmorphism Cards */
  .card-glass {
    @apply glass rounded-2xl shadow-glass transition-all duration-300;
  }
  
  .card-glass:hover {
    @apply shadow-lg transform -translate-y-1;
  }
  
  .dark .card-glass {
    @apply glass-dark shadow-glass-dark;
  }
  
  /* Gradient Buttons */
  .btn-gradient {
    @apply relative overflow-hidden bg-gradient-to-r from-primary-600 to-secondary-500 
           text-white font-semibold px-8 py-3 rounded-full transition-all duration-300
           hover:shadow-glow hover:shadow-primary-500/50 transform hover:-translate-y-0.5;
  }
  
  .btn-gradient::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-secondary-500 to-primary-600 
           opacity-0 transition-opacity duration-300;
  }
  
  .btn-gradient:hover::before {
    @apply opacity-100;
  }
  
  .btn-gradient span {
    @apply relative z-10;
  }
  
  /* Section Titles */
  .section-title {
    @apply text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4;
  }
  
  .section-subtitle {
    @apply text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto;
  }
  
  /* Gradient Text */
  .gradient-text {
    @apply text-gradient;
  }
  
  /* Service Cards */
  .service-card {
    @apply relative p-8 rounded-2xl bg-white dark:bg-dark-800 
           border border-gray-200 dark:border-gray-700
           transition-all duration-500 overflow-hidden group;
  }
  
  .service-card::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-br from-primary-500/0 to-secondary-500/0 
           transition-all duration-500 opacity-0;
  }
  
  .service-card:hover::before {
    @apply opacity-10;
  }
  
  .service-card:hover {
    @apply transform -translate-y-2 shadow-xl border-primary-500/30;
  }
  
  /* Project Cards */
  .project-card {
    @apply relative overflow-hidden rounded-xl group cursor-pointer;
  }
  
  .project-card img {
    @apply transition-transform duration-700;
  }
  
  .project-card:hover img {
    @apply scale-110;
  }
  
  .project-card .overlay {
    @apply absolute inset-0 bg-gradient-to-t from-dark-900/90 via-dark-900/50 to-transparent
           opacity-0 group-hover:opacity-100 transition-opacity duration-500
           flex flex-col justify-end p-6;
  }
  
  /* Pricing Cards */
  .pricing-card {
    @apply relative p-8 rounded-2xl bg-white dark:bg-dark-800 
           border border-gray-200 dark:border-gray-700 transition-all duration-300;
  }
  
  .pricing-card.featured {
    @apply border-primary-500/50 shadow-glow scale-105;
  }
  
  /* Form Inputs */
  .form-input {
    @apply w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-dark-800 
           border border-gray-300 dark:border-gray-600
           text-gray-900 dark:text-white
           focus:ring-2 focus:ring-primary-500 focus:border-primary-500
           transition-all duration-200;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
  }
  
  /* Navigation */
  .nav-link {
    @apply relative text-gray-600 dark:text-gray-300 hover:text-primary-600 
           dark:hover:text-primary-400 font-medium transition-colors duration-200;
  }
  
  .nav-link::after {
    content: '';
    @apply absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-500 
           transition-all duration-300;
  }
  
  .nav-link:hover::after {
    @apply w-full;
  }
  
  .nav-link.active {
    @apply text-primary-600 dark:text-primary-400;
  }
  
  .nav-link.active::after {
    @apply w-full;
  }

  /* Blog Content Styles */
  .blog-content {
    @apply text-lg leading-relaxed text-gray-700 dark:text-gray-300;
  }
  
  .blog-content h2 {
    @apply text-3xl font-bold text-gray-900 dark:text-white mt-12 mb-6;
  }
  
  .blog-content h3 {
    @apply text-2xl font-bold text-gray-900 dark:text-white mt-10 mb-4;
  }
  
  .blog-content p {
    @apply mb-6;
  }
  
  .blog-content ul {
    @apply list-disc list-inside mb-6 space-y-2;
  }
  
  .blog-content ol {
    @apply list-decimal list-inside mb-6 space-y-2;
  }
  
  .blog-content blockquote {
    @apply border-l-4 border-primary-500 pl-6 py-2 my-8 italic bg-gray-50 dark:bg-dark-800 rounded-r-xl text-gray-600 dark:text-gray-400;
  }
  
  .blog-content img {
    @apply rounded-2xl shadow-xl my-10 w-full;
  }
  
  .blog-content a {
    @apply text-primary-500 font-semibold hover:underline decoration-2 underline-offset-4;
  }
  
  .blog-content pre {
    @apply bg-dark-900 text-gray-300 p-6 rounded-2xl my-8 overflow-x-auto border border-gray-700;
  }
  
  .blog-content code {
    @apply font-mono text-sm px-2 py-0.5 bg-gray-100 dark:bg-dark-800 rounded text-primary-500;
  }
}

/* Utilities */
@layer utilities {
  /* Animation Delays */
  .animation-delay-200 { animation-delay: 200ms; }
  .animation-delay-400 { animation-delay: 400ms; }
  .animation-delay-600 { animation-delay: 600ms; }
  .animation-delay-800 { animation-delay: 800ms; }
  
  /* Gradient Backgrounds */
  .bg-hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0891b2 100%);
  }
  
  .bg-hero-gradient-light {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #cffafe 100%);
  }
  
  /* Scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    @apply w-2;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-dark-800;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
  }
}