:root {
   /* Tema claro trocado de rosa/marca (#A7194B) pra "blue jeans" (#073464) -
      pedido explícito: onde a cor era A7194B, agora é essa azul. Tema escuro
      não é afetado (bloco dele mais abaixo continua com a paleta antiga). */
   --main-bg-color: #073464;
   --main-font-color: #FDF6F0;
   --main-font-color-smotly: #FDF6F050;
   --main-bg-color-smotly: #07346433; /* 20% */
   --main-bg-color-middle: #07346480; /* 50% */
   --main-bg-color-strong: #073464CC; /* 80% */
   /* Fundo de página separado da cor de marca - usar a própria marca como
      fundo da página inteira ficava gritante. Fundo neutro aqui, marca
      preservada em todo o resto (ícones, botões, acentos). No escuro
      segue igual a --main-bg-color de propósito (não mexer no tema escuro). */
   --page-bg-color: #F4F6F9;
   /* Superfícies "brancas" (popups, toasts, cards flutuantes) que não usam o par bg/font principal */
   --surface-color: #FFFFFF;
   --surface-text-color: var(--main-bg-color);
   /* Cards de catálogo (venda balcão, ficha, incluir item) no claro: corpo
      no mesmo tom neutro do fundo da página (não é um alpha-blend - sobre
      o mesmo fundo da página um alpha-blend da mesma cor vira invisível,
      por isso o valor fixo aqui) e header branco com texto na cor da marca. */
   --main-bg-color-light: #F4F6F9;
   --main-bg-color-lighter: #FFFFFF;
   --card-header-text-color: var(--main-bg-color);
   /* Botão .btn-default (fundo --main-font-color) ficava sem contorno nenhum
      contra o novo fundo claro da página - pedido explícito de borda blue
      jeans só no tema claro. No escuro o botão já se destacava bem sem
      borda, então fica transparent lá (ver bloco dark abaixo). */
   --btn-default-border-color: var(--main-bg-color);
   /* Ícone de mesa livre (mesa-status-off): tom translúcido da mesma cor do
      mesa-status-on (--surface-text-color, azul sólido no claro) - 60%
      alpha em vez dos 80% de --main-bg-color-strong, que ficava forte
      demais/pouco diferenciado do azul sólido da mesa ocupada. */
   --mesa-off-color: #07346499; /* 60% */
   /* Borda do card de mesa e fundo dos badges de canto (mesa-opcao-*): no
      original os dois usavam --main-font-color-smotly (off-white translúcido),
      o que sumia contra o novo fundo claro da página. No claro passam a usar
      um tom leve da marca; no escuro voltam pro off-white original (ver
      bloco dark). */
   --mesa-border-color: var(--main-bg-color-smotly);
   --mesa-opcao-bg-color: var(--main-bg-color-smotly);
   /* Tom translúcido genérico para "linhas guia" sutis (grade dos gráficos de
      Relatórios) - mesma lógica de --mesa-border-color: tom da marca no
      claro, off-white no escuro (senão a grade escura some sobre a página
      escura). */
   --subtle-line-color: var(--main-bg-color-smotly);
   /* Borda sólida usada nos cards de cadastro (.extrato-comanda-row, base de
      quase toda tela de cadastro/listagem: Produtos, Mesas, ListarOrdens,
      KitchenDisplay, ItemDestino, ItemCategoria, Grupos, CadastroGarcom,
      BingoCriarRodada, Adicionais, Rodizio, e o extrato de comanda de
      verdade) - antes usava --main-font-color (off-white fixo), invisível
      contra a página clara. No escuro mantém o off-white original. */
   --card-border-color: var(--main-bg-color);
   /* Texto/borda de input desabilitado: mesma ideia de --main-font-color-smotly,
      só que na cor certa pra quem está sobre --surface-color (branco) em vez
      do fundo colorido da marca. */
   --surface-text-color-smotly: #07346450;
   /* Corpo dos cards "card-body-inverse-inner" (Parâmetros, Calcular Lucro):
      padrão combinado é o corpo do card sempre mais claro que o fundo da
      página. No claro, --main-bg-color-smotly (azul translúcido) sobre
      --page-bg-color (neutro) já contrasta bem. */
   --card-body-bg-color: var(--main-bg-color-smotly);
}

/* Night mode: mesma paleta de marca, com o fundo escurecido.
   --main-font-color permanece igual de propósito - ele já funciona como cor de
   "superfície de controle" (botões, navbar, cabeçalhos) em todo o site.css,
   então mantendo-o fixo o contraste botão/texto continua correto nos dois temas. */
:root[data-theme="dark"] {
   --main-bg-color: #2B0817;
   --main-bg-color-smotly: #2B081733; /* 20% */
   --main-bg-color-middle: #2B081780; /* 50% */
   --main-bg-color-strong: #2B0817CC; /* 80% */
   --page-bg-color: var(--main-bg-color); /* tema escuro inalterado - fundo continua igual a antes */

   /* #241019 era mais escuro que o próprio --page-bg-color (#2B0817) - swal
      e os cards que usam --surface-color ficavam praticamente invisíveis no
      escuro. Reaproveitando o tom de --main-bg-color-light (já pensado como
      "card claro" contra o fundo escuro). */
   --surface-color: #4B2C38;
   --surface-text-color: #FDF6F0;

   --main-bg-color-light: #4B2C38;
   --main-bg-color-lighter: #6A4F58;
   --card-header-text-color: var(--main-font-color);
   --btn-default-border-color: transparent;
   /* --surface-text-color sólido (off-white) é usado pelo mesa-status-on -
      mesa livre (off) precisa de um tom diferente, senão fica idêntica à
      ocupada. Versão translúcida (60%) da mesma cor off-white. */
   --mesa-off-color: #FDF6F099; /* 60% */
   --mesa-border-color: var(--main-font-color-smotly);
   --mesa-opcao-bg-color: var(--main-font-color-smotly);
   --subtle-line-color: var(--main-font-color-smotly);
   --card-border-color: var(--main-font-color);
   --surface-text-color-smotly: var(--main-font-color-smotly);
   /* No escuro --page-bg-color é igual a --main-bg-color, então um overlay
      translúcido de --main-bg-color-smotly em cima dele não clareia nada
      (é a mesma cor sobre ela mesma). Usa --surface-color (já pensado como
      "card claro" contra o fundo escuro) pra manter o padrão combinado de
      corpo do card sempre mais claro que a página. */
   --card-body-bg-color: var(--surface-color);
}

/* Troca de tema suave: como mudar uma custom property não anima sozinho,
   dá um fade na base fixa da página (fundo, navbar, rodapé, botão de tema).
   NÃO usar `*` aqui - testado ao vivo e confirmado que, em elementos
   inseridos via AJAX depois do load (os cards de categoria/venda), o
   `transition` genérico faz o color/background var()-based "travar" no
   valor antigo até um reload, mesmo a variável já tendo mudado. Correção >
   suavidade, então a transição fica restrita ao que já existe no load
   inicial da página. */
body, .menu, .app-footer, .btn-theme-toggle {
   transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}