/* SISTEMA DE DESIGN DO ONIOM — camada de tokens.
 *
 * Fase 1 da renovação de UX. Nenhuma tela muda por causa deste arquivo: ele só
 * define o vocabulário que as telas novas vão usar.
 *
 * REGRA QUE NÃO PODE SER QUEBRADA: a marca sai da configuração DA EMPRESA, não
 * daqui. O sistema vai ser vendido a outras integradoras, cada uma com a
 * própria identidade — se as cores da Oniom ficarem cravadas no CSS, cada
 * cliente novo vira uma rodada de folha de estilo. Por isso os tokens de marca
 * abaixo são só o PADRÃO de quem não configurou nada; `aplicarIdentidadeVisual()`
 * sobrescreve em tempo de execução com o que estiver em `config` (que desde a
 * fase 1 do multi-tenant é um bloco por empresa).
 *
 * E a empresa configura POUCO: informa a cor primária, a de destaque e a de
 * texto sobre a primária. Todo o resto — hover, versão suave, borda — é
 * derivado por `color-mix`, para ninguém ter de escolher vinte tons.
 *
 * CARREGADO ANTES do <style> embutido do index.html, de propósito: os nomes
 * legados (--bg, --card, --sun, --blue, --r…) continuam sendo definidos lá e
 * vencem no cascade. Assim este arquivo ACRESCENTA vocabulário sem alterar uma
 * única tela existente, e as telas migram uma de cada vez.
 */

:root {
  /* ---------- marca (padrão; a empresa sobrescreve em tempo de execução) ---------- */
  --marca: #ED9F00;
  --marca-texto: #8F5F00;
  --destaque: #2A78D6;

  /* derivados — a empresa não configura estes */
  --marca-suave: color-mix(in srgb, var(--marca) 12%, white);
  --marca-borda: color-mix(in srgb, var(--marca) 32%, transparent);
  --marca-forte: color-mix(in srgb, var(--marca) 82%, black);
  --destaque-suave: color-mix(in srgb, var(--destaque) 10%, white);
  --destaque-borda: color-mix(in srgb, var(--destaque) 30%, transparent);
  --destaque-forte: color-mix(in srgb, var(--destaque) 84%, black);

  /* ---------- superfícies e texto ---------- */
  --ui-fundo: #EFF2F4;
  --ui-superficie: #FFFFFF;
  --ui-superficie-2: #F7F9FA;
  --ui-linha: #DCE3E8;
  --ui-linha-suave: #E9EEF1;
  --ui-texto: #16222C;
  --ui-texto-2: #5B6C7A;
  --ui-texto-3: #8FA0AD;

  /* ---------- semânticas (independentes da marca, de propósito) ----------
   * "deu certo / atenção / deu errado" não podem depender da cor da empresa:
   * uma integradora com marca vermelha não pode ter erro invisível. */
  --ok: #1F7A33;      --ok-suave: #E3F2E6;      --ok-borda: color-mix(in srgb, var(--ok) 28%, transparent);
  --atencao: #9A6700; --atencao-suave: #FBF0D9; --atencao-borda: color-mix(in srgb, var(--atencao) 28%, transparent);
  --erro: #B3352E;    --erro-suave: #F9E7E5;    --erro-borda: color-mix(in srgb, var(--erro) 28%, transparent);
  --info: #2A78D6;    --info-suave: #E8F1FB;    --info-borda: color-mix(in srgb, var(--info) 28%, transparent);
  --neutro-suave: #EAEEF1;
  /* pódio do ranking: 1º usa a marca da empresa, 2º e 3º são fixos porque
   * prata e bronze significam posição, não identidade */
  --podio-2: #9AA6B4;
  --podio-3: #B87333;

  /* ---------- WhatsApp: as cores DO APLICATIVO, não da marca ----------
   * Aqui é a exceção declarada à regra de que toda cor sai da identidade da
   * empresa. A aba de conversas imita o WhatsApp de propósito: quem atende
   * passa o dia entre o celular e o CRM, e uma tela "parecida mas não igual"
   * custa meio segundo de reconhecimento em cada troca. O verde é o do
   * WhatsApp, e continua sendo o mesmo numa integradora de marca roxa.
   *
   * O `--wa-tapete` é o padrão de rabiscos do fundo, embutido como SVG: é
   * TEXTURA, não desenho — a 5% de opacidade ele não compete com o texto. Fica
   * num token (e não no componente) porque a versão escura troca a cor do
   * traço, e a regra da casa é que cor de modo escuro só muda em token. */
  --wa-verde: #25D366;
  --wa-verde-escuro: #128C7E;
  --wa-fundo: #EFE6DD;
  --wa-tapete: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='208' height='208' viewBox='0 0 208 208'><g fill='none' stroke='%230b141a' stroke-opacity='.055' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 20h22a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H24l-6 5v-5h-4a4 4 0 0 1-4-4V24a4 4 0 0 1 4-4z'/><path d='M70 30c-4-8-16-5-16 4 0 7 10 12 16 17 6-5 16-10 16-17 0-9-12-12-16-4z'/><path d='M112 26h8l3-4h10l3 4h8a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3h-32a3 3 0 0 1-3-3V29a3 3 0 0 1 3-3z'/><circle cx='136' cy='37' r='6.5'/><path d='M170 18v22M170 40a6 6 0 1 1-5-5.9M170 22l16-3M186 19v18M186 37a6 6 0 1 1-5-5.9'/><circle cx='30' cy='80' r='13'/><path d='M24 82a7 7 0 0 0 12 0'/><path d='M26 75h.01M34 75h.01'/><path d='M84 64l-9 15h8l-4 13 15-17h-8l6-11z'/><circle cx='130' cy='80' r='7'/><path d='M130 66v4M130 90v4M116 80h4M140 80h4M120 70l3 3M137 87l3 3M140 70l-3 3M123 87l-3 3'/><path d='M178 66l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/><path d='M14 132l36-14-36-14 3 12 20 2-20 2z'/><path d='M74 122h20v15a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8z'/><path d='M94 127h5a4 4 0 0 1 0 8h-5'/><circle cx='132' cy='132' r='12'/><path d='M132 125v8l6 3'/><path d='M176 120c14 0 23 9 22 23-14 1-24-8-22-23z'/><path d='M180 143l14-16'/><path d='M14 174h20a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-9l-5 4v-4h-6a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3z'/><path d='M68 182l6 7 15-16'/><path d='M122 170c-3 11 6 22 17 24l3-6-7-5-3 2c-3-2-5-5-6-8l4-3-5-7z'/><circle cx='180' cy='180' r='10'/><path d='M180 190v6'/></g></svg>");
  --wa-bolha: #FFFFFF;
  --wa-bolha-texto: #111B21;
  --wa-bolha-eu: #D9FDD3;
  --wa-bolha-eu-texto: #111B21;
  --wa-bolha-hora: #667781;
  --wa-dia: #FFFFFF;
  --wa-dia-texto: #54656F;
  --wa-barra: #F0F2F5;

  /* ---------- escala de espaço (múltiplos de 4) ---------- */
  --e0: 0; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;

  /* ---------- raio ---------- */
  --raio-1: 6px; --raio-2: 10px; --raio-3: 14px; --raio-pilula: 999px;

  /* ---------- elevação ----------
   * Quatro níveis, e a sombra tem TOM AZULADO em vez de cinza neutro
   * (rgba(25,42,77) é o azul-marinho da barra lateral). É um detalhe pequeno
   * que faz a tela parecer de uma peça só: sombra cinza sobre fundo azulado
   * lê como sujeira, sombra da mesma família lê como profundidade.
   *
   * O nível 0 existe pro card DENTRO de outro card (o card de negócio dentro
   * da coluna do funil, por exemplo). Usar a mesma sombra do container põe os
   * dois no mesmo plano e o aninhamento some. */
  --sombra-0: 0 3px 10px rgba(25,42,77,.035);
  --sombra-1: 0 1px 2px rgba(25,42,77,.05);
  --sombra-2: 0 8px 24px rgba(25,42,77,.06);
  --sombra-3: 0 18px 48px rgba(25,42,77,.10);

  /* Brilho colorido — o que dá a sensação de "aceso" no item de menu ativo e
   * no botão principal. Sai da cor da EMPRESA, não de um azul fixo, então
   * acompanha a marca de cada integradora. */
  --brilho-destaque: 0 7px 18px color-mix(in srgb, var(--destaque) 30%, transparent);
  --brilho-marca: 0 7px 18px color-mix(in srgb, var(--marca) 32%, transparent);

  /* ---------- tipografia ---------- */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 16px;
  --t-xl: 20px; --t-2xl: 26px; --t-3xl: 34px;
  --peso-normal: 400; --peso-medio: 600; --peso-forte: 700;
  --altura-apertada: 1.25; --altura-normal: 1.5;

  /* ---------- movimento (respeitando quem pede menos) ---------- */
  --transicao: 140ms cubic-bezier(.4, 0, .2, 1);
  --foco: 0 0 0 3px var(--destaque-borda);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; }
}

/* MODO ESCURO. Só os tokens mudam — nenhum componente redefine cor dentro de
 * media query, senão a cor não se aplica quando o sistema está em "automático".
 * O `:not([data-tema="claro"])` deixa uma escolha explícita do usuário ganhar
 * do sistema operacional. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca-suave: color-mix(in srgb, var(--marca) 18%, #0F161C);
    --marca-forte: color-mix(in srgb, var(--marca) 75%, white);
    --destaque-suave: color-mix(in srgb, var(--destaque) 20%, #0F161C);
    --destaque-forte: color-mix(in srgb, var(--destaque) 78%, white);

    --ui-fundo: #0F161C;
    --ui-superficie: #172230;
    --ui-superficie-2: #131D28;
    --ui-linha: #2A3846;
    --ui-linha-suave: #223040;
    --ui-texto: #E9EEF3;
    --ui-texto-2: #97A6B4;
    --ui-texto-3: #66788A;

    --ok: #5FBF74;      --ok-suave: #16281B;
    --atencao: #D6A94A; --atencao-suave: #2B2417;
    --erro: #E08D82;    --erro-suave: #2E1C1A;
    --info: #78AEDE;    --info-suave: #17293A;
    --neutro-suave: #1C2733;

    /* No escuro a sombra quase não aparece — o que separa os planos é a borda
     * clareando, não o preto embaixo. Por isso os níveis ficam mais fechados
     * e entra um filete de luz no topo do card. */
    --sombra-0: 0 2px 6px rgba(0,0,0,.35);
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 6px 20px rgba(0,0,0,.45);
    --sombra-3: 0 16px 40px rgba(0,0,0,.6);

    /* WhatsApp no escuro — o app tem paleta própria também aqui, e ela não é
       "o claro com filtro": o fundo é quase preto-azulado e a bolha da equipe
       é verde-petróleo, não verde-claro. */
    --wa-fundo: #0B141A;
    --wa-tapete: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='208' height='208' viewBox='0 0 208 208'><g fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 20h22a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H24l-6 5v-5h-4a4 4 0 0 1-4-4V24a4 4 0 0 1 4-4z'/><path d='M70 30c-4-8-16-5-16 4 0 7 10 12 16 17 6-5 16-10 16-17 0-9-12-12-16-4z'/><path d='M112 26h8l3-4h10l3 4h8a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3h-32a3 3 0 0 1-3-3V29a3 3 0 0 1 3-3z'/><circle cx='136' cy='37' r='6.5'/><path d='M170 18v22M170 40a6 6 0 1 1-5-5.9M170 22l16-3M186 19v18M186 37a6 6 0 1 1-5-5.9'/><circle cx='30' cy='80' r='13'/><path d='M24 82a7 7 0 0 0 12 0'/><path d='M26 75h.01M34 75h.01'/><path d='M84 64l-9 15h8l-4 13 15-17h-8l6-11z'/><circle cx='130' cy='80' r='7'/><path d='M130 66v4M130 90v4M116 80h4M140 80h4M120 70l3 3M137 87l3 3M140 70l-3 3M123 87l-3 3'/><path d='M178 66l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/><path d='M14 132l36-14-36-14 3 12 20 2-20 2z'/><path d='M74 122h20v15a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8z'/><path d='M94 127h5a4 4 0 0 1 0 8h-5'/><circle cx='132' cy='132' r='12'/><path d='M132 125v8l6 3'/><path d='M176 120c14 0 23 9 22 23-14 1-24-8-22-23z'/><path d='M180 143l14-16'/><path d='M14 174h20a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-9l-5 4v-4h-6a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3z'/><path d='M68 182l6 7 15-16'/><path d='M122 170c-3 11 6 22 17 24l3-6-7-5-3 2c-3-2-5-5-6-8l4-3-5-7z'/><circle cx='180' cy='180' r='10'/><path d='M180 190v6'/></g></svg>");
    --wa-bolha: #202C33;
    --wa-bolha-texto: #E9EDEF;
    --wa-bolha-eu: #005C4B;
    --wa-bolha-eu-texto: #E9EDEF;
    --wa-bolha-hora: #8696A0;
    --wa-dia: #182229;
    --wa-dia-texto: #8696A0;
    --wa-barra: #202C33;
  }
}

:root[data-tema="escuro"] {
  --marca-suave: color-mix(in srgb, var(--marca) 18%, #0F161C);
  --marca-forte: color-mix(in srgb, var(--marca) 75%, white);
  --destaque-suave: color-mix(in srgb, var(--destaque) 20%, #0F161C);
  --destaque-forte: color-mix(in srgb, var(--destaque) 78%, white);

  --ui-fundo: #0F161C;
  --ui-superficie: #172230;
  --ui-superficie-2: #131D28;
  --ui-linha: #2A3846;
  --ui-linha-suave: #223040;
  --ui-texto: #E9EEF3;
  --ui-texto-2: #97A6B4;
  --ui-texto-3: #66788A;

  --ok: #5FBF74;      --ok-suave: #16281B;
  --atencao: #D6A94A; --atencao-suave: #2B2417;
  --erro: #E08D82;    --erro-suave: #2E1C1A;
  --info: #78AEDE;    --info-suave: #17293A;
  --neutro-suave: #1C2733;

  --sombra-0: 0 2px 6px rgba(0,0,0,.35);
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 6px 20px rgba(0,0,0,.45);
  --sombra-3: 0 16px 40px rgba(0,0,0,.6);

  /* WhatsApp no escuro — o app tem paleta própria também aqui, e ela não é
     "o claro com filtro": o fundo é quase preto-azulado e a bolha da equipe
     é verde-petróleo, não verde-claro. */
  --wa-fundo: #0B141A;
  --wa-tapete: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='208' height='208' viewBox='0 0 208 208'><g fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 20h22a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H24l-6 5v-5h-4a4 4 0 0 1-4-4V24a4 4 0 0 1 4-4z'/><path d='M70 30c-4-8-16-5-16 4 0 7 10 12 16 17 6-5 16-10 16-17 0-9-12-12-16-4z'/><path d='M112 26h8l3-4h10l3 4h8a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3h-32a3 3 0 0 1-3-3V29a3 3 0 0 1 3-3z'/><circle cx='136' cy='37' r='6.5'/><path d='M170 18v22M170 40a6 6 0 1 1-5-5.9M170 22l16-3M186 19v18M186 37a6 6 0 1 1-5-5.9'/><circle cx='30' cy='80' r='13'/><path d='M24 82a7 7 0 0 0 12 0'/><path d='M26 75h.01M34 75h.01'/><path d='M84 64l-9 15h8l-4 13 15-17h-8l6-11z'/><circle cx='130' cy='80' r='7'/><path d='M130 66v4M130 90v4M116 80h4M140 80h4M120 70l3 3M137 87l3 3M140 70l-3 3M123 87l-3 3'/><path d='M178 66l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/><path d='M14 132l36-14-36-14 3 12 20 2-20 2z'/><path d='M74 122h20v15a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8z'/><path d='M94 127h5a4 4 0 0 1 0 8h-5'/><circle cx='132' cy='132' r='12'/><path d='M132 125v8l6 3'/><path d='M176 120c14 0 23 9 22 23-14 1-24-8-22-23z'/><path d='M180 143l14-16'/><path d='M14 174h20a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-9l-5 4v-4h-6a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3z'/><path d='M68 182l6 7 15-16'/><path d='M122 170c-3 11 6 22 17 24l3-6-7-5-3 2c-3-2-5-5-6-8l4-3-5-7z'/><circle cx='180' cy='180' r='10'/><path d='M180 190v6'/></g></svg>");
  --wa-bolha: #202C33;
  --wa-bolha-texto: #E9EDEF;
  --wa-bolha-eu: #005C4B;
  --wa-bolha-eu-texto: #E9EDEF;
  --wa-bolha-hora: #8696A0;
  --wa-dia: #182229;
  --wa-dia-texto: #8696A0;
  --wa-barra: #202C33;
}