/*
 * Modo noturno da Luminosofia.
 *
 * O assets/js/modo.js marca <html data-modo="noite"> (a escolha da pessoa em
 * localStorage['lum-modo'] ou, na falta dela, o prefers-color-scheme). Aqui os
 * presets de cor do theme.json são redefinidos; tudo que usa
 * var(--wp--preset--color--*) muda sozinho. Valores da prévia "Primeira página":
 * fundo Breu #0C0C16, texto Cal #ECEBEC, secundário #A3A19B, filete #4A4A52.
 * Os cartões de cor chapada (parede, vermelho, giz, azul-símbolo, breu) não mudam; os que não se
 * separam do fundo ganham borda de 1 px em azul-giz.
 */

/* Botão Noite/Dia (o modo.js troca o rótulo e tira o hidden). */
.alterna-modo {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0 0.25rem;
	min-height: var(--wp--custom--control-min-height);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
.alterna-modo:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

html[data-modo="noite"] {
	color-scheme: dark;
	--wp--preset--color--base: #0C0C16;
	--wp--preset--color--contrast: #ECEBEC;
	--wp--preset--color--primary: #0F2044;
	--wp--preset--color--secondary: #A47B22;
	--wp--preset--color--accent: #0C0C16;
	--wp--preset--color--surface: #ECEBEC;
	--wp--preset--color--muted: #A3A19B;
	--wp--preset--color--giz: #AFC0E0;
	--wp--preset--color--parede: #0F2044;
	--wp--preset--color--vermelho: #A3262F;
	--wp--preset--color--azul-simbolo: #5883C3;
	--wp--preset--color--breu: #0C0C16;
	--wp--custom--line-color: #4A4A52;
}

/* Cartões que não se separam do fundo escuro ganham borda de 1 px em azul-giz. */
html[data-modo="noite"] :is(.has-primary-background-color, .has-parede-background-color, .has-breu-background-color, .is-style-cartao-parede) {
	border: 1px solid var(--wp--preset--color--giz);
}

html[data-modo="noite"] .screen-reader-text.skip-link:focus {
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--giz);
}

/* Logotipo (cabeçalho, Home e rodapé): Cal no desenho e o vermelho mais claro, como na prévia. */
html[data-modo="noite"] .logotipo path[fill="#181713"] {
	fill: #ECEBEC;
}
html[data-modo="noite"] .logotipo path[fill="#A3262F"] {
	fill: #D1404A;
}

/*
 * Sem JS (ou antes do modo.js rodar) não há data-modo: a preferência do sistema vale.
 * O bloco abaixo é cópia exata das regras acima, só com o seletor-raiz html:not([data-modo]);
 * o noite.test.mjs reprova se os dois divergirem. data-modo="dia" continua valendo.
 */
@media (prefers-color-scheme: dark) {
	html:not([data-modo]) {
		color-scheme: dark;
		--wp--preset--color--base: #0C0C16;
		--wp--preset--color--contrast: #ECEBEC;
		--wp--preset--color--primary: #0F2044;
		--wp--preset--color--secondary: #A47B22;
		--wp--preset--color--accent: #0C0C16;
		--wp--preset--color--surface: #ECEBEC;
		--wp--preset--color--muted: #A3A19B;
		--wp--preset--color--giz: #AFC0E0;
		--wp--preset--color--parede: #0F2044;
		--wp--preset--color--vermelho: #A3262F;
		--wp--preset--color--azul-simbolo: #5883C3;
		--wp--preset--color--breu: #0C0C16;
		--wp--custom--line-color: #4A4A52;
	}

	/* Cartões que não se separam do fundo escuro ganham borda de 1 px em azul-giz. */
	html:not([data-modo]) :is(.has-primary-background-color, .has-parede-background-color, .has-breu-background-color, .is-style-cartao-parede) {
		border: 1px solid var(--wp--preset--color--giz);
	}

	html:not([data-modo]) .screen-reader-text.skip-link:focus {
		color: var(--wp--preset--color--contrast);
		border: 1px solid var(--wp--preset--color--giz);
	}

	/* Logotipo (cabeçalho, Home e rodapé): Cal no desenho e o vermelho mais claro, como na prévia. */
	html:not([data-modo]) .logotipo path[fill="#181713"] {
		fill: #ECEBEC;
	}
	html:not([data-modo]) .logotipo path[fill="#A3262F"] {
		fill: #D1404A;
	}
}