/* =========================================================
   Cores do app por tema. Único lugar onde as cores --dash-* são definidas.

   Temas:  escuro = :root (padrão do CSS)
           [data-theme="light"]  claro
           [data-theme="cream"]  creme (padrão do app; ver includes/html_head.php)

   Carregado por includes/html_head.php, antes do CSS de cada tela.
   Cor nova: crie a variável aqui nos três temas e use var(--dash-...) na tela,
   sem valor de reserva. Tom suave (fundo de badge, ícone): use
   color-mix(in srgb, var(--dash-positive) 14%, transparent).
   ========================================================= */

:root {
  color-scheme: dark;

  /* superfícies e texto */
  --dash-bg: #020617;
  --dash-text: #e5e7eb;
  --dash-title: #e5e7eb;
  --dash-subtitle: #94a3b8;
  --dash-card-bg: #020617;
  --dash-card-border: #1e293b;
  --dash-input-bg: #020617;
  --dash-input-border: #1e293b;
  --dash-form-input-bg: #0f0f0f;
  --dash-form-input-border: #2b2b2b;
  --dash-btn-outline-bg: #2a2a2a;
  --dash-btn-outline-text: #ccc;
  --dash-btn-outline-border: #3a3a3a;
  --dash-btn-outline-hover-bg: #333;
  --dash-shadow: rgba(0, 0, 0, 0.4);
  --dash-nav-hover-bg: #333;
  --dash-nav-hover-text: #22c55e;

  /* significado */
  --dash-accent: #22c55e;      /* foco, seleção, hover do menu */
  --dash-positive: #4ade80;    /* recebimento, saldo positivo, ativo */
  --dash-negative: #f87171;    /* despesa, erro, exclusão */
  --dash-info: #60a5fa;        /* saldo, destaque informativo, editar */
  --dash-warning: #f59e0b;     /* parcela, aviso */
  --dash-highlight: #a78bfa;   /* recorrência */

  /* caixa de aviso (ex.: parcelamento) */
  --dash-warn-bg: rgba(120, 53, 15, 0.25);
  --dash-warn-border: #92400e;
  --dash-warn-text: #fde68a;
}

[data-theme="light"] {
  color-scheme: light;

  --dash-bg: #f9fafb;
  --dash-text: #111827;
  --dash-title: #111827;
  --dash-subtitle: #64748b;
  --dash-card-bg: #ffffff;
  --dash-card-border: #cccccc;
  --dash-input-bg: #ffffff;
  --dash-input-border: #cbd5e1;
  --dash-form-input-bg: #ffffff;
  --dash-form-input-border: #cbd5e1;
  --dash-btn-outline-bg: #ffffff;
  --dash-btn-outline-text: #475569;
  --dash-btn-outline-border: #cbd5e1;
  --dash-btn-outline-hover-bg: #f1f5f9;
  --dash-shadow: rgba(15, 23, 42, 0.08);
  --dash-nav-hover-bg: #f1f5f9;
  --dash-nav-hover-text: #16a34a;

  --dash-accent: #16a34a;
  --dash-positive: #16a34a;
  --dash-negative: #dc2626;
  --dash-info: #2563eb;
  --dash-warning: #d97706;
  --dash-highlight: #7c3aed;

  --dash-warn-bg: #fffbeb;
  --dash-warn-border: #f59e0b;
  --dash-warn-text: #92400e;
}

/* Creme: papel e tinta, igual à página de apresentação */
[data-theme="cream"] {
  color-scheme: light;

  --dash-bg: #f5f0e6;
  --dash-text: #1d1c19;
  --dash-title: #1d1c19;
  --dash-subtitle: #6b675c;
  --dash-card-bg: #fbf8f1;
  --dash-card-border: #d8d0bd;
  --dash-input-bg: #fbf8f1;
  --dash-input-border: #d8d0bd;
  --dash-form-input-bg: #fbf8f1;
  --dash-form-input-border: #cfc6b0;
  --dash-btn-outline-bg: #fbf8f1;
  --dash-btn-outline-text: #55524a;
  --dash-btn-outline-border: #d8d0bd;
  --dash-btn-outline-hover-bg: #ece5d6;
  --dash-shadow: rgba(60, 50, 30, 0.08);
  --dash-nav-hover-bg: #e8dcc3;
  --dash-nav-hover-text: #6b4423;

  --dash-accent: #2c6b4a;
  --dash-positive: #2c6b4a;
  --dash-negative: #a8452c;
  --dash-info: #2f5d7c;
  --dash-warning: #b7791f;
  --dash-highlight: #6b4c8a;

  --dash-warn-bg: #f4e7c8;
  --dash-warn-border: #b7791f;
  --dash-warn-text: #5c3a0e;
}