/* Design system do ComprasMonitor — tokens centralizados. Ajuste valores aqui, nunca
   hard-code cor/espaçamento/sombra direto numa view ou noutro arquivo CSS. */
:root {
  --cm-primary: #2563eb;
  --cm-primary-hover: #1d4ed8;
  --cm-primary-light: #eff6ff;

  --cm-bg: #f8fafc;
  --cm-surface: #ffffff;
  --cm-surface-secondary: #f1f5f9;

  --cm-text: #0f172a;
  --cm-text-secondary: #475569;
  --cm-text-muted: #64748b;

  --cm-border: #e2e8f0;

  --cm-success: #16a34a;
  --cm-success-light: #f0fdf4;
  --cm-warning: #d97706;
  --cm-warning-light: #fffbeb;
  --cm-danger: #dc2626;
  --cm-danger-light: #fef2f2;
  --cm-info: #0284c7;
  --cm-info-light: #f0f9ff;
  --cm-neutral: #64748b;
  --cm-neutral-light: #f1f5f9;
  --cm-violet: #7c3aed;
  --cm-violet-light: #f5f3ff;

  --cm-radius: 8px;
  --cm-radius-lg: 12px;
  --cm-radius-sm: 6px;

  --cm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --cm-shadow: 0 4px 12px rgba(15, 23, 42, .06);

  --cm-space-1: 4px;
  --cm-space-2: 8px;
  --cm-space-3: 12px;
  --cm-space-4: 16px;
  --cm-space-5: 24px;
  --cm-space-6: 32px;

  --cm-topbar-height: 60px;
  --cm-sidebar-width: 240px;
  --cm-sidebar-width-collapsed: 64px;

  --cm-transition: 150ms ease;

  --bs-body-font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-color: var(--cm-text);
  --bs-body-bg: var(--cm-bg);
}

body {
  font-size: 14.5px;
  color: var(--cm-text);
  background: var(--cm-bg);
}

h1, .cm-h1 { font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
h2, .cm-h2 { font-size: 20px; font-weight: 600; }
h3, .cm-h3 { font-size: 18px; font-weight: 600; }
small, .cm-meta { font-size: 12.5px; color: var(--cm-text-muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}