/* Registrando — tokens do BRANDBOOK REGIS 2025.

   Tipografia: o guia pede Neue Haas Grotesk Text Pro e afirma que está no
   Google Fonts. Não está — é fonte licenciada da Monotype. A pilha abaixo usa
   a família local quando instalada e cai para Helvetica, que é a ancestral
   direta do Neue Haas Grotesk. Se a licença web for adquirida, basta trocar a
   primeira entrada por um @font-face. */

:root {
  --fundo: linear-gradient(180deg, #001848 0%, #002C75 100%);
  --texto: #F5FAFF;
  --texto-suave: #B0D4FF; /* azul bebê, cor de paleta */
  --borda-suave: rgba(245, 250, 255, 0.24);
  --realce-suave: rgba(176, 212, 255, 0.16);

  --superficie: #F5FAFF;
  --superficie-borda: rgba(0, 24, 72, 0.16);
  --realce-superficie: rgba(0, 24, 72, 0.07);
  --texto-superficie: #001848;
  --texto-superficie-suave: rgba(0, 24, 72, 0.74);

  /* Botão sugerido no próprio brandbook: gradiente amarelo/laranja com
     rótulo em azul escuro (8.40:1). Azul claro #5497E3 não serve de texto
     sobre claro nem recebe texto branco — 2.89:1 nos dois sentidos. */
  --acento: linear-gradient(180deg, #FECD61 0%, #F7A41E 100%);
  --acento-hover: linear-gradient(180deg, #F7A41E 0%, #FECD61 100%);
  --acento-texto: #001848;
  --foco: #B0D4FF;
  --foco-superficie: #001848;

  --borda-campo: #001848;
  --raio-cartao: 1.25rem;
  --raio-campo: 0.75rem;
  /* Lockup mais largo que o do CP Iuris (4.71:1 contra 3.56:1): na mesma
     altura o wordmark leria menor. */
  --altura-logo: clamp(2rem, 1.6rem + 1.4vw, 2.9rem);

  --fonte-display: 'Neue Haas Grotesk Text Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fonte-corpo: var(--fonte-display);
  /* O guia lista só Bold, Medium e Roman: título e subtítulo em Bold, corpo em
     Roman. Não existe ExtraBold na família. */
  --peso-display: 700;
  --peso-titulo: 700;
  --peso-subtitulo: 500;
  --tracking-titulo: 0;   /* o guia especifica tracking 0 */
  --tracking-subtitulo: 0;
  --tracking-corpo: 0;
}

/* Assinatura: o cartão de resultado é o balão de fala do logotipo. */
.resultado__cartao { position: relative; }

/* A cauda leva o mesmo contorno de 1px do corpo — sem ele a linha do balão
   termina no ar. drop-shadow segue o recorte, o que border não faria. */
.resultado__cartao::after {
  content: '';
  position: absolute;
  left: 4.75rem;
  bottom: -0.84rem;
  width: 1.75rem;
  height: 0.9rem;
  background: var(--estado-fundo);
  clip-path: polygon(0 0, 100% 0, 18% 100%);
  filter:
    drop-shadow(1px 0 0 var(--estado-borda))
    drop-shadow(-1px 0 0 var(--estado-borda))
    drop-shadow(0 1px 0 var(--estado-borda));
}