/* ══════════════════════════════════════════════════════════════════════════
   MARCA ELETRONICOS GV — carregado DEPOIS do base.css.

   O base.css e copia byte a byte do TecGorila. Toda a divergencia do GV mora
   aqui, num arquivo so, para que uma melhoria feita la possa ser trazida para
   ca sem conflito. Isto e SO troca de token: nenhuma regra de componente do
   base.css e reescrita, que e o que o DESIGN.md exige.

   A marca e amarelo #F3E600 sobre preto. O tema e CLARO (pedido do Victor), e
   ai mora a unica decisao dificil:

   AMARELO #F3E600 SOBRE BRANCO DA 1,1 DE CONTRASTE. E invisivel. O minimo do
   DESIGN.md e 4,5 para texto e 3,0 para controle. Entao o amarelo NUNCA e
   texto, traco fino nem borda — ele so aparece como PREENCHIMENTO com preto
   por cima. E exatamente o que a propria logo faz na pilula de icones.

   No base.css o --purple e sempre fundo com `color:#fff` cravado por cima
   (.btn-grad, .btn-save, .tab.active, .cfm-ok). Trocar --purple por amarelo
   daria branco sobre amarelo. Por isso:

     --purple      -> PRETO da marca. Texto branco por cima da 19,3. E preto e
                      metade da identidade, nao um cinza qualquer.
     --purple-bg   -> AMARELO. E o tint, onde o base.css poe --purple-l por
                      cima; com --purple-l preto, .empty .ring e .cfm-icon
                      viram sozinhas a pilula amarela com icone preto da logo.
   ══════════════════════════════════════════════════════════════════════════ */

body.light{
  /* Acao principal: preto da marca. Medido com o #fff que o base.css crava:
     19,30 — bem acima do minimo de 4,5. */
  --purple:#141414; --purple-d:#000000;
  /* O que fica SOBRE o tint amarelo. Preto: 14,60 sobre a pilula. */
  --purple-l:#141414; --purple-ll:#000000;
  /* A pilula amarela. .35 mantem o amarelo reconhecivel e ainda serve de fundo
     de campo em foco sem ofuscar. */
  --purple-bg:rgba(243,230,0,.35); --purple-bd:rgba(20,20,20,.30);
  /* Sombra neutra: brilho amarelo em volta de botao preto vira sujeira. */
  --purple-glow:0 2px 10px rgba(20,20,20,.20);
  /* Numero em destaque: preto. Amarelo como numero seria ilegivel. */
  --purple-num:#141414;
  /* Grade do fundo no matiz da marca, quase invisivel. */
  --grade:rgba(20,20,20,.022);

  /* ── Tokens proprios do GV ────────────────────────────────────────────────
     --marca e o amarelo cheio. SO como preenchimento, e sempre com
     --sobre-marca por cima. Nunca como cor de texto. */
  --marca:#F3E600; --marca-d:#d4c900; --sobre-marca:#141414;
  --preto:#0D0D0D;

  /* ── Cores da planilha ────────────────────────────────────────────────────
     As funcionarias leem a tabela pelo reflexo que ja tem do Google Sheets:
     valor verde, PIX laranja, dinheiro azul, cartao vermelho. Trocar isso e o
     tipo de detalhe que faz a tela nova parecer estranha nos primeiros dias.
     Os quatro tons vem dos semanticos do base.css, que ja passaram auditoria
     de contraste no tema claro (verde 4,63 · ambar 5,88 · vermelho 5,46). */
  --valor:var(--green);
  --pix:var(--amber);
  --dinheiro:var(--blue);
  --cartao:var(--red);
}

/* O base.css crava o roxo no zebrado em vez de usar token
   (`.zebra tbody tr:nth-child(even){background:rgba(124,58,237,.045)}`), que e
   justamente o caso que o DESIGN.md diz que quebra numa troca de marca. Aqui o
   zebrado usa o matiz do GV. Vale reportar la para virar token. */
body.light .zebra tbody tr:nth-child(even){background:rgba(20,20,20,.028)}

/* O amarelo e a marca, entao ele NAO pode significar "atencao" — em software
   amarelo e a cor convencional de aviso, e se ele estiver nos dois papeis
   ninguem repara em nenhum. Alerta (fiado atrasado, garantia vencida, estoque
   baixo) e sempre vermelho. */
.alerta{color:var(--red);background:var(--red-bg);border:1px solid var(--red-bd)}