/* =========================================================================
   Base — fontes, variáveis, reset e área do desenho (canvas)
   ========================================================================= */

@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(../fontes/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(../fontes/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(../fontes/montserrat-latin-700-normal.woff2) format("woff2"); }

:root {
  /* Cores de interface (as cores dos lobos ficam em assets/js/config.js) */
  --papel: #F2F4F3;
  --tinta: #1F2A2E;
  --suave: #5E6B70;
  --linha: #D5DBD9;
  --cartao: #FFFFFF;
  --marca: #23A592;
  --teste: #B07A16;
  --sombra: 0 10px 30px rgba(31, 42, 46, .10);

  /* Tipografia */
  --titulo: "Montserrat", system-ui, sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--papel); color: var(--tinta); font: 400 15px/1.5 var(--texto); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

#tela { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: grab; touch-action: none; }
#tela.arrastando { cursor: grabbing; }
#tela.sobre-no { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}