/* base.css : reset enxuto + tipografia base + body. Nenhuma tela escreve CSS proprio. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

/* CRITICO: sem isso, form cai pra Arial/-apple-system */
button, input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--texto);
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}

p { margin: 0 0 var(--sp-3); }

a { color: var(--cor-primaria-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visivel (acessibilidade, guardrail intocavel) */
:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

::selection { background: var(--cor-primaria-suave); color: var(--texto); }

/* Icones Phosphor: tamanho/cor via classe, nunca inline */
.icon    { font-size: 1.1rem; line-height: 1; display: inline-flex; vertical-align: middle; }
.icon-sm { font-size: .9rem; }
.icon-lg { font-size: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Logo oficial (menu lateral e telas de entrada): letra escura no tema claro,
   letra branca no escuro. Troca so por CSS, sem JS. */
.marca-logo { display: block; }
.marca-logo-escuro { display: none; }
:root[data-tema="dark"] .marca-logo-claro { display: none; }
:root[data-tema="dark"] .marca-logo-escuro { display: block; }