/* Panorama Municipal • Tokens do layout mobile (Relatório de Design Mobile, fase 2).
 * Carregado pelo app (index.html) e pelos painéis em modo mshell (@import em pm-mshell.css).
 * Só nomes novos: --pm-card / --pm-muted / --pm-primary já existem no CSS desktop,
 * por isso as cores usam o prefixo --pm-color-*. */
:root {
  /* Tipografia — escala do Material 3, Roboto. Use como `font: var(--pm-type-…)`;
     o peso pode ser ajustado depois com font-weight quando o papel pedir ênfase. */
  --pm-font-ui: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pm-type-headline: 600 24px/32px var(--pm-font-ui);
  --pm-type-title-lg: 700 22px/28px var(--pm-font-ui);
  --pm-type-title-md: 600 16px/24px var(--pm-font-ui);
  --pm-type-body-lg: 400 16px/24px var(--pm-font-ui);
  --pm-type-body-md: 400 14px/20px var(--pm-font-ui);
  --pm-type-label-lg: 500 14px/20px var(--pm-font-ui);
  --pm-type-label-md: 500 12px/16px var(--pm-font-ui);
  --pm-type-label-sm: 500 11px/16px var(--pm-font-ui);

  /* Espaço (múltiplos de 4) */
  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 12px;
  --pm-space-4: 16px;
  --pm-space-6: 24px;

  /* Toque */
  --pm-touch-min: 48px;

  /* Cor: uma primária e uma superfície base */
  --pm-color-primary: #2476ce;
  --pm-color-primary-hi: #3a86d6; /* topo do degradê da gota azul */
  --pm-color-primary-soft: #eaf3ff;
  --pm-color-surface: #f3f6fa;
  --pm-color-surface-alt: #e8edf3; /* fundo de controle inativo sobre a superfície */
  --pm-color-card: #ffffff;
  --pm-color-line: #e1e8f0;
  --pm-color-ink: #172438;
  --pm-color-muted: #65798f;
}