@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Public+Sans:wght@400;500;600&display=swap');

@layer base {
  html {
    font-family: 'Public Sans', system-ui, sans-serif;
  }
  h1, h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
  }
}

@theme {
    --color-accent: #FFDE5A;
    --color-accent-dark: #F1C000;
    --color-bg-light: #F9F9F9;
    --color-bg-dark: #313131;
}

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

@layer utilities {
  @keyframes wiggle {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
  }
  
  .animate-wiggle {
    animation: wiggle 1s ease-out;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
    margin-top: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
    margin-top: 1rem;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
    margin-top: 1rem;
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
    margin-top: 0;
  }
}

.animate-fade-in {
  animation: fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
}

.animate-fade-out {
  animation: fade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
}