/* =============================================================================
 * SAF Assessoria Financeira — marca em texto
 *
 * A marca era um PNG: `default.png` com a palavra em azul, para fundo claro, e
 * `default-dark.png` com a mesma palavra em branco, para fundo escuro. Como o
 * logotipo era apenas texto, mantê-lo como imagem custava duas requisições, um
 * arquivo novo a cada ajuste de cor e um borrão em telas de alta densidade — sem
 * nada em troca.
 *
 * Em texto, a marca acompanha o zoom do navegador, fica nítida em qualquer
 * densidade e é lida por leitor de tela como o nome da empresa, e não como o
 * `alt` de uma imagem.
 *
 * DUAS VARIANTES DE FUNDO, e não uma cor só: o cabeçalho do painel é escuro
 * antes de fixar e claro depois, e a tela de acesso segue o tema do usuário.
 * Cada contexto escolhe a sua; é a mesma troca que os dois PNGs faziam.
 * ========================================================================== */

.marca {
	display: inline-flex;
	align-items: baseline;
	gap: .42em;
	font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none;
}

/* Os três tamanhos em que a marca aparece. Todo o resto do bloco está em `em`,
   então a medida abaixo é a única coisa que muda entre eles — e o conjunto
   continua proporcional em qualquer um.

   Foram escolhidos para reproduzir a altura que as imagens tinham: 20 px no
   cabeçalho do painel, 26 px no topo do Portal e 30 a 35 px na tela de acesso e
   nas páginas de erro. */
.marca--pequena { font-size: 13px; }
.marca--media   { font-size: 16px; }
.marca--grande  { font-size: 20px; }

/* A sigla carrega o peso; o resto do nome acompanha em corpo menor e espaçado,
   na mesma proporção do logotipo impresso. */
.marca-sigla {
	font-size: 1.55em;
	font-weight: 800;
	letter-spacing: -.02em;
}

.marca-resto {
	font-size: .82em;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Forma compacta: "SAFinanceira" numa palavra só, sem o descritivo.
   Existe para o cabeçalho do painel, onde a marca ocupa 15 a 20 px de altura e
   o nome por extenso ficaria ilegível muito antes de deixar de caber. */
.marca--compacta {
	gap: 0;
}

.marca--compacta .marca-resto {
	font-size: 1.55em;
	font-weight: 500;
	letter-spacing: -.01em;
	text-transform: none;
}

/* --- Fundo claro ---------------------------------------------------------
 *
 * O dourado da identidade não sobrevive sozinho sobre branco: no tom original
 * ele fica em torno de 2:1 de contraste, abaixo do mínimo legível. Aqui a sigla
 * fica quase preta e o dourado aparece escurecido, no descritivo, onde o texto
 * é menor mas também mais espaçado.
 */
.marca--fundo-claro .marca-sigla { color: #101828; }
.marca--fundo-claro .marca-resto { color: #8a6817; }

/* --- Fundo escuro --------------------------------------------------------
 *
 * Aqui o dourado é o que a identidade pede e o contraste permite.
 */
.marca--fundo-escuro .marca-sigla { color: #ffffff; }
.marca--fundo-escuro .marca-resto { color: #d4af37; }

/* --- Fundo que muda sozinho ----------------------------------------------
 *
 * O Portal do Cliente não tem seletor de tema: ele segue o do aparelho, por
 * `prefers-color-scheme`. Como o fundo muda sem que o template saiba, a marca
 * precisa mudar junto — fixar 'claro' ali deixaria o nome quase invisível para
 * quem usa o celular no modo escuro, que é a maior parte de quem abre o Portal.
 */
.marca--fundo-auto .marca-sigla { color: #101828; }
.marca--fundo-auto .marca-resto { color: #8a6817; }

@media (prefers-color-scheme: dark) {
	.marca--fundo-auto .marca-sigla { color: #ffffff; }
	.marca--fundo-auto .marca-resto { color: #d4af37; }
}

/* O link que envolve a marca não deve receber o sublinhado nem a cor de link. */
a:hover > .marca,
a:focus > .marca {
	opacity: .85;
}