/* Páginas do Faxinou?: as cores de src/theme/tokens.ts (D20) e a Fredoka 700 nos títulos (D22). Só modo claro. */

/* A fonte fica no próprio site, para o Google não receber o IP de quem visita. O texto usa a letra do sistema (SF Pro no iPhone). */
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('fontes/Fredoka_700Bold.ttf') format('truetype'); }

:root {
  --fundo: #ffffff;
  --sup: #eff9fb;
  --tinta: #0b3a44;
  --apagado: #4a6a72;
  --forma: #3bbfd4;
  --trilho: #f2ec8c;
  --barra: #0e7c8f;
  --link: #0b6e80;
  --linha: #d9eef2;
  --beirada: #062a32;
  --degrade-topo: #d9f2f6;
  --degrade-base: #f6fcfd;
  --titulo: 'Fredoka', ui-rounded, system-ui, -apple-system, sans-serif;
  --texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --raio: 1.25rem;
  --sombra: 0 6px 24px rgba(11, 58, 68, 0.08);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(var(--degrade-topo), var(--degrade-base) 28rem) no-repeat, var(--degrade-base);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--texto);
  -webkit-text-size-adjust: 100%;
}

.pagina {
  max-width: 42rem;
  margin: 0 auto;
  padding-block: 2rem 4rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--tinta);
  text-decoration: none;
  font: 700 1.375rem/1.25 var(--titulo);
}
.marca img { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; }

/* Entrelinha de 1,22 ou mais na Fredoka, para o topo da letra não cortar (CLAUDE.md). */
h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 700;
  color: var(--tinta);
  text-wrap: balance;
  line-height: 1.25;
}
h1 { font-size: 2rem; margin: 2.5rem 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; }
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }
strong { font-weight: 700; }

.data { color: var(--apagado); margin-bottom: 2rem; }

.cartao {
  background: var(--fundo);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.cartao p:last-child { margin-bottom: 0; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--barra); outline-offset: 2px; border-radius: 4px; }

.email { font-weight: 700; user-select: all; }

.rodape {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  color: var(--apagado);
  font-size: 0.9375rem;
}