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

@layer base {
  /* Design Brutalista - Eletrovolt
     - Fonte serifada forte para títulos
     - Alto Contraste
     - ZERO bordas arredondadas (anti-SaaS clichê)
  */

  :root {
    --brand-red: #D32F2F;
    --brand-orange: #FF6F00;
    --brand-yellow: #FFC107;
    --brand-dark: #0D0D0D;
    --brand-darker: #050505;
    --brand-light: #F9F9F9;
  }

  body {
    background-color: var(--brand-dark);
    color: var(--brand-light);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif; /* Fonte forte para títulos evocando tradição de eng. */
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  /* Forçar zero border radius em toda a UI - Filosofia Brutalista Afiada */
  * {
    border-radius: 0 !important;
  }

  /* Estilização agressiva do scrollbar para manter estética industrial */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--brand-darker);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--brand-red);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--brand-orange);
  }
}

@layer components {
  /* Componentes customizados baseados no CDN Tailwind */
  
  .btn-primary {
    @apply inline-block bg-gradient-to-r from-[#D32F2F] to-[#FF6F00] text-white font-bold py-4 px-8 uppercase tracking-wider transition-all duration-300 hover:from-[#FF6F00] hover:to-[#FFC107] hover:scale-105 hover:shadow-[0_0_20px_rgba(211,47,47,0.5)] focus:outline-none focus:ring-4 focus:ring-[#FFC107];
    /* Borda sólida preta para dar "peso" industrial ao componente */
    border: 2px solid var(--brand-darker);
  }

  .btn-outline {
    @apply inline-block bg-transparent text-white font-bold py-3 px-6 uppercase tracking-wider transition-all duration-300 hover:bg-white hover:text-black border-2 border-white;
  }

  .card-product {
    @apply relative bg-[#1A1A1A] border-2 border-[#333] transition-all duration-300 hover:border-[#D32F2F] flex flex-col h-full group;
    /* Efeito de sobreposição de profundidade, não sombra difusa */
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
  }
  
  .card-product:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px 0px rgba(211,47,47,1);
  }
  
  .input-sharp {
    @apply w-full bg-[#111] border-2 border-[#333] text-white py-3 px-4 focus:outline-none focus:border-[#FF6F00] focus:ring-0 transition-colors placeholder-[#666];
  }
}