/* ArenaLive: tokens da marca v2 (logo neon). Origem de cada cor em MARCA.md. */

@font-face {
  font-family: "Lexend";
  src: url("fontes/Lexend-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Verde da logo: ação principal, destaque, sucesso */
  --rp-verde: #4F8BFF;          /* principal (mediana do símbolo) */
  --rp-verde-luz: #7FA8FF;      /* realce, hover, brilho */
  --rp-verde-medio: #2F6AE0;    /* face em sombra leve, estado ativo */
  --rp-verde-sombra: #1F4FB8;   /* espessura do botão, dobra do símbolo */
  --rp-verde-fundo: #163B7A;    /* espessura do botão sobre fundo claro, bordas fortes */
  --rp-verde-tinta: #2F6AE0;    /* verde para texto e símbolo sobre fundo claro (4,9:1 no branco) */
  --rp-brilho: rgba(79, 139, 255, 0.45);

  /* Fundo: preto-esverdeado da logo */
  --rp-breu: #050A18;           /* o mais escuro (canto da original) */
  --rp-noite: #071224;          /* fundo principal (atrás do nome na original) */
  --rp-noite-2: #0E1B33;        /* cartões */
  --rp-noite-3: #1B2C4D;        /* bordas, divisores */
  --rp-branco: #F4F8FF;         /* texto (branco do nome na original) */
  --rp-apagado: #9DB0CC;        /* texto secundário no escuro (8,8:1 na noite) */

  /* Cores de apoio, com função fixa */
  --rp-ouro: #FFC81E;           /* só dinheiro e moedas do TikTok */
  --rp-presente: #FF3D7F;       /* só evento ao vivo: presente chegando, AO VIVO */

  /* Tipografia: Lexend em tudo (é a fonte do nome) */
  --rp-fonte: "Lexend", "Segoe UI", system-ui, sans-serif;
  --rp-peso-titulo: 700;
  --rp-peso-texto: 400;
  --rp-peso-leve: 300;          /* o "Play" do logo; use pouco */

  /* Forma */
  --rp-raio-botao: 999px;
  --rp-raio-card: 18px;
  --rp-espessura: 6px;          /* o botão "fica de pé" e afunda ao clicar */
}

/* Botão principal: verde com espessura em verde mais escuro, sem sombra difusa. */
.rp-botao {
  font-family: var(--rp-fonte);
  font-weight: 700;
  color: var(--rp-noite);
  background: var(--rp-verde);
  border: 0;
  border-radius: var(--rp-raio-botao);
  padding: 0.75em 1.6em;
  box-shadow: 0 var(--rp-espessura) 0 var(--rp-verde-sombra);
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease, background-color 120ms ease;
}

.rp-botao:hover { background: var(--rp-verde-luz); }

.rp-botao:active {
  transform: translateY(var(--rp-espessura));
  box-shadow: 0 0 0 var(--rp-verde-sombra);
}

.rp-botao:focus-visible {
  outline: 3px solid var(--rp-branco);
  outline-offset: 4px;
}