/* ============================================================================
   UTW THEME for Chatwoot  -  utw-theme.css   (v=2)   Chatwoot v4.14.2  account_id=1
   Servir em /opt/chatwoot/utw/utw-theme.css ; injetar via nginx sub_filter antes de </head>
   Recolor brand Chatwoot (#2781f6 / roxo legado #6958ad) -> UTW #085CF0.
   Fonte Inter/InterDisplay -> Manrope (corpo) / Sora (titulos).
   100% reversivel. SEM CSP no host => @import Google Fonts ok.
   ============================================================================ */

/* ---- 1. FONTES: Sora (titulos) + Manrope (corpo) ------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap');

/* ---- 2. RADIX BLUE SCALE (consumida como rgb(var(--blue-N))) ------------- */
:root{
  --blue-6: 154 210 255;   /* #9AD2FF */
  --blue-7: 134 178 255;
  --blue-8: 70 142 248;
  --blue-9: 8 92 240;      /* #085CF0 PRIMARIA UTW (n-brand) */
  --blue-10: 7 80 214;     /* hover */
  --blue-11: 7 73 196;     /* link/texto sobre fundo claro */
  --blue-12: 10 19 66;     /* #0A1342 navy */
}
.dark{
  --blue-6: 29 84 134;
  --blue-7: 31 64 128;
  --blue-8: 36 84 170;
  --blue-9: 8 92 240;      /* #085CF0 */
  --blue-10: 46 111 208;   /* #2E6FD0 hover dark */
  --blue-11: 154 210 255;  /* #9AD2FF link/texto dark */
  --blue-12: 205 227 255;
}

/* ---- 3. CLASSE .n-brand (HEX LITERAL #2781f6 no bundle -> override direto) */
.n-brand,
.n-brand::before,
.n-brand::after,
.n-brand:checked{
  background-color: rgb(8 92 240) !important;
  border-color: rgb(8 92 240) !important;
  border-top-color: rgb(8 92 240) !important;
  color: rgb(8 92 240) !important;
  outline-color: rgb(8 92 240) !important;
  --tw-ring-color: rgb(8 92 240 / var(--tw-ring-opacity, 1)) !important;
}
.n-brand\/10{ background-color: rgb(8 92 240 / .10) !important; }
.n-brand\/5 { background-color: rgb(8 92 240 / .05) !important; }
a.n-brand, .text-n-brand{ color: rgb(8 92 240) !important; }
.hover\:n-brand:hover,
.n-brand:hover{ background-color: rgb(7 80 214) !important; border-color: rgb(7 80 214) !important; }

/* ---- 4. LEGADO woot-* (HEX LITERAL nas utilities) ------------------------ */
.bg-woot-25     { background-color: rgb(239 245 255) !important; }
.bg-woot-50     { background-color: rgb(219 234 254) !important; }
.bg-woot-500    { background-color: rgb(8 92 240) !important; }
.bg-woot-600    { background-color: rgb(7 80 214) !important; }
.bg-woot-700    { background-color: rgb(10 19 66) !important; }
.text-woot-500,
.text-woot-600,
.text-woot-700  { color: rgb(8 92 240) !important; }
.text-woot-800,
.text-woot-900  { color: rgb(10 19 66) !important; }
.border-woot-25,
.border-woot-50,
.border-woot-100{ border-color: rgb(154 210 255) !important; }
.border-woot-500,
.border-woot-600,
.border-woot-700{ border-color: rgb(8 92 240) !important; }
.ring-woot-500,
.ring-woot-600  { --tw-ring-color: rgb(8 92 240 / var(--tw-ring-opacity, 1)) !important; }
.fill-woot-500,
.fill-woot-600  { fill: rgb(8 92 240) !important; }
.stroke-woot-500,
.stroke-woot-600{ stroke: rgb(8 92 240) !important; }
.outline-woot-500{ outline-color: rgb(8 92 240) !important; }

/* ---- 5. ROXO LEGADO #6958ad como propriedade CSS ------------------------- */
[style*="6958ad"],[style*="6958AD"]{
  background-color: rgb(8 92 240) !important;
  color: rgb(8 92 240) !important;
  border-color: rgb(8 92 240) !important;
}

/* ---- 6. AZUIS AVULSOS standalone (defesa em profundidade) ---------------- */
[style*="0090ff"],[style*="3b9eff"],[style*="2781f6"]{
  background-color: rgb(8 92 240) !important;
  color: rgb(8 92 240) !important;
  border-color: rgb(8 92 240) !important;
}

/* ---- 7. FONTE: override de reforco --------------------------------------- */
:root{
  --utw-font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --utw-font-head:'Sora',ui-sans-serif,system-ui,sans-serif;
}
html, body,
button, input, select, textarea,
[class*="text-"], p, span, label, td, th, li, a, div{
  font-family: var(--utw-font-body) !important;
}
h1, h2, h3, h4, h5, h6,
legend, .wordmark,
[class*="display"], [class*="title"], [class*="heading"],
[class*="-h1"], [class*="-h2"], [class*="-h3"]{
  font-family: var(--utw-font-head) !important;
  letter-spacing: -0.01em;
}

/* ---- 8. TELA DE LOGIN / onboarding + focus ring global UTW --------------- */
.button--primary, .button.primary, button[type="submit"].button{
  background-color: rgb(8 92 240) !important;
  border-color: rgb(8 92 240) !important;
  color: #fff !important;
}
.button--primary:hover, button[type="submit"].button:hover{
  background-color: rgb(7 80 214) !important;
}
*:focus-visible{ outline-color: rgb(8 92 240) !important; }

/* ---- 10. DARK MODE: vence as regras :is(.dark *) que hardcodam #2781f6 ----
   Replico o padrao :is(.dark *) (mesma especificidade) + !important; como este
   arquivo carrega DEPOIS, ganha o empate. Cobre links de prosa, bordas,
   outlines e focus de inputs no tema escuro. */
a:is(.dark *),
p a:is(.dark *),
.prose a:is(.dark *),
a:not([class]):is(.dark *){ color: rgb(154 210 255) !important; }

[class*="border-n-brand"]:is(.dark *),
.dark\:border-n-brand:is(.dark *){ border-color: rgb(8 92 240) !important; }

[class*="outline-n-brand"]:is(.dark *),
.dark\:\!outline-n-brand:is(.dark *){ outline-color: rgb(8 92 240) !important; }

[class*="text-n-brand"]:is(.dark *),
.dark\:text-n-brand:is(.dark *){ color: rgb(154 210 255) !important; }

[class*="bg-n-brand"]:is(.dark *){ background-color: rgb(8 92 240) !important; }

input:focus:is(.dark *),
select:focus:is(.dark *),
textarea:focus:is(.dark *){
  border-color: rgb(8 92 240) !important;
  --tw-ring-color: rgb(8 92 240 / var(--tw-ring-opacity, 1)) !important;
}
[style*="2781f6"]:is(.dark *),[style*="2781F6"]:is(.dark *){
  color: rgb(154 210 255) !important;
  background-color: rgb(8 92 240) !important;
  border-color: rgb(8 92 240) !important;
}

/* ============================================================================
   FIM utw-theme.css
   ============================================================================ */