/*
 * Tema Ápice: modo claro e noturno (família Coral) e a marca.
 * As cores do modo claro estão no theme.json; aqui o modo noturno troca as mesmas predefinições,
 * e tudo o que usa as predefinições (tema e app do plugin) acompanha.
 *
 * Quem escolhe: o botão do cabeçalho grava <html data-tema="claro|escuro"> (assets/tema.js).
 * Sem escolha, vale a preferência do aparelho. As duas regras do noturno abaixo têm as mesmas cores.
 */

:root {
	color-scheme: light;
}

/* Coral Noturno: carvão quente no fundo, o mesmo coral (mais claro) nas ações e o âmbar nas conquistas. */
:root[data-tema="escuro"],
:root[data-tema="escuro"] body {
	color-scheme: dark;
	--wp--preset--color--primaria: #ff8a5b;
	--wp--preset--color--primaria-escura: #ffa582;
	--wp--preset--color--primaria-clara: #3d2219;
	--wp--preset--color--sobre-primaria: #1f0e09;
	--wp--preset--color--apoio: #ffbe5c;
	--wp--preset--color--apoio-claro: #3a2b15;
	--wp--preset--color--apoio-forte: #ffbe5c;
	--wp--preset--color--sucesso: #6edc9a;
	--wp--preset--color--sucesso-claro: #17301f;
	--wp--preset--color--erro: #ff6b81;
	--wp--preset--color--erro-claro: #3a1a22;
	--wp--preset--color--fundo: #17110f;
	--wp--preset--color--superficie: #221915;
	--wp--preset--color--borda: #3b2c26;
	--wp--preset--color--texto: #f8eee9;
	--wp--preset--color--texto-suave: #c2aa9f;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]),
	:root:not([data-tema="claro"]) body {
		color-scheme: dark;
		--wp--preset--color--primaria: #ff8a5b;
		--wp--preset--color--primaria-escura: #ffa582;
		--wp--preset--color--primaria-clara: #3d2219;
		--wp--preset--color--sobre-primaria: #1f0e09;
		--wp--preset--color--apoio: #ffbe5c;
		--wp--preset--color--apoio-claro: #3a2b15;
		--wp--preset--color--apoio-forte: #ffbe5c;
		--wp--preset--color--sucesso: #6edc9a;
		--wp--preset--color--sucesso-claro: #17301f;
		--wp--preset--color--erro: #ff6b81;
		--wp--preset--color--erro-claro: #3a1a22;
		--wp--preset--color--fundo: #17110f;
		--wp--preset--color--superficie: #221915;
		--wp--preset--color--borda: #3b2c26;
		--wp--preset--color--texto: #f8eee9;
		--wp--preset--color--texto-suave: #c2aa9f;
	}
}

/* ----- Botão do modo claro/noturno (cabeçalho) ----- */

.apice-tema {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: 999px;
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto);
	cursor: pointer;
}

.apice-tema:hover {
	border-color: var(--wp--preset--color--primaria);
	color: var(--wp--preset--color--primaria);
}

.apice-tema:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaria);
	outline-offset: 2px;
}

.apice-tema svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* No claro aparece a lua (vai para o noturno); no noturno, o sol. */
.apice-tema__sol {
	display: none;
}

:root[data-tema="escuro"] .apice-tema__sol {
	display: block;
}

:root[data-tema="escuro"] .apice-tema__lua {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .apice-tema__sol {
		display: block;
	}

	:root:not([data-tema="claro"]) .apice-tema__lua {
		display: none;
	}
}

/* ----- Marca ----- */

.apice-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--texto);
	text-decoration: none;
}

.apice-marca:hover,
.apice-marca:focus-visible {
	color: var(--wp--preset--color--texto);
}

.apice-marca__simbolo {
	display: block;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
}

.apice-marca__nome {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.apice-marca--pequena .apice-marca__simbolo {
	width: 1.75rem;
	height: 1.75rem;
}

.apice-marca--pequena .apice-marca__nome {
	font-size: 1.2rem;
}

/* ----- Rodapé ----- */

.apice-rodape__lista {
	gap: 0.4rem;
}

.apice-rodape__lista p {
	margin: 0;
}

.apice-rodape__titulo {
	color: var(--wp--preset--color--texto);
	font-weight: 700;
}

.apice-rodape__base {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--borda);
	gap: 0.25rem 1.5rem;
}

.apice-rodape__base p {
	margin: 0;
}

/* Destaque da página inicial. */
.apice-destaque {
	display: flex;
	justify-content: center;
	margin-bottom: 0.5rem;
}

.apice-destaque .apice-marca {
	gap: clamp(0.75rem, 2.5vw, 1.25rem);
}

.apice-destaque .apice-marca__simbolo {
	width: clamp(4rem, 12vw, 6.5rem);
	height: clamp(4rem, 12vw, 6.5rem);
	filter: drop-shadow(0 12px 24px rgba(186, 68, 40, 0.28));
}

.apice-destaque .apice-marca__nome {
	font-size: clamp(3.25rem, 11vw, 6rem);
}