nutriscan/app/globals.css

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

/* Scrollbar utilities */
@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
}

/* 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);
    }
  }

  /* Animações personalizadas para UI/UX */
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
  }

  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-bounce-gentle {
    animation: bounceGentle 2s infinite;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

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

  @keyframes bounceGentle {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.25rem);
    }
  }

  /* Padrão de grid para background */
  .bg-grid-pattern {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* 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%;
  }
}