/* O visual "Noturno", igual ao app: preto quente, texto cor de osso e um metal
   só, o champanhe, em detalhes finos. Só brilha o que está sob o dedo. */
@font-face { font-family: Serifa; src: url(../fontes/cormorant_500.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Serifa; src: url(../fontes/cormorant_500_italico.ttf) format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: Jost; src: url(../fontes/jost_400.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Jost; src: url(../fontes/jost_500.ttf) format('truetype'); font-weight: 500; font-display: swap; }

:root {
  --tinta-topo: #121017; --tinta: #0d0c11; --tinta-base: #0a090d; --tinta-elevada: #17151c; --fio: #2c2833;
  --osso: #ece4d6; --osso-suave: #a59e92;
  --champanhe: #c9b07a; --champanhe-luz: #ead9a8; --champanhe-sombra: #8e7647;
  --luar: 243, 235, 217;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--osso); font-family: Jost, system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  background: var(--tinta);
  background-image: radial-gradient(ellipse 120% 60% at 50% -8%, rgba(var(--luar), 0.07), transparent 70%),
    linear-gradient(var(--tinta-topo), var(--tinta) 50%, var(--tinta-base));
  background-attachment: fixed;
}
a { color: var(--champanhe); }
h1, h2, h3, .serifa { font-family: Serifa, Georgia, serif; font-weight: 500; }

/* Botões: contorno fino; o principal em cor de osso. Alvo mínimo de 48 px. */
.botao {
  font: 500 15px Jost, system-ui, sans-serif; color: var(--osso); background: transparent;
  border: 1px solid rgba(236, 228, 214, 0.28); border-radius: 12px; min-height: 48px; min-width: 48px;
  padding: 0 16px; cursor: pointer; touch-action: manipulation;
}
.botao:focus-visible { outline: 2px solid var(--champanhe); outline-offset: 2px; }
.botao.destaque { background: linear-gradient(var(--osso), #dcd2c0); color: #15131a; border-color: transparent; }
.botao.marcada { border-color: var(--champanhe); background: rgba(201, 176, 122, 0.12); }
.rotulo { color: var(--champanhe); font: 500 11px Jost, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
.suave { color: var(--osso-suave); }
[hidden] { display: none !important; }