:root {
  --ds-color-primary-50: #eef4ff;
  --ds-color-primary-100: #d9e6ff;
  --ds-color-primary-500: #3568e8;
  --ds-color-primary-600: #2854c5;
  --ds-color-primary-700: #20439c;
  --ds-color-neutral-0: #ffffff;
  --ds-color-neutral-50: #f8fafc;
  --ds-color-neutral-100: #f1f5f9;
  --ds-color-neutral-200: #e2e8f0;
  --ds-color-neutral-300: #cbd5e1;
  --ds-color-neutral-500: #64748b;
  --ds-color-neutral-700: #334155;
  --ds-color-neutral-900: #0f172a;
  --ds-color-success-50: #ecfdf5;
  --ds-color-success-600: #047857;
  --ds-color-warning-50: #fffbeb;
  --ds-color-warning-700: #a16207;
  --ds-color-danger-50: #fef2f2;
  --ds-color-danger-600: #dc2626;
  --ds-color-info-50: #eff6ff;
  --ds-color-info-700: #1d4ed8;
  --ds-font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-size-xs: 0.75rem;
  --ds-font-size-sm: 0.875rem;
  --ds-font-size-md: 1rem;
  --ds-font-size-lg: 1.125rem;
  --ds-font-size-xl: 1.5rem;
  --ds-font-size-2xl: 2rem;
  --ds-line-height-tight: 1.25;
  --ds-line-height-normal: 1.5;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-radius-sm: 0.375rem;
  --ds-radius-md: 0.625rem;
  --ds-radius-lg: 1rem;
  --ds-shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
  --ds-shadow-md: 0 8px 24px rgb(15 23 42 / 12%);
  --ds-border: 1px solid var(--ds-color-neutral-200);
  --ds-focus-ring: 0 0 0 3px rgb(53 104 232 / 28%);
  --ds-duration-fast: 140ms;
  --ds-duration-normal: 220ms;
  --ds-z-dropdown: 40;
  --ds-z-modal: 100;
}

/* Design Tokens v2 — App Shell (Sprint 21). Paleta navy para a casca do
   sistema (sidebar/header); demais telas continuam nos tokens --ds-* acima
   até migrarem em sprints futuras. */
:root {
  --color-navy: #101d3d;
  --color-text-primary: #2f3a55;
  --color-text-secondary: #5f6b85;
  --color-text-tertiary: #8d97ac;
  --color-border: #e1e5ee;
  --color-border-subtle: #eaedf3;
  --color-border-focus: #c8cfdd;
  --color-surface-white: #ffffff;
  --color-surface-muted: #eef1f7;
  --color-surface-alt: #f6f8fc;
  --color-sidebar-text-inactive: rgba(255, 255, 255, 0.78);
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-item-active-bg: rgba(255, 255, 255, 0.16);
  --color-sidebar-item-hover-bg: rgba(255, 255, 255, 0.08);
  --color-info: #2563eb;
  --color-info-hover: #1d4ed8;
  --color-info-bg: #eff6ff;
  --color-warning: #b45309;
  --color-critical: #b91c1c;
  --font-family-v2: Inter, system-ui, sans-serif;
  --font-size-base-v2: 14.5px;
  --radius-base: 6px;
  --radius-nav: 7px;
  --radius-card: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shell-header-height: 60px;
}

/* Design Tokens v2 (cont.) — complemento do Anexo A (repaginação visual,
   Prompt 0). Decisão registrada em STATUS_REPORT.md #15: --color-* acima
   é a autoridade de cor para as telas novas; estes são só os valores do
   Anexo A que ainda não tinham token aqui (anel de foco, hover de botão
   primário, trio de "perigo"/badge vermelho, demais famílias de badge,
   cores de canal e avatar). Puramente aditivo — nenhum seletor existente
   referencia os nomes abaixo ainda. */
:root {
  --color-focus-ring: #bfdbfe;
  --color-focus-ring-soft: #dbeafe;
  --color-navy-hover: #1b2c56;

  /* Trio "perigo" (botão) === trio badge vermelho no Anexo A — mesmo dado,
     dois usos; --color-critical (#b91c1c) acima já cobre o texto. */
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fca5a5;

  /* Badges de status (trio fundo/texto/borda) — ver Anexo A. Neutro e
     âmbar reaproveitam tokens que já existiam (surface-muted/text-primary/
     border-focus e warning); os demais são novos. */
  --color-badge-green-bg: #f0fdf4;
  --color-badge-green-text: #166534;
  --color-badge-green-border: #86efac;
  --color-badge-blue-bg: #eff6ff;
  --color-badge-blue-text: #1d4ed8;
  --color-badge-blue-border: #bfdbfe;
  --color-badge-amber-bg: #fffbeb;
  --color-badge-amber-text: #b45309;
  --color-badge-amber-border: #fcd34d;
  --color-badge-purple-bg: #f5f3ff;
  --color-badge-purple-text: #6d28d9;
  --color-badge-purple-border: #ddd6fe;

  /* Bolinha de canal */
  --color-channel-whatsapp: #22c55e;
  --color-channel-phone: #3b82f6;
  --color-channel-form: #a855f7;
  --color-channel-campaign: #f59e0b;

  /* Avatares (ciclo por posição na lista) */
  --color-avatar-1: #101d3d;
  --color-avatar-2: #1e3a8a;
  --color-avatar-3: #0f766e;
  --color-avatar-4: #7c2d12;
  --color-avatar-5: #4c1d95;
  --color-avatar-6: #155e75;
  --color-avatar-7: #831843;
}