/*
 * Design tokens da Mindself — atualizados a partir do moodboard real de
 * branding (paleta oficial + tipografia serifada para títulos + ícones
 * PRISMA + ilustração de personagem), Set. 2026. Substitui a paleta v1
 * provisória (§8.5.4 da Fonte de Verdade, que era só uma primeira aproximação
 * sem os ficheiros de marca reais).
 *
 * Segue a mesma abordagem de tokens.css do SiteWatch/GTM/News — CSS custom
 * properties em vez de framework CSS.
 */

:root {
  /* Marca — paleta oficial */
  --brand: #fb6e41;
  --accent: #fb6e41;
  --accent-hover: #e2603a;
  --institucional: #022a49;
  --sage: #7faa89;
  --azul-claro: #9bb9d5;
  --papel: #f2efe9;

  /* Sidebar (backoffice) */
  --sidebar-w: 220px;
  --sidebar-bg1: #022a49;
  --sidebar-bg2: #011a30;
  --sidebar-border: #0d3a5c;
  --sidebar-text: #eef1fb;
  --sidebar-nav-text: #b9c2e0;
  --sidebar-nav-hover: rgba(255, 255, 255, 0.08);
  --sidebar-nav-active: rgba(255, 255, 255, 0.14);
  --sidebar-muted: #8791b8;

  /* Superfícies — neutras e frias, nunca amareladas */
  --body-bg: #ffffff;
  --surface: #fff;
  --border: #e5e7eb;
  --topbar-h: 54px;

  /* Texto */
  --text: #2a2a2a;
  --text-muted: #888;
  --font: 'Poppins', 'Futura', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala */
  --radius-sm: 3px;
  --radius: 10px;
  --radius-lg: 12px;

  /* Severidades (estado de leads, inscrições, pagamentos) */
  --ok-bg: #dcfce7;
  --ok-fg: #15803d;
  --warning-bg: #fef3c7;
  --warning-fg: #92400e;
  --critical-bg: #fee2e2;
  --critical-fg: #b91c1c;
  --muted-bg: #f3f4f6;
  --muted-fg: #6b7280;

  /* Campos */
  --input-border: #d5d8dd;
  --input-border-hover: #a8adb5;
  --input-bg: #fff;
  --input-ring: rgba(251, 110, 65, 0.16);
}

.badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); }
.badge-critical { background: var(--critical-bg); color: var(--critical-fg); }
.badge-muted { background: var(--muted-bg); color: var(--muted-fg); }