/* Identidade v1.0 (Diego, 20/10/2026) — kit web comum a todos os produtos.
   Fonte das regras: marca/identidade-20261020/manual-nerd-ofertas.md e manual-do-afiliado.md.

   Uso no produto:
   1. copiar esta pasta web/ (identidade.css + fontes/) para os assets do repo;
   2. importar identidade.css DEPOIS do tokens.css do produto;
   3. <html data-produto="<slug>">  (slugs abaixo) e, no escuro, a classe .dark (padrão shadcn).
      Produto que alterna tema por outro seletor (data-theme, prefers-color-scheme) acrescenta
      a classe .dark junto, senão a cor por produto do escuro não entra.

   Duas cores por produto, de propósito:
   --brand    a cor exata do manual. Logo, grafismo, faixa, texto GRANDE (≥ 24 px ou ≥ 19 px bold).
   --primary  a mesma matiz escurecida em OKLab até 4,5:1 contra branco (AA para texto normal e
              botão com texto branco). Onde a cor do manual já passa, as duas são iguais.
   Medido em 20/10/2026: Compra em Grupo 3,50:1, Brindes 2,89, Rastreio 3,14, Nota 3,77,
   Pixel 3,86 e Alerta 2,97 reprovam como fundo de botão com texto branco.
   No escuro, --primary é a cor do manual quando ela passa 4,5:1 contra o fundo escuro, ou um
   tom mais claro da mesma matiz quando não passa (Azul Nerd, Melhores Tech, Painel).

   Fontes: Phat guy PT só em título (o nome da marca NUNCA se digita nela: usa o arquivo da
   logo). Nunito no texto. JetBrains Mono em preço, data, código e origem do número.
   A licença da Phat guy PT não veio no pacote do Diego: conferir antes de publicar. */

@font-face {
  font-family: "Phat guy PT";
  src: url("./fontes/phat-guy-pt.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fontes/nunito-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fontes/nunito-italic-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fontes/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* paleta principal (manual p. 19) */
  --azul-nerd: #1d71b8;
  --grafite: #3c3c3b;
  --cinza-claro: #ededed;
  --branco: #ffffff;
  --cinza-afiliado: #575756; /* "do afiliado" (manual Do Afiliado p. 6) */

  /* cor de grupo (manual p. 20): muda a cor, nunca a forma. Amarelo nunca em texto. */
  --grupo-roxo: #662383;
  --grupo-azul: #1d71b8;
  --grupo-magenta: #e6007e;
  --grupo-verde: #008e36;
  --grupo-amarelo: #fcea12;

  --font-display: "Phat guy PT", "Nunito", system-ui, sans-serif;
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* marca-mãe como padrão de quem não declarar data-produto */
  --brand: #1d71b8;
  --brand-claro: #a3ccee;
  --primary: #1d71b8;
  --primary-foreground: #ffffff;
  --ring: #1d71b8;
  --foreground: #3c3c3b;
  --background: #ffffff;
  --muted: #ededed;
}

/* ---------- família Nerd (manual p. 20) ---------- */
[data-produto="nerd-ofertas"],
[data-produto="nerdcupons"],
[data-produto="historico-precos"],
[data-produto="cupons"] {
  --brand: #1d71b8; --primary: #1d71b8; --ring: #1d71b8;
}
[data-produto="compra-em-grupo"],
[data-produto="bot-de-desconto"] {
  --brand: #ea5b0c; --primary: #d34500; --ring: #ea5b0c;
}
[data-produto="brindes-gratis"] {
  --brand: #5fa948; --primary: #3c8521; --ring: #5fa948;
}
[data-produto="melhores-tech"] {
  --brand: #3a71b4; --primary: #3a71b4; --ring: #3a71b4;
}
[data-produto="rastreio-nerd"] {
  --brand: #3da099; --primary: #16847e; --ring: #3da099;
}

/* ---------- família Do Afiliado (manual Do Afiliado p. 6) ---------- */
[data-produto="bot-do-afiliado"] {
  --brand: #1d71b8; --brand-claro: #a3ccee; --primary: #1d71b8; --ring: #1d71b8;
}
[data-produto="painel-do-afiliado"] {
  --brand: #951b81; --brand-claro: #f29ec4; --primary: #951b81; --ring: #951b81;
}
[data-produto="nota-do-afiliado"] {
  --brand: #e94e1b; --brand-claro: #f7ae83; --primary: #d93e00; --ring: #e94e1b;
}
[data-produto="pixel-do-afiliado"] {
  --brand: #009640; --brand-claro: #8ec899; --primary: #008832; --ring: #009640;
}
[data-produto="alerta-do-afiliado"] {
  --brand: #009fe3; --brand-claro: #82d0f5; --primary: #007bbd; --ring: #009fe3;
}

/* ---------- escuro: texto escuro sobre o primary claro ---------- */
.dark, [data-theme="dark"] {
  --primary-foreground: #0a0a0a;
  --foreground: #f5f5f5;
}
.dark, [data-theme="dark"],
.dark[data-produto="nerd-ofertas"], .dark[data-produto="nerdcupons"],
.dark[data-produto="historico-precos"], .dark[data-produto="cupons"],
.dark[data-produto="bot-do-afiliado"] { --primary: #3282ca; --ring: #3282ca; }
.dark[data-produto="compra-em-grupo"], .dark[data-produto="bot-de-desconto"] { --primary: #ea5b0c; --ring: #ea5b0c; }
.dark[data-produto="brindes-gratis"] { --primary: #5fa948; --ring: #5fa948; }
.dark[data-produto="melhores-tech"] { --primary: #4980c4; --ring: #4980c4; }
.dark[data-produto="rastreio-nerd"] { --primary: #3da099; --ring: #3da099; }
.dark[data-produto="painel-do-afiliado"] { --primary: #c750b0; --ring: #c750b0; }
.dark[data-produto="nota-do-afiliado"] { --primary: #e94e1b; --ring: #e94e1b; }
.dark[data-produto="pixel-do-afiliado"] { --primary: #009640; --ring: #009640; }
.dark[data-produto="alerta-do-afiliado"] { --primary: #009fe3; --ring: #009fe3; }

/* ---------- etiqueta de conferência (manual p. 23–24) ----------
   <div class="etiqueta-conferencia">
     <span class="etiqueta-hora">CONFERIDO · 18/10 · 23:40</span>
     <p class="etiqueta-produto">Fritadeira elétrica 4 L</p>
     <p class="etiqueta-preco"><strong>R$ 289,90</strong> <s>R$ 399,90</s></p>
     <p class="etiqueta-origem">MENOR PREÇO EM 90 DIAS<br>FONTE: HISTÓRICO DE PREÇOS</p>
   </div>
   Só com dado real: hora em que o preço foi visto e a origem de verdade do preço de referência.
   Sem referência conferível, sem etiqueta (traço "Confere": percentual sem preço de origem é proibido). */
.etiqueta-conferencia {
  background: var(--branco);
  color: var(--grafite);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--font-sans);
}
.etiqueta-hora {
  display: inline-block;
  background: var(--azul-nerd);
  color: var(--branco);
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 6px;
}
.etiqueta-produto { margin: 10px 0 4px; font-weight: 800; font-size: 17px; }
.etiqueta-preco { margin: 0; font-family: var(--font-mono); }
.etiqueta-preco strong { font-weight: 800; font-size: 26px; }
.etiqueta-preco s { color: #8a8a89; font-size: 14px; margin-left: 6px; }
.etiqueta-origem {
  margin: 8px 0 0;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6a;
}