/* ============================================================
   SOPRO — base.css
   Estilos fundamentais: tipografia, utilidades, acessibilidade
   ============================================================ */

body {
  font-family: var(--fonte-principal);
  font-size: var(--tipo-base);
  font-weight: var(--peso-normal);
  line-height: var(--entrelinha-larga);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  /* fundo com profundidade sutil — luz distante no topo */
  background-image: radial-gradient(
    ellipse 100% 55% at 50% -2%,
    rgba(92, 128, 224, 0.055) 0%,
    transparent 70%
  );
  background-attachment: fixed;
  /* renderização de texto mais nítida */
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Seleção de texto ───────────────────────────────────── */
::selection {
  background-color: var(--cor-primaria-foco);
  color: var(--cor-texto);
}

/* ── Scrollbar discreta ─────────────────────────────────── */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--cor-borda);
  border-radius: var(--raio-full);
}

/* ── Foco acessível ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 3px;
  border-radius: var(--raio-xs);
}

/* ── Hierarquia tipográfica ─────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--cor-texto);
  font-weight: var(--peso-semi);
  line-height: var(--entrelinha-titulo);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--tipo-3xl); font-weight: var(--peso-bold); letter-spacing: -0.03em; }
h2 { font-size: var(--tipo-2xl); }
h3 { font-size: var(--tipo-xl);  }
h4 { font-size: var(--tipo-lg);  font-weight: var(--peso-medio); }
h5 { font-size: var(--tipo-md);  font-weight: var(--peso-medio); }
h6 { font-size: var(--tipo-base); }

p {
  color: var(--cor-texto-secundario);
  line-height: var(--entrelinha-larga);
  max-width: 60ch; /* largura de leitura confortável */
}

/* parágrafo dentro de componentes não restringe largura */
.card p, .toast p { max-width: none; }

small {
  font-size: var(--tipo-xs);
  color: var(--cor-texto-sutil);
  line-height: var(--entrelinha-normal);
}

strong {
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}

a {
  color: var(--cor-primaria);
  text-underline-offset: 3px;
  transition: color var(--t-rapida);
}
a:hover { color: var(--cor-primaria-hover); }

/* ── Animação de entrada de página ─────────────────────── */
@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: entrar var(--t-media) ease both;
}

/* ── Utilitários globais ────────────────────────────────── */
.oculto {
  display: none !important;
}

.invisivel {
  visibility: hidden;
  pointer-events: none;
}

/* visível apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* texto secundário utilitário */
.texto-sutil    { color: var(--cor-texto-sutil) !important; }
.texto-sec      { color: var(--cor-texto-secundario) !important; }
.texto-primario { color: var(--cor-primaria) !important; }

/* alinhamento */
.centralizado  { text-align: center; }