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

/* Otimizações de performance para animações */
@layer utilities {
  .animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
  }

  .fade-in-0 {
    opacity: 0;
  }

  .slide-in-from-bottom-4 {
    transform: translateY(1rem);
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Otimização para listas grandes */
  .product-grid {
    contain: layout style paint;
  }

  .product-card {
    will-change: transform;
    backface-visibility: hidden;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 215 90% 50%;
    /* Azul Royal (#0055FF) */
    --primary-foreground: 210 40% 98%;

    --secondary: 185 70% 45%;
    /* Verde-azulado (#19A7A7) */
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 185 70% 95%;
    /* Verde-azulado claro */
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 215 90% 50%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 217 33% 17%;
    /* Fundo escuro azulado */
    --foreground: 210 40% 98%;

    --card: 217 33% 17%;
    --card-foreground: 210 40% 98%;

    --popover: 217 33% 17%;
    --popover-foreground: 210 40% 98%;

    --primary: 215 90% 60%;
    /* Azul Royal mais claro */
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 185 70% 40%;
    /* Verde-azulado ajustado */
    --secondary-foreground: 210 40% 98%;

    --muted: 217 33% 25%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 185 70% 25%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217 33% 25%;
    --input: 217 33% 25%;
    --ring: 215 90% 60%;
  }
}