Variáveis CSS

Olá, Thiago!

As variáveis CSS foram definidas corretamente no seletor :root. Isso deve torná-las acessíveis globalmente no seu projeto. Vamos verificar algumas coisas que podem estar causando o problema que você mencionou.

1. Uso correto das variáveis: Certifique-se de que você está usando as variáveis corretamente nas suas declarações de estilo. Por exemplo, para aplicar a cor primária como cor de fundo, você deve fazer algo assim:

   body {
       background-color: var(--cor-primaria);
   }
   

2. Cascata e especificidade: Verifique se não há outras regras CSS que estão sobrescrevendo suas variáveis. Isso pode acontecer se houver regras mais específicas ou declarações de estilo posteriores que definem outras cores.

3. Erro de digitação ou sintaxe: Confira se todas as variáveis estão escritas corretamente quando você tenta usá-las. Um erro de digitação pode fazer com que a variável não seja reconhecida.

4. Suporte do navegador: Embora a maioria dos navegadores modernos suporte variáveis CSS, vale a pena verificar se o navegador que você está usando suporta essa funcionalidade. Você pode verificar isso em sites como Can I Use.

5. Carregamento correto dos arquivos CSS: Certifique-se de que o arquivo CSS onde você definiu as variáveis está sendo carregado corretamente no seu projeto. Às vezes, problemas no caminho do arquivo ou na ordem de carregamento podem causar esse tipo de problema.

Aqui está um exemplo simples de como você pode usar as variáveis em diferentes seletores:

:root {
    --cor-primaria: #000000; 
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
    --cor-hover: #272727;
    --fonte-primaria: 'Krona One', sans-serif; 
    --fonte-secundaria: 'Montserrat', sans-serif;
}

body {
    background-color: var(--cor-secundaria);
    color: var(--cor-primaria);
    font-family: var(--fonte-primaria);
}

a:hover {
    background-color: var(--cor-hover);
}

Se após verificar esses pontos o problema persistir, peço que me envie seu código, assim poderei te auxiliar com mais assertividade.

Espero ter ajudado!

Abraços e bons estudos!