/* Reset + tipografia base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, figure { margin: 0; }

h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-lg); font-weight: 600; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

input, select, textarea, button {
  font-family: inherit;
}

ul { list-style: none; margin: 0; padding: 0; }

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

/* Nossos ícones inline (js/components/icons.js) não têm width/height no
   <svg>, só viewBox — sem isso, o navegador usa o tamanho padrão de
   elemento substituído (300x150), enorme. Isso vale como piso de segurança;
   contextos específicos (ex: .list-item__icon svg) sobrescrevem com um
   seletor mais específico. */
svg { width: 24px; height: 24px; flex-shrink: 0; }

::selection { background: var(--color-brand-100); color: var(--color-brand-700); }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); }

.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;
}

.hidden { display: none !important; }