/* ==========================================================
   Pixel Culture, tema escuro
   Três camadas de escuro: base, grafite (elevado) e preto fundo.
   Carregar depois de estilo.css, com class="escuro" no <html>.
   ========================================================== */

.escuro {
  --papel: #131211;
  --papel-2: #1c1a17;
  --tinta: #f1eee6;
  --tinta-2: #b3ab9c;
  --tinta-3: #948c80;   /* 5,6:1 na base e 5,2:1 no grafite */
  --fio-claro: #2d2a26;
  --brasa-escura: #ff6a3d;

  --grafite: #1c1a17;
  --fundo-preto: #0a0908;
  --regua: #3a3631;
}


/* ---------- réguas: grafite no lugar do branco ---------- */

.escuro .nav { border-top-color: var(--regua); border-bottom-color: var(--fio-claro); }
.escuro .abre-lado,
.escuro .busca { border-color: var(--fio-claro); }
.escuro .destaques-abas button { border-top-color: var(--regua); }
.escuro .colunas,
.escuro .escala,
.escuro .ficha { border-top-color: var(--regua); }
.escuro .ficha-nota { border-bottom-color: var(--fio-claro); }
.escuro .artigo-meta { border-color: var(--fio-claro); }
.escuro .balanco h3 { border-bottom-color: var(--regua); }
.escuro .texto blockquote { border-bottom-color: var(--fio-claro); }
.escuro .linha-tempo li { border-left-color: var(--regua); }
.escuro .linha-tempo li::before { border-color: var(--regua); }

/* cabeçalho de seção: régua grafite com o começo em brasa */
.escuro .cab { position: relative; border-top-color: var(--regua); }
.escuro .cab::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--brasa);
}

/* contornos de botão e campo */
.escuro .btn,
.escuro .tags a,
.escuro .busca input,
.escuro .news-form input,
.escuro .filtro select,
.escuro .abas button { border-color: var(--regua); }
.escuro .btn-cheio { border-color: var(--brasa-botao); }
.escuro .btn:hover { border-color: var(--tinta); }
.escuro .abas button[aria-pressed="true"] { background: var(--brasa-botao); border-color: var(--brasa-botao); color: #fff; }

.escuro .filtros { border-top-color: var(--regua); border-bottom-color: var(--fio-claro); }

.escuro .news { border: 0; background: var(--grafite); }

.escuro input { color: var(--tinta); }
.escuro .btn-cheio:hover { color: var(--papel); }
.escuro .abas button:not([aria-pressed="true"]) { color: var(--tinta); }

/* capas escuras (13, 2:17, NOV) não podem sumir no fundo */
.escuro .capa { outline: 1px solid #2d2a26; outline-offset: -1px; }
/* o contorno discreto da capa não pode apagar o foco de teclado */
.escuro .capa:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }


/* ---------- faixa do topo ---------- */

.escuro .faixa { background: var(--fundo-preto); color: var(--tinta); border-bottom: 1px solid var(--fio-claro); }


/* ---------- placar ---------- */

.escuro .placar { background: var(--fundo-preto); color: var(--tinta); border-top: 4px solid var(--brasa); }


/* ---------- colunas numa faixa grafite de ponta a ponta ---------- */

.escuro .opiniao {
  --fio-claro: #38342f;
  margin-top: 1rem;
  padding-top: 2.75rem;
  padding-bottom: 3rem;
  background: var(--grafite);
  box-shadow: 0 0 0 100vmax var(--grafite);
  clip-path: inset(0 -100vmax);
}

#podcast { padding-top: 3rem; }
.escuro .pod { background: var(--grafite); border-top-color: var(--regua); }


/* ---------- texto de review e notícia ---------- */

.escuro .texto { color: #ddd7cb; }
.escuro .texto h2,
.escuro .texto blockquote,
.escuro .balanco { color: var(--tinta); }

.escuro .veredito { background: var(--grafite); color: var(--tinta); border-top: 3px solid var(--brasa); }
.escuro .veredito strong { color: var(--brasa-escura); } /* 6,6:1; a brasa pura dava 4,24 no grafite */
.escuro .nota-redacao { background: var(--grafite); border-left-color: var(--brasa); }


/* ---------- rodapé ---------- */

.escuro .rodape { color: var(--tinta); background: var(--fundo-preto); border-top: 1px solid var(--fio-claro); }


/* ---------- arquivo de reviews ---------- */

.escuro .filtro select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23f1eee6'/%3E%3C/svg%3E");
  color: var(--tinta);
}