/* ============================================================================
   ALD — Tema visual do Chatwoot (injetado via nginx sub_filter, sem rebuild)
   v2 — reescrito pra bater com a referência do Núcleo Avalanche (denderson.ai):
        creme quente + grade sutil + acento coral + SANS limpo em toda a UI.
   Editável aqui; recarrega ao dar refresh forte (Cmd+Shift+R) no painel.

   COMO O CHATWOOT v4 FUNCIONA (confirmado inspecionando o build Vite):
   - A cor de MARCA é a classe utilitária `.*-n-brand` (bg/text/border/ring/
     outline/from), hardcoded como rgb(39 129 246) = #2781f6. Sobrescrevemos
     todas para coral.
   - As superfícies neutras vêm dos TOKENS do design system: --slate-1..12
     (escala Radix "R G B") e --background-color (#f7f7f7). Reescrevemos esses
     tokens para uma escala creme -> tudo (fundo, sidebar, cards, inputs) segue.
   - Alvo é o MODO CLARO (.light / html:not(.dark)). O modo escuro (.dark) fica
     SEM tema (mantém o padrão do Chatwoot), documentado no fim.

   O QUE MUDOU DA v1 (o "esquisito" que o Boss reclamou):
   - v1 aplicava Source Serif 4 em TODOS os h1/h2/h3 e text-xl/2xl/3xl -> serifa
     espalhada na UI densa de atendimento, que fica estranho. AGORA: corpo e
     títulos são SANS limpo e quente (Instrument Sans / Figtree). A serifa
     itálica fica RESERVADA só pra 1 acento opcional de marca (classe .ald-brand-accent),
     nunca na UI.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&display=swap');

/* -------------------------------------------------------------------------- */
/*  1) VARIÁVEIS EDITÁVEIS — mexa aqui pra ajustar a identidade                */
/* -------------------------------------------------------------------------- */
:root {
  --ald-coral:        #ef6f5e;   /* coral principal (botões, item ativo) */
  --ald-coral-hover:  #e85c49;   /* coral no hover */
  --ald-coral-soft:   #f7a99b;   /* coral suave (anéis de foco) */
  --ald-coral-tint:   #fbe4de;   /* coral bem claro (fundo do item ativo) */

  --ald-cream:        #f7f2e9;   /* fundo creme quente base */
  --ald-grid:         rgba(139,133,122,.06);  /* linhas da grade MUITO sutil */

  /* SANS limpo e quente = toda a UI. Serif itálica só no acento de marca. */
  --ald-sans:  'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ald-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --ald-radius: 14px;   /* cards */
  --ald-radius-sm: 10px; /* botões / pills */
}

/* -------------------------------------------------------------------------- */
/*  2) TOKENS DO DESIGN SYSTEM (modo claro) — escala creme                     */
/*     Formato Radix "R G B" (sem vírgula). As classes .bg-n-slate-*,          */
/*     .text-n-slate-*, .border-n-* usam rgb(var(--slate-N)/opacity).          */
/*     Slate-1..3 = superfícies claras (cards/fundo). 9..12 = textos.          */
/* -------------------------------------------------------------------------- */
.light, html:not(.dark), :root:not(.dark) {
  /* fundo base do app (var(--background-color)) -> creme */
  --background-color: 247 242 233;      /* #f7f2e9 */

  /* superfícies claras -> tons creme (mantendo o texto escuro 9..12) */
  --slate-1:  255 253 249;   /* #fffdf9 cards/superfície elevada (off-white creme) */
  --slate-2:  251 247 240;   /* #fbf7f0 painel/sidebar */
  --slate-3:  247 242 233;   /* #f7f2e9 fundo creme */
  --slate-4:  240 233 219;   /* #f0e9db hover suave */
  --slate-5:  235 226 211;   /* #ebe2d3 borda suave */
  --slate-6:  227 217 199;   /* #e3d9c7 borda mais visível */
  --slate-7:  214 202 181;   /* divisores */
  /* 8..12 = neutros de texto/ícone, amornados pra casar com o creme */
  --slate-8:  183 174 159;
  --slate-9:  138 131 120;   /* cinza-quente (kickers/labels) */
  --slate-10: 105 95 82;     /* texto secundário */
  --slate-11: 88 78 66;
  --slate-12: 43 37 31;      /* #2b251f texto principal (marrom-tinta quente) */

  /* alpha-3 é o "branco de card" translúcido -> creme claro */
  --alpha-3: 255 253 249;
}

/* corpo/UI inteira em SANS limpo e quente (corrige a serifa espalhada da v1) */
.light, html:not(.dark),
.light body, html:not(.dark) body,
.light button, .light input, .light textarea, .light select,
html:not(.dark) button, html:not(.dark) input, html:not(.dark) textarea, html:not(.dark) select {
  font-family: var(--ald-sans) !important;
}

/* fundo creme com GRADE muito sutil (padrão de grid do ref) */
.light body, html:not(.dark) body {
  background-color: var(--ald-cream) !important;
  background-image:
    linear-gradient(to right,  var(--ald-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ald-grid) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}

/* -------------------------------------------------------------------------- */
/*  3) COR DE MARCA — todas as utilitárias .*-n-brand viram coral             */
/*     (o build hardcoda #2781f6; não há token, então cobrimos as classes)     */
/* -------------------------------------------------------------------------- */
.bg-n-brand,
[class*="bg-n-brand"]:not([class*="/"]) { background-color: var(--ald-coral) !important; }
.bg-n-brand\/10 { background-color: rgba(239,111,94,.10) !important; }
.bg-n-brand\/20 { background-color: rgba(239,111,94,.20) !important; }

.text-n-brand,
[class*="text-n-brand"] { color: var(--ald-coral) !important; }

.border-n-brand, .border-t-n-brand,
[class*="border-n-brand"] { border-color: var(--ald-coral) !important; }

.ring-n-brand,
[class*="ring-n-brand"] { --tw-ring-color: var(--ald-coral) !important; }

.outline-n-brand,
[class*="outline-n-brand"] { outline-color: var(--ald-coral) !important; }

.from-n-brand { --tw-gradient-from: var(--ald-coral) !important; }

.accent-n-brand, .accent-n-blue-9 { accent-color: var(--ald-coral) !important; }

/* botão de marca: cantos arredondados + hover coral escuro (igual "Comentar"/"Baixar kit" do ref) */
button.bg-n-brand, a.bg-n-brand,
[class*="bg-n-brand"] { border-radius: var(--ald-radius-sm) !important; }
[class*="bg-n-brand"]:hover:enabled,
button.bg-n-brand:hover, a.bg-n-brand:hover { background-color: var(--ald-coral-hover) !important; }

/* -------------------------------------------------------------------------- */
/*  4) COMPAT — build antigo usava .bg-woot-* / família --blue (mantido)       */
/* -------------------------------------------------------------------------- */
.light, html:not(.dark) {
  --blue-9:  239 111 94;   /* coral, caso alguma tela use accent-n-blue-9 */
  --blue-10: 232 92 73;
  --blue-11: 200 70 54;
}
.bg-woot-500 { background-color: var(--ald-coral) !important; }
.bg-woot-600, .bg-woot-700 { background-color: var(--ald-coral-hover) !important; }
.text-woot-500, .text-woot-600, .text-woot-700 { color: var(--ald-coral) !important; }
.border-woot-500 { border-color: var(--ald-coral) !important; }

/* links do Chatwoot (.text-link é hardcoded azul; .text-n-blue-* usa var) */
.light .text-link, html:not(.dark) .text-link,
.light .text-n-blue-9, .light .text-n-blue-10, .light .text-n-blue-11 {
  color: var(--ald-coral-hover) !important;
}

/* -------------------------------------------------------------------------- */
/*  5) TIPOGRAFIA — SANS em toda a UI; kickers uppercase; serifa SÓ no acento   */
/* -------------------------------------------------------------------------- */
/* títulos: MESMO sans, só um pouco mais firme (NÃO serifa). Corrige a v1. */
.light h1, .light h2, .light h3, .light h4,
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4,
.light [class*="text-3xl"], .light [class*="text-2xl"], .light [class*="text-xl"],
html:not(.dark) [class*="text-3xl"], html:not(.dark) [class*="text-2xl"], html:not(.dark) [class*="text-xl"] {
  font-family: var(--ald-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: rgb(var(--slate-12)) !important;
}

/* kickers/labels uppercase espaçados, pequenos, cinza-quente (rótulos de seção) */
.light [class*="uppercase"],
html:not(.dark) [class*="uppercase"] {
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  color: rgb(var(--slate-9)) !important;
}

/* acento de marca (serifa itálica) — RESERVADO, aplicado só se marcado com
   .ald-brand-accent. Não afeta nenhuma UI do Chatwoot por padrão. */
.ald-brand-accent {
  font-family: var(--ald-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--ald-coral) !important;
}

/* -------------------------------------------------------------------------- */
/*  6) DETALHES — item ativo em pill coral, cards arredondados, foco coral      */
/* -------------------------------------------------------------------------- */
/* item de navegação ativo -> pílula: fundo creme claro + contorno coral
   (igual "Setup da Naia" no ref) */
.light a.active, .light [aria-current="page"],
html:not(.dark) a.active, html:not(.dark) [aria-current="page"] {
  background-color: var(--ald-coral-tint) !important;
  color: var(--ald-coral-hover) !important;
  border: 1px solid var(--ald-coral-soft) !important;
  border-radius: 12px !important;
}
.light a.active svg, .light [aria-current="page"] svg,
html:not(.dark) a.active svg, html:not(.dark) [aria-current="page"] svg {
  color: var(--ald-coral-hover) !important;
}

/* cards / superfícies elevadas -> raio maior e borda suave */
.light [class*="rounded-xl"], .light [class*="rounded-2xl"],
.light [class*="rounded-lg"].shadow,
html:not(.dark) [class*="shadow"][class*="rounded"],
html:not(.dark) [class*="rounded-xl"], html:not(.dark) [class*="rounded-2xl"] {
  border-radius: var(--ald-radius) !important;
}

/* badges/labels totalmente pill */
.light [class*="rounded-full"], html:not(.dark) [class*="rounded-full"] { border-radius: 999px !important; }

/* inputs/textarea: fundo off-white creme, borda suave, raio confortável */
.light input, .light textarea, .light select,
html:not(.dark) input, html:not(.dark) textarea, html:not(.dark) select {
  border-radius: var(--ald-radius-sm) !important;
}

/* foco em inputs -> anel coral */
.light input:focus, .light textarea:focus, .light select:focus,
html:not(.dark) input:focus, html:not(.dark) textarea:focus, html:not(.dark) select:focus {
  outline-color: var(--ald-coral-soft) !important;
  border-color: var(--ald-coral-soft) !important;
  box-shadow: 0 0 0 3px rgba(239,111,94,.15) !important;
}

/* -------------------------------------------------------------------------- */
/*  7) MODO ESCURO — não tematizado de propósito (mantém padrão Chatwoot)      */
/*     Todas as regras acima estão travadas em .light / html:not(.dark).       */
/* -------------------------------------------------------------------------- */