/* ============================================================
   DOUTOR RESTAURANTE — base.css
   Reset, tipografia, layout primitivo. Zero cor hard-coded —
   tudo vem de brand.css via var(--token).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Grão sutil (assinatura de acabamento, ARQUITETURA §4) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.08;
  color: var(--on-surface);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
h4 { font-size: 1.05rem; font-weight: 700; }

p { color: var(--on-surface-dim); max-width: 62ch; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { padding-block: var(--section-pad); }

/* data-surface="paper" só troca os TOKENS (brand.css) — isto aqui é o que
   de fato pinta a seção com eles. Sem esta regra, só body tem background,
   e uma seção clara "não pinta" mesmo com os tokens corretos por baixo. */
section[data-surface="paper"],
section[data-surface="white"] {
  background: var(--surface);
  color: var(--on-surface);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Acessibilidade de movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Bodoni Moda tem eixo de tamanho óptico (opsz): em título grande o navegador
   escolhe sozinho a versão "display", de traço fino quase sumindo — ilegível
   no desktop. Trava o opsz em 28 (o que o mobile já usa naturalmente) e sobe
   o peso no desktop. Mesma fonte, mais encorpada. (25/09/2026) */
h1, h2, h3, .beat, .stat-number { font-variation-settings: "opsz" 28; }
@media (min-width: 781px) {
  h1, h2, h3, .beat { font-weight: 700; }
}