/* ============================================================================
   BORDADOS SMANIOTTO — DESIGN SYSTEM v1 · BASE
   Ibitinga/SP · Grupo Smaniotto · Smaniotto · Sofisticata · Palácio dos Tapetes

   Reset, tipografia base e acessibilidade: o que vale para o documento inteiro
   antes de existir qualquer componente. Depende de tokens.css.
   ========================================================================== */

/* ── 02 BASE ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  font-weight: var(--peso-normal);
  line-height: var(--lh-corpo);
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--fonte-titulo); font-weight: var(--peso-leve); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--carmim);
  outline-offset: 3px;
  border-radius: var(--rad-1);
}
/* SUPERFÍCIE ESCURA — a seção tinta E o menu móvel.
   O menu móvel pinta o mesmo --tinta de fundo que a seção tinta, mas não é uma
   seção: é componente de navegação. Enquanto só a seção estava listada aqui, o
   contorno de foco dentro do menu saía carmim sobre tinta (contraste 1,7:1) e
   quase não se via. Onde este :is() aparece, é sempre a mesma leitura: "sobre
   fundo tinta". */
:is(.secao--tinta, .menu-movel) :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--rose); }

.pular-para-conteudo {
  position: fixed; top: var(--esp-3); left: var(--esp-3); z-index: 100;
  transform: translateY(-200%);
  background: var(--carmim); color: var(--algodao);
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--t-corpo-sm); font-weight: var(--peso-medio);
  transition: transform var(--dur-2) var(--saida);
}
.pular-para-conteudo:focus { transform: translateY(0); }

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

/* MOVIMENTO REDUZIDO — a regra de documento.
   Quem liga "reduzir movimento" no sistema operacional está dizendo que
   animação lhe faz mal, não que prefere outra estética. Aqui toda animação e
   toda transição do documento viram instantâneas de uma vez, e cada componente
   que precisar de tratamento próprio o declara na folha dele.

   ⚠️ ESTA REGRA MOROU NA SEÇÃO 10 DO padroes.css ATÉ 14/8/2026, e veio para cá
   quando o painel administrativo ganhou moldura própria: o painel não carrega
   o padroes.css, e enquanto ela estava lá quem pedia menos movimento recebia
   movimento inteiro do lado de dentro. Regra que vale para o documento mora na
   folha do documento — é o que o cabeçalho deste arquivo diz. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Papéis tipográficos — cada um é uma classe utilizável. */
.h1 { font-size: var(--t-h1); line-height: var(--lh-apertada); letter-spacing: var(--tr-titulo);
      font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1; }
.h2 { font-size: var(--t-h2); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo);
      font-variation-settings: 'opsz' 120, 'SOFT' 55, 'WONK' 1; }
.h3 { font-size: var(--t-h3); line-height: var(--lh-titulo); font-weight: var(--peso-normal);
      font-variation-settings: 'opsz' 72, 'SOFT' 45, 'WONK' 0; }
.h4 { font-size: var(--t-h4); line-height: var(--lh-media); font-weight: var(--peso-normal);
      font-variation-settings: 'opsz' 48, 'SOFT' 40, 'WONK' 0; }
.h5 { font-size: var(--t-h5); line-height: var(--lh-media); font-weight: var(--peso-medio);
      font-family: var(--fonte-corpo); }
.h6 { font-size: var(--t-h6); line-height: var(--lh-media); font-weight: var(--peso-forte);
      font-family: var(--fonte-corpo); }
.corpo-lg { font-size: var(--t-corpo-lg); line-height: var(--lh-corpo); font-weight: var(--peso-leve); }
.corpo    { font-size: var(--t-corpo);    line-height: var(--lh-corpo); }
.corpo-sm { font-size: var(--t-corpo-sm); line-height: var(--lh-corpo); }
.legenda  { font-size: var(--t-legenda);  line-height: var(--lh-media); color: var(--texto-brando); }
.rotulo {
  font-size: var(--t-rotulo); line-height: var(--lh-media); font-weight: var(--peso-forte);
  letter-spacing: var(--tr-rotulo); text-transform: uppercase;
  font-variation-settings: 'wdth' 88;
}
.auxiliar { font-size: var(--t-auxiliar); line-height: var(--lh-media); color: var(--texto-brando); }
.dado {
  font-family: var(--fonte-dado); font-size: var(--t-auxiliar);
  letter-spacing: var(--tr-dado); font-variant-numeric: tabular-nums;
}
.brando { color: var(--texto-brando); }
.acento { color: var(--carmim); }
:is(.secao--tinta, .menu-movel) .brando { color: rgb(var(--bruma-rgb) / .72); }
.secao--tinta .acento, .secao--tinta .legenda, .secao--tinta .auxiliar { color: var(--rose); }