/* Tokens de design — paleta institucional (azul + estados semânticos),
   aplicada de ponta a ponta: telas, gráficos SVG (--chart-*) e relatórios
   impressos (ver css/print.css). Ao alterar uma cor aqui, conferir também
   js/charts/palette.js (VIZ), que espelha os tons dos gráficos para uso
   fora do CSS (SVG inline). */
:root {
  /* Só existe tema claro por enquanto (mesmo escopo do app anterior) —
     declarar isso explicitamente impede o navegador de "auto-escurecer"
     elementos sem cor declarada (ex.: fill="transparent" em SVG), o que
     pintava os retângulos de captura dos gráficos de preto sólido. */
  color-scheme: light;

  /* Superfícies */
  --page-bg: #f4f6f8;
  --surface: #ffffff;
  --surface-sunken: #eef1f4;
  --border: #e1e4e8;
  --border-strong: #c6ccd2;

  /* Tinta (texto) */
  --ink-primary: #2b2f33;
  --ink-secondary: #6b7280;
  --ink-muted: #9aa1a9;
  --ink-on-accent: #ffffff;

  /* Acento — azul institucional (marca/ações principais), com a variante
     clara para hover/destaques e a acinzentada para apoio/links/ícones */
  --accent: #1b3a5c;
  --accent-hover: #2e6ba6;
  --accent-soft: #e7edf3;
  --accent-secondary: #6c8ca8;

  /* Estado */
  --success: #2e8b57;
  --success-soft: #e6f3ec;
  --warning: #e0a526;
  --warning-soft: #faf0da;
  --danger: #c0392b;
  --danger-soft: #f8e6e3;
  /* Cadastro divergente (não é erro nem alerta de prazo): hoje, condomínio que
     está numa carteira, mas na do gerente errado. Roxo por não colidir com
     nenhum dos estados acima nem com o azul institucional. */
  --alerta-cadastro: #7d3c98;
  --alerta-cadastro-soft: #f2e9f7;

  /* Paleta categórica dos gráficos — deriva da paleta institucional acima */
  --chart-s1: #1b3a5c;
  --chart-s2: #d97757; /* laranja — só o comparativo mensal Y vs Y-1 */
  --chart-abc-a: #1b3a5c;
  --chart-abc-b: #2e6ba6;
  --chart-abc-c: #6c8ca8;
  --chart-grid: #e1e4e8;
  --chart-axis: #c6ccd2;
  --chart-muted: #6b7280;

  /* Espaçamento (escala 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Raio e sombra — sombra só para overlays transitórios (modal/toast) */
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.18);

  /* Tipografia — pilha de sistema (Segoe UI no Windows, reforça app nativo) */
  --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sidebar-w: 232px;
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--ink-primary);
  font-size: 13.5px;
  line-height: 1.45;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}