/*
 * Modo de alto contraste.
 *
 * Ativado por `<html data-contraste="alto">`. Em vez de reescrever o site,
 * troca os papéis de cor definidos em 00-tokens.css: fundo preto, texto
 * branco, links e foco em amarelo. Respeita também a preferência do sistema
 * operacional (`prefers-contrast: more`) quando a pessoa não escolheu nada.
 */

html[data-contraste="alto"] {
  --c-texto: #ffffff;
  --c-texto-suave: #ffffff;
  --c-titulo: #ffff00;
  --c-fundo: #000000;
  --c-fundo-alt: #000000;
  --c-fundo-suave: #000000;
  --c-borda: #ffffff;
  --c-link: #ffff00;
  --c-link-hover: #ffffff;
  --c-acao: #ffff00;
  --c-acao-texto: #000000;
  --c-acao-hover: #ffffff;
  --c-menu-fundo: #000000;
  --c-menu-texto: #ffffff;
  --c-menu-marca: #ffff00;
  --c-rodape-fundo: #000000;
  --c-rodape-texto: #ffffff;
  --c-foco: #ffffff;
  --c-foco-anel: #ff00ff;
  --cor-azul-claro-100: #000000;
  --cor-azul-escuro-100: #000000;
  --cor-verde-100: #000000;
  --cor-cinza-500: #ffffff;
}

/* Os plugins usam os nomes do tema antigo: no alto contraste, branco no preto e amarelo. */
html[data-contraste="alto"] {
  --azul-escuro: #ffff00;
  --azul-escuro-hover: #ffffff;
  --azul-apagado: #ffffff;
  --azul-apagado-claro: #ffffff;
  --verde: #ffff00;
  --verde-hover: #ffffff;
  --vermelho: #ff8a80;
  --branco: #000000;
  --preto: #ffffff;
  --quase-branco: #000000;
  --cinza-claro: #333333;
  --cinza-medio-claro: #aaaaaa;
  --cinza-medio-escuro: #ffffff;
  --cinza-escuro: #ffffff;
}

html[data-contraste="alto"] body {
  background: #000000;
  color: #ffffff;
}

html[data-contraste="alto"] .cap-titulo-pagina,
html[data-contraste="alto"] .cap-lateral__bloco,
html[data-contraste="alto"] .cap-relacionadas,
html[data-contraste="alto"] .content-list > div {
  background: #000000;
  border: 2px solid #ffffff;
}

html[data-contraste="alto"] .cap-titulo-pagina::after,
html[data-contraste="alto"] .cap-faixa {
  display: none;
}

html[data-contraste="alto"] .cap-nav {
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

html[data-contraste="alto"] .cap-nav__sub {
  background: #000000;
  border: 2px solid #ffffff;
}

html[data-contraste="alto"] .cap-nav__sub .cap-nav__link {
  color: #ffffff;
}

html[data-contraste="alto"] .cap-nav__sub .cap-nav__link:hover {
  background: #ffffff;
  color: #000000;
}

html[data-contraste="alto"] .cap-card,
html[data-contraste="alto"] .cap-whats__caixa {
  background: #000000;
  border: 2px solid #ffffff;
}

html[data-contraste="alto"] .cap-etiqueta {
  background: #ffff00;
  color: #000000;
}

html[data-contraste="alto"] img {
  filter: grayscale(1) contrast(1.15);
}

html[data-contraste="alto"] .cap-marca img,
html[data-contraste="alto"] .cap-rodape__logo img {
  filter: grayscale(1) invert(1) contrast(1.4);
  background: transparent;
}

html[data-contraste="alto"] .cap-whats__botao,
html[data-contraste="alto"] .cap-whats__cabeca {
  background: #ffff00;
  color: #000000;
}

html[data-contraste="alto"] .cap-whats__conversa,
html[data-contraste="alto"] .cap-whats__rodape {
  background: #000000;
}

html[data-contraste="alto"] .cap-whats__balao,
html[data-contraste="alto"] .cap-whats__digitando {
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: none;
}

html[data-contraste="alto"] .cap-whats__texto {
  background: #000000;
  color: #ffffff;
  border-color: #ffffff;
}

html[data-contraste="alto"] .cap-whats__enviar {
  background: #ffff00;
  color: #000000;
}

html[data-contraste="alto"] .cap-cookies {
  background: #000000;
  border-top: 3px solid #ffff00;
}

@media (prefers-contrast: more) {
  html:not([data-contraste="normal"]) {
    --c-texto: #000000;
    --c-texto-suave: #1a1a1a;
    --c-borda: #444444;
    --cor-cinza-500: #1a1a1a;
  }
}

/* Página inicial no modo de alto contraste. */
html[data-contraste="alto"] .cap-hero {
  background: #000000;
  border-bottom: 3px solid #ffff00;
}

html[data-contraste="alto"] .cap-hero__marca-dagua,
html[data-contraste="alto"] .cap-hero__pilares,
html[data-contraste="alto"] .cap-hero__pessoa {
  display: none;
}

html[data-contraste="alto"] .cap-hero__kicker,
html[data-contraste="alto"] .cap-hero__titulo,
html[data-contraste="alto"] .cap-hero__sub {
  color: #ffffff;
}

html[data-contraste="alto"] .cap-hero__kicker {
  color: #ffff00;
}

html[data-contraste="alto"] .cap-atalho,
html[data-contraste="alto"] .cap-atalho--azul,
html[data-contraste="alto"] .cap-atalho--verde,
html[data-contraste="alto"] .cap-atalho--amarelo,
html[data-contraste="alto"] .cap-atalho--laranja,
html[data-contraste="alto"] .cap-atalho--escuro {
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
}

html[data-contraste="alto"] .cap-atalho__icone {
  background: #ffff00;
  color: #000000;
}

html[data-contraste="alto"] .cap-bloco--bege,
html[data-contraste="alto"] .cap-licit-coluna,
html[data-contraste="alto"] .cap-campeonato,
html[data-contraste="alto"] .cap-evento {
  background: #000000;
  border: 2px solid #ffffff;
}

html[data-contraste="alto"] .cap-licit__situacao,
html[data-contraste="alto"] .cap-licit__situacao.is-aberta,
html[data-contraste="alto"] .cap-jogo__placar,
html[data-contraste="alto"] .cap-evento__data,
html[data-contraste="alto"] .cap-campeonato__modalidade {
  background: #ffff00;
  color: #000000;
}

html[data-contraste="alto"] .cap-campeonato__link {
  background: #000000;
  color: #ffff00;
}