/* ==========================================================================
   Tema UZOO - branco, preto e azul #01B1AF. Nada mais.
   So troca variaveis; a estrutura toda vem do base.css.

   #01B1AF com texto branco da 2,66:1 - ilegivel. Com texto preto da 7,91:1.
   Por isso, no tema UZOO, a cor da marca e sempre PREENCHIMENTO com texto
   preto por cima: botao, icone, capa, faixa. O texto sobre branco fica
   preto, nunca azul, pelo mesmo motivo (azul sobre branco: 2,66:1).
   ========================================================================== */
:root {
  --marca:            #01B1AF;
  --marca-contraste:  #000000;
  --marca-link:       #000000;
  --marca-tint:       rgba(1, 177, 175, .12);

  --marca-hero:       #01B1AF;
  --marca-hero-texto: #000000;

  --hero-vidro:       rgba(0, 0, 0, .08);
  --hero-vidro-forte: rgba(0, 0, 0, .15);
  --hero-borda:       rgba(0, 0, 0, .18);
}

/* No hero azul, o botao primario precisa contrastar com o proprio azul -
   entao vira preto. */
.hero .btn--primario,
.faixa .btn--primario,
.capa-pagina .btn--primario {
  background: #000;
  border-color: #000;
  color: #fff;
}
.hero .btn--primario:hover,
.faixa .btn--primario:hover,
.capa-pagina .btn--primario:hover {
  background: #fff;
  border-color: #fff;
  color: #000;
}

/* Contorno sobre o azul: preto. */
.hero .btn--contorno,
.faixa .btn--contorno,
.capa-pagina .btn--contorno {
  border-color: #000;
  color: #000;
}
.hero .btn--contorno:hover,
.faixa .btn--contorno:hover,
.capa-pagina .btn--contorno:hover {
  background: #000;
  color: #fff;
}

/* A bolha decorativa do hero, sobre azul, fica preta suave. */
.hero::after { background: rgba(0, 0, 0, .06); }