/*
  Definindo as cores da paleta como variáveis CSS para fácil utilização.
  Isso centraliza a definição de cores, facilitando a manutenção.
*/
:root {
    --light-gray: #f2f2f2;
    --teal: #348e91;
    --dark-teal: #1c5052;
    --dark-cyan: #213635;
    --near-black: #0a0c0d;
}

/*
  Estilos base para o corpo da página.
  - Define a fonte principal para 'Inter'.
  - Define a cor de fundo e a cor do texto padrão.
  - Usa flexbox para garantir que o rodapé fique no final da página, mesmo em conteúdo curto.
*/
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--near-black);
    color: var(--light-gray);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
  Garante que o conteúdo principal (main) ocupe o espaço disponível,
  empurrando o rodapé para baixo.
*/
main {
    flex-grow: 1;
}

/*
  Classes utilitárias para aplicar as cores da paleta.
  Embora o Tailwind CSS seja usado, essas classes garantem que
  os estilos específicos da paleta sejam aplicados corretamente.
*/
.bg-near-black { background-color: var(--near-black); }
.bg-dark-cyan { background-color: var(--dark-cyan); }
.bg-dark-teal { background-color: var(--dark-teal); }
.text-light-gray { color: var(--light-gray); }
.text-teal { color: var(--teal); }
.border-teal { border-color: var(--teal); }

/*
  Efeitos de hover para interatividade.
*/
.hover\:bg-teal:hover { background-color: var(--teal); }
.hover\:text-near-black:hover { color: var(--near-black); }

/*
  Sombra customizada usando a cor de destaque da paleta.
*/
.shadow-teal { 
    box-shadow: 0 0 20px 0 rgba(52, 142, 145, 0.4); 
}

/*
  Estilo para o indicador visual na linha do tempo da carreira.
  - Cria um círculo usando pseudo-elemento ::before.
  - Posiciona o círculo à esquerda da linha vertical.
*/
.timeline-item::before {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--teal);
    left: -2.7rem; /* Ajusta a posição para fora da linha */
    top: 0.25rem;
    border: 3px solid var(--dark-cyan);
}