/* marca.css — camada de tokens de marca do FP.
   Servir em /web-static/marca.css e carregar ANTES de style.css e antes da
   folha da tela. Nenhuma folha de tela redeclara cor: consome nome de token.
   Gerado a partir de tokens/brands.css do design system. Revisao 2 —
   incorpora as seis divergencias levantadas pelo Claude Code em 20/08/2026. */

/* ═══════════════════════════════════════════════════════════════════════
   Camada de marca — Sole e Mirante, os dois temas lado a lado.

   Os dois blocos declaram EXATAMENTE os mesmos nomes. Uma folha de tela
   consome nome de token e nunca hex: é o que faz a tela sobreviver à troca
   de marca sem ser reescrita.

   Escopo: Sole no `:root` (marca padrao); `.ds-mirante` no <html> ou no <body>
   troca a marca inteira. A classe e aplicada por script no <head>, antes de
   o <body> existir, para a marca nao piscar no primeiro quadro.

   Mirante não tem manual próprio: os valores são derivados da paleta que o
   app já usa (verde #0F6E56 / #085041, ocre #BA7517, neutros quentes),
   mantendo os mesmos degraus de contraste da Sole. Onde a derivação foi
   escolha e não cálculo, há comentário.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SOLE ─────────────────────────────────────────────────────────────── */
:root,:root.ds-sole,body.ds-sole{
  /* Superfícies */
  --surface-canvas:#FFFFFF;
  --surface-raised:#FFFFFF;       /* bloco/cartão sobre o canvas: só o filete o separa */
  --surface-page:#EBEEF2;         /* fundo da página atrás dos blocos (era --fundo) */
  --surface-inset:#E3E8EF;        /* zebra de tabela, tinta de bloco (era --azul-claro) */
  --surface-inset-soft:#F6F8FA;   /* mesma função em área grande, onde o inset pesa */
  --surface-sunken:#EBEEF2;       /* painel de marca, faixa lateral */
  --surface-dark:#14181E;         /* cromo escuro: navbar, cabeçalho de tabela escuro */

  /* Texto */
  --text-heading:#14181E;
  --text-body:#14181E;
  --text-muted:#5B6472;
  --text-label:#3A6E97;           /* rótulo 11px caixa alta */
  --text-accent:#3A6E97;          /* link */
  --text-on-action:#FFFFFF;

  /* Filetes */
  --border-hairline:#D6DBE3;
  --border-strong:#AFB9C8;

  /* Ação. O Steel Blue cru (#4A89B9) dá 3,77:1 em branco e 3,4:1 com texto
     branco por cima: reprova AA nos 14px do rótulo de botão e no link. O app
     já resolveu isso escurecendo 12% (--azul-medio #3A6E97, 5,44:1, mesma
     matiz), e a camada segue a mesma decisão. O valor cru vira o hover — que
     é onde a regra da casa manda clarear. */
  --action-primary:#3A6E97;
  --action-primary-hover:#4A89B9;
  --action-primary-press:#2E5877;
  --action-ghost-hover:rgba(74,137,185,.10);
  --focus-ring:#4A89B9;

  /* Acento institucional (dourado na Sole, ocre na Mirante) */
  --accent-premium:#C19D64;
  --accent-premium-dim:#8E7449;

  /* Dados e performance. Estes são cor de TEXTO e passam AA em branco: os
     valores claros de antes (#5E9E7E, #B4636A) davam 2,6:1 e 3,5:1. Os claros
     seguem servindo de filete e de preenchimento gráfico, nos --border-alert-*
     e --surface-alert-* abaixo. */
  --data-positive:#3A6B4A;
  --data-negative:#8B3A3A;
  --data-neutral:#77808F;

  /* Superfícies de alerta: fundo + filete, sempre em par */
  --surface-alert-negative:rgba(180,99,106,.10);
  --border-alert-negative:#B4636A;
  --surface-alert-warning:rgba(193,157,100,.14);
  --border-alert-warning:#C19D64;
  --surface-alert-positive:rgba(94,158,126,.12);
  --border-alert-positive:#5E9E7E;
  --surface-alert-info:rgba(74,137,185,.10);
  --border-alert-info:#4A89B9;
  /* STATUS (Jornada, pedido do assessor em 06/10): concluído verde, em
     andamento AMARELO, pendente vermelho, não iniciado cinza. O amarelo é novo
     na casa (o dourado da marca lia como marrom). Texto sobre o fundo de cada
     um ≥ 4,5:1; borda âmbar ≥ 3:1 sobre o branco. */
  --status-concluido:var(--data-positive);
  --status-concluido-fundo:#EAF3EE;
  --status-concluido-borda:var(--border-alert-positive);
  --status-andamento:#7A5A00;
  --status-andamento-fundo:#FBF0C9;
  --status-andamento-borda:#B8860B;
  --status-andamento-ponto:#F2C94C;
  --status-pendente:var(--data-negative);
  --status-pendente-fundo:#F6ECED;
  --status-pendente-borda:var(--border-alert-negative);
  --status-nao-iniciado:var(--text-muted);
  --status-nao-iniciado-fundo:var(--surface-inset-soft);
  --status-nao-iniciado-borda:var(--border-hairline);

  /* Selo de escopo do Cadastro: neutro (só FP), compartilhado
     (Suitability + FP) e externo (Cedro) */
  --badge-neutral-bg:#EFF2F6;
  --badge-neutral-text:#5B6472;
  --badge-shared-bg:rgba(74,137,185,.12);
  --badge-shared-text:#3B7099;
  --badge-external-bg:rgba(193,157,100,.16);
  --badge-external-text:#8E7449;

  /* Sinal de "gravado" do autosave — cor + texto, nunca só movimento */
  --state-saved-text:#4B7A63;
  --state-saved-bg:rgba(94,158,126,.12);

  /* Cores que o assessor aplica no texto da NOTA (29/09): marca-texto e
     letra vermelha. São do conteúdo, não da marca — iguais nas duas. O
     vermelho de alerta (--border-alert-negative) é rosado e fica abaixo de
     4,5:1 como texto; este dá 8,3:1 no branco e 6,5:1 sobre o amarelo. O amarelo é o de
     marca-texto de verdade (29/09, Pedro: o creme #FFF1A6 "ficou fraco"). */
  --nota-marca-texto:#FFE500;
  --nota-vermelho:#C62828;

  /* Marca */
  --logo-marca:url("/web-static/logo_sole_escuro.png"); /* @kind other */
  --logo-marca-proporcao:2.86; /* @kind other */
  --marca-nome:"Sole Capital Gestora de Recursos Ltda."; /* @kind other */

  /* CROMO — sobreposições sobre a barra lateral RECOLHIDA, que é o único
     cromo escuro que sobrou (a barra aberta é clara desde a migração de
     layout de 05/08 e já consome --superficie/--texto/--borda via --s-*).
     Declarado nas duas marcas de propósito: hoje os valores coincidem, mas
     uma marca de cromo claro precisaria trocar só estes seis nomes.
     Os valores são exatamente os que estavam cravados no style.css — esta
     etapa não muda um pixel, só tira o hex da regra de tela. */
  --chrome-fg:#FFFFFF;
  --chrome-fg-muted:rgba(255,255,255,.62);
  --chrome-hairline:rgba(255,255,255,.12);
  --chrome-hover:rgba(255,255,255,.09);
  --chrome-active:rgba(255,255,255,.13);
  --chrome-fill:rgba(255,255,255,.15);   /* preenchimento do avatar */
  --chrome-fill-linha:rgba(255,255,255,.16); /* e o filete dele */
}

/* ── MIRANTE ──────────────────────────────────────────────────────────── */
:root.ds-mirante,body.ds-mirante{
  /* Superfícies: neutros quentes. --surface-sunken não tem par exato na
     Mirante; é o degrau de contraste equivalente ao #EBEEF2 da Sole. */
  --surface-canvas:#FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-page:#f7f7f5;
  --surface-inset:#F7F5EF;
  --surface-inset-soft:#F7F6F2;
  --surface-sunken:#EFEEE9;
  --surface-dark:#085041;         /* na Mirante o cromo escuro é verde, não quase-preto */

  --text-heading:#1a1a1a;
  --text-body:#1a1a1a;
  --text-muted:#555550;
  --text-label:#0F6E56;
  --text-accent:#0F6E56;
  --text-on-action:#FFFFFF;

  --border-hairline:#d9d8d3;
  --border-strong:#bdbcb5;

  --action-primary:#0F6E56;
  --action-primary-hover:#1D9E75;   /* clareia no hover, como manda a regra da casa */
  --action-primary-press:#085041;
  --action-ghost-hover:rgba(15,110,86,.10);
  --focus-ring:#1D9E75;

  --accent-premium:#BA7517;
  --accent-premium-dim:#8C5811;

  /* Na Mirante o verde é a cor de AÇÃO, então o verde de performance é mais
     escuro e menos saturado que o botão — número positivo não pode parecer
     um botão, e botão não pode parecer resultado. */
  --data-positive:#157F5F;
  --data-negative:#B03A39;   /* derivado: o #E24B4A do app dá 3,9:1 como texto */
  --data-neutral:#7a7a72;

  --surface-alert-negative:rgba(226,75,74,.10);
  --border-alert-negative:#E24B4A;
  --surface-alert-warning:rgba(186,117,23,.12);
  --border-alert-warning:#BA7517;
  --surface-alert-positive:rgba(21,127,95,.10);
  --border-alert-positive:#157F5F;
  --surface-alert-info:rgba(15,110,86,.08);
  --border-alert-info:#0F6E56;
  /* STATUS — os mesmos papéis da Sole. O verde da Mirante (#157F5F) dava 4,4:1
     sobre o fundo claro: o texto do chip usa um passo mais escuro. */
  --status-concluido:#126F53;
  --status-concluido-fundo:#E8F3EF;
  --status-concluido-borda:var(--border-alert-positive);
  --status-andamento:#7A5500;
  --status-andamento-fundo:#FCEFC7;
  --status-andamento-borda:#B8860B;
  --status-andamento-ponto:#F2C94C;
  --status-pendente:var(--data-negative);
  --status-pendente-fundo:#FCEDED;
  --status-pendente-borda:var(--border-alert-negative);
  --status-nao-iniciado:var(--text-muted);
  --status-nao-iniciado-fundo:var(--surface-inset-soft);
  --status-nao-iniciado-borda:var(--border-hairline);

  --badge-neutral-bg:#F1F0EA;
  --badge-neutral-text:#555550;
  --badge-shared-bg:rgba(15,110,86,.12);
  --badge-shared-text:#085041;
  --badge-external-bg:rgba(186,117,23,.14);
  --badge-external-text:#8C5811;

  --state-saved-text:#0F6E56;
  --state-saved-bg:rgba(15,110,86,.10);

  /* As cores da nota: as mesmas da Sole (ver lá). */
  --nota-marca-texto:#FFE500;
  --nota-vermelho:#C62828;

  /* Sem arquivo de logo da Mirante neste sistema; no repo o token aponta
     para /web-static/logo_mirante.png. */
  --logo-marca:url("/web-static/logo_mirante.png"); /* @kind other */
  --logo-marca-proporcao:2.86; /* @kind other */
  --marca-nome:"Mirante Investimentos"; /* @kind other */

  /* CROMO — sobreposições sobre a barra lateral RECOLHIDA, que é o único
     cromo escuro que sobrou (a barra aberta é clara desde a migração de
     layout de 05/08 e já consome --superficie/--texto/--borda via --s-*).
     Declarado nas duas marcas de propósito: hoje os valores coincidem, mas
     uma marca de cromo claro precisaria trocar só estes seis nomes.
     Os valores são exatamente os que estavam cravados no style.css — esta
     etapa não muda um pixel, só tira o hex da regra de tela. */
  --chrome-fg:#FFFFFF;
  --chrome-fg-muted:rgba(255,255,255,.62);
  --chrome-hairline:rgba(255,255,255,.12);
  --chrome-hover:rgba(255,255,255,.09);
  --chrome-active:rgba(255,255,255,.13);
  --chrome-fill:rgba(255,255,255,.15);   /* preenchimento do avatar */
  --chrome-fill-linha:rgba(255,255,255,.16); /* e o filete dele */
}

/* ── Alturas de controle do app ────────────────────────────────────────
   Uma altura por nível de ação (ver guidelines/controls-proportion). */
:root{
  /* FORMA — acrescentada no repo em 20/08/2026. A lista de tokens do handoff
     do Cadastro promete `--radius-sm` e `--radius-md`, mas o marca.css
     entregue não os trazia: `border-radius: var(--radius-md)` com a variável
     inexistente é declaração inválida, e o navegador cai no valor inicial —
     zero. Resultado em tela: banner e botões de canto vivo. Os valores são os
     de design_handoff_login/tokens/shape.css, que é a fonte do sistema.
     Reportar na próxima revisão para nascerem no arquivo. */
  --radius-none:0px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-pill:999px;

  --control-h-page:40px;   /* botão principal e campo de formulário */
  --control-h-row:32px;    /* ação dentro de item de lista ou célula */
  --control-icon:14px;     /* ícone dentro de botão: igual à letra ao lado */

  /* TIPOGRAFIA — ainda NÃO mora aqui, e é de propósito.
     O lugar certo é este, mas a declaração não venceria: o style.css carrega
     DEPOIS do marca.css e o :root dele (linha ~1263) declara
     `--font-body: 'Inter'` e `--font-display: var(--font-body)`. Mesma
     especificidade, origem posterior — Inter ganharia, e este bloco viraria
     uma promessa que a tela não cumpre.
     As 8 folhas de tela (.pln .met .rsv .jor .cad .suit .home-v2 e o :root do
     login, que não carrega style.css) declaram Lora/Poppins na PRÓPRIA classe
     de página. Isso vence por herança, não por ordem — por isso funciona.
     Onde isto se resolve: na etapa 5 da padronização, quando o fp.css passar a
     carregar depois do style.css. Aí o trio (--font-chrome/--font-display/
     --font-body) nasce aqui e as 8 folhas perdem as redeclarações.
     Ver o comentário de fontes no <head> do web_base.html. */
}