/* Cores, tipos e reset. */
:root {
  --c-fundo: #0f1720;
  --c-superficie: #16202b;
  --c-superficie-2: #1d2937;
  --c-linha: #26364a;
  --c-linha-forte: #35485f;
  --c-texto: #e8eef6;
  --c-texto-2: #b3c2d4;
  --c-texto-3: #8192a7;   /* 4,64:1 sobre a superfície 2 — o anterior dava 4,40 */
  --c-acento: #2f8fd6;
  --c-acento-suave: #12314a;
  --c-ok: #2fa36b;
  --c-alerta: #d8a23a;
  --c-erro: #e2604e;
  --c-papel: #f7f9fc;
  /* ---- espaçamento: escala de 4pt. Antes eram 15 valores avulsos (3, 5, 7, 9, 11px…),
     que é o mesmo que não ter escala. Ritmo: --e-2 dentro de um grupo, --e-4 entre blocos. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;

  /* ---- tipografia: 5 degraus, razão ~1,15. Antes eram 12 tamanhos, com 12 / 12,5 / 13px
     ocupando o mesmo lugar sem diferença de leitura. */
  --t-xs: 12px;     /* rótulo, legenda, unidade */
  --t-sm: 13px;     /* corpo compacto: ficha, painel, tabela */
  --t-md: 14px;     /* corpo e título de caixa */
  --t-lg: 16px;     /* título de seção */
  --t-xl: 20px;     /* o número que a etapa entrega */

  /* ---- empilhamento: nomes, não números mágicos */
  --z-base: 1;
  --z-grudado: 10;   /* barra e coluna que acompanham a rolagem */
  --z-flutuante: 20; /* botão sobre o conteúdo */

  --raio: 8px;
  --sombra: 0 1px 3px rgba(0, 0, 0, .35);
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fonte-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

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

html { height: 100%; }

body {
  margin: 0;
  /* min-height, nunca height: com height fixo o rodapé ficava na marca de uma tela e o
     conteúdo passava por baixo dele */
  font: 14px/1.45 var(--fonte);
  color: var(--c-texto);
  background: var(--c-fundo);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}

h1, h2, h3 { margin: 0; font-weight: 700; }

button { font: inherit; cursor: pointer; }

input, select, textarea {
  font: inherit;
  color: inherit;
  background: var(--c-superficie-2);
  border: 1px solid var(--c-linha-forte);
  border-radius: 5px;
  padding: 5px 7px;
  min-width: 0;
}
/* campo desabilitado = resultado de cálculo, não lugar de digitar: traço pontilhado e fundo
   transparente para não parecer um campo que a pessoa esqueceu de preencher */
input:disabled, select:disabled {
  background: transparent; border-style: dashed; color: var(--c-texto-2); cursor: not-allowed;
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 1px;
}
input[type="number"] { font-family: var(--fonte-mono); }

table { border-collapse: collapse; width: 100%; }

.mono { font-family: var(--fonte-mono); }
.som  { color: var(--c-texto-3); }
.peq  { font-size: 12px; }