/* XMetric — identidade de produto.
   Os três sistemas compartilham o MESMO layout (sidebar, topbar, cards, tipografia).
   O que os diferencia numa aba é este conjunto: cor de assinatura, rótulo e nome.
   Aplique no elemento raiz da tela: <div data-product="admin"> … </div>

   Regra: a cor de produto NUNCA substitui --accent (roxo da marca segue nos botões
   primários e no item de menu ativo). Ela aparece só nos pontos de identificação:
   faixa do topo da sidebar, badge do produto, anel do favicon e barra de foco. */

:root {
  /* fallback = Sistema (roxo da marca) */
  --product-accent: #7c5cff;
  --product-label: 'XMetric'; /* @kind other */

  /* A cor do produto como TEXTO. Sobre fundo claro o acento puro nao alcanca
     os 4.5:1 de AA (o verde fica em 2.4:1), entao escurece; sobre fundo escuro
     ele ja passa e vale inteiro. Com a mistura de 65% os tres passam: azul
     6.8:1, roxo 7.7:1, verde 5.1:1. Como marca visual (faixa, item ativo,
     selo) segue valendo --product-accent, onde a regua e 3:1.

     A dose vem de --product-mix, que o TEMA troca, e o --product-texto e
     calculado dentro de cada bloco de produto de proposito: se ele fosse
     calculado so no bloco do tema, um data-product colocado num filho (e nao
     no <html>) resolveria com o acento do PAI e pintaria a cor do produto
     errado. */
  --product-mix: 65%; /* @kind other */
  --product-texto: color-mix(in srgb, var(--product-accent) var(--product-mix), #000);
}

[data-theme="dark"] {
  --product-mix: 100%; /* @kind other */
}

[data-product="admin"] {
  --product-accent: #3b82f6;   /* azul — console interno */
  --product-accent-soft: color-mix(in srgb, #3b82f6 15%, transparent);
  --product-stripe: linear-gradient(90deg, #3b82f6, #06b6d4); /* @kind color */
  --product-texto: color-mix(in srgb, var(--product-accent) var(--product-mix), #000);
}

[data-product="sistema"] {
  --product-accent: #7c5cff;   /* roxo da marca — painel do cliente */
  --product-accent-soft: color-mix(in srgb, #7c5cff 15%, transparent);
  --product-stripe: linear-gradient(90deg, #a855f7, #7c5cff); /* @kind color */
  --product-texto: color-mix(in srgb, var(--product-accent) var(--product-mix), #000);
}

[data-product="whatsapp"] {
  --product-accent: #10b981;   /* verde — domínio de mensageria */
  --product-accent-soft: color-mix(in srgb, #10b981 15%, transparent);
  --product-stripe: linear-gradient(90deg, #10b981, #06b6d4); /* @kind color */
  --product-texto: color-mix(in srgb, var(--product-accent) var(--product-mix), #000);
}