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

@layer base {
  :root {
    /* Cores Institucionais */
    --azul-sale: #292f6b; /* Azul Salesiano */
    --azul-sale-dark: #002f6c; /* Azul Escuro (Hover) */
    --vermelho-sale: #da291c; /* Vermelho Salesiano */
    --vermelho-sale-dark: #b91d12; /* Vermelho Escuro (Hover) */

    /* Tipografia */
    --font-heading: "Montserrat", sans-serif;
    --font-body: "Roboto", sans-serif;
  }

  /* --- ESTILOS GERAIS --- */
  body {
    font-family: var(--font-body);
  }

  h1, h2, h3, h4, .btn-text {
    font-family: var(--font-heading);
  }

  /* Ajuste para Navbar Fixa não cobrir o título ao clicar no link */
  html {
    scroll-padding-top: 80px;
  }

  /* --- COMPONENTES CUSTOMIZADOS --- */

  /* Hero Background com Gradiente Dinâmico */
  .hero-bg {
    background-color: var(--color-primary);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  /* Animações */
  .fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
  }

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

  /* Cards Interativos */
  .card-hover {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      border-color 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
  }
}