/* Design tokens — Hub ChamaAI
   Dark-only, derivado da paleta atual do painel.
   --primary-color continua sendo injetado em runtime pelo whitelabel
   (utils.js / top-menu-bar.js). Aqui ele só ganha um padrão válido
   e um ramp derivado, para nada depender de config já ter chegado. */

:root {
  /* marca — o padrão vale até o config chegar; o setProperty sobrepõe */
  --primary-color: #00a884;
  --brand:        var(--primary-color);
  --brand-hover:  color-mix(in srgb, var(--primary-color) 82%, #000);
  --brand-soft:   color-mix(in srgb, var(--primary-color) 14%, #111b21);
  --brand-border: color-mix(in srgb, var(--primary-color) 38%, #111b21);
  --brand-glow:   color-mix(in srgb, var(--primary-color) 18%, transparent);
  /* versão legível da marca sobre fundo escuro — use quando a marca
     precisa ser TINTA (texto, ícone, barra). #8a1500 sai de 1,5:1 para ~4,9:1 */
  --brand-ink:    color-mix(in srgb, var(--primary-color) 45%, var(--text));
  /* sobrescrito em runtime por readableInk(primaryColor) — este é só o padrão.
     Com marca escura (#8a1500) o certo é branco; com marca clara, quase preto. */
  --on-brand:     #ffffff;

  /* superfícies — 4 níveis, do fundo da página ao elemento interno */
  --bg-deep:    #080d11;
  --bg:         #0d151b;
  --surface:    #141f26;
  --surface-2:  #1c2a33;
  --border:     #22323c;
  --border-2:   #2f434f;

  /* texto — 4 pesos */
  --text:    #e8eef1;
  --text-2:  #b3c2ca;
  --text-3:  #7b8d97;
  --text-4:  #556670;

  /* semânticas — UM valor por papel, todas legíveis sobre --surface */
  --ok:      #2bb673;  --ok-bg:     #0e2a1f;  --ok-bd:     #1a4335;
  --warn:    #e0913a;  --warn-bg:   #2b2011;  --warn-bd:   #4a3a17;
  --danger:  #e05252;  --danger-bg: #2b1414;  --danger-bd: #4a2626;
  --info:    #4a9fe0;  --info-bg:   #0f2231;  --info-bd:   #1f3a5c;

  /* canais */
  --ch-waba: #25d366;  --ch-msgr: #0084ff;  --ch-ig: #e1306c;

  /* raio */
  --r-sm: 8px;  --r: 10px;  --r-lg: 14px;  --r-xl: 18px;  --r-pill: 999px;

  /* elevação — dois estágios */
  --sh-1: 0 1px 3px rgba(0,0,0,.28);
  --sh-2: 0 1px 3px rgba(0,0,0,.3), 0 6px 18px -6px rgba(0,0,0,.45);
  --sh-3: 0 2px 6px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.6);
  --sh-brand: 0 4px 16px var(--brand-glow);
  /* foco nunca usa a marca: ela é escolhida pelo cliente e pode colidir
     com a semântica de erro (marca vermelha = campo focado parece quebrado) */
  --focus: var(--info);
  --ring: 0 0 0 3px color-mix(in srgb, var(--info) 30%, transparent);

  /* espaçamento — escala de 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;

  /* tipografia */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px;

  /* movimento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 160ms;
}