/* ARTEN — base: reset, tipografia, utilitários, acessibilidade */

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; max-width: var(--measure); }

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

button, input {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  border-radius: var(--radius);
}
button { cursor: pointer; }

/* Foco visível — nunca remover.
   Checklist §5: "outline sóbrio, não camelo fino". O camelo reprova AA
   (~2.8:1) e nem 3:1 ele garante sobre cru. Aqui o anel é ink sobre
   claro e paper sobre escuro: 21:1 dos dois lados. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* As seções invertidas viram o anel. O nav é fixo e atravessa as duas,
   então ele decide pelo próprio estado, não pela seção que o contém. */
[data-fundo="escuro"] { --focus-ring: var(--paper); }
.nav:not(.is-escuro) { --focus-ring: var(--paper); }

/* ---- Utilitários ------------------------------------------------------ */

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

/* Índice de seção (01/02/03). Era camelo — reprova AA. Agora o número é
   --text-muted e o camelo fica onde o manual manda: no filete acima. */
.numero {
  display: inline-block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-top: var(--space-3);
  border-top: var(--rule-camelo) solid var(--accent);
}

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Entrada contida — o default do site. Espetáculo é exceção. */
.entra {
  opacity: 0;
  transform: translateY(14px);
}

/* ---- prefers-reduced-motion -------------------------------------------
   Mata o motion inteiro. O site continua legível e navegável, só parado. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .entra { opacity: 1 !important; transform: none !important; }
}

/* ---- Utilitários canônicos do sistema (vieram com o gate e a LP feminina) ----
   O hero do Oryzo usa vocabulário próprio; estas duas classes são do manual e
   as páginas trazidas do design system dependem delas. */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display, 400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
}
.label-caps {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* Skip link: visualmente oculto, mas TEM que aparecer no foco de teclado —
   senão existe só para leitor de tela e é inútil para quem enxerga e navega
   por Tab, que é o alvo original do padrão (achado da auditoria de 31/07). */
.so-leitor:focus-visible {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-6);
  overflow: visible;
  clip-path: none;
  z-index: 999;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}