/* ==========================================================================
   PÁGINAS PÚBLICAS DE VENDA — sempre claras, com a marca no topo.

   Pedido do Eduardo (dono do site da Vizion), 30/09: "deixa fundo branco e
   coloca a logo do SGP na página de teste grátis e contratação". Quem abria o
   link no celular com o sistema em modo escuro via a página quase preta —
   destoando do site institucional, que é branco, de onde a pessoa acabou de
   sair.

   POR QUE UMA CLASSE NO <body> E NÃO `data-theme` NO <html>: o Turbo troca o
   <body> a cada visita mas não mexe nos atributos do <html>. Tema escrito no
   <html> vazaria para o sistema logado depois do "entrar no gabinete"; na
   classe do <body> ele nasce e morre com a página. Os tokens do tema claro são
   REDEFINIDOS aqui (e não herdados de :root) porque :root pode estar escuro
   pela preferência do aparelho ou pela escolha gravada de quem usa o sistema.

   Contraste (WCAG AA, 4,5:1 para texto; 3:1 para borda de campo), medido
   contra #fff: texto 16:1, texto-suave 6,4:1, texto-fraco 5,4:1, botão
   primário (branco sobre ciano-600) 4,9:1, alerta de erro 5,5:1, borda de
   campo 3:1. Os tons da paleta clara padrão que ficavam abaixo disso (ciano-500
   no botão, 3,4:1; texto-fraco, 2,5:1) foram escurecidos só aqui.
   ========================================================================== */

html:has(> body.pagina-clara) {
  color-scheme: light;
  background-color: #ffffff;
}

.pagina-clara {
  color-scheme: light;

  --cor-fundo:            #ffffff;
  --cor-fundo-elevado:    #ffffff;
  --cor-fundo-afundado:   var(--sgp-neutro-100);
  --cor-fundo-sutil:      var(--sgp-neutro-50);
  --cor-borda:            var(--sgp-neutro-200);
  --cor-borda-forte:      #8a95a5;
  --cor-texto:            var(--sgp-neutro-900);
  --cor-texto-suave:      var(--sgp-neutro-600);
  --cor-texto-fraco:      #5f6b7a;
  --cor-texto-invertido:  #ffffff;

  --cor-acao:             var(--sgp-ciano-600);
  --cor-acao-forte:       var(--sgp-ciano-700);
  --cor-acao-suave:       var(--sgp-ciano-50);
  --cor-acao-contraste:   #ffffff;
  --cor-foco:             var(--sgp-ciano-500);

  --sgp-sucesso:       #12744c;
  --sgp-sucesso-suave: #e2f5ec;
  --sgp-atencao:       #8a5a00;
  --sgp-atencao-suave: #fdf2d9;
  --sgp-perigo:        #b3261e;
  --sgp-perigo-suave:  #fbe6e8;
  --sgp-info:          #1f6fb2;
  --sgp-info-suave:    #e4f0fa;

  --sombra-xs: 0 1px 2px rgba(17, 22, 29, .06);
  --sombra-sm: 0 1px 3px rgba(17, 22, 29, .08), 0 1px 2px rgba(17, 22, 29, .04);
  --sombra-md: 0 4px 12px rgba(17, 22, 29, .09), 0 1px 3px rgba(17, 22, 29, .05);
  --sombra-lg: 0 12px 32px rgba(17, 22, 29, .14), 0 2px 8px rgba(17, 22, 29, .06);
  --sombra-foco: 0 0 0 3px rgba(10, 123, 156, .35);

  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

/* Fundo branco puro: o cartão do formulário precisa de uma borda para não
   sumir no fundo, já que os dois agora são brancos. */
.pagina-clara .cartao {
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-sm);
}

/* --- A marca no topo --------------------------------------------------- */
.marca-publica {
  display: flex;
  justify-content: center;
  padding: var(--esp-4) var(--esp-4) var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
  background: #ffffff;
}

.marca-publica__link {
  display: inline-flex;
  border-radius: var(--raio-sm);
}

.marca-publica__link:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 4px;
}

.marca-publica__logo {
  display: block;
  width: auto;
  height: 44px;
  max-width: 100%;
}

@media (min-width: 48rem) {
  .marca-publica__logo { height: 52px; }
}