/* === Método Aplicado — Identidade Visual
   Verde → Azul #099CDA  |  Botões CTA → Âmbar #FBBF24
   Não altera layout, textos ou funcionalidades.
======================================================= */

/* ── 1. Accent (igual em ambos os temas) ── */
:root,
[data-theme=dark],
[data-theme=light] {
  --color-accent:      #099CDA !important;
  --color-accent-dark: #0882B8 !important;
}

/* ── 1b. Field / Edge — light mode ── */
:root:not([data-theme=dark]),
[data-theme=light] {
  --color-field: #f0f9ff !important;
  --color-edge:  #dce9f2 !important;
}

/* ── 1c. Field / Edge — dark mode (fundo escuro, borda sutil) ── */
:root[data-theme=dark],
[data-theme=dark] {
  --color-field: #0d1421 !important;
  --color-edge:  rgba(9,156,218,0.12) !important;
}

/* ── 2. Fallbacks Tailwind para browsers sem color-mix ── */
.text-accent            { color: #099CDA !important; }
.bg-accent              { background-color: #099CDA !important; }
.border-accent          { border-color: #099CDA !important; }
.border-t-accent        { border-top-color: #099CDA !important; }
.ring-accent            { --tw-ring-color: #099CDA !important; }

.bg-accent\/5           { background-color: rgba(9,156,218,.05)  !important; }
.bg-accent\/10          { background-color: rgba(9,156,218,.10)  !important; }
.bg-accent\/15          { background-color: rgba(9,156,218,.15)  !important; }
.bg-accent\/20          { background-color: rgba(9,156,218,.20)  !important; }

.border-accent\/20      { border-color: rgba(9,156,218,.20)  !important; }
.border-accent\/50      { border-color: rgba(9,156,218,.50)  !important; }

.from-accent\/5         { --tw-gradient-from: rgba(9,156,218,.05) !important; }
.to-accent              { --tw-gradient-to: #099CDA !important; }
.to-accent-dark         { --tw-gradient-to: #0882B8 !important; }

.ring-accent\/10        { --tw-ring-color: rgba(9,156,218,.10) !important; }
.shadow-accent\/5       { --tw-shadow-color: rgba(9,156,218,.05) !important; }
.shadow-accent\/10      { --tw-shadow-color: rgba(9,156,218,.10) !important; }
.shadow-accent\/20      { --tw-shadow-color: rgba(9,156,218,.20) !important; }

/* Hover / focus */
.hover\:bg-accent-dark:hover    { background-color: #0882B8 !important; }
.hover\:text-accent:hover       { color: #099CDA !important; }
.hover\:bg-accent\/15:hover     { background-color: rgba(9,156,218,.15) !important; }
.hover\:bg-accent\/20:hover     { background-color: rgba(9,156,218,.20) !important; }
.hover\:border-accent\/50:hover { border-color: rgba(9,156,218,.50) !important; }
.focus\:border-accent:focus     { border-color: #099CDA !important; }

/* ── 3. Barra de progresso scroll ── */
body::before {
  background: linear-gradient(90deg, #099CDA, #0882B8) !important;
}

/* ── 4. Botões CTA: âmbar médio #FBBF24 ── */
.bg-amber-400,
.bg-amber-500,
.bg-amber-600,
.bg-yellow-400,
.bg-yellow-500 {
  background-color: #FBBF24 !important;
}
.hover\:bg-amber-500:hover,
.hover\:bg-amber-600:hover,
.hover\:bg-amber-700:hover,
.hover\:bg-yellow-500:hover,
.hover\:bg-yellow-600:hover {
  background-color: #F59E0B !important;
}
.text-amber-400,
.text-amber-500,
.text-amber-600 {
  color: #099CDA !important;
}
.border-amber-400,
.border-amber-500 {
  border-color: #FBBF24 !important;
}

/* ── 5. Dark mode: forçar fundo de surface escuro nos inline styles ──
   brand.js substitui rgb verde → azul nos inline styles, mas não consegue
   corrigir quando o app coloca cores claras via var() em dark mode.
   Aqui garantimos que elementos com background claro dentro de [data-theme=dark]
   não "vazem" cores claras. ── */
[data-theme=dark] [style*="background-color: rgb(240"],
[data-theme=dark] [style*="background-color: rgb(246"],
[data-theme=dark] [style*="background-color: rgb(248"],
[data-theme=dark] [style*="background-color: rgb(237"],
[data-theme=dark] [style*="background-color: rgb(224"] {
  background-color: #0d1421 !important;
}