/* design-system.css — tokens do Marketing Hub.
   Fonte única de cor, espaço, tipografia, raio, elevação e movimento.
   Gerado a partir da seção 11 de DESIGN_SYSTEM.md, que é a especificação:
   valor novo entra lá primeiro, aqui depois. Nada de valor solto em página.

   Ordem de carregamento em toda página:
     design-system.css  → tokens (este arquivo)
     theme.js           → põe data-theme no <html> (síncrono, antes da pintura)
     app.css            → componentes compartilhados
     <style> da página  → só o que é exclusivo dela

   A seção "compatibilidade" no fim traduz os nomes antigos (--brand, --fg1,
   --bg...) para os novos. Existem ~2.800 usos deles espalhados por 64
   páginas; traduzir custa uma linha cada e renomear custaria 64 arquivos.
   Some quando a última página estiver migrada. */

:root {
  color-scheme:light;

  /* neutros */
  --neutral-0:#ffffff;    --neutral-25:#fafaf9;   --neutral-50:#f7f7f5;
  --neutral-100:#f2f2f0;  --neutral-200:#e5e5e5;  --neutral-300:#d6d6d3;
  --neutral-400:#b5b5b3;  --neutral-500:#8a8a8a;  --neutral-550:#767676;
  --neutral-600:#6b6b6b;  --neutral-700:#595959;  --neutral-800:#3d3d3d;
  --neutral-900:#262626;  --neutral-1000:#1a1a1a;

  /* marca */
  --brand-50:#fdeef5;  --brand-100:#fbd9e8; --brand-200:#f5abc9;
  --brand-300:#ee74a5; --brand-400:#e03c80; --brand-500:#d0095f;
  --brand-600:#a80750; --brand-700:#82053e; --brand-800:#5a032b;

  /* semânticas */
  --success-100:#e6f4ec; --success-200:#b6dfc9; --success-600:#0f7a4d; --success-700:#0a5c3a;
  --warning-100:#fdf3e2; --warning-200:#f2d9a4; --warning-600:#9a6100; --warning-700:#8a5300;
  /* warning-600 era #c07800: 3,22:1 sobre warning-100 e 3,54:1 sobre branco —
     reprovava como texto ("cache antigo", KPI em alerta). #9a6100 dá 4,68:1
     sobre warning-100 e 5,14:1 sobre branco (WCAG AA, 03/10/2026). */
  --danger-100:#fdeceb;  --danger-200:#f4c2bd;  --danger-600:#b42318;  --danger-700:#8f1d12;
  --info-100:#e9f2fc;    --info-200:#bcd8f5;    --info-600:#0b5cad;    --info-700:#0a4f96;

  /* gráficos */
  --chart-01:#d0095f; --chart-02:#0f4c9e; --chart-03:#0e8a7d; --chart-04:#c26a00;
  --chart-05:#6d3bab; --chart-06:#1a97c9; --chart-07:#7a8b1f; --chart-08:#5c5c5c;
  --chart-positive:#0f7a4d; --chart-negative:#b42318;

  /* ordenadas (§10.2) — para grandeza que cresce ou etapa que avança.
     Estavam só na prosa da especificação; sem token, ninguém usa. */
  --seq-marca-1:#fbd9e8; --seq-marca-2:#f5abc9; --seq-marca-3:#ee74a5;
  --seq-marca-4:#d0095f; --seq-marca-5:#82053e;
  --seq-neutra-1:#d9e6f5; --seq-neutra-2:#a9c6e8; --seq-neutra-3:#6e9bd1;
  --seq-neutra-4:#2e6fb5; --seq-neutra-5:#0f4c9e;
  --chart-grid:#ebebe9; --chart-axis:#d6d6d3;
  /* rótulo de eixo é texto pequeno: neutral-500 dava 3,45:1; neutral-600
     dá 5,33:1 no branco e 4,97:1 no surface-sunken. */
  --chart-label:var(--neutral-600);

  /* aplicação */
  --surface-page:var(--neutral-100);      --surface-raised:var(--neutral-0);
  --surface-sunken:var(--neutral-50);     --surface-hover:var(--neutral-25);
  --surface-selected:var(--brand-50);     --surface-inverse:var(--neutral-1000);
  --border-subtle:var(--neutral-200);     --border-strong:var(--neutral-300);
  --border-interactive:var(--brand-500);
  --text-primary:var(--neutral-1000);     --text-body:var(--neutral-800);
  --text-secondary:var(--neutral-700);    --text-tertiary:var(--neutral-600);
  --text-placeholder:var(--neutral-600);  --text-disabled:var(--neutral-400);
  --text-on-inverse:var(--neutral-0);     --text-brand:var(--brand-500);
  --action-primary-bg:var(--brand-500);   --action-primary-hover:var(--brand-600);
  --action-primary-active:var(--brand-700); --action-primary-disabled:var(--brand-200);
  --action-neutral-bg:var(--neutral-1000); --action-ghost-hover:var(--neutral-100);
  --action-danger-bg:var(--danger-600);   --focus-ring:var(--brand-500);

  /* espaço */
  --space-1:2px;  --space-2:4px;  --space-3:6px;  --space-4:8px;
  --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px;
  --space-9:32px; --space-10:40px; --space-11:48px; --space-12:64px;

  /* dimensões */
  --control-xs:24px; --control-sm:28px; --control-md:32px; --control-lg:40px;
  --row-compact:28px; --row-default:36px; --row-comfortable:44px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-full:999px;
  --icon-xs:14px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-xl:32px;
  --nav-width:240px; --nav-collapsed:56px; --topbar-height:56px;

  /* elevação */
  --elevation-1:0 1px 2px rgba(26,26,26,.06);
  --elevation-2:0 4px 12px rgba(26,26,26,.08);
  --elevation-3:0 12px 32px rgba(26,26,26,.14);
  --overlay:rgba(26,26,26,.45);

  /* movimento */
  --duration-instant:70ms; --duration-fast:110ms;
  --duration-base:150ms;   --duration-slow:240ms;
  --ease-productive:cubic-bezier(.2,0,.38,.9);
  --ease-entrance:cubic-bezier(0,0,.38,.9);
  --ease-exit:cubic-bezier(.2,0,1,.9);

  /* tipografia */
  --font:'Red Hat Display',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;

  /* ── v2 (DESIGN_SYSTEM.md §2.4, §9.5, §9.9, §10.1) ─────────────────── */
  /* sidebar escura (§2.4 v2) */
  --surface-nav:#111110;
  /* contraste sobre #111110 (WCAG AA pede 4,5:1 em texto pequeno):
     muted .3 = #585858, 2,66:1 — reprovava o overline de grupo e a
     contagem; .55 = #949493, 6,22:1. O item em repouso subiu de .55 para
     .72 (#bcbcbc, ~10:1) para manter a hierarquia item > overline. */
  --nav-text:rgba(255,255,255,.72);
  --nav-text-muted:rgba(255,255,255,.55);
  --nav-text-active:#ffffff;
  --nav-hover:rgba(255,255,255,.07);
  --nav-active:rgba(255,255,255,.08);
  --nav-border:rgba(255,255,255,.07);
  /* foco (§2.4): literal em ~20 páginas, agora com nome */
  --focus-halo:0 0 0 3px rgba(208,9,95,.12);
  /* sobreposições (§9.9) */
  --drawer-md:420px; --drawer-lg:560px;
  --modal-sm:400px;  --modal-md:480px; --modal-lg:640px;
  /* chip de filtro (§9.5 v2) */
  --chip-height:24px;
  /* origem de negócio — categórica, ordem fixa (§10.1). Nunca rosa. */
  --origem-inbound:var(--chart-02);     --origem-inbound-bg:#e9f0f9;
  --origem-outbound:var(--neutral-700); --origem-outbound-bg:var(--neutral-100);
  --origem-base:var(--chart-05);        --origem-base-bg:#efe9f7;
  --origem-outros:var(--chart-03);      --origem-outros-bg:#e6f3f1;
  --origem-ia:var(--chart-05);          --origem-ia-bg:#efe9f7;
}


/* ── Compatibilidade: nomes antigos → tokens novos ──────────────────────
   Mantém as 64 páginas ainda não migradas funcionando com o sistema novo.
   Onde o valor é idêntico a troca é invisível; onde difere (--fg3, --danger,
   --warn, --ok) o novo tem contraste melhor e a mudança é intencional. */
:root{
  --bg:var(--surface-page);
  --surface:var(--surface-raised);
  --border:var(--border-subtle);
  --line:var(--border-subtle);
  --fg1:var(--text-primary);
  --fg2:var(--text-secondary);
  --fg3:var(--text-tertiary);
  --brand:var(--brand-500);
  --brand-dark:var(--brand-600);
  --danger:var(--danger-600);
  --danger-bg:var(--danger-100);
  --ok:var(--success-600);
  --ok-bg:var(--success-100);
  --warn:var(--warning-600);
  --warn-bg:var(--warning-100);
  --accent:var(--brand-500);
  /* --b1/--b5/--g1/--g2/--g5/--p1/--p2/--p5 saíram em 30/09/2026 (DS v2):
     origem virou --origem-*, estado virou --success-*/--info-*, série de
     gráfico virou --chart-*, link virou --text-brand. */
}

/* ── Tema escuro (§2.5) ─────────────────────────────────────────────────
   Ligado por data-theme="dark" no <html>, que o theme.js põe ANTES da
   primeira pintura (preferência em localStorage.hub_theme: light | dark |
   system). :root[data-theme] tem especificidade maior que :root, então vence
   também página que ainda redeclare token no próprio <style>.

   Remapeia as ESCALAS, não só os tokens de aplicação: as telas usam direto
   --neutral-100, --warning-100, --brand-50... que ficariam claros sobre o
   fundo escuro. Regra de inversão de cada família:
     -25…-200 (fundo/borda)  → tinta escura, sobe conforme o número;
     -600/-700 (texto/ícone) → clareia, para manter contraste sobre o escuro.
   Ficam FIXOS: --neutral-0 (branco — texto sobre botão rosa/badge colorido;
   como FUNDO de card use --surface-raised) e --neutral-1000. A marca sobe
   de 500 para 400 (§2.5). Elevação vira diferença de superfície.

   Semânticas -600: a §2.5 pedia #3BB37B/#F0705F/#E0A030/#5AA0E8, mas o -600
   é usado tanto como TEXTO quanto como FUNDO de botão/badge com texto
   branco — e naqueles tons o branco caía para 2,3–2,9:1. Os valores daqui
   ficam no meio: ≥4,5:1 como texto sobre #1C1C1C e ≥3:1 com texto branco.
   -100/-200/-700 seguem a tabela da §2.5. */
:root[data-theme="dark"]{
  color-scheme:dark;

  --neutral-25:#202020;  --neutral-50:#181818;  --neutral-100:#262626;
  --neutral-200:#2c2c2c; --neutral-300:#3d3d3d; --neutral-400:#5c5c5a;
  --neutral-500:#7c7c7a; --neutral-550:#868684; --neutral-600:#8f8f8d;
  --neutral-700:#a8a8a6; --neutral-800:#dadad7; --neutral-900:#ececea;

  --brand-50:#2e0f1e;  --brand-100:#3d1427; --brand-200:#5c1c3a;
  --brand-300:#8a2a57; --brand-400:#e03c80; --brand-500:#e03c80;
  --brand-600:#ee74a5; --brand-700:#f5abc9; --brand-800:#fbd9e8;

  --success-100:#0f2a1d; --success-200:#1b4a33; --success-600:#2a9a66; --success-700:#7fd4a8;
  --warning-100:#2b2210; --warning-200:#4d3a12; --warning-600:#c58816; --warning-700:#f0c46a;
  --danger-100:#2e1513;  --danger-200:#4f221d;  --danger-600:#e0574b;  --danger-700:#f59a8c;
  --info-100:#10203a;    --info-200:#1a3a63;    --info-600:#3d8bd9;    --info-700:#8ec0f2;

  /* gráficos: as categóricas escuras demais para o fundo #1c1c1c clareiam */
  --chart-01:#e03c80; --chart-02:#5a8fdb; --chart-03:#22a897; --chart-04:#e08a1f;
  --chart-05:#9a6ad8; --chart-06:#3ab0de; --chart-07:#9aad35; --chart-08:#8f8f8d;
  --chart-positive:#3bb37b; --chart-negative:#f0705f;
  --seq-marca-1:#4a1530; --seq-marca-2:#7a1f4a; --seq-marca-3:#b0306c;
  --seq-marca-4:#e03c80; --seq-marca-5:#f5abc9;
  --seq-neutra-1:#16263a; --seq-neutra-2:#1f3f66; --seq-neutra-3:#2e6fb5;
  --seq-neutra-4:#5a95d6; --seq-neutra-5:#9cc2ee;
  --chart-grid:#2a2a2a; --chart-axis:#3d3d3d; --chart-label:#8f8f8d;

  --surface-page:#121212;     --surface-raised:#1c1c1c;
  --surface-sunken:#171717;   --surface-hover:#242424;
  --surface-selected:#2e0f1e; --surface-inverse:#f2f2f0;
  --border-subtle:#2c2c2c;    --border-strong:#3d3d3d;
  --border-interactive:#e03c80;
  --text-primary:#f2f2f0;     --text-body:#dadad7;
  --text-secondary:#a8a8a6;   --text-tertiary:#8f8f8d;
  --text-placeholder:#8f8f8d; --text-disabled:#5c5c5a;
  /* surface-inverse clareia no escuro; o texto sobre ela precisa escurecer,
     senão tooltip e toast viram branco sobre quase-branco. */
  --text-on-inverse:#1a1a1a;  --text-brand:#f06ba3;
  --action-primary-bg:#e03c80; --action-primary-hover:#ee74a5;
  --action-primary-active:#f5abc9; --action-primary-disabled:#5c1c3a;
  --action-neutral-bg:#3d3d3d; --action-ghost-hover:#262626;
  --action-danger-bg:#d9473a; --focus-ring:#ee74a5;

  --elevation-1:0 1px 2px rgba(0,0,0,.4);
  --elevation-2:0 4px 12px rgba(0,0,0,.45);
  --elevation-3:0 12px 32px rgba(0,0,0,.55);
  --overlay:rgba(0,0,0,.6);

  /* v2 */
  --surface-nav:#0c0c0c;
  --focus-halo:0 0 0 3px rgba(238,116,165,.28);
  --origem-inbound-bg:#13263a; --origem-base-bg:#251a3d;
  --origem-outros-bg:#0f2a27;  --origem-ia-bg:#251a3d;

  /* compatibilidade — redeclarada aqui porque página que ainda reescreve
     esses nomes no próprio :root venceria com o valor claro. */
  --bg:var(--surface-page);   --surface:var(--surface-raised);
  --border:var(--border-subtle); --line:var(--border-subtle);
  --fg1:var(--text-primary);  --fg2:var(--text-secondary); --fg3:var(--text-tertiary);
  --brand:var(--brand-500);   --brand-dark:var(--brand-600); --accent:var(--brand-500);
  --danger:var(--danger-600); --danger-bg:var(--danger-100);
  --ok:var(--success-600);    --ok-bg:var(--success-100);
  --warn:var(--warning-600);  --warn-bg:var(--warning-100);
}