/* 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:#c07800; --warning-700:#8a5300;
  --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; --chart-label:#8a8a8a;

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

[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;
}

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

  /* Famílias de acento que só existiam no app.css e ainda não têm equivalente
     decidido no sistema. Os valores são os ORIGINAIS de propósito: remapeá-los
     para as famílias do DS (info/success) repintaria métrica em 29+ páginas de
     uma vez, e o verde aqui é oliva contra o verde-azulado do DS — mudança
     visível que merece revisão própria, não carona numa migração de estrutura.
     Decidir família a família e então apagar este bloco. */
  --b1:#185FA5; --b5:#E6F1FB;
  --g1:#3B6D11; --g2:#639922; --g5:#EAF3DE;
  --p1:#5B21B6; --p2:#7C3AED; --p5:#EDE9FE;
}