/* ============================================================
   base — tokens, reset, tipografia
   ============================================================
   Tema adaptativo: o device manda. As tres declaracoes abaixo
   (bare :root / prefers-color-scheme / [data-theme]) existem pra
   que um toggle manual, se um dia entrar, ganhe nos dois sentidos.
   Nenhuma cor tem sua unica definicao dentro de media query.

   Peso unico: as duas fontes sao estaticas 400. Hierarquia sai de
   escala, entrelinha, caixa alta e cor - nunca de bold. Por isso
   font-synthesis:none: navegador nao inventa peso nem italico.
   ============================================================ */

@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../assets/fonts/Mulish.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* --- claro: papel quente. E pra este fundo que o logo foi desenhado. --- */
  --ground:      #eae7e1;
  --surface:     #f5f3ef;
  --surface-alt: #fdfcfa;
  --linha:       #d9d4ca;  /* filete decorativo */
  --linha-forte: #918c82;  /* borda de controle: 3,02:1 sobre --surface */
  --ink:         #1e1d1b;
  --ink-2:       #4b4740;
  --ink-3:       #6e675d;  /* 4,52:1 sobre --ground */
  --ouro:        #806427;  /* ouro de TEXTO: 4,51:1 sobre --ground */
  --ouro-marca:  #a17f3c;  /* filetes, bordas, o proprio monograma: 3,03:1 */
  --ouro-viv:    #c8a35d;  /* topo do gradiente da marca */
  --ouro-med:    #715b36;  /* meio do gradiente da marca */
  --ouro-vel:    rgba(168, 133, 63, .10);
  --erro:        #a03a24;
  --ok:          #3f6b39;
  --sombra:      0 1px 2px rgba(30, 25, 15, .05);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* Ritmo. O site inteiro se apoia nestes seis degraus. */
  --e1: 6px;  --e2: 12px;  --e3: 20px;
  --e4: 34px; --e5: 56px;  --e6: 92px;

  --largura: 1160px;
  --leitura: 62ch;

  /* Diagonal da varredura. E o motivo da marca; repete no site inteiro. */
  --angulo: -18deg;
  --t-rapido: .18s;
  --t-medio:  .32s;
  --curva: cubic-bezier(.62, .04, .18, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #141311;
    --surface:     #1c1b18;
    --surface-alt: #232120;
    --linha:       #302c26;
    --linha-forte: #71685a;   /* borda de controle: 3,14:1 sobre --surface */
    --ink:         #ece7dd;   /* o cinza #252424 do logo morre aqui (1,67:1) */
    --ink-2:       #b3aca1;
    --ink-3:       #877f73;
    --ouro:        #cba55f;
    --ouro-marca:  #c8a35d;
    --ouro-viv:    #dcbc7a;
    --ouro-med:    #8f7440;   /* clareia no escuro: #715b36 sumiria no #141311 */
    --ouro-vel:    rgba(203, 165, 95, .12);
    --erro:        #e08163;
    --ok:          #8fbe84;
    --sombra:      0 1px 2px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  --ground:      #141311;
  --surface:     #1c1b18;
  --surface-alt: #232120;
  --linha:       #302c26;
  --linha-forte: #71685a;
  --ink:         #ece7dd;
  --ink-2:       #b3aca1;
  --ink-3:       #877f73;
  --ouro:        #cba55f;
  --ouro-marca:  #c8a35d;
  --ouro-viv:    #dcbc7a;
  --ouro-med:    #8f7440;
  --ouro-vel:    rgba(203, 165, 95, .12);
  --erro:        #e08163;
  --ok:          #8fbe84;
  --sombra:      0 1px 2px rgba(0, 0, 0, .35);
}

/* ---------------- reset ---------------- */

*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   Trava lateral: `clip`, nunca `hidden`
   ------------------------------------------------------------
   `overflow-x: hidden` cria uma CAIXA DE ROLAGEM. Ela esconde o que
   passa da borda, mas continua rolavel — e no celular da pra
   arrastar a pagina de lado sobre o vazio. E o "balanca quando
   deslizo" que o Zeex viu: nao havia nada estourando, era a propria
   trava criando o movimento.

   `clip` corta sem criar caixa de rolagem, entao nao ha o que
   arrastar. Vai nos DOIS elementos de proposito: so no body, o
   navegador propaga a rolagem pro elemento raiz e o efeito volta.

   `hidden` fica antes como reserva pra Safari < 16, que nao conhece
   `clip` e ignora a linha.

   Medido com tools/medir-mobile.mjs a 390px: zero elementos passando
   da borda em /, /agendar e /entrar. A banda da varredura ja e
   recortada pelo proprio `.varredura` (position:fixed + inset:0 +
   overflow:hidden em anim.css), entao a trava aqui e so cinto de
   seguranca.
   ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;

  /* Sem isso, o arrasto lateral que nao rola nada vira o gesto de
     "voltar" do navegador ou o repique elastico do iOS. */
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(.95rem, .9rem + .25vw, 1.02rem);
  line-height: 1.7;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Cantos vivos no site inteiro. Nada de raio. */
button, input, select, textarea, .cartao, .campo, .selo { border-radius: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

/* O router poe foco no h1 da tela nova pra reposicionar o leitor de tela.
   Isso e foco programatico, nao navegacao por teclado - sem esta regra o
   Chrome desenha o anel de foco em volta do titulo e parece defeito. */
[tabindex="-1"]:focus { outline: none; }

::selection { background: var(--ouro-vel); color: var(--ink); }

/* ---------------- tipografia ---------------- */

.titulo-1, .titulo-2, .titulo-3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.titulo-1 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem); }
.titulo-2 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.9rem); line-height: 1.14; }
.titulo-3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); line-height: 1.25; letter-spacing: -.005em; }

/* O unico jeito de "dar peso" com fonte de peso unico: caixa alta e tracking. */
.rotulo {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rotulo-ouro { color: var(--ouro); }

.numero-secao {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ouro);
}

.corpo   { color: var(--ink-2); max-width: var(--leitura); }
.corpo-g { font-size: clamp(1.05rem, .98rem + .5vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.fino    { font-size: .82rem; line-height: 1.6; color: var(--ink-3); }

.num { font-variant-numeric: tabular-nums; }

/* ---------------- utilitarios ---------------- */

.faixa { padding-inline: clamp(20px, 5vw, 64px); }
.limite { max-width: var(--largura); margin-inline: auto; }

.pular-para-conteudo {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: var(--e2) var(--e3); border: 1px solid var(--ouro); z-index: 100;
}
.pular-para-conteudo:focus { left: var(--e3); top: var(--e3); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }