/* Surface: superfícies translúcidas (efeito vidro), halos de brilho e o
   fundo quadriculado. Usado pelas páginas login/dados/logs/certificados/produtos.
   Extraído de legacy.css — manter até essas páginas migrarem para .panel.

   As cores abaixo são as mesmas de --ink-900 e --ink-300 (base/tokens.css)
   escritas em rgba porque precisam de transparência (var() não dá pra
   misturar com alpha sem color-mix). Se a paleta mudar, atualiza os dois
   lugares. */

.glass {
  background: rgba(10, 14, 26, 0.55);   /* --ink-900 */
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid rgba(138, 150, 175, 0.10); /* --ink-300 */
}

.glass-elev {
  /* pedido do usuario: todo modal/card do sistema deve usar esse tom -
     mais transparente e menos escuro que antes (era 0.75), ainda legivel
     porque o overlay por baixo (bg-black/60 + backdrop-blur, ver
     confirm-overlay/prompt-overlay em base.html e o #modal de
     certificados) ja escurece/borra o fundo antes disso aqui. */
  background: rgba(10, 14, 26, 0.62);   /* --ink-900 */
  border: 1px solid rgba(138, 150, 175, 0.14); /* --ink-300 */
}

/* Tema claro: as duas acima eram fixas em tom escuro (ink-900), pensadas pra
   quando so existia tema escuro. Sobre um fundo claro isso vira aquele
   "cinza" ilegível (texto claro-sobre-cinza-translúcido). Troca o tom pra
   branco translúcido, mantendo o mesmo efeito de vidro/blur. */
[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .glass-elev {
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* halos / realces — cores da marca (azul/teal) e dos status (sucesso/aviso/erro) */
.ring-accent  { box-shadow: 0 0 0 1px var(--glow-blue), 0 0 18px -2px var(--glow-blue); }
.glow-emerald { box-shadow: 0 0 28px -8px rgba(34, 197, 94, 0.55); }  /* --success */
.glow-cyan    { box-shadow: 0 0 28px -8px var(--glow-teal); }        /* --teal-500 */
.glow-amber   { box-shadow: 0 0 28px -8px rgba(245, 165, 36, 0.55); } /* --warning */
.glow-rose    { box-shadow: 0 0 28px -8px rgba(240, 69, 91, 0.55); }  /* --danger */

/* fundo quadriculado (tela de login) */
.grid-bg {
  background-image:
    linear-gradient(rgba(138, 150, 175, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 150, 175, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}