/* ==========================================================================
   a linha/ — modo escuro opcional (inc/tema.php, assets/js/tema.js)

   O modo claro é o padrão e não depende deste arquivo. Aqui só se
   redefinem as variáveis da paleta do theme.json quando o leitor escolhe o
   modo escuro (<html data-al-tema="escuro">): fundos, superfícies, textos,
   bordas, links e estados mudam juntos; medidas, tipografia, espaçamentos e
   raios ficam como estão. Sem filtros de inversão: fotos, ilustrações e
   logotipos mantêm as cores originais.

   Os valores escuros moram aqui (o theme.json não tem paleta alternável em
   tempo real). Contraste conferido contra o fundo #121212: texto principal
   ~16:1, secundário (#B8B8B8) ~9:1, terciário (#A6A6A6) ~7:1, vermelho de
   identidade clareado (#FF5C5F) ~6,7:1.
   ========================================================================== */

html[data-al-tema="escuro"] {
	color-scheme: dark;

	--wp--preset--color--ink-1: #F2F2F2;
	--wp--preset--color--ink-2: #DEDEDE;
	--wp--preset--color--ink-3: #B8B8B8;
	--wp--preset--color--ink-4: #A6A6A6;
	--wp--preset--color--paper-0: #121212;
	--wp--preset--color--paper-1: #1B1B1B;
	--wp--preset--color--paper-2: #262626;
	--wp--preset--color--hairline: #333333;
	--wp--preset--color--signal-1: #FF5C5F;
	--wp--preset--color--signal-2: #FF8A8C;
	--wp--preset--color--signal-tint: #3A1A1B;
	--wp--preset--color--base: #121212;
	--wp--preset--color--contrast: #F2F2F2;
	--wp--preset--color--accent-1: #FF5C5F;
	--wp--preset--color--accent-2: #3A1A1B;
	--wp--preset--color--accent-3: #FF8A8C;
	--wp--preset--color--accent-4: #B8B8B8;
	--wp--preset--color--accent-5: #1B1B1B;
	--wp--preset--color--accent-6: #333333;

	/* Séries dos gráficos da research (chart.js lê estas variáveis). */
	--al-serie-4: #6FB2E0;
	--al-serie-5: #D9B25C;
	--al-serie-6: #6CC08A;
	--al-serie-7: #B996E6;
}

/* Áreas que já são escuras no modo claro (cabeçalho, rodapé, faixa especial,
   capa tipográfica de documento) ficam idênticas: recebem de volta a paleta
   clara, porque usam "tinta" como fundo e "papel" como texto. */
html[data-al-tema="escuro"] :is(.al-header, .al-footer, .al-special, .al-doc-cover) {
	--wp--preset--color--ink-1: #0A0A0A;
	--wp--preset--color--ink-2: #242422;
	--wp--preset--color--ink-3: #5C5C57;
	--wp--preset--color--ink-4: #6E6E6A;
	--wp--preset--color--paper-0: #FFFFFF;
	--wp--preset--color--paper-1: #F5F5F5;
	--wp--preset--color--paper-2: #EAEAE4;
	--wp--preset--color--hairline: #E5E5E5;
	--wp--preset--color--signal-1: #C81E22;
	--wp--preset--color--signal-2: #9E1519;
	--wp--preset--color--signal-tint: #FBE9E9;
	--wp--preset--color--base: #FFFFFF;
	--wp--preset--color--contrast: #0A0A0A;
}

/* Widgets do TradingView (já no tema oficial "dark", mercado.js): com
   color-scheme escuro na página, o navegador pinta um fundo branco opaco
   atrás de iframes cujo documento não declara o mesmo esquema. Mantendo o
   iframe em "light", o fundo transparente do widget volta a valer. */
html[data-al-tema="escuro"] .al-tv {
	color-scheme: light;
}

/* Capa escura sobre fundo escuro: contorno fino por dentro (outline não muda
   medidas). O cabeçalho (#0A0A0A) já se separa da faixa de cotações. */
html[data-al-tema="escuro"] .al-doc-cover {
	outline: 1px solid #333333;
	outline-offset: -1px;
}

/* --------------------------------------------------------------------------
   Botão sol/lua (cabeçalho, ao lado da busca)
   -------------------------------------------------------------------------- */
.al-tema-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--wp--preset--color--paper-0);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--al-raio-ctrl);
	cursor: pointer;
}

.al-js .al-tema-btn {
	display: inline-flex;
}

.al-tema-btn:hover {
	border-color: var(--wp--preset--color--ink-3);
}

.al-tema-btn__sol,
html[data-al-tema="escuro"] .al-tema-btn__lua {
	display: none;
}

html[data-al-tema="escuro"] .al-tema-btn__sol {
	display: block;
}