/* ==========================================================
   base.css — RESET E ESTILOS FUNDAMENTAIS
   Configura o body, reset de margens e as texturas de fundo.
   ========================================================== */

/* Reset universal */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
}

/* Corpo da página */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color var(--transition), color var(--transition);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ---------- TEXTURA DE GRADE (blueprint no fundo) ----------
   Linhas finas que dão o look de papel quadriculado/blueprint.
   Altere --grid-color e --grid-size em variables.css para mudar. */
body::before {
  content: "";
  position: fixed;
  inset: 0;                            /* atalho para top/left/right/bottom: 0 */
  background-image:
    linear-gradient(var(--grid-color) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--grid-color) 0.5px, transparent 0.5px);
  background-size: var(--grid-size) var(--grid-size);
  pointer-events: none;
  z-index: 0;
}

/* ---------- TEXTURA DE RUÍDO (quase invisível, dá "grão") ----------
   SVG inline com filtro feTurbulence simulando ruído analógico. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="1" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.035"/></svg>');
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

/* Container principal — limita largura e centraliza */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 2;   /* fica acima das texturas do body */
}