/* ===========================================================================
   main.css — estilos globais e design tokens
   Mobile first. Media queries para desktop em min-width: 768px.
   =========================================================================== */

:root {
  --cor-couro: #1c1208;
  --cor-couro-claro: #221608;
  --cor-dourado: #c9a84c;
  --cor-creme: #e8d9a8;
  --cor-sombra: #040200;
  --fonte-serif: Georgia, 'Times New Roman', serif;
  --fonte-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --raio-card: 16px;
  --padding-mobile: 16px;
  --max-width: 480px;
}

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  color: var(--cor-creme);
  font-family: var(--fonte-sans);
  background-color: var(--cor-couro);
  /* Textura de couro escuro com grid sutil + leve vinheta */
  background-image:
    linear-gradient(rgba(201, 168, 76, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 30% 18%, var(--cor-couro-claro), var(--cor-couro) 70%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Container central limitado a 480px, com padding lateral mínimo */
.pagina {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--padding-mobile);
  padding-bottom: 48px;
}

/* Utilitário de visibilidade */
.oculto {
  display: none !important;
}

/* Tipografia base */
h1,
h2,
h3 {
  font-family: var(--fonte-serif);
  color: var(--cor-dourado);
  font-weight: normal;
  margin: 0 0 12px;
}

a {
  color: var(--cor-dourado);
}

/* Acessibilidade: foco visível dourado */
:focus-visible {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .pagina {
    padding-top: 32px;
  }
}