/*
 * helevor-theme.css
 *
 * Override do tema azul Chatwoot -> verde Helevor (#1A9C60).
 *
 * Estrategia:
 *   1. Reescreve as CSS vars --blue-* (sistema "n.*"). Aplicavel a
 *      .bg-n-blue-X, .text-n-blue-Y, etc.
 *   2. Override .bg-n-brand / .text-n-brand / .border-n-brand /
 *      .outline-n-brand + slash opacity variants - n-brand e hex literal
 *      em theme/colors.js (#2781F6), gera classes Tailwind estaticas.
 *      Usado pelo NextButton 'solid' (botao Entrar do login).
 *   3. Override .bg-woot-N / .text-woot-N / .border-woot-N - palette legada.
 *
 * !important em tudo: garante que vence styles injetados por Vue SFC
 * runtime <style> tags (anexados ao head depois do nosso <link>).
 */

/* === Sistema "n.*" via CSS variables === */
:root {
  --blue-1: 246 254 250 !important;
  --blue-2: 240 252 246 !important;
  --blue-3: 220 246 232 !important;
  --blue-4: 197 239 216 !important;
  --blue-5: 169 230 199 !important;
  --blue-6: 134 217 178 !important;
  --blue-7: 89 200 152 !important;
  --blue-8: 53 178 124 !important;
  --blue-9: 26 156 96 !important;        /* Helevor #1A9C60 */
  --blue-10: 21 137 84 !important;
  --blue-11: 17 117 73 !important;
  --blue-12: 13 84 53 !important;

  --solid-blue: 197 239 216 !important;
  --solid-blue-2: 246 254 250 !important;
  --text-blue: 13 84 53 !important;
  --border-blue-strong: 17 117 73 !important;
  --border-blue: 26, 156, 96, 0.5 !important;
}

.dark {
  --blue-1: 10 28 19 !important;
  --blue-2: 12 32 22 !important;
  --blue-3: 12 56 34 !important;
  --blue-4: 11 78 47 !important;
  --blue-5: 13 94 57 !important;
  --blue-6: 18 109 68 !important;
  --blue-7: 25 124 78 !important;
  --blue-8: 32 142 92 !important;
  --blue-9: 26 156 96 !important;
  --blue-10: 50 175 117 !important;
  --blue-11: 130 220 175 !important;
  --blue-12: 205 240 220 !important;

  --solid-blue: 13 94 57 !important;
  --solid-blue-2: 16 25 21 !important;
  --text-blue: 205 240 220 !important;
  --border-blue-strong: 169 230 199 !important;
  --border-blue: 26, 156, 96, 0.5 !important;
}

/* === n.brand (hex literal #2781F6 em theme/colors.js, usado pelo NextButton solid + text-link) === */
.bg-n-brand        { background-color: #1a9c60 !important; }
.text-n-brand      { color: #1a9c60 !important; }
.border-n-brand    { border-color: #1a9c60 !important; }
.outline-n-brand   { outline-color: #1a9c60 !important; }
.fill-n-brand      { fill: #1a9c60 !important; }
.stroke-n-brand    { stroke: #1a9c60 !important; }
.ring-n-brand      { --tw-ring-color: #1a9c60 !important; }

/* Slash opacity variants (Tailwind: bg-n-brand/5, /10, /20, etc.) */
.bg-n-brand\/5     { background-color: rgba(26, 156, 96, 0.05) !important; }
.bg-n-brand\/10    { background-color: rgba(26, 156, 96, 0.10) !important; }
.bg-n-brand\/20    { background-color: rgba(26, 156, 96, 0.20) !important; }
.bg-n-brand\/30    { background-color: rgba(26, 156, 96, 0.30) !important; }
.bg-n-brand\/40    { background-color: rgba(26, 156, 96, 0.40) !important; }
.bg-n-brand\/50    { background-color: rgba(26, 156, 96, 0.50) !important; }

/* Hover / focus / focus-visible / active / enabled */
.hover\:bg-n-brand:hover                    { background-color: #1a9c60 !important; }
.hover\:text-n-brand:hover                  { color: #1a9c60 !important; }
.hover\:enabled\:bg-n-brand\/20:hover:enabled { background-color: rgba(26, 156, 96, 0.20) !important; }
.focus-visible\:bg-n-brand\/20:focus-visible  { background-color: rgba(26, 156, 96, 0.20) !important; }
.focus\:border-n-brand:focus                { border-color: #1a9c60 !important; }
.focus\:ring-n-brand:focus                  { --tw-ring-color: #1a9c60 !important; }
.focus-visible\:outline-n-brand:focus-visible { outline-color: #1a9c60 !important; }

/* Dark mode (n-brand stays same since brand color is consistent) */
.dark .bg-n-brand,   .dark\:bg-n-brand   { background-color: #1a9c60 !important; }
.dark .text-n-brand, .dark\:text-n-brand { color: #1a9c60 !important; }

/* === Palette legada "woot" (Tailwind classes geradas estaticamente) === */
.bg-woot-25  { background-color: #f6fefa !important; }
.bg-woot-50  { background-color: #ecfdf5 !important; }
.bg-woot-75  { background-color: #dcf6e6 !important; }
.bg-woot-100 { background-color: #c5efd6 !important; }
.bg-woot-200 { background-color: #97e0b9 !important; }
.bg-woot-300 { background-color: #59c898 !important; }
.bg-woot-400 { background-color: #28b17a !important; }
.bg-woot-500 { background-color: #1a9c60 !important; }
.bg-woot-600 { background-color: #158350 !important; }
.bg-woot-700 { background-color: #116a40 !important; }
.bg-woot-800 { background-color: #0d5232 !important; }
.bg-woot-900 { background-color: #093922 !important; }

.text-woot-25  { color: #f6fefa !important; }
.text-woot-50  { color: #ecfdf5 !important; }
.text-woot-75  { color: #dcf6e6 !important; }
.text-woot-100 { color: #c5efd6 !important; }
.text-woot-200 { color: #97e0b9 !important; }
.text-woot-300 { color: #59c898 !important; }
.text-woot-400 { color: #28b17a !important; }
.text-woot-500 { color: #1a9c60 !important; }
.text-woot-600 { color: #158350 !important; }
.text-woot-700 { color: #116a40 !important; }
.text-woot-800 { color: #0d5232 !important; }
.text-woot-900 { color: #093922 !important; }

.border-woot-25  { border-color: #f6fefa !important; }
.border-woot-50  { border-color: #ecfdf5 !important; }
.border-woot-75  { border-color: #dcf6e6 !important; }
.border-woot-100 { border-color: #c5efd6 !important; }
.border-woot-200 { border-color: #97e0b9 !important; }
.border-woot-300 { border-color: #59c898 !important; }
.border-woot-400 { border-color: #28b17a !important; }
.border-woot-500 { border-color: #1a9c60 !important; }
.border-woot-600 { border-color: #158350 !important; }
.border-woot-700 { border-color: #116a40 !important; }
.border-woot-800 { border-color: #0d5232 !important; }
.border-woot-900 { border-color: #093922 !important; }

.ring-woot-500 { --tw-ring-color: #1a9c60 !important; }
.ring-woot-600 { --tw-ring-color: #158350 !important; }

.hover\:bg-woot-400:hover { background-color: #28b17a !important; }
.hover\:bg-woot-500:hover { background-color: #1a9c60 !important; }
.hover\:bg-woot-600:hover { background-color: #158350 !important; }
.hover\:bg-woot-700:hover { background-color: #116a40 !important; }
.hover\:text-woot-500:hover { color: #1a9c60 !important; }
.hover\:text-woot-600:hover { color: #158350 !important; }
.focus\:ring-woot-500:focus { --tw-ring-color: #1a9c60 !important; }