/* Tema Claro */
:root {
    --background-color: #f5f5f5;
    --background-color-card: #f5f5f5;
    --text-color: #1F1F1F;
    --link-color: #1B74E4;
    --highlight: #f7f7f7;
    --highlight-2: #e2e3e5;
    --light-color: darkblue;
    --text-color-impar: #E9E9E9;
    --text-color-par: #F5F5F5;
    /* Adicione mais variáveis conforme necessário */
}

/* Tema Escuro */
.dark {
    --background-color: #2b2b2b;
    --background-color-card: #3d3d3d;
    --text-color: #E0E0E0;
    --link-color: #BB86FC;
    --highlight: #575757; /* Um cinza um pouco mais claro, proporcionando melhor visibilidade */
    --highlight-2: #6a6c6e; /* Um cinza médio-claro que oferece contraste sem ser duro aos olhos */
    --light-color: #7a9fb8; /* Um cinza claro que oferece um excelente contraste contra um fundo escuro, mantendo a legibilidade */
    --text-color-impar: #32383e;
    --text-color-par: #2c3136;
    --border-color: #484e55; /* Cor de borda sutil */
    --focus-border-color: #65707c; /* Cor de borda quando focado, mais clara */
    --placeholder-color: #9ca3af; /* Cor para o texto do placeholder */
    --item-hover-bg-color: #41474d; /* Cor de fundo dos itens ao passar o mouse */
    --background-color-componente: #2C3E50;
    --background-color-dim: #2A2A2A; /* Fundo para elementos desabilitados */
    --text-color-disabled: #757575; /* Texto para elementos desabilitados */
    /* Adicione mais variáveis conforme necessário */
}