/*
 * A IDENTIDADE DO LOOP PLAYER — uma só, e este arquivo é a fonte dela.
 *
 * ── DE ONDE ELA VEIO ─────────────────────────────────────────────────────────────────────
 * Escolhida pelo Vitor em 03/09, comparando quatro direções completas lado a lado: a mesma
 * tela renderizada em cada uma. Ele ficou com a "Acolhedora".
 *
 * A intenção dela, nas palavras que a montaram: quem usa é dono de padaria, não operador de
 * software. Então há respiro entre as coisas, os cantos são macios, os cartões flutuam de leve,
 * e o verde vivo é protagonista em vez de detalhe.
 *
 * ── POR QUE UM ARQUIVO E NÃO DOIS ────────────────────────────────────────────────────────
 * Porque dois foi o problema. A Operação tinha 31 variáveis e a Gestão 78, livres para
 * divergir — e divergiram até o produto ter DOIS verdes de marca sem ninguém ter decidido isso.
 * O Vitor via "botões e cores diferentes" e não tinha como nomear o quê.
 *
 * Este arquivo é servido aos dois módulos, como a barra lateral já é. Quem quiser mudar a
 * identidade muda aqui, e muda nos dois.
 *
 * ── O CONTRASTE NÃO É OPCIONAL ───────────────────────────────────────────────────────────
 * Cada par cor/fundo abaixo foi medido antes de entrar. Três cores da direção escolhida NÃO
 * passavam quando eu as montei para a amostra — e texto ilegível é o defeito mais silencioso
 * que existe: não quebra nada, não registra log, passa em todo teste que não meça contraste.
 * As três foram escurecidas o mínimo necessário, preservando a matiz.
 *
 * A trava vive em apps/api/src/dashboard/identidade-unica.spec.ts.
 */

:root {
  /* ── A MARCA ────────────────────────────────────────────────────────────────────────────
   * O verde vivo, protagonista. Ele NÃO serve como texto: mede 1,75:1 sobre branco. Por isso
   * são quatro variáveis e não uma — `marca` pinta, `marca-tinta` escreve, `marca-sobre` é o
   * que vai DENTRO do botão. Trocar uma pela outra produz texto invisível.
   */
  --lp-marca: #20DF91;             /* fundo de botão, item ativo, barra de progresso */
  --lp-marca-hover: #18C57F;
  --lp-marca-sobre: #000000;       /* texto dentro do botão de marca — 12,03:1 */
  --lp-marca-tinta: #047857;       /* o verde que se pode LER — 5,48:1 sobre branco */
  --lp-marca-suave: #E9FBF3;       /* fundo de destaque, seleção, foco */
  --lp-marca-vidro: rgba(32, 223, 145, .10);

  /*
   * OS COMPONENTES DA MARCA, para quem precisa dela com outro alfa.
   *
   * Sem isto, cada lugar que quer "a marca a 30%" escreve o hex por extenso num rgba() — e foi
   * exatamente assim que um TERCEIRO verde (#10B981, o emerald do Tailwind) ficou no anel de
   * foco e nos gráficos: ele não é nem a marca nova nem o verde antigo da Gestão, é o que veio
   * na biblioteca e nunca foi escolhido. Um hex dentro de um rgba() não deriva de nada.
   *
   *   rgba(var(--lp-marca-rgb), .3)
   *
   * Em componentes, e não com color-mix(), porque isto atravessa o Shadow DOM da barra e
   * navegadores mais velhos de painel de TV — e o custo de errar é o gráfico sem cor.
   */
  --lp-marca-rgb: 32, 223, 145;

  /* ── OS FUNDOS E O TEXTO ───────────────────────────────────────────────────────────────
   * O fundo puxa levemente para o verde (#F6F8F7 e não um cinza neutro): é o que dá o tom
   * acolhedor sem colorir nada.
   */
  --lp-fundo: #F6F8F7;
  --lp-papel: #FFFFFF;
  --lp-papel-2: #F1F5F3;           /* hover de linha, faixa alternada */
  --lp-texto: #101A17;             /* 16,65:1 sobre o fundo */
  --lp-texto-2: #4A5A55;           /* 6,82:1 */
  --lp-texto-3: #68746F;           /* 4,56:1 — era #8A9A94 e media 2,76; escurecido */

  /*
   * O DESLIGADO é a única cor de texto que NÃO tem de passar contraste, e é de propósito: ele
   * mede 1,72:1 porque "não dá para usar isto" é a informação. Uma cor legível aqui faria o
   * campo desabilitado parecer clicável, o que é o defeito, e não o contraste baixo.
   *
   * Tem nome próprio para não virar um hex solto no meio dos que TÊM de passar — foi por hex
   * solto que as três cores de estado entraram sem ninguém medi-las.
   */
  --lp-texto-desligado: #C3CDC9;

  --lp-linha: #E6EDEA;
  --lp-linha-2: #D3DEDA;
  --lp-linha-suave: #F1F5F3;       /* separador dentro de um cartão, onde a linha cheia pesa */

  /* ── OS ESTADOS ────────────────────────────────────────────────────────────────────────
   * A cor responde a uma pergunta: em que estado isto está? Cada uma tem o par escuro (para
   * escrever) e o suave (para pintar atrás).
   */
  --lp-ok: #15803D;                /* 5,02:1 sobre branco */
  --lp-ok-suave: #E6F7EC;
  --lp-ok-linha: #B7E4C7;

  --lp-erro: #BF403A;              /* 4,60:1 — era #C2413B e ficava a 4,49 no fundo suave */
  --lp-erro-suave: #FCEDEC;
  --lp-erro-linha: #F2C9C6;

  --lp-aviso: #9B6313;             /* 4,59:1 — era #C07A18 e media 3,18; o que mais escureceu */
  --lp-aviso-suave: #FDF4E3;
  --lp-aviso-linha: #EBD5A8;

  --lp-info: #2563EB;              /* 5,17:1 */
  --lp-info-suave: #EAF1FE;
  --lp-info-linha: #C3D6FC;

  /* ── A BARRA LATERAL ──────────────────────────────────────────────────────────────────
   * Escura, com o verde vivo marcando o item ativo.
   *
   * O fundo era #0C1A15 — um verde-escuro, escolhido para "ligar a barra ao resto da
   * identidade". Decisão do Vitor em 21/09: PRETO NEUTRO.
   *
   * O motivo dele é o que o verde-escuro não fazia: sozinha, a barra parecia preta; ao lado de
   * um preto de verdade, não. E o verde do fundo disputava tom com os cartões verdes do painel,
   * a poucos centímetros dali — a marca aparecia em dois lugares com dois valores diferentes,
   * e o vivo perdia força por causa do escuro.
   *
   * Neutro, e não #000000: o preto absoluto contra a área branca do conteúdo cria uma borda
   * dura demais na transição. #0B0B0B é preto para o olho e suave na costura.
   */
  --lp-barra-fundo: #0B0B0B;
  --lp-barra-texto: #9BAAA4;
  --lp-barra-texto-forte: #FFFFFF;
  --lp-barra-ativo: rgba(32, 223, 145, .12);
  --lp-barra-linha: rgba(155, 170, 164, .12);

  /* ── O CARTÃO DO SALDO ────────────────────────────────────────────────────────────────
   * Pedido do Vitor em 21/09, com uma imagem: o cartão de destaque do painel financeiro
   * passa de verde claro para ESCURO, com o valor na cor viva da marca.
   *
   * O que isso resolve: verde claro atrás de verde escuro deixava o número mais importante
   * da tela com 1,63:1 — havia até um plano aberto só para consertar aquele contraste. Sobre
   * o escuro, o mesmo verde da marca dá cerca de 11:1 e o plano perde a razão de existir.
   *
   * ── e por que três tokens, e não um ──────────────────────────────────────────────────
   * Trocar só o fundo deixaria SEIS textos ilegíveis: além do valor, o cartão tem o rótulo,
   * a data da última atualização e quatro mensagens de estado ("conecte uma conta", "a
   * conexão precisa ser atualizada", "não foi possível atualizar", "atualize para
   * consultar"). Todas eram escuras porque o fundo era claro; nenhuma delas dá erro ao
   * sumir — elas só deixam de ser lidas, e justamente quando algo está errado com o saldo.
   *
   * Os dois tons abaixo foram escolhidos PELO contraste sobre o fundo, não de olho:
   *   rótulo  #9BAAA4 → 7,99:1
   *   apoio   #7E8D86 → 5,61:1   (era #6E7D77, que media 4,41 e reprovava em 11px)
   */
  --lp-saldo-fundo: #0A0F0D;
  --lp-saldo-rotulo: #9BAAA4;
  --lp-saldo-apoio: #7E8D86;

  /* ── A FORMA ──────────────────────────────────────────────────────────────────────────
   * Cantos macios, que é o que separa "aplicativo" de "ferramenta". 14px no controle e 18px
   * no cartão: o container é sempre mais redondo que o que vive dentro dele, senão o canto
   * interno parece apertado contra o externo.
   */
  --lp-raio: 14px;
  --lp-raio-g: 18px;
  --lp-raio-p: 10px;               /* pastilhas, selos, coisas pequenas */
  --lp-raio-redondo: 999px;

  /* ── A DENSIDADE ──────────────────────────────────────────────────────────────────────
   * Arejada, de propósito. O campo tem 46px porque 16px de fonte dentro de 36px fica
   * apertado — e os 16px são o que impede o zoom automático do Safari no iPhone.
   */
  --lp-alt-botao: 42px;
  --lp-alt-campo: 46px;
  --lp-pad-cartao: 24px;
  --lp-gap: 16px;
  --lp-gap-p: 10px;

  /* ── A PROFUNDIDADE ───────────────────────────────────────────────────────────────────
   * Duas sombras somadas: uma curta que cola o cartão na página, e uma longa e quase
   * invisível que o levanta. Uma sombra só, forte, parece adesivo.
   */
  --lp-sombra: 0 2px 8px rgba(16, 26, 23, .05), 0 12px 28px rgba(16, 26, 23, .045);
  --lp-sombra-alta: 0 4px 12px rgba(16, 26, 23, .07), 0 20px 44px rgba(16, 26, 23, .07);
  --lp-sombra-p: 0 1px 3px rgba(16, 26, 23, .06);   /* pastilha, campo em foco — só descola */

  /*
   * O TEMPO também é identidade. Duas casas com a mesma cor e durações diferentes fazem o
   * mesmo gesto responder em ritmos diferentes, e é isso que se sente ao trocar de tela sem
   * conseguir dizer o que mudou. Aqui era 0,2s de um lado e valores soltos do outro.
   */
  --lp-tempo: .18s;
  --lp-transicao: all var(--lp-tempo) ease;

  /* ── A TIPOGRAFIA ─────────────────────────────────────────────────────────────────────
   * Já estava unificada antes desta escolha, e continua: Geist nos dois módulos. O que a
   * direção acolhedora mudou foi o peso e o tamanho do título — mais presente.
   */
  --lp-fonte: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lp-fonte-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --lp-titulo-tam: 26px;
  --lp-titulo-peso: 700;
  --lp-titulo-letra: -.028em;
  --lp-texto-tam: 14px;
  --lp-campo-tam: 16px;            /* não baixar: abaixo de 16px o iPhone dá zoom no foco */

  /* ── O CABEÇALHO DE TABELA ────────────────────────────────────────────────────────────
   * Eram três estilos, e dois deles na mesma casa: 11px/0,88px/MAIÚSCULAS na Operação,
   * 12px/0,3px/MAIÚSCULAS em Clientes e Financeiro, 13px/normal/Capitalizado em Contratos.
   *
   * Fica o da Operação, que é a referência do produto. Pequeno e espaçado de propósito: o
   * cabeçalho é para localizar a coluna, não para ler — quem lê são as linhas abaixo dele, e
   * um cabeçalho do mesmo peso delas compete com o conteúdo.
   */
  --lp-tabela-titulo-tam: 11px;
  --lp-tabela-titulo-letra: .08em;
  --lp-tabela-titulo-peso: 600;
}