/* identidade v2: tipografia e cores FECHADAS em 2026-10-05 (fonte: vault/00-brand/identidade-visual.md) */

/* 3D (FECHADO 2026-10-06): material inflado acetinado creme (metal .79, rugosidade .53, especular .02), ponto brasa;
   combos por uso e motor three.js em projetos/lab-marca/3d-final.html e motor-3d.js */
/* grafismos (FECHADO 2026-10-06): ícones linha fina 1,25; grão 8% só em seções creme, cards e bloco roxo; rastro do cursor 4px brasa;
   mascote e SVGs em vault/00-brand/assets/grafismos/ */
:root {
  --icone-traco: 1.25;
  --imagem-raio: 10px;
  --imagem-veu: rgba(39, 32, 29, .3); /* só quando há texto sobre a foto */
  --imagem-parallax: 12%;
  --grao-opacidade: .08;
  --rastro-cursor: 4px;
  /* motion (FECHADO 2026-10-06) */
  --ease-padrao: cubic-bezier(.625, .05, 0, 1);   /* Osmo: entradas, carregamento, scroll */
  --ease-transicao: cubic-bezier(.66, 0, .01, 1); /* Ease 66: transições de página e menu */
  --ease-texto: cubic-bezier(.215, .61, .355, 1); /* Out cubic: texto e botões */
  --dur-micro: .7s;
  --dur-entrada: 1.3s;
  --dur-transicao: 1.5s;
  --stagger: .1s;
  --noite: #27201D;
  --creme: #FCF2BD;
  --brasa: #FF3831;
  --roxo: #4C3487;

  --fundo: var(--noite);
  --texto: var(--creme);
  --destaque: var(--brasa);
  --acao: var(--brasa);
  --texto-acao: var(--noite);
  --secao-alternada: var(--creme);
  --texto-secao-alternada: var(--noite);
  --card-destaque: var(--roxo);

  --font-titulo: 'Unbounded', 'Archivo', system-ui, sans-serif;
  --font-mao: 'Caveat Brush', cursive;
  --font-corpo: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --peso-titulo: 750;

  --raio-card: 12px;
  --raio-botao: 8px;
  --raio-icone: 10px;
  --sombra-card: 0 2px 12px rgba(13, 31, 53, 0.06);
}

body {
  font-family: var(--font-corpo);
  font-weight: 500;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-titulo);
  font-weight: var(--peso-titulo);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-align: left;
  line-height: 0.92;
}

/* uma palavra à mão por título: <h1>Sites que <span class="mao">trazem</span> cliente</h1> */
.mao {
  font-family: var(--font-mao);
  font-weight: 400;
  text-transform: none;
  color: var(--destaque);
  display: inline-block;
  transform: rotate(-4deg);
  font-size: 1.05em;
  line-height: 0.8;
}

.rotulo { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.destaque-numero { font-family: var(--font-titulo); font-weight: var(--peso-titulo); color: var(--destaque); }

.secao-alternada { background: var(--secao-alternada); color: var(--texto-secao-alternada); }
.card-destaque { background: var(--card-destaque); color: var(--creme); border-radius: var(--raio-card); }

/* botão principal: brasa com texto noite, mínimo 18px peso 600 (contraste 4,5) */
.botao {
  background: var(--acao);
  color: var(--texto-acao);
  font: 600 18px/1 var(--font-corpo);
  border-radius: var(--raio-botao);
  padding: 16px 24px;
  border: none;
}
.botao--contorno { background: transparent; color: var(--creme); border: 1.5px solid currentColor; }

/* componentes, raios e sombras ainda provisórios até o lab fechar os componentes */