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

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

: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);
}