/* Botão com canto de pixel. Requer tokens/tokens.css.
   Uso: <button class="cs-btn">JOGAR</button>
        <button class="cs-btn cs-btn--secundario">CONFIRMAR PRESENÇA</button> */
.cs-btn {
  --c: var(--cs-canto-pixel);
  height: 48px;
  padding: 0 28px;
  border: 0;
  background: var(--cs-moeda);
  color: var(--cs-fliper);
  font-family: var(--cs-fonte-titulo);
  font-weight: 700;
  font-size: 22px;
  cursor: pointer;
  clip-path: polygon(
    var(--c) 0, calc(100% - var(--c)) 0,
    calc(100% - var(--c)) var(--c), 100% var(--c),
    100% calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%,
    var(--c) calc(100% - var(--c)), 0 calc(100% - var(--c)),
    0 var(--c), var(--c) var(--c)
  );
}

.cs-btn--grande { height: 56px; font-size: 24px; }
.cs-btn--compacto { height: 44px; padding: 0 16px; font-size: 18px; }

.cs-btn--secundario {
  background: var(--cs-linha);
  color: var(--cs-rotulo);
  font-weight: 500;
  font-size: 18px;
}

/* Proposta: o clip-path corta o contorno externo, então o foco fica para dentro. */
.cs-btn:focus-visible {
  outline: 3px solid var(--cs-fliper);
  outline-offset: -7px;
}
.cs-btn--secundario:focus-visible {
  outline-color: var(--cs-bonus);
}