/*
  Botones
  .button                 base
  .button--primary        acción principal (registro). Texto blanco sobre primary-600: 5,9:1
  .button--secondary      contorno sobre fondo claro
  .button--ghost          contorno sobre imagen o fondo oscuro
  .button--inverse        blanco sobre fondo de color (primary-700 sobre blanco: 8,2:1)
  .button--small          versión compacta (cabecera, llamada fija)
  .button--block          ancho completo
*/

.button {
  --button-bg: transparent;
  --button-fg: var(--text);
  --button-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  min-height: 3rem;
  padding: var(--padding-3) var(--padding-6);
  border: 1.5px solid var(--button-border);
  border-radius: var(--border-round);
  background: var(--button-bg);
  color: var(--button-fg);
  font-family: var(--ui);
  font-size: var(--font-size-4);
  line-height: var(--line-height-8);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.button:active {
  transform: scale(0.97);
}

.button--primary {
  --button-bg: var(--primary-600);
  --button-fg: #fff;
  --button-border: var(--primary-600);
}

.button--primary:hover {
  --button-bg: var(--primary-700);
  --button-border: var(--primary-700);
}

.button--secondary {
  --button-fg: var(--primary-700);
  --button-border: var(--primary-600);
}

.button--secondary:hover {
  --button-bg: var(--primary-50);
}

.button--ghost {
  --button-fg: #fff;
  --button-border: rgb(255 255 255 / 0.7);
}

.button--ghost:hover {
  --button-bg: rgb(255 255 255 / 0.12);
  --button-border: #fff;
}

.button--inverse {
  --button-bg: #fff;
  --button-fg: var(--primary-700);
  --button-border: #fff;
}

.button--inverse:hover {
  --button-bg: var(--primary-50);
  --button-border: var(--primary-50);
}

.button--small {
  min-height: 2.75rem;
  padding: var(--padding-2) var(--padding-5);
  font-size: var(--font-size-3);
  line-height: var(--line-height-7);
}

.button--block {
  width: 100%;
}

/* El foco del botón sigue su forma redondeada */
.button:focus-visible {
  border-radius: var(--border-round);
}