/* =====================================================================
   Base do site: tokens da marca, reset e regras globais.
   Vale para a página inteira. O estilo de cada parte fica na pasta dela
   (nav/, hero/, sobre/...).
   ===================================================================== */

:root {
  --ink: #0b0a08;
  --bone: #f4efe6;
  --gold: #d4ab5e;
  --gold-hi: #e6bd6d;
  --silver-hi: #ffffff;
  --silver-mid: #e9e5dd;
  --silver-lo: rgba(214, 208, 198, 0.55);
  --display: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}

body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--body); }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

/* Divisor entre seções: filete dourado de ponta a ponta. No index.html, um <hr class="divisor"> entre
   uma seção e a próxima (nunca antes do hero nem depois da última). */
.divisor { display: block; height: 1px; margin: 0; border: 0; background: var(--gold); }

/* Seção fora da tela (base.js marca data-fora): animações CSS paradas, retomam de onde estavam ao voltar. */
[data-fora], [data-fora] *, [data-fora] *::before, [data-fora] *::after { animation-play-state: paused !important; }

/* Links do menu: rolagem suave até a seção, só para quem não pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}