/* Canônico dos tokens de cor do PixFichas (AC-060) — cópias em
   src/pixfichas/web/static/css/tokens.css e
   src/pixfichas/tela_dev/static/tela-dev.css precisam bater byte a byte
   com este bloco :root; tests/web/test_base_visual.py prende isso. */
:root{
  --felt-950:#0d2a20;
  --felt-900:#123526;
  --felt-800:#194433;
  --line:rgba(244,239,224,0.16);
  --line-strong:rgba(244,239,224,0.30);
  --wood:rgba(196,146,84,0.20);
  --gold:#d7ab5c;
  --cream:#f4efe0;
  --chip-red:#a85048;
  --chip-blue:#6b7f9e;
  --paper:#f8f6f0;
  --paper-card:#ffffff;
  --ink:#0d2a20;
  --ink-muted:rgba(13,42,32,0.72);
  --line-ink:rgba(13,42,32,0.14);
  --line-ink-strong:rgba(13,42,32,0.28);
  --borda-campo:#73837b;
  --gold-ink:#8b6b2f;
  --feltro-clube:#255a45;
  --realce-sobre-feltro:#f4efe0;
  --foco:#0d2a20;
  /* O foco nas superficies escuras do claro, o topo do admin e o card de
     feltro (celular-e-foco, AC-572): a tinta sumia nelas. */
  --foco-sobre-escuro:#d7ab5c;
  --chip-green:#1f7a4d;
  --paper-realce:#fbfaf6;
  --qr-fundo:#ffffff;
  --tinta-sobre-dourado:#0d2a20;
  --erro-ink:#a85048;
  --ink-tenue:rgba(13,42,32,0.04);
  --foco-suave:rgba(13,42,32,0.25);
  --veu-feltro-0:rgba(13,42,32,0);
  --veu-feltro:rgba(13,42,32,0.85);
  --veu-banner:rgba(0,0,0,0.72);
  --sombra-texto:rgba(0,0,0,0.6);
  --admin-topo:#000e00;
  --acao-fundo:#000e00;
  --acao-texto:#f4efe0;
  --menu-ativo:#000e00;
  --menu-ativo-texto:#f4efe0;
  --ok-ink:#1f7a4d;
  --andamento-ink:#6b7f9e;
  --grafico-depositos:#1f7a4d;
  --grafico-saques:#4a72b8;
  --grafico-falhas:#a85048;
  --admin-realce:#efebe0;
  --acao-hover:#123526;
  --fonte-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --fonte-corpo:Manrope,"Segoe UI",system-ui,sans-serif;
  --fonte-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --texto-xs:0.75rem;
  --texto-sm:0.875rem;
  --texto-md:1rem;
  --texto-lg:1.125rem;
  --texto-xl:1.5rem;
  --texto-2xl:2rem;
  --texto-3xl:3.25rem;
}
*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--felt-900);
  color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
}
body{
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.scene{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}
.scene svg{
  width:100%;
  height:100%;
  display:block;
}
.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(13,42,32,0) 0%, rgba(13,42,32,0.55) 68%, rgba(13,42,32,0.86) 100%);
}
main{
  position:relative;
  z-index:2;
  text-align:center;
  padding:2rem;
}
.mark{
  font-size:clamp(2.2rem, 6vw, 3.6rem);
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0 0 0.9rem;
}
.mark .pix{
  color:var(--cream);
}
.mark .fichas{
  color:var(--gold);
}
.i-chip{
  position:relative;
  display:inline-block;
}
.i-chip svg{
  position:absolute;
  width:0.26em;
  height:0.26em;
  left:50%;
  top:0.28em;
  transform:translateX(-50%);
  color:var(--gold);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.55rem 1.15rem;
  border:1px solid rgba(215,171,92,0.4);
  border-radius:999px;
  font-size:0.82rem;
  letter-spacing:0.02em;
  color:var(--cream);
  background:rgba(215,171,92,0.08);
}
.pill .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
}
@media (prefers-reduced-motion: no-preference){
  main{ animation: rise 0.7s cubic-bezier(0.16,1,0.3,1) both; }
  .pill .dot{ animation: pulse 2.2s ease-in-out infinite; }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}