/* ==========================================================================
   tokens.css — Design tokens do ROI Reveal (direção premium do redesign).
   Fonte: "Redesign SaaS premium/tokens/*.css". Consolida colors + typography
   + spacing + effects num único :root. Carregar como PRIMEIRO stylesheet.
   NÃO reimporta Urbanist nem a @font-face de ícones — já vêm do head/estiloAdmin.
   ========================================================================== */
:root {
  /* -------------------------------------------------------------- Cores -- */
  /* ---- Marca ---- */
  --brand-primary: #4E47EA;              /* lavanda — links, ações, estado ativo */
  --brand-primary-hover: #352EC9;
  --brand-primary-soft: rgba(78, 71, 234, .10);
  --brand-primary-border: rgba(78, 71, 234, .22);
  --brand-primary-2: #7C6BFF;            /* lavanda claro (gradientes, setas de saída) */

  /* ---- Ink / texto ---- */
  --text-strong: #1B1930;                /* títulos, valores */
  --text-body: #4A4A5A;                  /* corpo */
  --text-muted: #6B6F86;                 /* secundário */
  --text-faint: #9A9CB0;                 /* rótulos, metadados */
  --text-disabled: #B7B7C4;

  /* ---- Superfícies ---- */
  --surface-page: #F6F6FA;               /* canvas do app */
  --surface-card: #FFFFFF;
  --surface-subtle: #F9F9FC;             /* mini-cards, stat boxes */
  --surface-sunken: #F2F2F7;             /* chips neutros, trilhas, hovers */

  /* ---- Bordas / linhas ---- */
  --border-card: #ECEBF2;
  --border-strong: #E4E3EC;              /* inputs, botões neutros */
  --border-hair: #F2F2F7;                /* divisórias internas */

  /* ---- Direção (a inovação do redesign) ---- */
  --entrada: #15803D;                    /* fonte · o que ENTRA (leads) */
  --entrada-soft: rgba(34, 197, 94, .12);
  --entrada-surface: #F7FCF9;
  --entrada-border: #E6F2EA;
  --saida: #7C3AED;                      /* envio · o que SAI (conversões) */
  --saida-soft: rgba(124, 107, 255, .14);
  --saida-surface: #FAF9FE;
  --saida-border: #ECE8FB;

  /* ---- Status ---- */
  --ok: #15803D;   --ok-dot: #22C55E;   --ok-soft: rgba(34, 197, 94, .12);
  --warn: #B45309; --warn-dot: #F59E0B; --warn-soft: #FEF3C7;
  --danger: #C0392B; --danger-border: #F3D0D0; --danger-soft: #FDF3F3;

  /* ---- Cores das integrações parceiras ---- */
  --meta: #0866FF;
  --google: #4285F4;
  --whatsapp: #25D366;
  --rd-station: #00B389;
  --ecommerce: #0EA5E9;

  /* -------------------------------------------------------- Tipografia -- */
  --font-sans: 'Urbanist', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Menlo, 'SF Mono', monospace;
  --font-icons: 'icones-roi-reveal';

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;   /* peso padrão de título no produto atual */
  --fw-bold: 700;
  --fw-extrabold: 800;  /* display do redesign premium */

  --fs-display: 27px;   /* h1 de tela */
  --fs-h1: 24px;        /* h1 de sub-página */
  --fs-title: 16px;     /* título de seção/card */
  --fs-stat: 22px;      /* números / métricas */
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-label: 11px;     /* rótulos em CAIXA ALTA */
  --fs-micro: 10px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --ls-display: -.02em;
  --ls-label: .05em;
  --ls-wide: .09em;

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

  --gap-card: 16px;      /* espaço entre cards numa grade */
  --pad-card: 20px;      /* padding interno de card */
  --pad-screen: 26px;    /* padding da área de conteúdo */
  --sidebar-w: 280px;    /* largura do menu lateral (redesign) */

  /* -------------------------------------------------------------- Raios -- */
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 20px;
  --radius-round: 50%;

  /* -------------------------------------- Sombras (elevação "premium") -- */
  --shadow-card: 0 1px 2px rgba(20, 20, 43, .04), 0 6px 20px -12px rgba(20, 20, 43, .14);
  --shadow-pop: 0 40px 80px -24px rgba(20, 20, 43, .30), 0 12px 28px -12px rgba(20, 20, 43, .18);
  --shadow-btn: 0 4px 12px -3px rgba(78, 71, 234, .5);
  --shadow-thumb: 0 1px 2px rgba(0, 0, 0, .25);

  /* ---- Foco ---- */
  --ring-focus: 0 0 0 3px rgba(78, 71, 234, .25);

  /* ---- Transições ---- */
  --ease: .3s ease;
}