/*
 * A IDENTIDADE VISUAL DA REVCor.
 *
 * ESTE ARQUIVO E COPIA VERBATIM NAS TRES SUPERFICIES da jornada de conta — o tema do IdP, a pagina
 * de cadastro servida pelo BFF e a propria SPA. Elas sao tres containers independentes, cada um
 * servindo os proprios estaticos; nao ha servidor de assets comum, e inventar um so para
 * compartilhar folha de estilo criaria dependencia de execucao entre as tres. A copia e
 * deliberada, e a prova `IdentidadeVisualTest` falha se uma delas divergir da outra por um byte.
 *
 * OS VALORES SAO OS DA REFERENCIA V1, extraidos dela e nao escolhidos aqui: o mesmo azul, o mesmo
 * cinza de borda, o mesmo raio de cartao, o mesmo rotulo em maiuscula estreita, a mesma composicao
 * de duas colunas. A pessoa atravessa cadastro, confirmacao, login, recuperacao e troca de senha
 * sem perceber que trocou de aplicacao.
 *
 * AS FONTES SAO SERVIDAS AQUI, e nao por um terceiro. A politica de conteudo do produto e
 * `font-src 'self'`, e afrouxa-la para buscar fonte em `fonts.gstatic.com` seria trocar identidade
 * visual por dependencia externa em toda tela de identidade — inclusive a de digitar senha. Os
 * arquivos vieram do proprio pacote da referencia, que os traz embutidos; so os subconjuntos
 * `latin` e `latin-ext` foram extraidos, porque sao os que o portugues usa.
 *
 * NENHUM SEGREDO MORA AQUI: cor, espacamento, forma e tipografia — coisas que o navegador ja ve.
 */

/* ------------------------------------------------------------------ as fontes da referencia */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fontes/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fontes/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fontes/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fontes/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/ibm-plex-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/ibm-plex-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ os valores da marca */

:root {
  /* Tinta */
  --revcor-tinta-forte: #0A0E17;
  --revcor-tinta: #252A33;
  --revcor-tinta-media: #5C616B;
  --revcor-tinta-fraca: #7A7F89;
  --revcor-tinta-rotulo: #8B8F98;

  /* Marca e superficies */
  --revcor-marca: #3654FF;
  --revcor-marca-escura: #1B36CC;
  --revcor-borda: #E5E7F1;
  --revcor-campo: #F8F9FD;
  --revcor-fundo-alto: #F7F8FD;
  --revcor-fundo-baixo: #EFF1F9;

  /* Estados */
  --revcor-sucesso-fundo: #EAF7F1;
  --revcor-sucesso-tinta: #14603F;
  --revcor-aviso-fundo: #FEF4E0;
  --revcor-aviso-tinta: #9C5F0C;
  --revcor-erro-fundo: #FDECEC;
  --revcor-erro-tinta: #8C1D18;

  /* Forma */
  --revcor-raio-cartao: 16px;
  --revcor-raio-campo: 8px;
  --revcor-raio-botao: 9px;
  --revcor-sombra: 0 8px 24px rgba(16, 24, 40, .07);

  /* Tipografia */
  --revcor-titulos: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --revcor-texto: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --revcor-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------------ a cena */

body.revcor-corpo {
  margin: 0;
  min-height: 100vh;
  font-family: var(--revcor-texto);
  color: var(--revcor-tinta);
  background: linear-gradient(180deg, var(--revcor-fundo-alto) 0%, var(--revcor-fundo-baixo) 100%);
  -webkit-font-smoothing: antialiased;
}

.revcor-cena {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-sizing: border-box;
}

/* Duas colunas que viram uma sozinhas: a referencia usa exatamente esta regra. */
.revcor-composicao {
  width: 100%;
  max-width: 800px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  align-items: center;
}

/* ------------------------------------------------------------------ a marca */

.revcor-marca__nome {
  font-family: var(--revcor-titulos);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--revcor-tinta-forte);
}

.revcor-marca__frase {
  font-family: var(--revcor-titulos);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 22px 0 10px;
  color: var(--revcor-tinta);
}

.revcor-marca__texto {
  margin: 0;
  font-size: 13.5px;
  color: var(--revcor-tinta-media);
  line-height: 1.6;
  max-width: 340px;
}

/* ------------------------------------------------------------------ o cartao */

.revcor-cartao {
  background: #fff;
  border: 1px solid var(--revcor-borda);
  border-radius: var(--revcor-raio-cartao);
  padding: 26px;
  box-shadow: var(--revcor-sombra);
  box-sizing: border-box;
}

.revcor-cartao__titulo,
.revcor-cartao h1,
.revcor-cartao h2 {
  font-family: var(--revcor-titulos);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--revcor-tinta);
  margin: 0 0 18px;
}

/* A linha de apoio sob o titulo — na referencia ela diz desde quando a corretora existe. */
.revcor-cartao__apoio {
  font-size: 12.5px;
  color: var(--revcor-tinta-fraca);
  margin: -13px 0 18px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ os campos */

.revcor-cartao label,
.revcor-rotulo {
  display: block;
  font-family: var(--revcor-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--revcor-tinta-rotulo);
  margin-bottom: 6px;
  font-weight: 400;
}

.revcor-cartao input[type="text"],
.revcor-cartao input[type="email"],
.revcor-cartao input[type="password"],
.revcor-cartao select {
  width: 100%;
  box-sizing: border-box;
  background: var(--revcor-campo);
  border: 1px solid var(--revcor-borda);
  border-radius: var(--revcor-raio-campo);
  padding: 11px 13px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--revcor-tinta);
  margin-bottom: 14px;
}

.revcor-cartao input:focus {
  outline: none;
  border-color: var(--revcor-marca);
  box-shadow: 0 0 0 3px rgba(54, 84, 255, .12);
}

.revcor-cartao input[aria-invalid="true"] {
  border-color: var(--revcor-erro-tinta);
}

/* ------------------------------------------------------------------ os botoes */

.revcor-cartao input[type="submit"],
.revcor-cartao button[type="submit"],
.revcor-botao {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--revcor-marca);
  color: #fff;
  border: none;
  border-radius: var(--revcor-raio-botao);
  padding: 12px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin-top: 4px;
}

.revcor-cartao input[type="submit"]:hover,
.revcor-cartao button[type="submit"]:hover,
.revcor-botao:hover {
  background: var(--revcor-marca-escura);
}

.revcor-cartao input[type="submit"][disabled],
.revcor-cartao button[disabled],
.revcor-botao[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ o rodape de acoes */

.revcor-rodape {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--revcor-tinta-fraca);
  align-items: center;
  flex-wrap: wrap;
}

.revcor-rodape a,
.revcor-elo {
  color: var(--revcor-tinta-fraca);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.revcor-rodape a:hover,
.revcor-elo:hover {
  color: var(--revcor-marca);
}

/* A segunda acao do rodape puxa para a direita e usa a cor da marca, como na referencia. */
.revcor-rodape a + a,
.revcor-rodape .revcor-elo--destaque {
  margin-left: auto;
  color: var(--revcor-marca);
}

/* ------------------------------------------------------------------ os estados */

.revcor-recado {
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.revcor-recado--success {
  background: var(--revcor-sucesso-fundo);
  color: var(--revcor-sucesso-tinta);
  border-color: rgba(20, 96, 63, .14);
}

.revcor-recado--warning {
  background: var(--revcor-aviso-fundo);
  color: var(--revcor-aviso-tinta);
  border-color: rgba(156, 95, 12, .16);
}

.revcor-recado--error {
  background: var(--revcor-erro-fundo);
  color: var(--revcor-erro-tinta);
  border-color: rgba(140, 29, 24, .16);
}

.revcor-recado--info {
  background: var(--revcor-campo);
  color: var(--revcor-tinta-media);
  border-color: var(--revcor-borda);
}

/* ------------------------------------------------------------------ o texto de apoio */

.revcor-conteudo p,
.revcor-conteudo li,
.revcor-apoio {
  font-size: 13px;
  color: var(--revcor-tinta-media);
  line-height: 1.6;
}

.revcor-conteudo ul {
  padding-left: 18px;
  margin: 0 0 14px;
}

/* A regra de senha e informacao, nao enfeite: quem digita precisa saber o que sera aceito. */
.revcor-regra {
  font-size: 12px;
  color: var(--revcor-tinta-fraca);
  margin: -8px 0 14px;
  line-height: 1.5;
}

.revcor-erro-do-campo {
  display: block;
  font-size: 12px;
  color: var(--revcor-erro-tinta);
  margin: -8px 0 12px;
}

/*
 * A CAIXA DE MARCAR VOLTA AO TAMANHO NORMAL: o rotulo geral e minusculo de proposito.
 *
 * O seletor precisa ser MAIS especifico do que `.revcor-cartao label`, e nao apenas vir depois: um
 * `<label class="revcor-marcacao">` casa com os dois, e o de tres partes vence. Enquanto isso nao
 * era verdade, "Li e aceito os termos de uso" saia em maiuscula estreita de 9,5px — identico a um
 * rotulo de campo, quando ele e uma frase que a pessoa le e concorda.
 */
.revcor-cartao label.revcor-marcacao,
.revcor-marcacao {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--revcor-texto);
  font-size: 12.5px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--revcor-tinta-media);
  margin-bottom: 16px;
  line-height: 1.5;
}

.revcor-marcacao input {
  margin: 2px 0 0;
  accent-color: var(--revcor-marca);
}

@media (max-width: 640px) {
  .revcor-cena { padding: 20px; }
  .revcor-marca__frase { font-size: 22px; }
}