/* PELE RV PARA O CHATWOOT
 *
 * Injetada por um proxy fino na frente da imagem oficial. Nada de fork: se
 * esta folha sair do ar, o Chatwoot volta ao visual de fábrica sem nenhum
 * outro efeito.
 *
 * O Chatwoot 4.x usa escalas no estilo Radix, guardadas como TRINCA RGB
 * separada por espaço (--slate-1: 252 252 253) e consumida com
 * rgb(var(--slate-1) / <alpha>). Então dá para trocar o tema inteiro
 * redefinindo as escalas, sem tocar em uma única classe: é isso que faz esta
 * folha sobreviver a atualização.
 *
 * Duas trocas:
 *  · a escala de destaque (iris, o roxo da marca deles) vira a tinta do RV,
 *    porque no nosso sistema cor tem função e o primário é tinta, não roxo;
 *  · a escala neutra (slate, que puxa para o azul) vira zinc, que é o cinza
 *    neutro do RV.
 */

:root {
  /* neutros: slate (azulado) -> zinc (neutro), a mesma escala do RV OS */
  --slate-1: 250 250 250;
  --slate-2: 245 245 245;
  --slate-3: 244 244 245;
  --slate-4: 240 240 241;
  --slate-5: 228 228 231;
  --slate-6: 222 222 226;
  --slate-7: 212 212 216;
  --slate-8: 161 161 170;
  --slate-9: 113 113 122;
  --slate-10: 100 100 108;
  --slate-11: 82 82 91;
  --slate-12: 24 24 27;

  /* destaque: roxo -> tinta */
  --iris-1: 250 250 250;
  --iris-2: 245 245 245;
  --iris-3: 235 235 237;
  --iris-4: 228 228 231;
  --iris-5: 212 212 216;
  --iris-6: 161 161 170;
  --iris-7: 113 113 122;
  --iris-8: 82 82 91;
  --iris-9: 24 24 27;
  --iris-10: 39 39 42;
  --iris-11: 39 39 42;
  --iris-12: 24 24 27;

  /* Azul era a única cor decorativa que sobrava: a faixa de aviso do topo e
     alguns realces vinham em azul forte, sem significar nada. No RV, cor tem
     função, então ela vira neutro e só vermelho e verde continuam falando. */
  --blue-1: 250 250 250;
  --blue-2: 245 245 245;
  --blue-3: 244 244 245;
  --blue-4: 240 240 241;
  --blue-5: 228 228 231;
  --blue-6: 212 212 216;
  --blue-7: 161 161 170;
  --blue-8: 113 113 122;
  --blue-9: 39 39 42;
  --blue-10: 24 24 27;
  --blue-11: 82 82 91;
  --blue-12: 24 24 27;

  /* vermelho = atenção, verde = avanço (mesma função do RV OS) */
  --ruby-9: 220 38 38;
  --ruby-10: 185 28 28;
  --teal-9: 22 163 74;
  --teal-10: 21 128 61;
}

.dark.dark {
  --slate-1: 9 9 11;
  --slate-2: 24 24 27;
  --slate-3: 32 32 36;
  --slate-4: 39 39 42;
  --slate-5: 45 45 49;
  --slate-6: 63 63 70;
  --slate-7: 82 82 91;
  --slate-8: 113 113 122;
  --slate-9: 139 139 148;
  --slate-10: 161 161 170;
  --slate-11: 200 200 206;
  --slate-12: 250 250 250;

  --iris-9: 250 250 250;
  --iris-10: 228 228 231;
  --iris-11: 228 228 231;
  --iris-12: 250 250 250;

  --blue-9: 228 228 231;
  --blue-10: 250 250 250;
  --blue-11: 200 200 206;
  --blue-12: 250 250 250;
}

/* cantos do RV: 0.375rem, nem quadrado nem pílula */
:root {
  --radius: 0.375rem;
}

/* Números em fonte tabular: contagem de conversa que dança a cada dígito é
   ruído que o olho persegue. */
.text-xs, .text-sm, [class*="count"], [class*="badge"] {
  font-variant-numeric: tabular-nums;
}

/* Foco visível de verdade, para teclado (o padrão some em vários pontos). */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--iris-9));
  outline-offset: 2px;
}

/* A FAIXA DE AVISO DO TOPO.
 *
 * Ela não usa escala de tema: é uma classe antiga com azul cravado no código
 * (rgb(39,129,246)), conferido no elemento renderizado. Então aqui é o único
 * ponto em que a folha mira uma classe, e de propósito. A faixa continua
 * legível e visível, só para de gritar. */
.woot-banner.primary {
  background-color: rgb(var(--slate-12)) !important;
  color: rgb(var(--slate-1)) !important;
}
.woot-banner.primary a,
.woot-banner.primary button {
  color: rgb(var(--slate-1)) !important;
}

/* A COR DE MARCA QUE NÃO PASSA POR VARIÁVEL.
 *
 * O Chatwoot tem duas camadas de cor. A das escalas (--slate, --iris, --blue)
 * eu troco lá em cima e pronto. Mas existe uma segunda, `n-brand`, com o azul
 * #2781f6 CRAVADO em cada classe utilitária, sem variável no meio: é ela que
 * pinta o botão de entrar, os links e a faixa do topo. Conferido lendo a regra
 * que de fato pinta o elemento, não por chute.
 *
 * Aqui ela vira tinta, com o texto na cor do fundo. Como slate-12 e slate-1
 * trocam de lugar no escuro, o botão vira claro com texto escuro sozinho, que
 * é exatamente o que o RV OS faz.
 */
.bg-n-brand {
  background-color: rgb(var(--slate-12)) !important;
  color: rgb(var(--slate-1)) !important;
}
/* As variantes com transparência (bg-n-brand/5 e /10) NÃO entram aqui.
 * Elas são véu de fundo, e o `!important` nelas derrubou a regra de modo
 * escuro do próprio Chatwoot (dark:bg-n-background): a tela de login perdia o
 * fundo e voltava para o branco do navegador, com a marca branca em cima,
 * invisível. Um tom de 5% não vale quebrar o modo escuro. */
/* NÃO tocar em `before:bg-n-brand`: esse pseudo-elemento é um véu decorativo
 * que cobre a página do login. Forçar cor cheia nele pintou a tela inteira de
 * branco no modo escuro e sumiu com a marca. Fica como está. */

.text-n-brand,
.text-link { color: rgb(var(--slate-12)) !important; }

.border-n-brand   { border-color: rgb(var(--slate-12)) !important; }
.border-t-n-brand { border-top-color: rgb(var(--slate-12)) !important; }
.outline-n-brand  { outline-color: rgb(var(--slate-12)) !important; }
.ring-n-brand     { --tw-ring-color: rgb(var(--slate-12)) !important; }

/* As variantes com transparência entram SEM `!important`, de propósito.
 *
 * Com `!important` elas derrubavam a regra de modo escuro do próprio Chatwoot
 * (.dark\:bg-n-background:is(.dark *)) e a tela de login perdia o fundo,
 * voltando ao branco do navegador com a marca branca em cima, invisível.
 * Sem `!important`, a regra do escuro tem especificidade maior e continua
 * ganhando lá; esta aqui só vale no claro. */
.bg-n-brand\/10 { background-color: rgb(var(--slate-12) / 0.06); }
.bg-n-brand\/5 { background-color: rgb(var(--slate-12) / 0.03); }