/* ============================================================
   Verde da Casa da Borracha nos destaques (botões, menu ativo,
   progresso, checks). Para voltar ao visual preto e branco do
   Aether, é só tirar a linha que carrega este arquivo no HTML.
   ============================================================ */
:root {
  --marca: #16a34a;
  --marca-hover: #15803d;
  --marca-texto: #ffffff;
  --marca-fundo: rgba(22, 163, 74, 0.10);
  --marca-borda: rgba(22, 163, 74, 0.35);
  --focus: #16a34a;
}
.dark {
  --marca: #22c55e;
  --marca-hover: #28d76b;
  --marca-texto: #052e16;
  --marca-fundo: rgba(34, 197, 94, 0.12);
  --marca-borda: rgba(34, 197, 94, 0.40);
  --focus: #22c55e;
}

/* Botão principal */
.btn.primary { background: var(--marca); color: var(--marca-texto); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--marca-hover); }
.btn.primary:disabled { background: var(--gray-100); color: var(--gray-700); font-weight: 500; }

/* Menu: item ativo */
.nav-item.active { background: var(--marca-fundo); }
.nav-item.active .icon { color: var(--marca); }
.nav-badge.full, .ck-count.full { background: var(--marca-fundo); color: var(--marca); }

/* Números dos passos */
.step { background: var(--marca); color: var(--marca-texto); }

/* Progresso, checks, interruptores, bolinhas */
.progress-bar { background: var(--marca); }
.ck-item.done .ck-box { background: var(--marca); }
.dark .ck-item.done .ck-box::after { border-color: var(--marca-texto); }
.switch input:checked + span { background: var(--marca); }
.chip.on .dot, .toast .dot { background: var(--marca); }
.pill.ok .dot { background: var(--marca); box-shadow: 0 0 0 3px var(--marca-fundo); }
.pill.ok { color: var(--marca); }

/* Campo de busca de código e campos do login: borda verde ao focar */
.search:focus-within,
.campo input:focus,
.select:focus,
.ck-add input:focus { box-shadow: 0 0 0 1px var(--marca), 0 0 0 4px var(--marca-fundo); }

/* Item achado pela busca e notificação nova */
.notif-item.nova { background: var(--marca-fundo); }
.notif-ponto { background: var(--marca); }

/* Tema: botão escolhido */
.theme-toggle button[aria-pressed="true"] { background: var(--marca-fundo); color: var(--marca); }