/*
 * Camerinhas: base comum a todas as páginas. Só usa os tokens de tokens.css.
 * Público e interno usam a mesma base. data-area="public" ou "admin" no
 * <html> fica para ajustes de cada área, se um dia precisarem.
 */

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-link); text-underline-offset: 2px; }

/* Foco sempre visível no teclado, no azul da marca */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* A Tropi Land junta pares de letras (ligaduras) só quando as duas estão em
   MAIÚSCULAS: RA, TO, VI, AR, TA, RE, NA, LA... Deixe em maiúscula o par que
   deve se juntar. letter-spacing tem que ser zero: com espaçamento o
   navegador desliga as ligaduras. */
.tropi {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  font-feature-settings: 'liga' 1, 'kern' 1;
  font-variant-ligatures: common-ligatures;
}

/* !important: classes com display próprio (como flex) não podem desfazer */
.oculto { display: none !important; }

/* ---------------------------------------------------------------------------
 * Campos
 * ------------------------------------------------------------------------- */
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  accent-color: var(--color-action);
}
input::placeholder, textarea::placeholder { color: var(--color-ink-subtle); opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: -1px;
  border-color: var(--color-focus);
}
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
input:disabled, select:disabled { background: var(--color-surface-muted); color: var(--color-ink-muted); }
textarea { resize: vertical; }

/* ---------------------------------------------------------------------------
 * Botões
 * Em todo o site: azul-marinho com texto amarelo, na Tropi Land (a
 * assinatura da marca). Os pequenos (.mini) ficam em Archivo.
 * .secundario é o mesmo botão vazado; .mini é o botão pequeno das listas.
 * ------------------------------------------------------------------------- */
button {
  min-height: var(--tap-min);
  padding: 10px 18px;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  letter-spacing: 0;
  font-feature-settings: 'liga' 1, 'kern' 1;
  color: var(--brand-yellow);
  background: var(--color-action);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
button:hover { background: var(--color-action-hover); }
button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }

button.secundario {
  color: var(--color-action);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-action);
}
button.secundario:hover { background: var(--color-selected); }

button.mini {
  min-height: 32px;
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-action);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
}
button.mini:hover { background: var(--color-selected); }

/* ---------------------------------------------------------------------------
 * Avisos em bloco: cor + ícone + texto, nunca só a cor.
 * .aviso (público, nomes que o JS já usa) e .notice (interno) são o mesmo
 * componente. A página decide quando aparecem (.visivel ou .oculto).
 * ------------------------------------------------------------------------- */
.aviso, .notice {
  position: relative;
  padding: 10px 12px 10px 38px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
  border-left: 4px solid transparent; /* a variante pinta só esta borda */
}
.aviso::before, .notice::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 11px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--notice-icon) center / contain no-repeat;
  mask: var(--notice-icon) center / contain no-repeat;
}
.aviso.erro, .notice--danger {
  --notice-icon: var(--icon-danger);
  color: var(--status-danger-fg); background: var(--status-danger-bg); border-left-color: var(--status-danger-solid);
}
.aviso.info, .notice--info {
  --notice-icon: var(--icon-note);
  color: var(--status-info-fg); background: var(--status-info-bg); border-left-color: var(--status-info-solid);
}
.aviso.sucesso, .notice--success {
  --notice-icon: var(--icon-success);
  color: var(--status-success-fg); background: var(--status-success-bg); border-left-color: var(--status-success-solid);
}
.aviso.atencao, .notice--warning {
  --notice-icon: var(--icon-warning);
  color: var(--status-warning-fg); background: var(--status-warning-bg); border-left-color: var(--status-warning-solid);
}

/* ---------------------------------------------------------------------------
 * Selo de estado: fundo suave, texto escuro, ícone + texto.
 * Um selo por estado; o tom diz o significado (veja tokens.css).
 * ------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 7px; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 18px; white-space: nowrap; vertical-align: 1px;
}
.badge::before {
  content: ''; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--badge-icon) center / contain no-repeat; mask: var(--badge-icon) center / contain no-repeat;
}
.badge--success { --badge-icon: var(--icon-success); background: var(--status-success-bg); color: var(--status-success-fg); }
.badge--warning { --badge-icon: var(--icon-warning); background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge--danger  { --badge-icon: var(--icon-danger);  background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.badge--info    { --badge-icon: var(--icon-info);    background: var(--status-info-bg);    color: var(--status-info-fg); }
.badge--neutral { --badge-icon: var(--icon-neutral); background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* Campo que o robô preenche e gente não vê */
.hp { position: absolute; left: -9999px; }

@media (prefers-reduced-motion: reduce) {
  html, * { scroll-behavior: auto !important; }
}