/*
 * Metron — tokens.
 *
 * Primeiro arquivo da cascata: fontes -> tokens -> componentes -> app. Nada
 * aqui desenha nada; são só as variáveis. Trocar a identidade do app deve
 * ser possível editando só este arquivo.
 *
 * A linguagem é a do livro-caixa, e não é decoração: é a forma certa para o
 * conteúdo. Um livro-caixa alinha dinheiro em COLUNA, separa linha de linha
 * por FIO, e usa DUAS TINTAS — preta para o corrente, vermelha para o
 * negativo. É daí que vem "estar no vermelho".
 */

:root {
	/* O tema é decidido pelo atributo data-tema no <html>, escrito pelo
	   script de inc/tema.php antes da primeira pintura. Por isso aqui o
	   color-scheme é só o claro: o escuro o redefine abaixo. */
	color-scheme: light;

	/* ── A paleta ──────────────────────────────────────────────────────── */

	/* Papel, em três camadas: a página, o que sobe dela, e o que afunda
	   nela (o trilho de um alternador, o fundo de um ícone). */
	--mtr-papel: #f5f3ec;
	--mtr-papel-alto: #fbfaf6;
	--mtr-papel-fundo: #eae7dd;

	/* A pauta. É ela que separa as linhas, no lugar da caixa. */
	--mtr-pauta: #ddd9cd;
	--mtr-pauta-forte: #c3bdac;

	/* Tinta, em três pesos de importância. Mais que três e a hierarquia
	   deixa de ser legível. Os três passam de 4,5:1 sobre o papel. */
	--mtr-tinta: #1c211c;
	--mtr-tinta-2: #51564f;
	--mtr-tinta-3: #6e736b;

	/* Entrada e saída. Não são "bonito" e "feio": são direção do dinheiro,
	   e agora são as ÚNICAS cores saturadas do app. Antes havia um azul de
	   destaque espalhado por dezoito lugares competindo com elas — a regra
	   estava escrita aqui e a paleta não deixava cumprir. */
	--mtr-entrada: #1f6b3f;
	--mtr-saida: #a52a21;
	--mtr-alerta: #8a5a12;
	--mtr-alerta-fraco: #f3ecdb;

	/* ── Papéis semânticos ─────────────────────────────────────────────── */

	/* O destaque é a própria tinta. Um FAB quase preto sobre papel quente é
	   incomum num app de finanças justamente porque todos escolhem azul —
	   e é a escolha que mais tira a cara de genérico. */
	--mtr-destaque: var(--mtr-tinta);
	--mtr-destaque-texto: var(--mtr-papel);
	--mtr-destaque-fraco: var(--mtr-papel-fundo);

	/* ── Tipografia ────────────────────────────────────────────────────── */

	/* Duas famílias, self-hosted em assets/fontes. Ver fontes.css. */
	--mtr-fonte: 'Archivo', ui-sans-serif, system-ui, -apple-system,
		'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--mtr-fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;

	/* Dinheiro vai em Archivo, não em Fraunces: a coluna de valor precisa de
	   algarismo tabular confiável, e coluna que não fecha destrói a leitura
	   de um livro-caixa. */
	--mtr-fonte-numero: var(--mtr-fonte);

	/* Oito degraus, cada um com UM papel — e a lista de quem pode usar cada
	   um está no DESIGN.md, porque a regra não se sustenta sozinha. Eram
	   sete, e o de 13px tinha voltado a acumular VINTE funções (nota, intro,
	   rótulo de campo, aviso, chip, toast, botão mini, meta, cabeçalho de
	   dia…) enquanto o de 19px servia a uma só: o problema que a escala foi
	   criada para resolver tinha voltado no mesmo degrau.

	   O degrau existir não basta; o papel dele precisa estar escrito onde se
	   possa conferir. O de 22px é o que faltava — antes, o número que
	   responde um bloco usava o MESMO degrau do título da tela. */
	--mtr-t-micro: 0.6875rem;    /* 11px — rótulo da nav */
	--mtr-t-mini: 0.8125rem;     /* 13px — meta de item, e só */
	--mtr-t-base: 0.9375rem;     /* 15px — corpo; 15 e não 16 porque a tela é densa */
	--mtr-t-medio: 1.0625rem;    /* 17px — título de item, valor */
	--mtr-t-secao: 1.1875rem;    /* 19px — rótulo de seção, em Fraunces */
	--mtr-t-numero: 1.375rem;    /* 22px — o número que responde um bloco */
	--mtr-t-tela: 1.625rem;      /* 26px — título de tela */
	--mtr-t-manchete: 2.75rem;   /* 44px — a data */

	--mtr-peso-normal: 400;
	--mtr-peso-medio: 500;
	--mtr-peso-forte: 600;

	/* Altura de linha e tracking, que antes eram nove números soltos pelo
	   CSS. */
	--mtr-lh-apertada: 1.1;
	--mtr-lh-titulo: 1.25;
	--mtr-lh-base: 1.5;
	--mtr-ls-manchete: -0.02em;
	--mtr-ls-titulo: -0.01em;

	/* ── Espaço ────────────────────────────────────────────────────────── */

	--mtr-e-1: 4px;
	--mtr-e-2: 8px;
	--mtr-e-3: 12px;
	--mtr-e-4: 16px;
	--mtr-e-5: 24px;
	--mtr-e-6: 32px;
	--mtr-e-7: 48px;

	/* Respiro lateral da tela. Mesmo valor do e-4, nome diferente porque o
	   papel é outro: um é ritmo entre blocos, o outro é a margem da página.
	   Aponta para o e-4 para não virarem dois valores com o tempo. */
	--mtr-gutter: var(--mtr-e-4);

	/* A coluna de leitura. Repetida em três lugares antes de virar token. */
	--mtr-largura: 560px;

	/* Altura das duas barras fixas, somadas à área segura do aparelho (o
	   entalhe de baixo do iPhone). A de baixo vira padding-bottom do
	   conteúdo, para a nav não cobrir o último item. */
	--mtr-nav-altura: 58px;
	--mtr-topo-altura: 48px;
	--mtr-safe-baixo: env(safe-area-inset-bottom, 0px);

	/* ── Alvo de toque ─────────────────────────────────────────────────── */

	/* Um piso, não sete. Havia 28, 34, 36, 38, 40, 44 e 48px para a mesma
	   intenção, e cinco deles abaixo dos 44 que a regra do botão defendia. */
	--mtr-toque: 44px;
	--mtr-toque-mini: 36px;

	/* O botão flutuante. Virou token porque o 56 estava escrito em quatro
	   lugares, dois deles dentro de um calc() a 600 linhas de distância do
	   outro: mudar o tamanho do FAB exigia acertar os quatro em sincronia, e
	   esquecer um escondia o último item de uma lista atrás do botão. */
	--mtr-fab: 56px;

	/* ── Ícone ─────────────────────────────────────────────────────────── */

	--mtr-icone: 22px;
	--mtr-icone-mini: 18px;
	--mtr-icone-forte: 26px;
	--mtr-traco: 1.75;
	--mtr-traco-forte: 2.25;

	/* ── Camadas ───────────────────────────────────────────────────────── */

	--mtr-z-topo: 15;
	--mtr-z-nav: 20;
	--mtr-z-fab: 21;
	--mtr-z-toast: 40;

	/* ── Forma ─────────────────────────────────────────────────────────── */

	/* Raios menores que antes: papel pautado não tem canto redondo de app.
	   O que sobrou está onde a peça é mesmo um objeto. */
	--mtr-raio-1: 6px;
	--mtr-raio-2: 10px;
	--mtr-raio-3: 14px;
	--mtr-raio-cheio: 999px;

	/* Sombra quase não existe nesta paleta: profundidade vem do fio. Sobrou
	   para as três peças que de fato flutuam sobre o conteúdo. */
	--mtr-sombra-1: 0 1px 2px rgba(28, 33, 28, 0.05);
	--mtr-sombra-2: 0 4px 16px rgba(28, 33, 28, 0.10);
	--mtr-sombra-3: 0 -2px 24px rgba(28, 33, 28, 0.08);

	/* O véu atrás da folha. Virou token porque antes eram dois rgba()
	   escritos à mão — e eram as duas únicas cores do app que não trocavam
	   no tema escuro. */
	--mtr-veu: rgba(28, 33, 28, 0.45);
	--mtr-veu-forte: rgba(28, 33, 28, 0.6);

	/* ── Movimento ─────────────────────────────────────────────────────── */

	--mtr-rapido: 120ms;
	--mtr-normal: 220ms;

	/* Só a curva de entrada, porque só há entrada. Havia também uma
	   `--mtr-saida-curva` declarada e com ZERO usos — um token que ninguém
	   chama é uma promessa que o sistema não cumpre, e o espécime não tem
	   como mostrar. Volta no dia em que alguma coisa animar ao sair. */
	--mtr-entrada-curva: cubic-bezier(0, 0, 0.2, 1);
	--mtr-curva: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Escuro: tinta. Não é o claro invertido — o papel vira tinta e a tinta vira
   papel, mas os verdes e vermelhos clareiam, porque sobre fundo escuro a
   mesma cor fica ilegível.

   Um bloco só. Antes havia dois idênticos — este e uma cópia dentro de
   `@media (prefers-color-scheme: dark)` — e 24 declarações duplicadas são 24
   chances de corrigir uma cor num lugar e esquecer o outro. O media query
   saiu porque deixou de ter função: o script de inc/tema.php resolve a
   preferência do sistema e escreve `data-tema` no <html> antes da primeira
   pintura, então o atributo está sempre presente e é o único interruptor. */
:root[data-tema='escuro'] {
	color-scheme: dark;

	--mtr-papel: #141814;
	--mtr-papel-alto: #1d221d;
	--mtr-papel-fundo: #0e110e;

	--mtr-pauta: #2b312b;
	--mtr-pauta-forte: #3d443d;

	--mtr-tinta: #eae7de;
	--mtr-tinta-2: #a5a89e;
	--mtr-tinta-3: #7d8178;

	--mtr-entrada: #6fbf84;
	--mtr-saida: #e8796d;
	--mtr-alerta: #d9a441;
	--mtr-alerta-fraco: #2a2414;

	--mtr-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--mtr-sombra-2: 0 4px 16px rgba(0, 0, 0, 0.5);
	--mtr-sombra-3: 0 -2px 24px rgba(0, 0, 0, 0.6);

	--mtr-veu: rgba(0, 0, 0, 0.6);
	--mtr-veu-forte: rgba(0, 0, 0, 0.75);
}

/* Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--mtr-rapido: 1ms;
		--mtr-normal: 1ms;
	}
}