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

@layer base {
  :root {
    --primary: #ff6b6b;
    --secondary: #4ecdc4;
    --accent: #45b7d1;
    --dark: #292f36;
    --light: #f7f9fc;
  }
  
  body {
    @apply font-sans text-dark bg-light;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif font-bold;
  }
  
  a {
    @apply text-primary hover:underline;
  }
}

@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors;
  }
  
  .btn-dark {
    @apply px-6 py-3 bg-dark text-white rounded-full hover:bg-dark/90 transition-colors;
  }
}

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .gradient-overlay {
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
  }
  
  .card-hover {
    transition: all 0.3s ease;
  }
  
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
}