/* 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)
     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 {
  /* 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;
}

[data-theme="dark"] {
  --surface-page:#121212;    --surface-raised:#1c1c1c;
  --surface-sunken:#171717;  --surface-hover:#242424;
  --surface-selected:#2e0f1e; --surface-inverse:#f2f2f0;
  --border-subtle:#2c2c2c;   --border-strong:#3d3d3d;
  --text-primary:#f2f2f0;    --text-body:#dadad7;
  --text-secondary:#a8a8a6;  --text-tertiary:#8f8f8d;
  --text-brand:#f06ba3;
  --action-primary-bg:#e03c80; --action-primary-hover:#ee74a5;
  --success-600:#3bb37b;     --danger-600:#f0705f;
  /* §2.5 v2 — as 16 semânticas: sem isto a tag de sucesso clara brilha
     sobre #1c1c1c. Fundo 100 escurece, texto 700 clareia. */
  --success-100:#0f2a1d; --success-200:#1b4a33; --success-700:#7fd4a8;
  --warning-100:#2b2210; --warning-200:#4d3a12; --warning-600:#e0a030; --warning-700:#f0c46a;
  --danger-100:#2e1513;  --danger-200:#4f221d;  --danger-700:#f59a8c;
  --info-100:#10203a;    --info-200:#1a3a63;    --info-600:#5aa0e8; --info-700:#8ec0f2;
  --surface-nav:#0c0c0c; --overlay:rgba(0,0,0,.6);
  /* 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;
  /* neutral-600 sobre #1c1c1c fica 3,2:1; o terciário escuro passa (5,26:1). */
  --text-placeholder:#8f8f8d; --chart-label:#8f8f8d;
}

/* ── 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. */
}