/**
 * public/css/global.css — Reset, box-sizing e tipografia base.
 *
 * Aplica estilos fundamentais em toda a aplicação.
 * Não edite aqui para mudar cores — use variables.css.
 */

/* Reset básico — remove margens e paddings padrão dos navegadores */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--tamanho-fonte-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-principal);
  font-size: var(--tamanho-fonte-base);
  line-height: var(--altura-linha);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

/* Links */
a {
  color: var(--cor-primaria-escura);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Imagens responsivas */
img {
  max-width: 100%;
  height: auto;
}

/* Listas sem estilo (usadas para menus) */
ul, ol {
  list-style: none;
}

/* Inputs e botões herdam a fonte do body */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}

/* Scrollbar customizada (navegadores Webkit) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--cor-fundo);
}
::-webkit-scrollbar-thumb {
  background: var(--cor-borda);
  border-radius: var(--raio-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cor-texto-secundario);
}

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

/* Ícones SVG inline (gerados pelo helper ic() em utils.js) */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  /* Herda a cor do texto pai — mude "color" no elemento pai para colorir o ícone */
  color: currentColor;
  fill: none;
  stroke: currentColor;
}

/* Placeholder de inputs */
::placeholder {
  color: var(--cor-texto-secundario);
  opacity: 0.7;
}

/* Foco acessível — não remove o outline, apenas o estiliza */
:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}