/* ============================================================
   Roiar — base.css  (reset + tipografia + utilitários)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { color: var(--title); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
::selection { background: var(--navy); color: #fff; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.5rem); }
.page { min-height: calc(100vh - var(--navbar-h)); padding-bottom: 4rem; }

.muted { color: var(--body); }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: .75rem 1rem; z-index: 400; }
.skip-link:focus { left: 0; }

.boot { display: grid; place-items: center; min-height: 50vh; gap: 1rem; color: var(--body); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}