/* ============================================================
   TOKENS DO DESIGN SYSTEM - Oplitude
   Extraido do app.css (auditoria AD-02-04, 02/08/2026). Motivo: o app.css e
   carregado num lugar so (src/Views/_header.php), entao as areas externas
   (/acesso, /startup, /pessoal, /investidor) nao alcancavam token nenhum e
   reconstruiam a paleta na mao, com hex crus - foi assim que nasceram dois
   roxos de marca diferentes em producao.

   AQUI SO ENTRA TOKEN (custom property). Regra de componente fica no app.css,
   inclusive as dezenas de html[data-bs-theme="dark"] .classe: elas tem o MESMO
   seletor de tema destes blocos e NAO sao token.

   A ORDEM dos blocos abaixo e a mesma que tinham no app.css, e importa: o
   segundo :root (tokens da ficha) redefine --marca-suave-2, --sombra-xs e
   --sombra-card do primeiro, e so vence por vir depois.

   Carregado ANTES do app.css e de qualquer folha de area.
   ============================================================ */
:root {
    /* -- Tokens primitivos (Design System novo, 2026-07: neutros cinza-azulados
       serenos + marca #4E21FC; fonte Instrument Sans; protótipo em /novo) -- */
    --acento: #4E21FC;
    --acento-hover: #3D14D9;
    /* Componentes do acento em RGB, para quem precisa de rgba() com alfa proprio.
       AD-02-13 (quarta rodada): o token era USADO em 3 lugares e nunca definido, entao
       cada um vivia do seu fallback - e o do /contas era 31,138,91, VERDE, o que pintava
       a pilula da aba ativa de verde-agua com o numero roxo por cima. Precisa acompanhar
       o --acento acima e o do tema escuro. */
    --acento-rgb: 78, 33, 252;
    --marinho: #0a0046;

    --cinza-25: #FBFCFE;
    --cinza-50: #F6F8FC;
    --cinza-100: #EFF2F8;
    --cinza-200: #E3E8F2;
    --cinza-300: #CDD5E4;
    --cinza-400: #A5AFC4;
    --cinza-500: #7C87A0;
    --cinza-600: #5A6378;
    --cinza-900: #151827;

    /* -- Tokens semânticos -- */
    /* Shell novo (Lote 2): --lateral pinta a sidebar, --fundo pinta a área de
       conteúdo. As variantes de cor (seletor de aparência) sobrescrevem os dois. */
    --lateral: var(--cinza-100);
    --fundo: #ffffff;
    --superficie: #ffffff;
    --superficie-2: var(--cinza-25);
    --superficie-3: var(--cinza-100);
    --borda: var(--cinza-200);
    --borda-suave: var(--cinza-100);
    --texto: var(--cinza-900);
    /* AD-02-02 (auditorias de 30/07 e 02/08): estes dois apontavam para --cinza-500
       (#7C87A0), que mede 3,60:1 sobre --superficie, 3,48:1 sobre --superficie-2 e 3,21:1
       sobre --superficie-3. O WCAG AA pede 4,5:1 para texto normal, e o escopo cresceu de
       130 para 397 usos em 29 arquivos, incluindo o rótulo do cartão mobile a 10,2px, que
       vale para TODA listagem do sistema. O tema escuro sempre passou (7,49:1) porque a
       campanha anterior mediu só ele: arrumaram o escuro e nunca mediram o claro.
       --cinza-600 já existia definido e nunca havia sido usado: mede 6,02 / 5,85 / 5,36:1
       nas três superfícies. O escuro redefine os dois tokens logo abaixo, então esta troca
       não o alcança. */
    --texto-2: var(--cinza-600);
    --texto-suave: var(--cinza-600);
    --titulo: var(--cinza-900);
    /* Placeholder: dica de preenchimento nunca parece valor digitado. O que separa os dois
       e' o ITALICO e o tom mais claro que o texto, nao o apagamento a ponto de nao se ler.
       AD-04-04: apontava para `--cinza-300` e media 1,48:1 no claro e 1,77:1 no escuro
       (WCAG 1.4.3 pede 4,5:1), valendo para TODO input do sistema: 189 `placeholder=`.
       Nunca havia sido medido em rodada nenhuma.
       O tom escolhido nao e o mais escuro possivel: `--cinza-600` passaria com folga
       (6,02:1) mas fica perto demais do texto digitado. `#6B7590` mede 4,59:1 sobre
       --superficie e 4,47:1 sobre --superficie-2, cumpre o criterio e continua sendo
       visivelmente mais claro que o valor. O par do escuro esta no bloco do tema.

       07/08/2026 - o dono pediu o placeholder 50% MAIS CLARO, para separar de longe
       campo vazio de campo preenchido. `#B5BAC8` e' exatamente o meio do caminho entre
       o tom acima e o branco. A troca REABRE a AD-04-04 de proposito: mede 1,94:1 sobre
       --superficie, contra os 4,5:1 que a WCAG 1.4.3 pede, e vale para os 189
       `placeholder=` do sistema. Fica registrado porque a proxima rodada de auditoria
       vai apontar de novo, e a resposta e' que foi decisao de quem manda na tela, nao
       descuido. (O italico, que o cockpit ja' usa, separa os dois estados sem custo de
       contraste, caso um dia se queira os dois efeitos.) */
    --placeholder: #B5BAC8;

    --primaria: var(--acento);
    --primaria-hover: var(--acento-hover);
    --primaria-suave: rgba(78, 33, 252, 0.08);
    --escuro: var(--marinho);

    --r-sm: 8px;
    --r-md: 10px;
    --raio: 14px;
    --sombra-xs: 0 1px 2px rgba(21, 24, 39, 0.05);
    --sombra-card: 0 1px 2px rgba(21, 24, 39, 0.04), 0 10px 20px -14px rgba(21, 24, 39, 0.16);
    --sombra-pop: 0 4px 12px rgba(21, 24, 39, 0.08), 0 24px 64px rgba(21, 24, 39, 0.14);
    --sidebar-largura: 248px; /* alinhado ao redesign (era 235px) */
    --topbar-alt: 54px;
    /* Largura maxima da coluna de conteudo. Mora aqui, e nao no app.css, porque a
       topbar precisa do MESMO numero para o conteudo dela terminar onde o da pagina
       termina: dois numeros escritos a mao divergem no primeiro ajuste. */
    --conteudo-largura: 1480px;
    --sidebar-hover: rgba(255, 255, 255, 0.62);

    /* Rampa de estágio - FONTE ÚNICA (badges no CSS + anel/gráfico via App.token no JS).
       Metodologia 2026 (6 estágios): lilás PSF→CPF (experimentação/validação),
       dourado Growth→Domínio (escala/domínio), cinza inativas/não informado. */
    --estagio-psf: #ddd2ff;
    --estagio-mvp: #b39dfb;
    --estagio-pmf: #8b5cf6;
    --estagio-cpf: #6d28d9;
    --estagio-growth: #cba06d;
    --estagio-dominio: #9c7544;
    --estagio-exit: #dcdce2;
    --estagio-writeoff: #a4a4ae;
    --estagio-outro: #6b6b76;

    /* Cores de ESTADO das etiquetas (fonte única do sistema de tags - Estudo 04).
       suave = fundo pastel; texto = cor saturada legível. Base do redesign de tags. */
    --positivo: #0E9F6E;  --positivo-suave: #E4F7EF;  --positivo-texto: #0B7A55;
    --atencao:  #D97706;  --atencao-suave:  #FDF3E3;  --atencao-texto:  #A85B05;
    --negativo: #DC2626;  --negativo-suave: #FDECEC;  --negativo-texto: #B91C1C;
    --info:     #2563EB;  --info-suave:     #E8F0FE;  --info-texto:     #1D4FD7;
    --neutro-badge: #EEF1F6;  --neutro-badge-texto: #5B6472;
    --marca-suave-2: rgba(78, 33, 252, 0.14);  --marca-texto: #3D14D9;
    --superficie-inversa: var(--cinza-900);  --texto-inverso: #F7F8FD;  /* botão "Próxima" do paginador */
    /* Paleta CATEGÓRICA harmonizada (9 matizes serenos, mesmos passos) - família B */
    --cat-roxo: #6D5BD8;  --cat-azul: #3B82D6;  --cat-teal: #0E9F8E;
    --cat-verde: #4F9D3F; --cat-ambar: #C08A1E; --cat-laranja: #D96C2C;
    --cat-rosa: #C4548E;  --cat-petrol: #33708F; --cat-cinza: #7C87A0;

    /* Cores de MARCA: identidade de terceiro ou de programa nosso, e por isso NÃO
       obedecem ao tema (a marca é a mesma no claro e no escuro). Só a cor-base mora
       aqui; fundo e borda saem dela por color-mix onde forem usados.
       - clicksign: #F25924 é o laranja oficial, tirado do símbolo que o próprio app
         serve (safari-pinned-tab). O selo do ClickSign no acervo de documentos usava
         verde de "positivo", que não dizia nada sobre o serviço.
       - acelera: #FE4506 é a cor do programa Acelera da Stars, usada na categoria
         Serviço e aceleração do acervo. */
    --marca-clicksign: #F25924;
    --acelera: #FE4506;

    /* Tipografia - micro-tamanhos tokenizados (rem, escalam com a raiz; fim dos px crus) */
    --fs-2xs: 0.5rem;    /* 8px - micro-etiquetas */
    --fs-xs: 0.5625rem;  /* 9px - badges em tabela compacta */
}

/* ---- Variantes de cor do tema CLARO (lateral + conteúdo) ---- */
html:not([data-bs-theme="dark"])[data-cor-claro="nuvem"]   { --lateral: #FFFFFF; --fundo: #F6F8FC; }
html:not([data-bs-theme="dark"])[data-cor-claro="aco"]     { --lateral: #E7EBF3; --fundo: #FBFCFE; }
html:not([data-bs-theme="dark"])[data-cor-claro="marinho"] { --lateral: #10123C; --fundo: #F6F8FC; }
html:not([data-bs-theme="dark"])[data-cor-claro="grafite"] { --lateral: #161923; --fundo: #F7F8FA; }

/* ============ Tema escuro (tokens redefinidos) ============ */
html[data-bs-theme="dark"] {
    /* Escuro do DS novo (base "meia-noite" azulada); o acento clareia para
       manter contraste AA sobre as superfícies escuras. */
    --acento: #7C5CFF;
    --acento-hover: #9078FF;
    --acento-rgb: 124, 92, 255; /* acompanha o --acento clareado do escuro (AD-02-13) */
    --lateral: #0A0C13;
    --fundo: #0C0E16;
    --superficie: #131624;
    --superficie-2: #10131E;
    --superficie-3: #1A1E2E;
    --borda: #232838;
    --borda-suave: #1B2030;
    --texto: #E8EAF3;
    --texto-2: #A0A7BC;
    --texto-suave: #A0A7BC;
    --titulo: #F2F4FA;
    --primaria-suave: rgba(124, 92, 255, 0.13);
    --cinza-300: #3A4154;
    --cinza-400: #737B93;
    /* AD-04-04: o par escuro do placeholder. Medido sobre as CINCO superficies escuras do
       sistema (a base e as quatro variantes de aparencia): 6,88 / 7,08 / 6,33 / 5,27 /
       5,94:1. A escolha caiu neste tom e nao no `#8A93A8` porque aquele media 4,48:1 na
       variante Marinho (#2B2D31), reprovando por dois centesimos justamente na aparencia
       que a lateral escura usa.

       07/08/2026 - o par do clareamento pedido pelo dono. No tema escuro "mais claro"
       inverte de sentido: o que apaga a dica e' ir na direcao do FUNDO, nao do branco -
       clarear aqui a destacaria MAIS, o oposto do pedido. `#565B6D` e' o meio do caminho
       ate' a superficie base, o mesmo 50% do tema claro. Mede 2,67:1 na base e 2,04:1 no
       Marinho, tambem abaixo da WCAG por decisao. */
    --placeholder: #565B6D;
    --bs-body-bg: #0C0E16;
    --bs-body-color: #E8EAF3;
    --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 20px -14px rgba(0, 0, 0, 0.5);
    --sombra-pop: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.6);
    --sidebar-hover: rgba(255, 255, 255, 0.06);

    /* Estados das etiquetas no escuro: fundo pastel escuro translúcido + texto clareado */
    --positivo: #34D399; --positivo-suave: rgba(52, 211, 153, 0.15); --positivo-texto: #5FE0AE;
    --atencao:  #FBBF24; --atencao-suave:  rgba(251, 191, 36, 0.15);  --atencao-texto:  #FCD34D;
    --negativo: #F87171; --negativo-suave: rgba(248, 113, 113, 0.15); --negativo-texto: #FCA5A5;
    --info:     #60A5FA; --info-suave:     rgba(96, 165, 250, 0.15);  --info-texto:     #93C5FD;
    --neutro-badge: rgba(255, 255, 255, 0.07); --neutro-badge-texto: #A0A7BC;
    --marca-suave-2: rgba(124, 92, 255, 0.22); --marca-texto: #B7A6FF;
    --superficie-inversa: #F6F8FC; --texto-inverso: #151827;
    /* Categóricas clareadas para contraste sobre superfícies escuras */
    --cat-roxo: #9384EA; --cat-azul: #6BA5EA; --cat-teal: #3FC0B0;
    --cat-verde: #79C169; --cat-ambar: #E0B04D; --cat-laranja: #EC8B57;
    --cat-rosa: #DB84AE; --cat-petrol: #5B9BBB; --cat-cinza: #98A2B6;
}

/* ---- Variantes de cor do tema ESCURO (paletas herdadas do Devarim) ---- */
/* Carvão: cinza neutro "dim", contraste mais suave */
html[data-bs-theme="dark"][data-cor-escuro="carvao"] {
    --lateral: #1C1E21; --fundo: #212326;
    --superficie: #2B2D31; --superficie-2: #26282C; --superficie-3: #333539;
    --borda: #3A3D42; --borda-suave: #303338;
    --texto: #E6E7E9; --texto-2: #A2A5AA; --texto-suave: #A2A5AA; --titulo: #F0F1F3;
    --bs-body-bg: #212326; --bs-body-color: #E6E7E9;
}
/* Noite: escuro quente, cromo único */
html[data-bs-theme="dark"][data-cor-escuro="noite"] {
    --lateral: #17160F; --fundo: #1C1B14;
    --superficie: #26241C; --superficie-2: #211F18; --superficie-3: #2E2C23;
    --borda: #34322A; --borda-suave: #2B2921;
    --texto: #F2F0E7; --texto-2: #A8A290; --texto-suave: #A8A290; --titulo: #F6F4EC;
    --bs-body-bg: #1C1B14; --bs-body-color: #F2F0E7;
}
/* Ardósia: cinza-azulado frio */
html[data-bs-theme="dark"][data-cor-escuro="ardosia"] {
    --lateral: #14181D; --fundo: #191D23;
    --superficie: #232931; --superficie-2: #1E242B; --superficie-3: #2A313A;
    --borda: #303740; --borda-suave: #272E36;
    --texto: #E8EAEE; --texto-2: #9AA1AB; --texto-suave: #9AA1AB; --titulo: #F1F3F6;
    --bs-body-bg: #191D23; --bs-body-color: #E8EAEE;
}
/* Meia-noite: azul profundo (é a base padrão do escuro; bloco garante o swatch) */
html[data-bs-theme="dark"][data-cor-escuro="meianoite"] {
    --lateral: #0F1520; --fundo: #131A28;
    --superficie: #1D2637; --superficie-2: #182031; --superficie-3: #243044;
    --borda: #273348; --borda-suave: #1F2A3D;
    --texto: #E4E9F2; --texto-2: #94A0B4; --texto-suave: #94A0B4; --titulo: #EEF2F8;
    --bs-body-bg: #131A28; --bs-body-color: #E4E9F2;
}
/* Breu: preto OLED; texto atenuado (nunca branco puro) para evitar o halo */
html[data-bs-theme="dark"][data-cor-escuro="breu"] {
    --lateral: #000000; --fundo: #0A0A0A;
    --superficie: #161616; --superficie-2: #101010; --superficie-3: #1F1F1F;
    --borda: #2B2B2B; --borda-suave: #1F1F1F;
    --texto: #DBDBDB; --texto-2: #969696; --texto-suave: #969696; --titulo: #E8E8E8;
    --bs-body-bg: #0A0A0A; --bs-body-color: #DBDBDB;
}

:root {
  --marca: var(--acento); --marca-hover: var(--acento-hover); --marca-suave: var(--primaria-suave);
  --marca-suave-2: rgba(78, 33, 252, .14); --marca-tinta: #EEEAFE; --marca-texto: var(--acento);
  --texto-3: var(--texto-suave);
  --borda-forte: var(--cinza-300, #CDD5E4);
  --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --sombra-xs: 0 1px 2px rgba(21, 24, 39, .05);
  --sombra-card: 0 1px 2px rgba(21, 24, 39, .04), 0 10px 20px -14px rgba(21, 24, 39, .16);
  --anel-foco: 0 0 0 3px var(--marca-suave-2);
  --fonte-display: 'Instrument Sans', 'Inter', system-ui, sans-serif;
  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-16: 1rem; --fs-18: 1.125rem; --fs-22: 1.375rem; --fs-28: 1.75rem;
}
[data-bs-theme="dark"] { --marca-suave-2: rgba(124, 92, 255, .22); --marca-tinta: #2A2350; }

/* ============================================================
   DENSIDADE (3 niveis, no molde do Gmail) - 03/08/2026
   Antes existia um interruptor de DOIS estados (body.compacto) com quatro regras
   soltas; virou uma preferencia de APARENCIA de tres niveis, junto do tema, e todo
   espacamento estrutural do sistema passa por estes tokens.

   A referencia e a lista do Gmail, medida ao vivo: item de lista 48 / 40 / 32px nos
   modos Padrao / Regular / Compacto (passo de 8px), fonte 14px, item de menu lateral
   32px. Aqui a fonte de tabela e 13px com line-height ~1,5 (19,5px), entao
   linha = 19,5 + 2 x --d-cel-y da exatamente 48 / 40 / 32px.

   PADRAO e o default (o dono pediu o sistema mais espacoso por natureza): quem nunca
   escolheu nada cai no :root abaixo, sem atributo no html.
   ============================================================ */
:root,
html[data-densidade="padrao"] {
    --d-cel-y: 14px;   --d-cel-x: 16px;   --d-th-y: 11px;   /* tabelas: linha 48px */
    --d-card-p: 1.25rem 1.4rem;                              /* corpo de card e KPI */
    --d-card-header-y: 0.85rem; --d-card-header-x: 1.25rem;
    --d-conteudo-y: 2rem; --d-conteudo-x: 2.75rem; --d-conteudo-b: 3.5rem;
    --d-cab-mb: 2.2rem;      /* respiro abaixo do cabecalho da pagina */
    --d-secao-mb: 1.5rem;    /* respiro entre blocos/secoes */
    --d-nav-y: 0.55rem; --d-nav-gap: 3px;                    /* item do menu: 32px */
    --d-campo-y: 0.5rem; --d-campo-x: 0.8rem;                /* inputs e selects */
    --d-toolbar-p: 16px 16px;
    --d-abas-mb: 1.85rem;
}
html[data-densidade="regular"] {
    --d-cel-y: 10px;   --d-cel-x: 16px;   --d-th-y: 9px;     /* linha 40px */
    --d-card-p: 1rem 1.15rem;
    --d-card-header-y: 0.7rem;  --d-card-header-x: 1rem;
    --d-conteudo-y: 1.5rem; --d-conteudo-x: 2.5rem; --d-conteudo-b: 3rem;
    --d-cab-mb: 1.7rem;
    --d-secao-mb: 1.25rem;
    --d-nav-y: 0.45rem; --d-nav-gap: 2px;
    --d-campo-y: 0.4rem; --d-campo-x: 0.7rem;
    --d-toolbar-p: 12px 16px;
    --d-abas-mb: 1.5rem;
}
html[data-densidade="compacto"] {
    --d-cel-y: 6px;    --d-cel-x: 12px;   --d-th-y: 7px;     /* linha 32px */
    --d-card-p: 0.8rem 0.95rem;
    --d-card-header-y: 0.5rem;  --d-card-header-x: 0.9rem;
    --d-conteudo-y: 1.1rem; --d-conteudo-x: 1.8rem; --d-conteudo-b: 2.25rem;
    --d-cab-mb: 1.15rem;
    --d-secao-mb: 0.9rem;
    --d-nav-y: 0.3rem;  --d-nav-gap: 1px;
    --d-campo-y: 0.28rem; --d-campo-x: 0.6rem;
    --d-toolbar-p: 8px 12px;
    --d-abas-mb: 1.05rem;
}

/* ============================================================
   ESCALA DA TELA (3 niveis) - 06/08/2026
   Densidade tira ESPACO entre as coisas; escala encolhe TUDO junto (fonte, icone,
   espaco, borda), como o zoom do navegador - so que dentro do sistema, sem tocar no
   zoom das outras abas de quem usa. Nasceu de monitor que nao cabe a grade de
   Startups em 100%: o usuario tinha de baixar o zoom do Chrome na mao.

   O fator vira `zoom` no html (regra de componente, no app.css) e fica aqui como
   token porque o CSS precisa dele para DESFAZER a escala onde a conta e do viewport:
   vw/vh sao a UNICA medida que o zoom da raiz nao acompanha (o bloco recontido da
   raiz acompanha, medido no Chrome em 06/08/2026), entao todo 100vh/100vw estrutural
   e dividido por --escala-fator. Sem isso a tela em 80% ganha uma faixa vazia embaixo.

   PADRAO e o default: quem nunca escolheu nada cai no :root, sem atributo no html.
   ============================================================ */
:root,
html[data-escala="padrao"] { --escala-fator: 1; }
html[data-escala="media"]   { --escala-fator: 0.9; }
html[data-escala="pequena"] { --escala-fator: 0.8; }