/* ============================================================
   TESTE DE COR DOS BOTOES
   ------------------------------------------------------------
   O site inteiro chama --gold e --gold-light. O style.css nao tem
   nenhuma cor de botao escrita na mao fora daqui, entao trocar o
   tema e trocar duas variaveis.

   COMO TROCAR, SEM EDITAR ARQUIVO:
     localhost:3040/?tema=ouro      <- o dourado original (padrao)
     localhost:3040/?tema=carmim    <- vermelho da Rainha de Copas
     localhost:3040/?tema=ametista  <- roxo, longe do tom do Nubank
     localhost:3040/?tema=bronze    <- dourado baixo, sem brilho

   A escolha fica guardada no navegador, entao vale para as outras
   paginas ate voce trocar de novo.

   COMO FIXAR O VENCEDOR:
     no index.html, troque data-tema="" por data-tema="carmim"
     (ou o nome que ganhar). Para voltar ao dourado puro, basta
     apagar a linha que carrega este arquivo.
   ============================================================ */

/* ---------- OURO: o estado original ----------
   Nao redefine nada. O style.css ja e dourado. */


/* ---------- CARMIM ----------
   O vermelho das cartas e dos coracoes que estao nos PNGs da
   propria arte. E a unica cor quente que o universo de Alice ja
   tem, e e a que mais separa do fundo, porque o site inteiro e
   roxo e o botao precisa NAO ser roxo para ser visto. */
html[data-tema="carmim"] {
  --gold: #d92d4e;
  --gold-light: #ff8a9e;
  --btn-a: #f0435f;
  --btn-b: #a8102f;
  --btn-txt: #ffffff;
  --btn-glow: 217, 45, 78;
}

/* ---------- AMETISTA ----------
   Roxo, mas puxado para o azul e mais profundo, longe do violeta
   magenta que o Nubank ocupou. Continua sendo roxo sobre roxo,
   entao separa menos do fundo que as outras duas opcoes. */
html[data-tema="ametista"] {
  --gold: #7b5cd6;
  --gold-light: #a99bf0;
  --btn-a: #8b6ef0;
  --btn-b: #4a2b9e;
  --btn-txt: #ffffff;
  --btn-glow: 100, 70, 200;
}

/* ---------- BRONZE ----------
   Para o caso de o problema ser o brilho do dourado e nao a cor.
   Mesmo lugar do espectro, menos saturado, sem halo. */
html[data-tema="bronze"] {
  --gold: #b8883a;
  --gold-light: #ddc189;
  --btn-a: #d9b46c;
  --btn-b: #9a6f2a;
  --btn-txt: #1d1206;
  --btn-glow: 154, 111, 42;
}

/* ============================================================
   O que muda em cada tema. Vale para os tres; o ouro passa reto
   porque nao define --btn-a.
   ============================================================ */
html[data-tema="carmim"] .button,
html[data-tema="carmim"] .button-large,
html[data-tema="carmim"] .button-small,
html[data-tema="carmim"] .benefits-toggle,
html[data-tema="ametista"] .button,
html[data-tema="ametista"] .button-large,
html[data-tema="ametista"] .button-small,
html[data-tema="ametista"] .benefits-toggle,
html[data-tema="bronze"] .button,
html[data-tema="bronze"] .button-large,
html[data-tema="bronze"] .button-small,
html[data-tema="bronze"] .benefits-toggle {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--btn-txt);
  box-shadow: 0 12px 40px rgba(var(--btn-glow), .26);
}
html[data-tema="carmim"] .button:hover,
html[data-tema="ametista"] .button:hover,
html[data-tema="bronze"] .button:hover,
html[data-tema="carmim"] .button-large:hover,
html[data-tema="ametista"] .button-large:hover,
html[data-tema="bronze"] .button-large:hover {
  box-shadow: 0 17px 48px rgba(var(--btn-glow), .42);
}

/* A bolinha usa currentColor, entao acompanha o texto do botao.
   So o traco de dentro precisa voltar para a cor do fundo. */
html[data-tema="carmim"] .button .arrow-circle svg path,
html[data-tema="ametista"] .button .arrow-circle svg path,
html[data-tema="bronze"] .button .arrow-circle svg path,
html[data-tema="carmim"] .benefits-toggle .arrow-circle svg path,
html[data-tema="ametista"] .benefits-toggle .arrow-circle svg path,
html[data-tema="bronze"] .benefits-toggle .arrow-circle svg path {
  stroke: var(--btn-b);
}
html[data-tema="carmim"] .benefits-toggle .arrow-circle,
html[data-tema="ametista"] .benefits-toggle .arrow-circle,
html[data-tema="bronze"] .benefits-toggle .arrow-circle {
  background: var(--btn-txt);
}

/* Botao secundario do book: contorno claro em qualquer tema, para
   nao encostar no tom do primario e embaralhar a hierarquia. */
html[data-tema="carmim"] .button-ghost,
html[data-tema="ametista"] .button-ghost,
html[data-tema="bronze"] .button-ghost {
  background: none;
  border: 1.5px solid rgba(255,255,255,.34);
  color: #f3ecf7;
  box-shadow: none;
}
html[data-tema="carmim"] .button-ghost:hover,
html[data-tema="ametista"] .button-ghost:hover,
html[data-tema="bronze"] .button-ghost:hover {
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
html[data-tema="carmim"] .button-ghost .arrow-circle,
html[data-tema="ametista"] .button-ghost .arrow-circle,
html[data-tema="bronze"] .button-ghost .arrow-circle { background: #f3ecf7; }
html[data-tema="carmim"] .button-ghost .arrow-circle svg path,
html[data-tema="ametista"] .button-ghost .arrow-circle svg path,
html[data-tema="bronze"] .button-ghost .arrow-circle svg path { stroke: #2a0f42; }

/* A seta de "role para explorar" e um SVG dourado por dentro, por
   isso e recolorida por filtro em vez de trocada de arquivo. */
html[data-tema="carmim"] .scroll-indicator img { filter: hue-rotate(-38deg) saturate(1.7); }
html[data-tema="ametista"] .scroll-indicator img { filter: hue-rotate(212deg) saturate(1.3) brightness(1.1); }

html[data-tema="carmim"] ::selection { background: var(--btn-a); color: white; }
html[data-tema="ametista"] ::selection { background: var(--btn-a); color: white; }