/* A base de toda página do app: as cores, a letra e o topo com a marca.
   As cores são as da home escolhida em 19/09/2026 (D8). Cor que se repete
   mora aqui, como variável; o CSS de cada peça mora no arquivo dela. */
:root {
  --fundo: #eef1f7;
  --cartao: #fff;
  --verde: #0e9f6e;
  --verde-escuro: #075c3f;
  --texto: #0f172a;
  --texto-fraco: #64748b;
  --linha: #e8ecf3;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 30px -18px rgba(15, 23, 42, .25);
  --raio: 18px;
  --fonte: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--fundo); }

body {
  margin: 0;
  color: var(--texto);
  font: 16px/1.5 var(--fonte);
  background: var(--fundo);
}

/* --- Topo: só a marca, até a casca da interface trazer o menu -------------- */
.topo {
  padding: 14px 20px;
  border-bottom: 1px solid var(--linha);
}

.marca {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.03em;
  color: var(--texto);
  text-decoration: none;
}

.marca span { color: var(--verde); }

.marca:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 4px;
  border-radius: 4px;
}