/* ============================================================================
   capy-core-tokens.css — Camada de tokens do NÚCLEO (app.js / Tailwind CDN)
   Aproxima o núcleo do Design System (capy-ds.css) SEM tocar no app.js.
   O núcleo usa utilities do Tailwind Play CDN (cores padrão fixas). Aqui
   remapeamos as principais para os tokens do DS.

   Estratégia CONSERVADORA (validar logado, ajustar por tela):
     (A) MARCA (verde) nos 2 temas: emerald/teal → var(--accent).
     (B) NEUTROS só no DARK: utilities claras → tokens (conserta "caixas
         brancas" no escuro). LIGHT fica intacto (já casa com o modelo).
     (C) BADGES soft coloridos só no DARK → tokens semânticos.

   Carregado por ÚLTIMO no index.html; usa !important p/ vencer o Tailwind.
   Reversível: basta remover o <link> deste arquivo.
   ============================================================================ */

/* ====== (A) MARCA — verde da plataforma → accent do DS (light + dark) ====== */
.bg-emerald-500,.bg-emerald-600,.bg-emerald-700,
.bg-teal-500,.bg-teal-600,.bg-teal-700,
.bg-green-600,.bg-green-700{background-color:var(--accent)!important}
.hover\:bg-emerald-600:hover,.hover\:bg-emerald-700:hover,.hover\:bg-emerald-800:hover,
.hover\:bg-teal-700:hover,.hover\:bg-teal-800:hover,
.hover\:bg-green-700:hover{background-color:var(--accent-2)!important}
.text-emerald-500,.text-emerald-600,.text-emerald-700,.text-emerald-800,
.text-teal-600,.text-teal-700,.text-green-600,.text-green-700{color:var(--accent)!important}
.hover\:text-emerald-700:hover,.hover\:text-emerald-800:hover{color:var(--accent-2)!important}
.border-emerald-500,.border-emerald-600,.border-teal-500,.border-teal-600,
.border-green-500,.border-green-600{border-color:var(--accent)!important}
.ring-emerald-400,.ring-emerald-500,.ring-emerald-600,
.ring-teal-500,.focus\:ring-emerald-500:focus{--tw-ring-color:var(--accent)!important}
.bg-emerald-50,.bg-emerald-100,.bg-teal-50,.bg-teal-100,.bg-green-50,.bg-green-100{background-color:var(--accent-soft)!important}

/* ====== (B) NEUTROS — SÓ no dark (light permanece Tailwind padrão) ====== */
/* superfícies */
[data-theme="dark"] .bg-white{background-color:var(--surface)!important}
[data-theme="dark"] .bg-gray-50,[data-theme="dark"] .bg-slate-50,[data-theme="dark"] .bg-zinc-50,[data-theme="dark"] .bg-neutral-50,[data-theme="dark"] .bg-stone-50,
[data-theme="dark"] .bg-gray-100,[data-theme="dark"] .bg-slate-100,[data-theme="dark"] .bg-zinc-100{background-color:var(--surface-2)!important}
[data-theme="dark"] .bg-gray-200,[data-theme="dark"] .bg-slate-200,[data-theme="dark"] .bg-zinc-200{background-color:var(--surface-3)!important}
/* texto */
[data-theme="dark"] .text-gray-900,[data-theme="dark"] .text-gray-800,[data-theme="dark"] .text-slate-900,[data-theme="dark"] .text-slate-800,[data-theme="dark"] .text-zinc-900,[data-theme="dark"] .text-neutral-900,[data-theme="dark"] .text-black{color:var(--ink)!important}
[data-theme="dark"] .text-gray-700,[data-theme="dark"] .text-gray-600,[data-theme="dark"] .text-slate-700,[data-theme="dark"] .text-slate-600,[data-theme="dark"] .text-zinc-700,[data-theme="dark"] .text-zinc-600{color:var(--ink-2)!important}
[data-theme="dark"] .text-gray-500,[data-theme="dark"] .text-gray-400,[data-theme="dark"] .text-slate-500,[data-theme="dark"] .text-slate-400,[data-theme="dark"] .text-zinc-500,[data-theme="dark"] .text-zinc-400,[data-theme="dark"] .text-neutral-500{color:var(--ink-3)!important}
/* bordas + divisores */
[data-theme="dark"] .border-gray-100,[data-theme="dark"] .border-gray-200,[data-theme="dark"] .border-slate-100,[data-theme="dark"] .border-slate-200,[data-theme="dark"] .border-zinc-200,[data-theme="dark"] .border-neutral-200{border-color:var(--sep)!important}
[data-theme="dark"] .border-gray-300,[data-theme="dark"] .border-slate-300,[data-theme="dark"] .border-zinc-300{border-color:var(--sep-2)!important}
[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]),[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]){border-color:var(--sep)!important}
/* inputs com placeholder */
[data-theme="dark"] .placeholder-gray-400::placeholder,[data-theme="dark"] .placeholder-gray-500::placeholder{color:var(--ink-3)!important}

/* ====== (C) BADGES soft coloridos — SÓ no dark → tokens semânticos ====== */
[data-theme="dark"] .bg-red-50,[data-theme="dark"] .bg-red-100,[data-theme="dark"] .bg-rose-50,[data-theme="dark"] .bg-rose-100{background-color:var(--crit-soft)!important}
[data-theme="dark"] .text-red-600,[data-theme="dark"] .text-red-700,[data-theme="dark"] .text-red-800,[data-theme="dark"] .text-rose-700{color:var(--crit)!important}
[data-theme="dark"] .bg-amber-50,[data-theme="dark"] .bg-amber-100,[data-theme="dark"] .bg-yellow-50,[data-theme="dark"] .bg-yellow-100,[data-theme="dark"] .bg-orange-50,[data-theme="dark"] .bg-orange-100{background-color:var(--warn-soft)!important}
[data-theme="dark"] .text-amber-600,[data-theme="dark"] .text-amber-700,[data-theme="dark"] .text-amber-800,[data-theme="dark"] .text-yellow-700,[data-theme="dark"] .text-orange-700{color:var(--warn)!important}
[data-theme="dark"] .bg-blue-50,[data-theme="dark"] .bg-blue-100,[data-theme="dark"] .bg-sky-50,[data-theme="dark"] .bg-sky-100,[data-theme="dark"] .bg-indigo-50,[data-theme="dark"] .bg-indigo-100{background-color:var(--calm-soft)!important}
[data-theme="dark"] .text-blue-600,[data-theme="dark"] .text-blue-700,[data-theme="dark"] .text-blue-800,[data-theme="dark"] .text-sky-700,[data-theme="dark"] .text-indigo-700{color:var(--calm)!important}
[data-theme="dark"] .bg-purple-50,[data-theme="dark"] .bg-purple-100,[data-theme="dark"] .bg-violet-50,[data-theme="dark"] .bg-violet-100,[data-theme="dark"] .bg-fuchsia-50{background-color:var(--plum-soft)!important}
[data-theme="dark"] .text-purple-600,[data-theme="dark"] .text-purple-700,[data-theme="dark"] .text-violet-700{color:var(--plum)!important}

/* ====== (D) BOTÕES — primário escuro → verde do modelo; danger → crit (2 temas) ====== */
button.bg-slate-950,button.bg-slate-900,button.bg-gray-950,button.bg-gray-900,button.bg-neutral-900,button.bg-zinc-900,button.bg-black,
a.bg-slate-950,a.bg-slate-900,a.bg-gray-900,[role="button"].bg-slate-900,[role="button"].bg-gray-900{background-color:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
button.hover\:bg-slate-800:hover,button.hover\:bg-slate-900:hover,button.hover\:bg-gray-800:hover,button.hover\:bg-gray-900:hover,button.hover\:bg-neutral-800:hover,button.hover\:bg-zinc-800:hover,button.hover\:bg-black:hover{background-color:var(--accent-2)!important}
button.bg-red-600,button.bg-red-700,button.bg-red-800,button.bg-rose-600,button.bg-rose-700,a.bg-red-700{background-color:var(--crit)!important;border-color:var(--crit)!important;color:#fff!important}
button.hover\:bg-red-700:hover,button.hover\:bg-red-800:hover{background-color:color-mix(in srgb,var(--crit) 82%,#000)!important}

/* ====== (E) SEGMENTED CONTROL — trilho bg-slate-100+shadow-inner → compacto (modelo) ====== */
.flex.bg-slate-100.rounded-2xl.shadow-inner,.flex.bg-gray-100.rounded-2xl.shadow-inner{width:-moz-fit-content!important;width:fit-content!important;max-width:100%;border-radius:var(--r-md,12px)!important}
.flex.bg-slate-100.rounded-2xl.shadow-inner > button,.flex.bg-gray-100.rounded-2xl.shadow-inner > button{flex:0 0 auto!important;padding-inline:15px!important;border-radius:var(--r-sm,9px)!important}