/* Kayto Beraldo — tokens da marca
   Conceito: a página é um livro anotado (grifo, nota na margem, nota de rodapé, marcador).
   Ver CLAUDE.md e docs/marca.md antes de alterar qualquer valor. */

/* As fontes (Google Fonts) são carregadas por <link> no <head> de cada página,
   não por @import aqui: assim o navegador baixa tudo em paralelo. */

:root {
  /* Cores */
  --tinta:    #111111;  /* títulos, texto forte, filete de destaque */
  --texto:    #2A2926;  /* corpo de texto */
  --papel:    #F6F3EC;  /* fundo padrão */
  --papel-2:  #ECE7DB;  /* fundo de respiro: nota, "na prática", seção alternada */
  --nota:     #5F5A50;  /* notas, legendas, rótulos em mono */
  --filete:   #B1AFAA;  /* linha de 1px no lugar de preenchimento e sombra */
  --grifo:    #F2DC6B;  /* SÓ leitura: grifo de texto e marcador */
  --acao:     #3B4BFF;  /* SÓ ação: botão de CTA. Provisório, a confirmar */
  --papel-escuro: #F6F3EC; /* texto sobre fundo tinta */

  /* Tipografia */
  --fonte-titulo: 'Bricolage Grotesque', system-ui, sans-serif;  /* peso 800 */
  --fonte-texto:  'Literata', Georgia, serif;
  --fonte-nota:   'JetBrains Mono', ui-monospace, monospace;

  /* Cantos — escala "Reto" */
  --r-grifo:  3px;
  --r-campo:  6px;
  --r-card:   8px;   /* card e nota */
  --r-foto:  10px;   /* foto e bloco */
  --r-botao: 999px;  /* pílula, exclusiva do CTA */

  /* Linha */
  --linha: 1px solid var(--filete);
  --linha-forte: 2px solid var(--tinta);
}

/* Base */
body {
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fonte-texto);
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--tinta);
  line-height: 1.1;
}

/* Grifo — uma frase por bloco, nunca o parágrafo inteiro */
.grifo {
  background: var(--grifo);
  border-radius: var(--r-grifo);
  padding: 0 .2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Nota na margem — comentário curto ao lado do texto */
.nota-margem {
  font-family: var(--fonte-nota);
  font-size: .875rem;
  color: var(--nota);
  border-left: var(--linha-forte);
  padding-left: 1.25rem;
}

/* Nota de rodapé — fonte ou ressalva, numerada pelo índice no texto */
.nota-rodape {
  font-family: var(--fonte-nota);
  font-size: .8125rem;
  color: var(--nota);
}

/* Índice sobrescrito: <sup class="indice">1</sup> */
.indice {
  font-family: var(--fonte-nota);
  font-size: .7em;
  color: var(--tinta);
}

/* Card — filete, sem preenchimento, sem sombra */
.card {
  border: var(--linha);
  border-radius: var(--r-card);
  padding: 1.75rem;
  background: none;
}
.card--destaque { border: var(--linha-forte); }  /* destaque por filete, nunca por cor */

/* "Na prática" — a nota na margem ampliada */
.na-pratica {
  background: var(--papel-2);
  border-left: var(--linha-forte);
  padding: 1.75rem 2rem;
}
.na-pratica__rotulo {
  font-family: var(--fonte-nota);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nota);
}

/* CTA — única coisa em índigo, única coisa em pílula */
.cta {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  background: var(--acao);
  color: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--r-botao);
  padding: .9rem 2rem;
  text-decoration: none;
}
.cta:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
/* Sobre fundo escuro o índigo cai para 3.3:1 — o filete claro resolve a leitura */
.secao--escura .cta { border-color: var(--papel); }

/* Link comum: tinta e sublinhado. O índigo não é para links. */
a { color: var(--tinta); text-decoration: underline; text-underline-offset: .2em; }

/* Foto de pessoa: sempre em P&B */
.foto-pessoa {
  filter: grayscale(1);
  border-radius: var(--r-foto);
  display: block;
}

/* Seção escura */
.secao--escura { background: var(--tinta); color: var(--papel); }
.secao--escura h1,
.secao--escura h2,
.secao--escura h3 { color: var(--papel); }

/* Marcador (bandeirinha) — canto superior direito de seções-chave */
.marcador {
  position: absolute;
  top: 0;
  right: 4vw;
  width: 24px;
  height: 44px;
  background: var(--grifo);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}