@import "tailwindcss";

@layer base {
  body {
    font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
    background-color: #f6f3ee;
    color: #0f172a;
  }

  h1, h2, h3, h4 {
    font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.02em;
  }
}

@layer components {
  .prose code {
    @apply bg-amber-50 px-1.5 py-0.5 rounded text-sm;
  }
  
  .prose pre {
    @apply bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto;
  }
  
  .prose pre code {
    @apply bg-transparent p-0 text-inherit;
  }
}

@layer utilities {
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }

  @keyframes drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
  }

  @keyframes fade-up {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .animate-float {
    animation: float 12s ease-in-out infinite;
  }

  .animate-drift {
    animation: drift 16s ease-in-out infinite;
  }

  .animate-fade-up {
    animation: fade-up 0.8s ease-out both;
  }

  .animate-fade-up-slow {
    animation: fade-up 1.1s ease-out both;
  }
}