/*
  Estilo comum das páginas públicas do Crabi — aviso de privacidade,
  solicitação de exclusão de conta e, quando existirem, as landing pages.

  Mora num arquivo só porque as regras de contraste aqui são MEDIDAS, não
  escolhidas: a superfície dá 1,08:1 contra o fundo creme, então quem separa
  o cartão é a borda, e ela precisa de 3:1. Copiado em cada página, um
  ajuste numa não chega às outras — e a que ficar para trás reprova sem
  ninguém notar.

  Gerado a partir do estilo da página de exclusão em 12/10/2026. Qualquer
  par novo de cor-de-fundo e cor-de-texto se confere contra 4,5:1 ANTES de
  entrar aqui.
*/

/*
  Cores de marca, iguais às constantes de src/shared/constants/theme.ts.
  Nem preto puro nem branco puro em lugar nenhum: os dois provocam
  ofuscamento, que é um dos efeitos que mais atrapalham leitores com
  dislexia. Todo par fundo/texto aqui passa de 4,5:1.
*/
:root {
  --fundo: #fefae0;
  --superficie: #f0f0f3;
  /*
    Mais escura que a borda do tema claro do app (#C9C6AE), e de
    propósito. A superfície dá só 1,08:1 contra o fundo creme — ou
    seja, o cartão NÃO se distingue por preenchimento, quem o separa é
    a borda. A original mede 1,64:1 contra o creme, abaixo dos 3:1 que
    a WCAG pede para limite de componente; esta mede 3,68:1 contra o
    creme e 3,41:1 contra a superfície. Mesmo raciocínio que o
    CLAUDE.md já registra para a borda do tema escuro.
  */
  --borda: #86826b;
  --texto: #14192c;
  --texto-secundario: #60646c;
  --acao: #14192c; /* botão principal no tema claro */
  --acao-texto: #fefae0;
  --destaque: #01919f; /* turquesa escuro: 3,6:1 sobre o creme */
  --coral: #fa501a;
  --sombra: rgba(20, 25, 44, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --fundo: #0c1018;
    --superficie: #1e2540;
    --borda: #62709c;
    --texto: #fefae0;
    --texto-secundario: #a8b0c2;
    /*
      O botão principal TROCA de cor por tema. O azul profundo
      (#14192C) é quase idêntico ao fundo escuro e o botão sumiria —
      é um bug real que já aconteceu no app.
    */
    --acao: #01aabb;
    --acao-texto: #14192c;
    --destaque: #01aabb;
    --sombra: rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme='dark'] {
  --fundo: #0c1018;
  --superficie: #1e2540;
  --borda: #62709c;
  --texto: #fefae0;
  --texto-secundario: #a8b0c2;
  --acao: #01aabb;
  --acao-texto: #14192c;
  --destaque: #01aabb;
  --sombra: rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Mínimo de 16px é requisito de acessibilidade do projeto. */
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.pagina {
  /* Linha curta: comprimento de linha tem evidência forte para
     leitores com dislexia. */
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
}

header {
  margin-bottom: 2rem;
}

.selo {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin-bottom: 0.5rem;
}

h1 {
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

h2 {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

.abertura {
  color: var(--texto-secundario);
  font-size: 1.05rem;
}

/* As duas formas de pedir exclusão, em destaque — a política pede que
   o caminho esteja fácil de achar nesta página. */
.caminhos {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.caminho {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px var(--sombra);
}

.caminho h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.caminho p:last-child {
  margin-bottom: 0;
}

.ordinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--destaque);
  color: #14192c;
  font-size: 0.95rem;
  font-weight: 600;
  vertical-align: middle;
}

.botao {
  display: inline-block;
  /* Alvo de toque: 48px é o mínimo do projeto. */
  min-height: 48px;
  padding: 0.8rem 1.4rem;
  margin-top: 0.5rem;
  background: var(--acao);
  color: var(--acao-texto);
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  line-height: 1.5;
}

.botao:hover,
.botao:focus-visible {
  /* Não depende só de cor: a borda aparece no foco. */
  outline: 3px solid var(--destaque);
  outline-offset: 2px;
}

.caminho-interface ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.caminho-interface li {
  margin-bottom: 0.4rem;
}

ul.lista {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

ul.lista li {
  margin-bottom: 0.4rem;
}

/* Aviso: coral de marca, com texto azul profundo. Texto claro sobre
   coral dá 3,4:1 e reprova a WCAG AA — por isso nunca é usado. */
/*
  O limite da caixa é a borda neutra (3,68:1 contra o fundo), não a
  faixa coral — que mede 2,96:1 contra a superfície no tema claro e
  por isso NÃO pode ser o que delimita o componente. O coral fica
  como ênfase, e quem carrega o alerta é o texto em negrito: cor
  nunca é o único sinal.

  O hex do coral não se mexe: #FA501A é cor de marca, amostrada do
  mascote, e trocá-la para ganhar contraste numa faixa decorativa
  seria resolver o problema errado.
*/
.aviso {
  border: 1px solid var(--borda);
  border-left: 5px solid var(--coral);
  background: var(--superficie);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.aviso strong {
  font-weight: 600;
}

.aviso p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--texto);
  text-decoration-color: var(--destaque);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 3px solid var(--destaque);
  outline-offset: 2px;
  border-radius: 3px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.97rem;
}

th,
td {
  text-align: left;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

th {
  font-weight: 600;
}

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borda);
  color: var(--texto-secundario);
  font-size: 0.92rem;
}

footer p {
  margin-bottom: 0.4rem;
}

.pendente {
  /* Marcador do que ainda precisa ser preenchido antes de publicar.
     Fica visível de propósito: placeholder discreto é placeholder que
     vai ao ar. */
  background: var(--coral);
  color: #14192c;
  padding: 0 0.3rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9em;
}

/* ───────────────────────────────────────────────────────────────────────
   Tags que vêm do Markdown gerado (spike/gerar-paginas-legais.mjs).

   O estilo acima nasceu para uma página escrita à mão, com classes
   próprias. O conteúdo legal vem de Markdown, que produz tags cruas — e
   sem estas regras ele cai no padrão do navegador, que ignora os tokens
   de cor e, no caso do negrito, desfaz uma decisão de acessibilidade.
   ─────────────────────────────────────────────────────────────────────── */

/*
  PESO 600, NUNCA `bold`.

  Carregamos Lexend em 400 e 600. `<strong>` sem regra pede 700, que não
  existe no arquivo — e o navegador SINTETIZA, engrossando o traço. É o
  mesmo defeito que o CLAUDE.md descreve para o Android, e desfaz
  justamente a legibilidade que motivou escolher a Lexend. São dezenas de
  ocorrências por página legal.
*/
strong,
b {
  font-weight: 600;
}

/* Listas vindas do Markdown não têm a classe `.lista`. */
main ul,
main ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

main li {
  margin-bottom: 0.4rem;
}

/*
  Separador entre seções. A borda já é o token medido a 3,68:1 contra o
  fundo claro — aqui ela é decorativa, mas usar o mesmo token evita um par
  de cor novo entrando sem medição.
*/
hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: 2.5rem 0;
}

/*
  Citação. Mesma anatomia da caixa de aviso: o LIMITE é a borda neutra, e a
  faixa colorida é ênfase — porque o coral mede 2,96:1 contra a superfície
  no tema claro e não pode ser quem delimita o componente.
*/
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 5px solid var(--destaque);
  border-radius: 0 12px 12px 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Trecho técnico no meio do texto — nome de região, de campo, de arquivo. */
code {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 0.1em 0.35em;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* O título principal do documento legal, que vem do Markdown. */
main h1 {
  margin-top: 0;
}

/* ===================================================================
   A PÁGINA INICIAL DO SITE (docs/web/index.html)

   Mora aqui, e não num <style> dentro da página, pelo mesmo motivo que
   fez o estilo virar arquivo comum: as regras de contraste deste
   projeto são MEDIDAS, e uma segunda cópia é uma que vai ficar para
   trás sem ninguém notar.
   =================================================================== */

/*
  O LOGOTIPO NÃO PRECISA PASSAR NO CONTRASTE, e isso não é desleixo: a
  WCAG isenta logotipos explicitamente (1.4.3 e 1.4.11). O turquesa da
  marca dá 2,7:1 sobre o creme, e quem vier "corrigir" isso estará
  mudando a marca para resolver um requisito que não se aplica.

  A altura é limitada em vez da largura para o logotipo não dominar a
  tela estreita de um celular, que é onde este público está.
*/
.inicio-marca {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(44px, 11vw, 64px);
  margin-bottom: 1.25rem;
}

/*
  Bloco de estado. Usa o turquesa (--destaque), não o coral do .aviso:
  coral marca o que exige atenção ou cuidado, e "ainda não lançamos" é
  informação, não advertência. Medido: a barra dá 3,33:1 contra a
  superfície clara e 5,36:1 contra a escura — acima dos 3:1 que a WCAG
  pede para limite de componente nos dois temas.
*/
.inicio-status {
  border: 1px solid var(--borda);
  border-left: 5px solid var(--destaque);
  background: var(--superficie);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  margin: 2rem 0 0;
}
.inicio-status p {
  margin: 0;
}
.inicio-status strong {
  font-weight: 600;
}