/* Boldman System · boldman.css
   Só variáveis, tema claro e escuro, zero componente: é o que a decisão de 25/08 definiu como
   o CSS de execução importado pelas UIs. A fonte de verdade continua sendo docs/marca/system.html,
   e este arquivo é o mesmo conteúdo em formato importável, pra que produto nenhum redigite hex.
   Mudou aqui, muda lá, no mesmo commit.

   Duas camadas, e a ordem importa:
   1. PRIMITIVO  o valor cru da marca. Só entra aqui o que está no Brand Guideline ou na régua.
   2. PAPEL      o que o componente pede. Componente nunca lê primitivo, nunca escreve hex.

   O papel vira valor em três lugares e só neles: no :root (claro), no bloco escuro e
   na superfície branca que vive dentro de tela escura. */

:root {
  /* ————— primitivo: marca ————— */
  --bm-azul: #1B41D1;
  --bm-preto: #000000;
  --bm-cinza: #282828;
  --bm-offwhite: #E4E4E4;
  --bm-tangerina: #FF4632;

  /* ————— primitivo: neutro. O cinza da marca diluído em branco, de 20 em 20 ————— */
  --bm-n25: #5E5E5E;
  --bm-n45: #898989;
  --bm-n65: #B4B4B4;
  --bm-n95: #F4F4F4;

  /* ————— primitivo: sinal ————— */
  /* Calibrados em OKLCH com brilho e vibração fixos por coluna, nunca por contraste numérico:
     igualar contraste entre matizes escurece o amarelo até marrom e clareia o azul até lavanda.
     Cada família tem o tom de fundo claro, o de fundo escuro e o fraco, que é fundo de faixa. */
  --bm-ok: #00DB70;      --bm-ok-esc: #00EC7F;      --bm-ok-fraco: #D9FCE8;
  --bm-alerta: #F4C900;  --bm-alerta-esc: #FFD900;  --bm-alerta-fraco: #F8F3D1;
  --bm-erro: #FF3A0E;    --bm-erro-esc: #FF502C;    --bm-erro-fraco: #FFE8DF;
  --bm-info: #008CFF;    --bm-info-esc: #009DFF;    --bm-info-fraco: #DCF5FF;

  /* ————— primitivo: espaço, raio, tipo ————— */
  --bm-s1: 4px;  --bm-s2: 8px;  --bm-s3: 16px; --bm-s4: 32px; --bm-s5: 64px;
  --bm-sm1: 12px; --bm-sm2: 24px; --bm-sm3: 48px;
  --bm-r1: 5px; --bm-r2: 10px; --bm-r3: 20px; --bm-r4: 40px; --bm-pill: 999px;
  --bm-t10: 10px; --bm-t12: 12px; --bm-t16: 16px; --bm-t20: 20px; --bm-t24: 24px;
  --bm-t32: 32px; --bm-t40: 40px; --bm-t48: 48px; --bm-t60: 60px;
  --bm-fonte: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bm-fonte-titulo: 'Barlow Condensed', 'Plus Jakarta Sans', system-ui, sans-serif;
  --bm-sombra: 0 12px 32px rgba(0, 0, 0, .16);
  --bm-transicao: 180ms ease;

  /* ————— papel: sobre claro ————— */
  --bm-txt: var(--bm-cinza);
  --bm-txt-apoio: var(--bm-n25);
  --bm-txt-fraco: var(--bm-n45);
  --bm-superficie: #FFFFFF;
  --bm-superficie-faixa: var(--bm-n95);
  --bm-borda: rgba(0, 0, 0, .12);
  --bm-borda-forte: rgba(0, 0, 0, .28);
  --bm-borda-campo: var(--bm-n45);
  --bm-acao: var(--bm-azul);
  --bm-foco: var(--bm-azul);
  --bm-sinal-ok: var(--bm-ok);
  --bm-sinal-alerta: var(--bm-alerta);
  --bm-sinal-erro: var(--bm-erro);
  --bm-sinal-info: var(--bm-info);
}

/* ————— papel: sobre escuro —————
   O nome do papel não muda, o valor muda. O cinza de apoio sobe de degrau porque #5E5E5E
   sobre preto some, e o azul de ação clareia pra continuar legível. */
.bm-escuro,
[data-tema="escuro"],
.dark {
  --bm-txt: var(--bm-offwhite);
  --bm-txt-apoio: var(--bm-n65);
  --bm-txt-fraco: var(--bm-n45);
  --bm-superficie: var(--bm-cinza);
  --bm-superficie-faixa: rgba(255, 255, 255, .06);
  --bm-borda: rgba(255, 255, 255, .18);
  --bm-borda-forte: rgba(255, 255, 255, .32);
  --bm-borda-campo: var(--bm-n45);
  --bm-acao: #7E97FF;
  --bm-foco: #7E97FF;
  --bm-sinal-ok: var(--bm-ok-esc);
  --bm-sinal-alerta: var(--bm-alerta-esc);
  --bm-sinal-erro: var(--bm-erro-esc);
  --bm-sinal-info: var(--bm-info-esc);
}

/* ————— papel: superfície clara dentro de tela escura —————
   Card branco em página escura repõe a régua de claro, senão herda o texto errado. */
.bm-claro {
  --bm-txt: var(--bm-cinza);
  --bm-txt-apoio: var(--bm-n25);
  --bm-txt-fraco: var(--bm-n45);
  --bm-superficie: #FFFFFF;
  --bm-superficie-faixa: var(--bm-n95);
  --bm-borda: rgba(0, 0, 0, .12);
  --bm-borda-forte: rgba(0, 0, 0, .28);
  --bm-acao: var(--bm-azul);
  --bm-foco: var(--bm-azul);
  --bm-sinal-ok: var(--bm-ok);
  --bm-sinal-alerta: var(--bm-alerta);
  --bm-sinal-erro: var(--bm-erro);
  --bm-sinal-info: var(--bm-info);
}

/* ————— o que vale sem exceção —————
   Cor nunca informa sozinha: verde e amarelo vibrantes não alcançam 3:1 sobre branco, e
   escurecê-los mataria a vibração que é da marca. Sinal sempre com ícone, palavra ou posição.
   Movimento respeita quem pediu pra não ter. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}