/* cz-button — contorno luminoso, preenchimento escuro, foco sempre visível
   Variantes: --primary (padrão), --secondary (violeta), --ghost, --danger
   Tamanhos: --sm, --lg   ·   Estados: :disabled, [aria-busy="true"] */

.cz-button {
  --_c: var(--cz-cyan);
  --_c-soft: var(--cz-cyan-soft);
  --_c-dim: var(--cz-cyan-dim);
  --_glow: var(--cz-glow);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cz-space-2);
  min-height: 44px;
  padding: var(--cz-space-2) var(--cz-space-6);
  border: var(--cz-stroke) solid var(--_c);
  border-radius: var(--cz-radius-sm);
  background: linear-gradient(180deg, var(--_c-dim), transparent 140%);
  color: var(--_c-soft);
  font-family: var(--cz-font-display);
  font-size: var(--cz-text-sm);
  font-weight: 600;
  letter-spacing: var(--cz-tracking-display);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow var(--cz-duration-base) var(--cz-ease),
    background-color var(--cz-duration-base) var(--cz-ease),
    color var(--cz-duration-fast) var(--cz-ease),
    transform var(--cz-duration-fast) var(--cz-ease);
}
/* Cantos de HUD */
.cz-button::before {
  content: "";
  position: absolute;
  inset: -4px;
  --_l: linear-gradient(var(--_c), var(--_c));
  background:
    var(--_l) top left / 8px 1px no-repeat,
    var(--_l) top left / 1px 8px no-repeat,
    var(--_l) top right / 8px 1px no-repeat,
    var(--_l) top right / 1px 8px no-repeat,
    var(--_l) bottom left / 8px 1px no-repeat,
    var(--_l) bottom left / 1px 8px no-repeat,
    var(--_l) bottom right / 8px 1px no-repeat,
    var(--_l) bottom right / 1px 8px no-repeat;
  opacity: 0;
  transition: opacity var(--cz-duration-base) var(--cz-ease), inset var(--cz-duration-base) var(--cz-ease);
  pointer-events: none;
}

.cz-button:hover {
  background-color: var(--_c-dim);
  color: var(--cz-text-strong);
  box-shadow: var(--_glow);
}
.cz-button:hover::before { opacity: 0.8; inset: -6px; }
.cz-button:active { transform: translateY(1px); }
.cz-button:focus-visible {
  outline: none;
  box-shadow: var(--cz-focus-ring), var(--_glow);
}

/* Variantes */
.cz-button--primary {
  background: var(--_c);
  color: var(--cz-bg);
}
.cz-button--primary:hover { background: var(--_c-soft); color: var(--cz-bg); }

.cz-button--secondary {
  --_c: var(--cz-violet);
  --_c-soft: var(--cz-violet-soft);
  --_c-dim: var(--cz-violet-dim);
  --_glow: var(--cz-glow-violet);
}
.cz-button--ghost {
  border-color: transparent;
  background: transparent;
}
.cz-button--ghost:hover { border-color: var(--cz-border); }
.cz-button--danger {
  --_c: var(--cz-orange);
  --_c-soft: var(--cz-orange-soft);
  --_c-dim: var(--cz-orange-dim);
  --_glow: var(--cz-glow-orange);
}

/* Tamanhos */
.cz-button--sm { min-height: 34px; padding-inline: var(--cz-space-4); font-size: var(--cz-text-xs); }
.cz-button--lg { min-height: 52px; padding-inline: var(--cz-space-8); font-size: var(--cz-text-md); }

/* Desabilitado */
.cz-button:disabled,
.cz-button[aria-disabled="true"] {
  --_c: var(--cz-faint);
  --_c-soft: var(--cz-faint);
  --_c-dim: transparent;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}
.cz-button:disabled::before { display: none; }
.cz-button--primary:disabled { background: transparent; color: var(--cz-faint); }

/* Carregando */
.cz-button[aria-busy="true"] { cursor: progress; }
.cz-button[aria-busy="true"]::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cz-spin 0.8s linear infinite;
}
@keyframes cz-spin { to { transform: rotate(360deg); } }