@layer base {

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
}
@media (max-width: 768px) {
  html { scroll-padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--color-bg-void);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  --mx: 50%;
  --my: 20%;
}

/* Fundo global vivo — 5 camadas empilhadas (ver plano 3.2-A) */
body::before {
  content: '';
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background-image:
    var(--noise-url),
    radial-gradient(circle at var(--mx) var(--my), rgb(var(--color-accent-cold-rgb) / .12), transparent 40%),
    linear-gradient(120deg, transparent 25%, rgb(var(--color-accent-cold-rgb) / .10) 42%, rgb(var(--color-accent-warm-rgb) / .08) 58%, transparent 75%),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgb(255 255 255 / .03), transparent 60%),
    radial-gradient(ellipse 130% 100% at 50% 110%, var(--color-bg-panel), var(--color-bg-void) 45%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, 100% 100%, 260% 260%, 100% 100%, 100% 100%;
  background-blend-mode: overlay, screen, screen, normal, normal;
  animation: sheen 30s linear infinite;
}
@keyframes sheen {
  0%   { background-position: 0 0, 0 0, 0% 50%, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 100% 50%, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

p { line-height: var(--lh-relaxed); }

a { transition: color var(--dur-fast) var(--ease); }

img { object-fit: cover; }

button, input, select, textarea { font-family: inherit; }

svg { display: block; }

}