:root {
  --cor-primaria: #1D409B;         
  --cor-primaria-hover: #1D409B;  

  /* Cores para Texto e Fundo */
  --cor-texto-principal: #1f2937; 
  --cor-texto-secundario: #4b5563;
  --cor-texto-sutil: #9ca3af;     
  --cor-texto-contraste: #ffffff; 
  --cor-fundo-header: #ffffff;    
  --cor-fundo-escuro: #1D409B;    
  --cor-fundo-secundario: #EBA03A;    
  --cor-fundo-claro: #f9fafb;     
  --cor-fundo-medio: #f3f4f6;     
  --cor-borda: #e5e7eb;           

  /* Cores de Feedback (opcional, mas útil) */
  --cor-erro: #dc2626;         
  --cor-sucesso: #16a34a;
}

/* Tailwind CSS styles */
/* Custom styles */
html {
    /* Adiciona um espaçamento no topo ao rolar para uma âncora, evitando que o header cubra o título */
    scroll-padding-top: 100px; 
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--cor-fundo-claro);
    /* Adiciona padding no topo para não ficar atrás do header fixo */
    /* padding-top: 60px;  */
}
/* Adicione esta transição ao header para suavizar a mudança de cor */
header {
    transition: background-color 0.3s ease-in-out;
}
/* Crie esta nova classe para o estado do header após a rolagem */
.header-scrolled {
    background-color: var(--cor-fundo-escuro) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.hero-section {
    background: linear-gradient(rgba(10, 34, 64, 0.6), rgba(10, 34, 64, 0.7)),
    url('/assets/ufpb.jpeg') no-repeat center center;
    background-size: cover;
    padding-top: 8rem;
}
.hero-section-library {
    background: linear-gradient(rgba(10, 34, 64, 0.6), rgba(10, 34, 64, 0.7)),
    url('/assets/biblioteca.jpg') no-repeat center center;
    background-size: cover;
}
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.nav-link {
    display: block;
    padding: 0rem 0rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    transition: color 0.2s, background-color 0.2s;
}

.nav-link:hover {
    color: var(--cor-primaria);
    background-color: var(--cor-fundo-medio);
}

.nav-link.active {
    color: var(--cor-primaria-hover);
    font-weight: 600;
}

@media (min-width: 768px) {
    .nav-link {
        display: inline-block;
    }
}