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

:root {
  --background: #ffffff;
  --foreground: #111827;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Calculator card wiggle animation */
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-5deg); }
  35% { transform: rotate(4.5deg); }
  55% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2deg); }
  90% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}

.calculator-card-container:hover {
  animation: wiggle 2.5s ease-in-out infinite;
}

/* Menu animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

.animate-slide-down {
  animation: slideDown 0.3s ease-out;
}