/* =====================================================================
   ChatPion - design tokens v2 [2026-10-03]
   assets/css/theme-tokens.css

   - So e carregado quando o visual novo esta ligado para a conta
     (ui_brand_helper.php). Com a chave desligada a pagina nem pede este arquivo.
   - Prefixo --cp-* para o sistema e --sb-* para o menu lateral.
     Nao reaproveitar --blue/--ink/--line/--muted (Bootstrap e telas proprias).
   - [2026-10-04] Padrao do sistema = roxo com vinho. Os grupos "Cor principal"
     e "Menu lateral" sao o resultado do ui_brand_derivar() para #6d28d9 (principal),
     #4a0d2c (fundo do menu), texto automatico e #c084fc (destaque), iguais ao
     ui_brand_padrao_fabrica() e a linha 0 do ui_branding. Se mudar a derivacao ou o
     padrao, gere de novo (ui_brand_vars_fabrica()). Antes: azul #2563eb / menu #0f2044.
   - Este arquivo tambem e lido pelas paginas publicas novas (login, cadastro, senha,
     landing) e pela tela "Alterar senha"; so define variaveis, nenhuma regra visual.
   - Cores personalizadas chegam depois, num <style id="cp-brand">:root{...}
     impresso pelo helper (sempre no :root, para as variaveis compostas
     como --cp-shadow-focus acompanharem).
   - [fase 2] A fonte Inter vem do Google Fonts (<link> impresso pelo helper so
     com a chave ligada, mesmo mecanismo do DM Sans/Nunito de hoje). Sem
     @font-face aqui.
   - [fase 2] Escala da marca --cp-p-50..950 (mesmos nomes de tom do Tailwind),
     escala tipografica --cp-fs-*, papeis (titulo, rotulo, cabecalho de tabela)
     e neutros. Para ajustar o visual de todas as telas, mude aqui.
   ===================================================================== */
:root{
  /* -- Cor principal (Stisla: --blue aponta para ela no theme-cp.css) --
        [2026-10-04] roxo #6d28d9 = ui_brand_derivar() do padrao do sistema -- */
  --cp-primary:        #6d28d9;  /* branco sobre ela: 7,1:1 */
  --cp-primary-hover:  #6023bf;  /* principal + 12% de preto (substitui o #394eea do Stisla) */
  --cp-primary-active: #551fa9;  /* principal + 22% de preto */
  --cp-primary-soft:   #f3eefc;  /* principal + 92% de branco */
  --cp-primary-border: #d3bff4;  /* principal + 70% de branco */
  --cp-primary-text:   #6d28d9;  /* link: escurecido ate 4,5:1 sobre branco (ja passa: 7,1:1) */
  --cp-on-primary:     #ffffff;  /* texto sobre a principal */
  --cp-primary-focus:  #9969e4;  /* borda de campo em foco (substitui o #95a0f4) */
  --cp-primary-shadow: #af89ea;  /* sombra colorida (substitui o #acb5f6) */
  --cp-primary-icon:   #905ce2;  /* icone do card-hero (substitui o #8c98f3) */
  --cp-ring:           rgba(109,40,217,0.28);
  --cp-shadow-focus:   0 0 0 3px rgba(109,40,217,0.28);
  --cp-secondary:      #7c3aed;
  --cp-secondary-soft: #f5f3ff;

  /* -- [fase 2] Escala da marca (tons do Tailwind: 600 = a principal).
        Os tons que ja existiam sao apelidos exatos; 100, 500, 900 e 950 e os
        tons de texto (--cp-pt-*) usam color-mix (bloco @supports no fim do
        arquivo). Navegador sem color-mix usa o tom vizinho, sempre da marca. -- */
  --cp-p-50:  var(--cp-primary-soft);    /* 8% da principal sobre branco */
  --cp-p-100: var(--cp-primary-soft);    /* 16% (color-mix) */
  --cp-p-200: var(--cp-primary-border);  /* 30% */
  --cp-p-300: var(--cp-primary-shadow);  /* 55% */
  --cp-p-400: var(--cp-primary-focus);   /* 70% */
  --cp-p-500: var(--cp-primary-icon);    /* 85% (color-mix) */
  --cp-p-600: var(--cp-primary);
  --cp-p-700: var(--cp-primary-hover);   /* + 12% de preto */
  --cp-p-800: var(--cp-primary-active);  /* + 22% de preto */
  --cp-p-900: var(--cp-primary-active);  /* + 38% de preto (color-mix) */
  --cp-p-950: var(--cp-primary-active);  /* + 55% de preto (color-mix) */
  /* texto na cor da marca: parte do --cp-primary-text (4,5:1 garantido) e so escurece */
  --cp-pt-700: var(--cp-primary-text);
  --cp-pt-800: var(--cp-primary-text);
  --cp-pt-900: var(--cp-primary-text);
  --cp-link:       var(--cp-primary-text);
  --cp-link-hover: var(--cp-primary-active);

  /* -- Neutros (escala slate) -- */
  --cp-white:    #ffffff;
  --cp-gray-50:  #f8fafc;
  --cp-gray-100: #f1f5f9;
  --cp-gray-200: #e2e8f0;
  --cp-gray-300: #cbd5e1;
  --cp-gray-400: #94a3b8;
  --cp-gray-500: #64748b;
  --cp-gray-600: #475569;
  --cp-gray-700: #334155;
  --cp-gray-800: #1e293b;
  --cp-gray-900: #0f172a;

  /* -- Superficies, texto e bordas. [fase 2] em uso: um texto, um secundario,
        um apagado e uma borda para o painel inteiro. -- */
  --cp-bg:            var(--cp-gray-100);   /* fundo da pagina (hoje #fafdfb) */
  --cp-surface:       var(--cp-white);      /* card, modal, dropdown, campo */
  --cp-surface-2:     var(--cp-gray-50);    /* cabecalho de tabela, rodape */
  --cp-overlay:       rgba(15,23,42,.45);
  --cp-text:          var(--cp-gray-800);   /* texto e titulos (hoje #064663) */
  --cp-text-2:        var(--cp-gray-600);   /* rotulo, cabecalho de tabela, texto de apoio */
  --cp-text-muted:    var(--cp-gray-500);   /* .text-muted (hoje #98a6ad, 2,6:1) - 4,8:1 */
  --cp-text-disabled: var(--cp-gray-400);
  --cp-border:        var(--cp-gray-200);   /* divisorias, tabela, card */
  --cp-border-strong: var(--cp-gray-300);   /* borda de campo (hoje #e4e6fc) */

  /* -- Status: significado fixo -- */
  --cp-success:        #16a34a;
  --cp-success-text:   #15803d;
  --cp-success-soft:   #f0fdf4;
  --cp-success-border: #bbf7d0;
  --cp-warning:        #d97706;
  --cp-warning-text:   #b45309;
  --cp-warning-soft:   #fffbeb;
  --cp-warning-border: #fde68a;
  --cp-danger:         #dc2626;
  --cp-danger-hover:   #b91c1c;
  --cp-danger-text:    #b91c1c;
  --cp-danger-soft:    #fef2f2;
  --cp-danger-border:  #fecaca;
  --cp-info:           #0891b2;
  --cp-info-text:      #0e7490;
  --cp-info-soft:      #ecfeff;
  --cp-info-border:    #a5f3fc;

  /* -- Redes: so no botao ou icone da propria rede -- */
  --cp-facebook:  #1877f2;
  --cp-instagram: #e1306c;
  --cp-whatsapp:  #25d366;

  /* -- Menu lateral: [2026-10-04] vinho #4a0d2c, texto automatico, destaque lilas #c084fc
        (ui_brand_derivar() do padrao do sistema; contraste: texto 10,4:1, titulos 4,5:1,
        item ativo 10,7:1, destaque 5,7:1) -- */
  --sb-bg:              #4a0d2c;
  --sb-bg-deep:         #350920;  /* faixa da logo */
  --sb-bg-image:        radial-gradient(ellipse at 20% 10%, rgba(192,132,252,0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(53,9,32,0.8) 0%, transparent 60%);
  --sb-text:            #ded3d9;
  --sb-text-muted:      #a38494;  /* seta e subitem de 2o nivel */
  --sb-section-text:    #a38494;  /* titulo de secao */
  --sb-text-active:     #ffffff;
  --sb-bg-hover:        rgba(255,255,255,0.07);
  --sb-bg-active:       rgba(255,255,255,0.13);
  --sb-border:          rgba(255,255,255,0.08);
  --sb-accent:          #c084fc;  /* barra do item ativo, seta aberta, botao de suporte */
  --sb-accent-glow:     rgba(192,132,252,0.35);
  --sb-accent-soft:     rgba(192,132,252,0.15);  /* subitem ativo */
  --sb-accent-line:     rgba(192,132,252,0.3);   /* linha do 2o nivel */
  --sb-accent-hover:    #a974de;                 /* hover do botao de suporte */
  --sb-on-accent:       #0f172a;
  --sb-submenu-bg:      rgba(41,7,24,0.7);
  --sb-submenu2-bg:     rgba(41,7,24,0.5);
  --sb-shadow:          4px 0 24px rgba(0,0,0,0.28);
  --sb-dropdown-shadow: 0 4px 16px rgba(0,0,0,0.3);
  --sb-scrollbar:       rgba(255,255,255,0.12);
  --sb-scrollbar-soft:  rgba(255,255,255,0.1);
  --sb-label-bg:        rgba(251,191,36,0.2);    /* selo "Addon" (modo demo) */
  --sb-label-text:      #fbbf24;
  --sb-close-bg:        rgba(255,255,255,0.12);  /* botao x do menu no celular */
  --sb-close-bg-hover:  rgba(255,255,255,0.22);
  --sb-close-text:      #ffffff;
  --sb-w:               250px;
  --sb-w-mini:          65px;
  --sb-radius:          9px;
  /* [fase 2] o menu usa a mesma fonte do painel (era DM Sans) */
  --sb-font:            var(--cp-font-sans);

  /* -- [fase 2] Tipografia: uma familia, uma escala -- */
  /* [revisao] o fim da pilha (fontes de emoji) e o mesmo do style.css: sem ele, simbolos como
     o aviso, a caixa marcada, o play e a lixeira (Contas, Subscriber Manager) saiam em preto e
     branco (Segoe UI Symbol) em vez do emoji colorido de hoje */
  --cp-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --cp-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --cp-fs-2xs:  11px;  /* sobrelinha em caixa alta (titulo de secao do menu e do dropdown); piso do painel */
  --cp-fs-xs:   12px;  /* legenda, badge, ajuda do campo, breadcrumb, botao pequeno */
  --cp-fs-sm:   13px;  /* botao, rotulo, item de menu e dropdown, tabela */
  --cp-fs-base: 14px;  /* texto e campo */
  --cp-fs-md:   16px;  /* titulo de card */
  --cp-fs-lg:   18px;  /* titulo de modal, titulo de secao */
  --cp-fs-xl:   20px;  /* titulo da pagina */
  --cp-fs-2xl:  24px;  /* numeros de destaque */
  /* nomes da fase 1 (apelidos) */
  --cp-fs-h3:      var(--cp-fs-xl);
  --cp-fs-h5:      var(--cp-fs-md);
  --cp-fs-body:    var(--cp-fs-base);
  --cp-fs-caption: var(--cp-fs-xs);
  --cp-fw-regular:  400;
  --cp-fw-medium:   500;
  --cp-fw-semibold: 600;
  --cp-fw-bold:     700;
  --cp-lh-tight:   1.25;  /* titulos */
  --cp-lh-snug:    1.4;
  --cp-lh-base:    1.5;   /* corpo (igual ao de hoje) */
  --cp-lh-text:    1.6;   /* paragrafos e listas (hoje 28px = 2,0). Para voltar ao de hoje: 28px */
  --cp-ls-title:   -0.01em;
  --cp-ls-caps:    .06em;

  /* -- [fase 2] Papeis (troque aqui para mudar todas as telas de uma vez) -- */
  --cp-title-size:        var(--cp-fs-xl);       /* .section-header h1 (hoje 24px, peso 300, na cor principal) */
  --cp-title-weight:      var(--cp-fw-bold);
  --cp-title-color:       var(--cp-text);        /* para voltar a cor principal: var(--cp-primary-text) */
  --cp-title-icon:        var(--cp-primary);     /* icone do titulo da pagina e do titulo do card */
  --cp-card-title-size:   var(--cp-fs-md);
  --cp-card-title-weight: var(--cp-fw-semibold);
  --cp-card-title-color:  var(--cp-text);        /* hoje var(--blue) */
  --cp-label-color:       var(--cp-text-2);      /* hoje #34395e */
  --cp-th-color:          var(--cp-text-2);      /* hoje #666 (e a cor principal nas listas .data-card) */
  --cp-th-bg:             var(--cp-surface-2);   /* hoje rgba(0,0,0,.04) / #f8fafb */

  /* -- Raios, sombras, espaco e movimento -- */
  --cp-radius-xs:   4px;
  --cp-radius-sm:   6px;
  --cp-radius-md:   8px;
  --cp-radius-lg:   12px;
  --cp-radius-xl:   16px;
  --cp-radius-pill: 999px;
  --cp-radius-control: var(--cp-radius-md);  /* botao, campo, select2 (hoje 3-4px) */
  --cp-radius-card:    var(--cp-radius-lg);  /* card e modal (hoje 3px) */
  --cp-shadow-xs:   0 1px 2px rgba(15,23,42,.05);
  --cp-shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --cp-shadow-md:   0 4px 12px rgba(15,23,42,.08);
  --cp-shadow-lg:   0 12px 32px rgba(15,23,42,.12);
  /* card: contorno de 1px feito com sombra (nao muda o tamanho de nada) + sombra leve */
  --cp-shadow-card: 0 0 0 1px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --cp-space-1:  4px;
  --cp-space-2:  8px;
  --cp-space-3:  12px;
  --cp-space-4:  16px;
  --cp-space-6:  24px;
  --cp-transition: .15s ease;
}

/* [fase 2] tons calculados da cor principal (inclusive a da conta, que chega pelo
   <style id="cp-brand">): color-mix em srgb = mesma conta do ui_brand_derivar(). */
@supports (color: color-mix(in srgb, red 50%, white)) {
  :root{
    --cp-p-100: color-mix(in srgb, var(--cp-primary) 16%, #fff);
    --cp-p-500: color-mix(in srgb, var(--cp-primary) 85%, #fff);
    --cp-p-900: color-mix(in srgb, var(--cp-primary) 62%, #000);
    --cp-p-950: color-mix(in srgb, var(--cp-primary) 45%, #000);
    --cp-pt-700: color-mix(in srgb, var(--cp-primary-text) 88%, #000);
    --cp-pt-800: color-mix(in srgb, var(--cp-primary-text) 78%, #000);
    --cp-pt-900: color-mix(in srgb, var(--cp-primary-text) 62%, #000);
    --cp-link-hover: var(--cp-pt-800);
  }
}