/* -----------------------------------------------------------------------------
   Base: reset enxuto e estilo dos elementos nativos

   Sem framework. O HTML semântico já deve sair legível daqui, para que os
   componentes só acrescentem o que for específico.
   ----------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--entrelinha-texto);
  font-weight: var(--peso-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Quem pediu menos movimento ao sistema recebe menos movimento. Não é
   preferência estética, é acessibilidade: animação em excesso provoca enjoo e
   desorientação em parte das pessoas. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Títulos ---------------------------------------------------------------
   Big Shoulders Display, sempre em caixa alta, conforme o manual. O
   text-transform fica aqui para que ninguém precise lembrar disso no HTML. */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--e-4);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--entrelinha-titulo);
  letter-spacing: var(--letra-titulo);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: var(--peso-preto); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); font-weight: var(--peso-medio); }

p {
  margin: 0 0 var(--e-4);
  max-width: var(--largura-texto);
  text-wrap: pretty;
}

/* --- Links -----------------------------------------------------------------
   A cor vem do papel semântico, então em bloco escuro o link sai em neon e em
   bloco claro sai em Evo Green, sem regra duplicada. */

a {
  color: var(--destaque);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: opacity var(--duracao-rapida) var(--curva);
}

a:hover {
  opacity: 0.75;
}

/* Foco visível é requisito de acessibilidade. Nunca remover sem pôr outro no
   lugar: quem navega por teclado perde a referência de onde está. */
:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 3px;
  border-radius: 2px;
}

strong, b { font-weight: var(--peso-forte); }

/* Nenhuma das duas fontes tem itálico desenhado. O navegador inclinaria a
   fonte artificialmente, o que fica torto. Substituímos a ênfase por peso. */
em, i {
  font-style: normal;
  font-weight: var(--peso-medio);
  color: var(--destaque);
}

ul, ol {
  margin: 0 0 var(--e-4);
  padding-left: var(--e-5);
  max-width: var(--largura-texto);
}

li { margin-bottom: var(--e-2); }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: var(--e-7) 0;
}

blockquote {
  margin: var(--e-6) 0;
  padding-left: var(--e-5);
  border-left: 3px solid var(--destaque);
  font-size: var(--t-corpo-g);
  color: var(--texto-suave);
}

code, pre {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.9em;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--e-5);
}

th, td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  border-bottom: 1px solid var(--borda);
}

th {
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: var(--letra-titulo);
  color: var(--destaque);
}

/* --- Estrutura ------------------------------------------------------------- */

.envoltorio {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao {
  padding-block: var(--secao-y);
  background: var(--fundo);
  color: var(--texto);
}

/* Some visualmente mas continua legível para leitor de tela. Serve para rótulo
   de campo e para o link de pular navegação. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: var(--z-modal);
  padding: var(--e-2) var(--e-4);
  background: var(--intell-green);
  color: var(--preto);
  font-weight: var(--peso-forte);
  border-radius: var(--raio);
  transform: translateY(-200%);
  transition: transform var(--duracao-rapida) var(--curva);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
}

/* Seleção de texto: Intell Green e Black do manual. */
::selection { background:var(--cor-destaque); color:var(--cor-fundo); text-shadow:none; }
::-moz-selection { background:var(--cor-destaque); color:var(--cor-fundo); text-shadow:none; }