/* ==========================================================================
   TEMAS — as 5 paletas de cor e as 3 duplas de fonte
   --------------------------------------------------------------------------
   O js/tema.js marca no <html> qual tema está valendo:
     <html data-cores="rosa" data-fontes="delicada">
   e este arquivo troca as variáveis do :root para aquele tema. Como o site
   inteiro (e os módulos: css/monte.css, css/financeiro.css) só usa as
   variáveis, trocar o tema troca tudo — vitrine, página da cestinha, painel.

   "verde" e "classica" são o visual do css/estilo.css: não precisam de bloco.
   Carrega DEPOIS do enxuto.css (que também mexe nas sombras).

   CONTRASTE MEDIDO na tela de verdade em 30/09/2026, texto por texto: todos
   os temas passam de 4,5:1 no texto de leitura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) CORES
   -------------------------------------------------------------------------- */

/* ROSA CHÁ — delicada. O botão é pastel com texto escuro (9:1), e o tom
   forte da cor fica para texto pequeno, preço e o interruptor do painel. */
:root[data-cores="rosa"] {
  --cor-fundo: #fffaf9;
  --cor-superficie: #ffffff;
  --cor-capa: #f9eae8;
  --cor-primaria: #94525e;
  --cor-primaria-escura: #8e4a56;
  --cor-primaria-hover: #763d47;
  --cor-primaria-suave: #f5e1df;
  --cor-texto: #3a2a2e;
  --cor-texto-suave: #765f64;
  --cor-borda: #efdcd9;
  --cor-botao: #f2c4cb;
  --cor-botao-texto: #3a2a2e;
  --cor-botao-hover: #e9aeb8;
  --sombra: 0 1px 2px rgba(58, 42, 46, .04), 0 4px 12px rgba(58, 42, 46, .05);
  --sombra-forte: 0 8px 24px rgba(58, 42, 46, .12);
}

/* AZUL NÉVOA — limpa e serena. Botão azul médio com texto branco. */
:root[data-cores="azul"] {
  --cor-fundo: #f8fafc;
  --cor-superficie: #ffffff;
  --cor-capa: #e6eef5;
  --cor-primaria: #486987;
  --cor-primaria-escura: #3f5f7c;
  --cor-primaria-hover: #324d66;
  --cor-primaria-suave: #e1eaf2;
  --cor-texto: #22303c;
  --cor-texto-suave: #5b6a78;
  --cor-borda: #d9e2ea;
  --cor-botao: var(--cor-primaria-escura);
  --cor-botao-texto: #ffffff;
  --cor-botao-hover: var(--cor-primaria-hover);
  --sombra: 0 1px 2px rgba(34, 48, 60, .04), 0 4px 12px rgba(34, 48, 60, .05);
  --sombra-forte: 0 8px 24px rgba(34, 48, 60, .12);
}

/* AREIA — bege quente e limpo. Botão de areia com texto escuro (8,9:1); o
   marrom da marca fica para preço e texto pequeno (5,8:1 no fundo). */
:root[data-cores="areia"] {
  --cor-fundo: #fbf8f4;
  --cor-superficie: #ffffff;
  --cor-capa: #efe6da;
  --cor-primaria: #806146;
  --cor-primaria-escura: #7a5c42;
  --cor-primaria-hover: #634a35;
  --cor-primaria-suave: #f2eadf;
  --cor-texto: #3b3128;
  --cor-texto-suave: #6e6155;
  --cor-borda: #e8ddcf;
  --cor-botao: #d4b995;            /* 1,52:1 contra a capa: o botão principal se destaca do branco */
  --cor-botao-texto: #2b2118;
  --cor-botao-hover: #c8a97f;
  --sombra: 0 1px 2px rgba(59, 49, 40, .04), 0 4px 12px rgba(59, 49, 40, .05);
  --sombra-forte: 0 8px 24px rgba(59, 49, 40, .12);
}

/* BAUNILHA — creme amarelado, de confeitaria. Botão creme com texto escuro;
   o dourado queimado da marca passa de 5:1 no fundo e 4,7:1 na capa. */
:root[data-cores="baunilha"] {
  --cor-fundo: #fffcf5;
  --cor-superficie: #ffffff;
  --cor-capa: #f6efdc;
  --cor-primaria: #82662f;
  --cor-primaria-escura: #775c2f;
  --cor-primaria-hover: #5f4925;
  --cor-primaria-suave: #f5ecd6;
  --cor-texto: #3a3326;
  --cor-texto-suave: #6f6450;
  --cor-borda: #ece2c9;
  --cor-botao: #dcc47e;            /* 1,49:1 contra a capa */
  --cor-botao-texto: #2b2118;
  --cor-botao-hover: #d0b565;
  --sombra: 0 1px 2px rgba(58, 51, 38, .04), 0 4px 12px rgba(58, 51, 38, .05);
  --sombra-forte: 0 8px 24px rgba(58, 51, 38, .12);
}

/* ALGODÃO — off white e cinza quente, o mais limpo. Botão grafite com
   texto branco (9,8:1), como nas lojas de papelaria fina. */
:root[data-cores="algodao"] {
  --cor-fundo: #fcfcfa;
  --cor-superficie: #ffffff;
  --cor-capa: #f4f1ea;
  --cor-primaria: #6b6660;
  --cor-primaria-escura: #57534e;
  --cor-primaria-hover: #45423e;
  --cor-primaria-suave: #efeeea;
  --cor-texto: #2f2d2a;
  --cor-texto-suave: #66625c;
  --cor-borda: #e4e2dc;
  --cor-botao: #4a423b;            /* grafite quente: botão quase preto é o que o Pedro chama de cara de IA */
  --cor-botao-texto: #ffffff;
  --cor-botao-hover: #3a332d;
  --sombra: 0 1px 2px rgba(47, 45, 42, .04), 0 4px 12px rgba(47, 45, 42, .05);
  --sombra-forte: 0 8px 24px rgba(47, 45, 42, .12);
}

/* Os três desenhos pequenos que levam a cor escrita dentro (desenho embutido
   não lê variável de CSS): a setinha do select, o tique da lista "O que vem
   dentro" e a cestinha da foto que falta. Um jogo por tema. */
:root[data-cores="areia"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806146' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="areia"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5c42' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="areia"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23806146' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h36l-3.4 20.2A4 4 0 0 1 34.6 41.6H13.4A4 4 0 0 1 9.4 38.2z'/%3E%3Cpath d='M15.5 18 24 6l8.5 12'/%3E%3Cpath d='M18 25v9M24 25v9M30 25v9'/%3E%3C/svg%3E");
}
:root[data-cores="baunilha"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382662f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="baunilha"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775c2f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="baunilha"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2382662f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h36l-3.4 20.2A4 4 0 0 1 34.6 41.6H13.4A4 4 0 0 1 9.4 38.2z'/%3E%3Cpath d='M15.5 18 24 6l8.5 12'/%3E%3Cpath d='M18 25v9M24 25v9M30 25v9'/%3E%3C/svg%3E");
}
:root[data-cores="algodao"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6660' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="algodao"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="algodao"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%236b6660' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h36l-3.4 20.2A4 4 0 0 1 34.6 41.6H13.4A4 4 0 0 1 9.4 38.2z'/%3E%3Cpath d='M15.5 18 24 6l8.5 12'/%3E%3Cpath d='M18 25v9M24 25v9M30 25v9'/%3E%3C/svg%3E");
}
:root[data-cores="rosa"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394525e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="rosa"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e4a56' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="rosa"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2394525e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h36l-3.4 20.2A4 4 0 0 1 34.6 41.6H13.4A4 4 0 0 1 9.4 38.2z'/%3E%3Cpath d='M15.5 18 24 6l8.5 12'/%3E%3Cpath d='M18 25v9M24 25v9M30 25v9'/%3E%3C/svg%3E");
}
:root[data-cores="azul"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23486987' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-cores="azul"] .itens li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5f7c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-cores="azul"] .foto-vazia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23486987' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h36l-3.4 20.2A4 4 0 0 1 34.6 41.6H13.4A4 4 0 0 1 9.4 38.2z'/%3E%3Cpath d='M15.5 18 24 6l8.5 12'/%3E%3Cpath d='M18 25v9M24 25v9M30 25v9'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2) FONTES
   --------------------------------------------------------------------------
   Nas duas duplas novas, o nome da cestinha e os preços vão para a fonte de
   texto: serifa fina (Cormorant) em letra pequena não se lê no celular, e o
   preço fica mais claro em letra reta. Os títulos grandes seguem na fonte de
   título, que é onde ela brilha. */

:root[data-fontes="delicada"] {
  --fonte-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
:root[data-fontes="suave"] {
  --fonte-titulo: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fonte-corpo: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

:root[data-fontes="delicada"] :is(.cartao__nome, .cartao__preco, .produto__preco, .item-monte__preco, .barra-total__valor, .barra-extras strong, .data-especial__nome, .data-especial__preco),
:root[data-fontes="suave"] :is(.cartao__nome, .cartao__preco, .produto__preco, .item-monte__preco, .barra-total__valor, .barra-extras strong, .data-especial__nome, .data-especial__preco) {
  font-family: var(--fonte-corpo);
  font-weight: 600;
}

/* A Cormorant é fina: nos títulos grandes ela ganha peso. (O nome da loja
   no topo já é grande nas três fontes desde a capa de 14/10/2026.) */
:root[data-fontes="delicada"] :is(.capa #titulo-loja, .secao__titulo, .produto h1, .data-especial__titulo, .datas-previa__titulo) { font-weight: 700; letter-spacing: .005em; }
:root[data-fontes="delicada"] .marca__nome { font-size: 1.25rem; }
@media (min-width: 640px) {
  :root[data-fontes="delicada"] .marca__nome { font-size: 1.55rem; }
}

/* --------------------------------------------------------------------------
   3) O BOTÃO "CORES E FONTES" (só na demonstração — js/tema.js)
   -------------------------------------------------------------------------- */

/* Os dois atalhos da demonstração, lado a lado no canto: "Painel da loja" e
   "Cores e fontes". */
.demo-atalhos {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;                      /* acima da barra do WhatsApp (40) */
  display: flex;
  gap: 8px;
}

.tema-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: .88rem;
  font-weight: 700;
  box-shadow: var(--sombra-forte);
  cursor: pointer;
}
.tema-botao svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cor-primaria); }
.tema-botao[aria-expanded="true"] { border-color: var(--cor-primaria); }
a.tema-botao { text-decoration: none; }
.tema-botao:hover { border-color: var(--cor-primaria); }

.tema-painel {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 46;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 16px 18px 18px;
  border: 1px solid var(--cor-borda);
  border-radius: 18px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.tema-painel[hidden] { display: none; }

/* Na página da cestinha, no celular, a barra do WhatsApp mora embaixo. */
@media (max-width: 899px) {
  .com-barra-fixa .demo-atalhos { bottom: 88px; }
  .com-barra-fixa .tema-painel { bottom: 144px; max-height: calc(100vh - 170px); }
}
/* Celular estreito: os dois cabem lado a lado com a letra um pouco menor. */
@media (max-width: 380px) {
  .demo-atalhos { right: 10px; gap: 6px; }
  .tema-botao { padding: 10px 12px; font-size: .82rem; }
}

.tema-painel__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tema-painel__titulo { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.tema-painel__fechar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  cursor: pointer;
}
.tema-painel__fechar svg { width: 18px; height: 18px; }
.tema-painel__ajuda { margin: 6px 0 0; font-size: .82rem; line-height: 1.45; color: var(--cor-texto-suave); }
.tema-painel__rotulo { margin: 14px 0 8px; font-size: .82rem; font-weight: 700; color: var(--cor-texto-suave); }

.tema-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.tema-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 76px;
  padding: 10px 6px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.tema-opcao:hover { border-color: var(--cor-primaria); }
/* Escolhida: borda grossa na cor da marca — não depende só da cor do fundo. */
.tema-opcao[aria-pressed="true"] {
  border-color: var(--cor-primaria);
  box-shadow: inset 0 0 0 1px var(--cor-primaria);
  background: var(--cor-superficie);
}

/* A amostra de cada data especial: a cor e o desenho da data. */
.tema-data-amostra {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.tema-data-amostra svg { width: 18px; height: 18px; }
.tema-data-amostra--sem { background: var(--cor-fundo); border: 1.5px dashed var(--cor-borda); box-shadow: none; }

.tema-amostras { display: flex; }
.tema-amostras i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--cor-superficie);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.tema-amostras i + i { margin-left: -6px; }
.tema-aa { font-size: 1.6rem; font-weight: 700; line-height: 1; }

@media print {
  .demo-atalhos, .tema-painel { display: none; }
}