/* ==========================================================================
   Finture — Tema visual para Chatwoot (injetado via DASHBOARD_SCRIPTS)
   --------------------------------------------------------------------------
   Estratégia (runtime, sem recompilar assets):
     A) Troca das variáveis CSS n-* (--blue-9/10/11, --border-blue) → recolore
        automaticamente tudo que usa os tokens n-blue-* nos modos claro e escuro.
     B) Overrides !important do acento fixo `n-brand` (hex baked #2781F6 no build)
        — conjunto FINITO de utilitários Tailwind, enumerado a partir do código.
     C) Seletores de elemento dos usos via @apply (app/.../scss/_base.scss).
     D) Resíduo do paleta legada `woot-*`.
   Cor primária Finture: #EA622D (rgb 234 98 45).
   Mantido defensivo: não esconde elementos, não depende de hashes de classe.
   Reverter: ver docs/finture-branding.md.
   ========================================================================== */

/* Fontes da marca (best-effort; sem CSP da app no dashboard).
   @import precisa ser a 1ª regra do arquivo. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --finture-orange: #ea622d;            /* rgb 234 98 45 — primária  */
  --finture-orange-hover: #d4551f;      /* rgb 212 85 31 — hover     */
  --finture-orange-active: #b8481a;     /* rgb 184 72 26 — pressed   */
  --finture-black: #1b1a1a;
  --finture-cream: #f8f1e7;
  --finture-white: #ffffff;

  --finture-font-title: "IBM Plex Sans", Inter, Arial, sans-serif;
  --finture-font-body: "Space Grotesk", Inter, Arial, sans-serif;
}

/* ==========================================================================
   (A) Troca das variáveis n-* — recolore os tokens n-blue-* (selecionado,
   ativo, badges informativos, bordas de foco) em ambos os modos.
   Canais RGB separados por espaço, conforme _next-colors.scss.
   Conservador: NÃO mexemos em --solid-blue / --text-blue / --border-blue-strong
   para evitar baixo contraste em superfícies/texto informativos.
   ========================================================================== */
:root {
  --blue-9: 234 98 45;       /* era 39 129 246 (#2781F6) → laranja        */
  --blue-10: 212 85 31;      /* hover                                     */
  --blue-11: 184 72 26;      /* ativo / texto de acento                   */
  --border-blue: 234, 98, 45, 0.5;
}
.dark {
  --blue-9: 234 98 45;       /* acento sólido igual ao claro              */
  --blue-10: 240 120 74;     /* tom mais claro p/ legibilidade no escuro  */
  --blue-11: 245 170 130;    /* texto de acento claro sobre fundo escuro  */
  --border-blue: 234, 98, 45, 0.5;
}

/* ==========================================================================
   (B) Acento fixo `n-brand` (#2781F6 hardcoded em theme/colors.js:229).
   Enumerado de app/javascript (38 utilitários distintos), agrupado por
   propriedade. Os estados (:hover/:focus/:checked/.dark) são preservados.
   ========================================================================== */

/* --- color (text-n-brand e variantes) --- */
.text-n-brand,
.hover\:text-n-brand:hover,
.group:hover .group-hover\:text-n-brand,
.group:focus-within .group-focus-within\:text-n-brand,
.dark .dark\:text-n-brand,
.dark .dark\:hover\:text-n-brand:hover {
  color: var(--finture-orange) !important;
}

/* --- background-color sólido (bg-n-brand e variantes de estado) --- */
.bg-n-brand,
.checked\:bg-n-brand:checked,
.before\:bg-n-brand::before,
.after\:bg-n-brand::after,
.group:hover .group-hover\:bg-n-brand,
.indeterminate\:bg-n-brand:indeterminate,
.dark .dark\:checked\:bg-n-brand:checked {
  background-color: var(--finture-orange) !important;
}

/* --- background-color com alpha (bg-n-brand/NN) — preserva a opacidade --- */
/* bg-n-brand/5 coexiste com override de fundo dark no wrapper do login/auth
   (`bg-n-brand/5 dark:bg-n-background`, v3app). Sem o guard abaixo, o
   !important vencia a variante dark e o modo escuro renderizava fundo claro
   com card escuro e título ilegível (bug real no login, 03/07/2026). No
   claro aplica sempre; no escuro só quando o elemento não define o próprio
   fundo dark. */
html:not(.dark) .bg-n-brand\/5 {
  background-color: rgb(234 98 45 / 0.05) !important;
}
.dark .bg-n-brand\/5:not([class*='dark:bg-']) {
  background-color: rgb(234 98 45 / 0.05) !important;
}
.bg-n-brand\/10,
.hover\:bg-n-brand\/10:hover,
.dark .dark\:bg-n-brand\/10 {
  background-color: rgb(234 98 45 / 0.1) !important;
}
.hover\:enabled\:bg-n-brand\/20:enabled:hover,
.focus-visible\:bg-n-brand\/20:focus-visible {
  background-color: rgb(234 98 45 / 0.2) !important;
}
.hover\:bg-n-brand\/80:hover {
  background-color: rgb(234 98 45 / 0.8) !important;
}
.hover\:bg-n-brand\/90:hover {
  background-color: rgb(234 98 45 / 0.9) !important;
}

/* --- border-color --- */
.border-n-brand,
.checked\:border-n-brand:checked,
.focus\:border-n-brand:focus,
.indeterminate\:border-n-brand:indeterminate,
.dark .dark\:border-n-brand,
.dark .dark\:checked\:border-n-brand:checked {
  border-color: var(--finture-orange) !important;
}
.border-t-n-brand {
  border-top-color: var(--finture-orange) !important;
}

/* --- outline-color (foco de inputs/campos) --- */
.outline-n-brand,
.focus\:outline-n-brand:focus,
.focus-within\:outline-n-brand:focus-within,
.dark .dark\:focus\:outline-n-brand:focus,
.dark .dark\:focus-within\:outline-n-brand:focus-within {
  outline-color: var(--finture-orange) !important;
}

/* --- ring-color (Tailwind ring = box-shadow via --tw-ring-color) --- */
.ring-n-brand,
.focus\:ring-n-brand:focus,
.focus-within\:ring-n-brand:focus-within,
.focus-visible\:ring-n-brand:focus-visible,
.dark .dark\:ring-n-brand {
  --tw-ring-color: var(--finture-orange) !important;
}

/* ==========================================================================
   (C) Usos via @apply em scss/_base.scss (inlinados em seletores de elemento,
   não em classes utilitárias) — precisam de override próprio.
   ========================================================================== */
p a {
  color: var(--finture-orange) !important;   /* _base.scss:19 (links em prosa) */
}
.field-base:focus,
.field-base:focus-within {
  outline-color: var(--finture-orange) !important; /* _base.scss:69 (foco de campo) */
}

/* ==========================================================================
   (D) Paleta legada `woot-*` (quase desativada no dashboard; presente em
   telas auth/widget/portal). Cobertura de segurança.
   ========================================================================== */
.bg-woot-500,
.bg-woot-600 {
  background-color: var(--finture-orange) !important;
}
.text-woot-500,
.text-woot-600 {
  color: var(--finture-orange) !important;
}
.border-woot-500,
.border-woot-600 {
  border-color: var(--finture-orange) !important;
}

/* ==========================================================================
   Tipografia da marca (best-effort — componentes com classe de fonte própria
   podem manter o fallback Inter; aceitável conforme briefing).
   ========================================================================== */
body,
input,
textarea,
select,
button {
  font-family: var(--finture-font-body) !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--finture-font-title) !important;
}

/* ==========================================================================
   Acabamento: transições suaves só de cor nos elementos de acento (sem motion
   em ações de alta frequência); respeito a prefers-reduced-motion.
   ========================================================================== */
.bg-n-brand,
a,
button {
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .bg-n-brand,
  a,
  button {
    transition: none !important;
  }
}