/* BTN-03 · Botão cool — reescrito do original do 21st.dev sem React, sem Tailwind e sem cva.
   Degradê vertical, borda inferior dupla, anel interno branco e brilho que responde ao toque.

   O efeito inteiro é de FILTRO, não de cor: o hover clareia (brightness 1.1) e o apertar escurece
   (0.9), sobre a mesma pintura. É por isso que ele funciona em qualquer cor que você declarar —
   troque --c-cool-base e o resto acompanha.

   Duas coisas que o original só tinha em Tailwind v4 e aqui são explícitas:
   `bg-linear-to-t` (degradê para cima) e `inset-shadow-*` (sombra interna). Em Tailwind v3 essas
   classes não existem, e o degradê do original simplesmente não aparece. */
.c-botao-cool {
  --c-cool-base: #e8ad32;          /* o âmbar do IDV; troque e o botão inteiro muda */
  --c-cool-topo: color-mix(in srgb, var(--c-cool-base) 85%, transparent);
  --c-cool-tinta: #171717;
  --c-cool-linha: rgba(9, 9, 11, .40);
  --c-cool-anel: rgba(255, 255, 255, .25);
  --c-cool-raio: 6px;
  --c-cool-altura: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--c-cool-altura);
  padding: 0 16px;
  /* para o topo: a base fica embaixo e a versão mais clara em cima */
  background-image: linear-gradient(to top, var(--c-cool-base), var(--c-cool-topo));
  color: var(--c-cool-tinta);
  border: 1px solid var(--c-cool-linha);
  border-bottom-width: 2px;        /* a borda inferior dupla é o que dá o "assentado" */
  border-radius: var(--c-cool-raio);
  /* o anel interno branco por cima da pintura, e a sombra na cor do próprio botão */
  box-shadow: inset 0 0 0 1px var(--c-cool-anel),
              0 4px 6px -1px color-mix(in srgb, var(--c-cool-base) 20%, transparent);
  font: 500 14px/1 inherit;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s ease;
}
.c-botao-cool:hover { filter: brightness(1.1); }
.c-botao-cool:active { filter: brightness(.9); }
.c-botao-cool[disabled], .c-botao-cool[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.c-botao-cool svg { width: 16px; height: 16px; flex: none; pointer-events: none; }

/* tamanhos do original */
.c-botao-cool--p { --c-cool-altura: 32px; padding: 0 12px; font-size: 12px; }
.c-botao-cool--g { --c-cool-altura: 40px; padding: 0 32px; }
.c-botao-cool--icone { --c-cool-altura: 36px; width: 36px; padding: 0; }

/* color-mix é recente: sem ele o topo do degradê some e fica cor chapada, que é degradação
   aceitável. Quem precisar de suporte velho declara --c-cool-topo à mão. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .c-botao-cool { --c-cool-topo: var(--c-cool-base); }
}
@media (prefers-reduced-motion: reduce) { .c-botao-cool { transition: none; } }